无障碍

有意义的标题和链接文本，良好的页面结构，考虑屏幕阅读器的操作，给所有用户更好的体验
屏幕阅读器的两种方式：1.读角色名；2.轻松识别的声音

一般，如果配置正确，屏幕阅读器一般会有Role，Name（lable），State，Value

控件的文字绑定：放入标签或标签加入for=“目标id”绑定目标交互控件

img的alt属性是图片的替代文本

将图片不需要的代替文本设置为空，将会从无障碍树移除，从而跳过

在合适的情况下，应该使用标题表示内容部分

语义标记用于指定标题h1

标题结构可以作为绕过内容部分的有效办法屏幕之外放一些标题以便屏幕阅读器用户或其他辅助技术用户发现，应对了外观不需要标题或者没有地方放的情况，但辅助技术用户可能能看到屏幕因而体验糟糕，而且国际化工作中带来维护问题，慎用
* 1.3.2：http://webaim.org/standards/wcag/checklist#sc1.3.2 (英)
* 2.4.10：http://webaim.org/standards/wcag/checklist#sc2.4.10 (英)
* 1.3.1：http://webaim.org/standards/wcag/checklist#sc1.3.1 (英)
* 2.4.1：http://webaim.org/standards/wcag/checklist#sc2.4.1 (英)
* 2.4.6：http://webaim.org/standards/wcag/checklist#sc2.4.6 (英)
* 2.4.9: http://webaim.org/standards/wcag/checklist#sc2.4.9 (英)
* 2.4.9: http://webaim.org/standards/wcag/checklist#sc2.49 (英)

任何行为像链接的元素必须包含href属性，包括单页面网页应用

图片链接需要有alt属性，为了能让屏幕阅读器能找到这个链接，链接具备文本可读性（链接目的可通过文本判断，如常见的learn more链接后应接其目的），甚至将链接改为标题，那样快速寻找链接不用回到段头看链接内容是什么

header：具有特定颜色主题，有一个底部边框，与其他内容分开，main，footer，nav（链接其他的页面内容）：导航部分的链接与剩余部分的链接不同，article（独立内容部分）,section(文档或应用的普通部分，因为不一定表达什么，常包含一个标题)，aside（与周围内容略微相关或着是页面侧栏（包含导航链接或者关于页面的信息））

ARIA（添加为障碍帮助或者说明文本的唯一方式）：
ARIA 1.0 规范：https://www.w3.org/TR/wai-aria/ (英)

ARIA 1.1 规范：https://www.w3.org/TR/wai-aria-1.1/ (英)

ARIA 在 HTML 中的规范，包括关于 ARIA 角色可以使用哪些 HTML 元素和不使用哪些 HTML 元素的指导 https://www.w3.org/TR/html-aria/ (英)

aria可以表达html中不存在的语义UI

强烈建议使用原生元素ARIA使用（此列子纯粹面向方法，并不建议使用）：自定义复选框，自己定意的div标签checkbox加入“role=“checkbox aria-checked=“true/false””,屏幕阅读器即可读出role和state信息，aria的角色修改了无障碍树（DOM+aria），但没有修改元素表现、元素行为，没有添加聚焦和键盘事件。

role="switch"可为button作开关角色

有文本信息且具有role属性的元素，文本信息是其标签

HTML语义元素和多余的role有时需要同时使用

aria-expanded：指示元素展开或者折叠

aria-hidden：从无障碍树移除元素及其子项，aria-labeledby和aria-describedby引用的元素除外

将DOM一些元素隐藏，可做如下的设置，也可以将为屏幕阅读器用户呈现的内容放在屏幕之外，aria-describedby引用隐藏的元素，添加aria-label（对辅助技术用户隐藏，隐藏的元素将不会出现在DOM树）


aria-owns：DOM元素作当前元素的子项或将现有子元素重新排列成不同的顺序，默认生成在原生项后（可进行菜单合并，可引用多个元素，通过其顺序排列）


aria-activedescendant表示相关的网页活跃元素具有焦点，若父项被聚焦，会呈现给用户实际关联的焦点

