Keep web accessibility in mind

Keep Web
Accessibility In
Mind By SOLO

一.了解信息无障碍
1.什么是信息无障碍

信息无障碍是指任何人（无论是健全人还是残疾人，无论是年轻人还是老年人）在
任何情况下都能平等的、方便地、无障碍地获取信息、利用信息。

2.为什么需要无障碍

标准正确残障类别残障人数所占比例
残障用户视力残障 1263万 14.86%
老年人口听力残障 2054万 24.16%
法律规定言语残障 130万 1.53%
义务责任肢体残障 2472万 29.08%
智力残障 568万 6.68%
精神残障 629万 7.40%
多重残障 1386万 16.30%

二.相关法规与政策
网站设计无障碍技术要求
中华人民共和国信息产业部 2008年03月13发布 ,自2008年07月01起实施.

无障碍环境建设条例
2012年6月13日国务院第208次常务会议通过,自2012年8月1日起施行.

其他国家
美国联邦政府把信息无障碍相关问题写入了1973年美国康复法案的第508节
(Section 508)中

三.无障碍指导规范
WCAG1.0
Web Content Accessibility Guidelines 1.0 —— W3C推荐标准 1999年5月5日.

WCAG2.0
Web Content Accessibility Guidelines 2.0 —— W3C推荐标准 2008年12月11
日.

WAI-ARIA1.0
Web Accessibility Initiative - Accessible Rich Internet Application —— W3C
推荐标准 2011年1月11日

WCAG1.0的14条指导方针
1. 为听觉和视觉提供等价替代物
2. 不要单独依赖颜色
3. 正确使用标记和样式表
4. 清晰地使用自然语言
5. 创建能优雅变化的表格
6. 确保使用新技术的页面能优雅变化
7. 确保用户能控制岁时间变化的内容
8. 确保嵌入式用户界面的直接可用性
9. 设备独立的设计
10. 使用临时解决方案
11. 使用W3C技术
12. 提供上下文和方向信息
13. 提供清晰导航机制
14. 确保文档清晰简明

WCAG2.0的4条原则
1. 可感知性--用户必须能感知信息和用户界面组件
2. 可操作性--用户必须能操作用户界面组件
3. 可理解性--用户必须能操作用户界面的信息和操作
4. 健壮性--内容必须足够健壮,以能被各种用户代理解释,包括
辅助技术

①基础元素
- 页面语言声明
默认<html>或<html lang="zh">

- 页面编码声明
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />或<meta charset="
utf-8" >

Form
label描述说明
输入框: <input type="text"> 密码框:<input type="password"> 文本框:
<textarea><
单选框<input type="radio"> 复选框: <input type="checkbox"> 下拉选择:<select>和<opt
ion>
上传文件: <input type="file">

value属性自描述
提交按钮: <input type="submit"> 重置按钮:<input type="reset"> 普通按钮:<input type=
"button">

alt属性提示说明
<input type="image"> 指定at
l属性,用于描述图像的内容.

隐藏元素
<input type="hidden">无须为隐藏元素加标签

Table
summary属性
<table summary="表格内容的简短描述,表格
摘要">

abbr缩写表头
<th abbr="公司">公司名称</th>

scope声明表头
<th scope="col"> <td scope="row">
cl 列表头 rw 行表头
o: o:

慎用display:table;

IMG
内容类图片——alt内容表意准确
功能类图片——alt内容描述具体功能
文字图片——尽量避免,alt内容直接重复文字内容
复合图片——图表图片alt简要概括图表内容,细节描述通
过longdesc或者文本补充说明
图片地图——(Image Maps) 每个area都应加上alt内容,
内容类似功能类图片
修饰图片——alt内容留空,建议通过css使其当作背景展
现

a
注意链接内容的上下文,可以为链接设置title属性提供额
外信息
title属性规则与img的alt属性规则相同
不要在title中重复链接文本,那样只会增加噪音和页面尺
寸
提供跳过链接,跳过复杂或经常出现的内容

②WAI-RAIA
Web Accessibility Initiative Accessible Rich Internet Applications

Accessible Rich Internet Applications (WAI-ARIA) 1.0
WAI-ARIA无障碍网页应用属性完全展示

应用ARIA语境：
1. 应用无语义的XHTML 标签情况
2. 所应用 XHTML 标签当前状态改变情况
3. XHTML 标签需支持键盘索引
4. XHTML 标签状态改变时的CSS动态支持

③跳过导航(Skip Nav)
1. 在页面顶部提供跳过导航链接
2. 在明显位置提供跳过导航链接
3. 视觉隐藏,只在键盘切换焦点到链接时可见
4. 在任何需要跳过的位置添加跳过链接
Skip demo

④logo可访问性

禁用图片
禁用css
禁用css和图片
http://www.w3.org/

html
<h1 class="logo">
<a tabindex="2" accesskey="1" href="/">
<img src="/2008/site/images/logo-w3c-mobile-lg" width="90" height="53" alt="
W3C">
</a>
<span class="alt-logo">WC3</span>
</h1>

css
#w3c_mast h1 a{ipa:lc;la:etbcgon:r(./mgslg-3-cenl'
dslybokfotlf;akrudul'.iae/oowcsre-g)
n-eettplf;it:0%hih:0p;oiinrltv;-ne:;
orpa o etwdh10;egt17xpsto:eaiezidx1}
#w3c_mast h1 a img{ipa:oe}
dslynn;
.alt-logo{ipa:lc;oiinaslt;et2p;-ne:;akrudclr#f;
dslybokpsto:bouelf:0xzidx0bcgon-oo:ff}