aria-describedby：链接接元素作为原元素的无障碍说明，向用户显示额外说明文本，与arai-label相似可能引来不可见元素

aria-posinset and aria-setsize：列表等集合中的位置和兄妹关系 and 设置集合实际大小，如果整个集合中的大小不能由DOM确定，可使用延时渲染（render）

确保创建自定义小部件的时候，始终将role属性应用在tabindex属性的同一位置，以便键盘事件出现在正确位置

树列表

aria-controls为只有图片的按钮添加替代文本

控制特定部分是否可见

屏幕阅读器提醒

aria-labelledby可以是一个ID引用表（由多个元素组成标签，按id顺序链接，可以引用辅助技术无法查看的元素，会覆盖其他标签来源），可以通过ID将其他元素指定为标签，aria-labelledby可用于任何元素，标签元素是指代为其添加标签的元素，而aria-labelledby相反


aria-live=“off”（default）不启用
aria-live:将网页某个部分标记为live，以便及时向用户显示更新内容，而不是用户浏览这部分网站时更新（可能位于初始页面加载中；不同的屏幕阅读器和辅助技术对不同更改的响应不同，如果辅助技术不能阅读，尝试不同类型的内容更改）。
aria-live=“polite”（完成正在执行的操作时，提醒用户这一更改，这个消息一般很重要但不紧急），上面第二个聊天界面便运用了aria-live，当新消息接受到屏幕阅读器便会提醒用户
aria-live="assertive"打断正在进行的操作并立即提醒用户这一更改，仅适用于紧急更新

aria-atomic（显示更新时能否将整个区域当作一个整体），aria-relevant，aria-busy
细调在实时区域发生更改时向用户显示的信息
（1）atomic（默认false）

只修改day，month或year系统会朗读日期部件的完整内容
（2）relevant表示应该向用户呈现何种类型的更改，默认additions，可用removals，text
additions：添加到实时区域的任何元素都很重要

添加的新项系统会阅读，但是要求aria-atomic为false
text：添加到任何子节点的文本内容是相关内容，无论新的元素是否实际被添加

更改提醒栏的文本内容会引发通知（实际没有添加任何子元素）
removals：删除任何子元素或者文本会引发通知
all：几乎任何更改都很重要
默认additions text添加子元素或文本内容很重要，最常用，因此很少指定aria-relevant
aria-busy通知辅助技术暂时忽略对该元素的更改

暂停出现连接问题时发出提醒，恢复时重新设置为false

无障碍样式

1.聚焦环

只删除样式不可取，可以替换风格（如图是非常严重的反面做法）

删除聚焦环替换成其他简单样式的方法是聚焦和悬停使用相同样式，因为对于悬停样式，那个元素具有焦点并不明显

删除默认聚焦环正确处理方式应该为

使用边框阴影而不改变聚焦环颜色是因为不同浏览器对outline属性的样式设置有所不同，只改变颜色可能不能产生一致的体验，使用阴影的话就能确保在不同浏览器上获得一致的焦点指示效果

比起圆圈的选项文字一起被聚焦，只聚焦圆圈显然更舒适
总之，尽可能保留默认聚焦环，因为大多数用户都接受这种样式，如果默认聚焦样式与页面样式冲突或封装元素的效果很差那么就选择自定义聚焦样式

正文和图片的最低对比度应为4.5:1，比默认正文大120%或150%的更大文本对比度要求可以降到3:1
*
1.4.3：http://webaim.org/standards/wcag/checklist#sc1.4.3 (英)
*
1.4.6：http://webaim.org/standards/wcag/checklist#sc1.4.6 (英)

请勿仅通过颜色传递信息（如不应使用颜色区分链接和周围的文字，但可用下划线表示链接被点击）
*
1.4.1：http://webaim.org/standards/wcag/checklist#sc1.4.1

补救（1）这部分UI的使用频率有多大？是应用的重要部分？
（2）这个无障碍问题对于用户的负面影响有多大？
（3）修改问题的代价？