注:透明图片慎重

⑤焦点反馈(FocusFeedback)
焦点反馈杀手

otienn;
uln:oe
otie0
uln:;
otie1xsldtasaet
uln:p oi rnprn;
hdfcs”true”
ieou=
{l:xrsinthis.nou=
abrepeso( oFcsthis.lr)}
bu()
ofcs"hsbu("
nou=ti.lr)

去除虚线框的方法优劣兼容性是否中断tab

避免移除outline除非提供相应样式使键盘聚焦时元素明显
可见
只在active状态下才移除outline
避免键盘陷入(No Keyboard Trap)

⑥视觉隐藏(Visual hide)
对所有用户都隐藏

display:oenn;
visibility:hidden;
height:; 0overflow:idn
hde; / I Vievr*
* n ocOe /

读屏软件可访问到

text-indent:-9em;
99
position:boueleft:99m
aslt; -9e;
position:absolute ! important;clip:rect(px 1 1 1 ;/ I6 I7*
1 px px px) * E, E /
clip:rect(px,1
1 px,1 px,1 ;
px)
background- color:#fff;color:#fff;

稳妥的写法

position:absolute !important;
clip:rect(px 1 1 1 ;/ I6 I7*
1 px px px) * E, E /
clip:rect(px,1
1 px,1 px,1 ;
px)
padding: !
0 important;
border: !
0 important;
height:1 !
px important;
width:1 !
px important;
overflow:hidden;

⑦高对比度(High Contrast Mode)
什么是高对比度模式?
高对比度模式是一种Windows系统设置主题，其意是为了保证视力受损用户查看
信息的方便。它通过使用对比鲜明的色彩和字体大小提高文本的可读性。高对比度
模式下网页的背景默认会变成全黑.

高对比度模式下的一些问题 (Shift+Alt+Print Screen)

使用content属性
1. 固定元素的宽和高,并设置overflow属性值为hidden
2. 用伪元素:before和content属性去设置图片
.btn:eoedslyiln-lc;otn:ul'gbnpg)}
bfr{ipa:niebokcnet r(b-t.n';

3. 用伪元素:before的margin属性去调整图片的位置

优点: 完全CSS控制,实现简单
缺点:IE<9不支持:before
弥补措施:
I使用bcgon或者_
E akrud 表达式( 卡死) _
bcgon-mg:epeso(hsrnietl.akrudmg=nn" ti.netdae
akrudiae xrsinti.utmSyebcgonIae"oe, hsisrAjc
tTL"feBgn, <img src="bg-btn.png">')
nHM(atrei" ' )

使用img sprites
1. 固定元素的宽和高,并设置overflow属性值为hidden
2. 直接使用img标签,通过margin调整img的展现位置
.btn:eoedslyiln-lc;otn:ul'gbnpg)}
bfr{ipa:niebokcnet r(b-t.n';

3. 用伪元素:before的margin属性去调整图片的位置

优点:兼容所有浏览器
缺点:更新不灵活,禁用图片或加载失败时alternative text不显示
对比demo

Tab顺序(Tabbing order)
视觉反馈(Visual feedback)
键盘可操作(Keyboard operability)
没有键盘陷阱(No keyboard traps)

①tabindex
tabindex属性功能:
使元素可获取焦点
为元素分配在焦点序列中的位置
tabindex赋值规则:
带0值tabIndex的元素根据页面默认结构进行排序,带正值
tabIndex的元素出现在所有带0值tabIndex元素之前
将tabIndex赋值为-1，则在使用[Tab]键时，此元素被忽
略。注意：如果使用-1值时，onfocus与onblur事件仍被启
动

②accesskey
从HTML4.0开始a,area,button,input,label,legend,textarea可
以添加accesskey属性,accesskey的值可以是字母跟数字.

IE浏览器:
Alt+Accesskey键，再按回车

FireFox浏览器:
Alt+Shift+Accesskey键

Chrome浏览器:
Alt键+Accesskey键

Opera浏览器:
Shit键+Esc,出现本页定义的Accesskey快捷键列表,再按Accesskey键

Safari浏览器:
Alt键+Accesskey键

1. accesskey值重复
2. accesskey值冲突
3. 快捷键提醒方式
4. 快捷键标准化

八.辅助读屏软件和浏览器

- 通常使用的屏幕阅读器 - 各屏幕阅读器使用量随时间的
变化

- 通常使用的浏览器

第三次报告中文地址：进步博客
第四次最新报告地址： Screen Reader User Survey

开始前便考虑可访问性测试,渐进增强.

①可访问性检测清单(Accessibility Checklists)
完整性(Completeness)
精确性(Accuracy)
可靠性(Reliability)
再现性(Repeatability)
防御性(Defensibility)

②可访问性测试工具(Accessibility Testing Tools)

代码检测
颜色检测

1. Web Accessibility In Mind
2. 456 Berea Street
3. The Paciello Group Blog
4. WAC Blog
5. Henny Swan's Blog
6. Humanising Technology Blog
7. AlastairC
8. 进步博客
9. Dive Into Accessibility

①Web开发修炼之 ②Web ③Pro HTML5
道-创造无障碍网站 Accessibility-- Accessibility
的三十六计 Web Standards
and Regulatory
Compliance

终于完了...

感谢 reveal.js

Keep web accessibility in mind

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (19)

Similar to Keep web accessibility in mind

Similar to Keep web accessibility in mind (20)

Keep web accessibility in mind