diff --git a/site/zh-cn/a11y/index.md b/site/zh-cn/a11y/index.md index 6c03127508..df87ca8f8d 100644 --- a/site/zh-cn/a11y/index.md +++ b/site/zh-cn/a11y/index.md @@ -15,4 +15,5 @@ -1. [检验及测试](./part3/testing.md) +1. [开发辅助工具](./part3/develop.md) +2. [整体测试](./part3/testing.md) diff --git a/site/zh-cn/a11y/part2/checklist.md b/site/zh-cn/a11y/part2/checklist.md index 998f8e3243..88558fedad 100644 --- a/site/zh-cn/a11y/part2/checklist.md +++ b/site/zh-cn/a11y/part2/checklist.md @@ -2,32 +2,31 @@ -- [2.2 开发 Checklist](#2.2-开发-Checklist) +- [1. 开发 Checklist](#1-开发-Checklist) - - [2.2.1 常规](#2.2.1-常规) - - [2.2.2 语义化标签](#2.2.2-语义化标签) - - [2.2.3 图片](#2.2.3-图片) - - [2.2.4 表单](#2.2.4-表单) - - [2.2.5 颜色和对比度](#2.2.5-颜色和对比度) + - [1.1 常规](#11-常规) + - [1.2 语义化标签](#12-语义化标签) + - [1.3 图片](#13-图片) + - [1.4 表单](#14-表单) + - [1.5 颜色和对比度](#15-颜色和对比度) -- [2.3 参考文献](#2.3-参考文献) +- [2. 参考文献](#2-参考文献) -## 2.2 开发 Checklist +## 1. 开发 Checklist 对上节的知识了解后,我们为开发者提供一个改造的清单,我们所罗列的都是无障碍不可避免的问题,按照清单修改,页面基本支持无障碍,请开发者对如下规则进行阅读: -### 2.2.1 常规 +### 1.1 常规 - [ ] 设置 lang 让屏幕阅读器选择语言去读取,lang 参数值遵循[ISO_639-1 规则](https://zh.wikipedia.org/wiki/ISO_639-1), ```html - - 或 - - + + 或 + ``` -- [ ] 所有标签属性要设置唯一 ID +- [ ] 标签属性的id需要全页面唯一 - [ ] 页面上的文本,要按照书写习惯添加标点符号。屏幕阅读器在读取文本标点符号适时出现停顿 @@ -35,64 +34,52 @@ - [ ] 所有按钮文本描述都是可读取的,icon 类按钮要有`aria-label`或`aria-labelledby`来辅助描述 -- [ ] 视频要添加字幕,通过引入文件,如下: - -```html - -``` +- [ ] 视频需要以引入字幕文件的方式添加字幕,如下: + + ```html + + ``` - [ ] 对于一些文本属性,屏幕阅读器读取属性优先级如下(只读取优先级最高的):aria-labelledby,aria-label,alt,title 对于同一个元素 aria-labelledby,aria-label 只能使用一个(在同时使用时,用户代理在生成可访问的名称属性时将为 aria-labelledby 分配更高的优先级)。 -- [ ] 非语义标签的键盘事件捕获,要使用 onkeydown ,IE 浏览器不会为非字母数字键触发按键事件 +- [ ] 非语义标签的键盘事件捕获,要使用onkeydown ,IE浏览器不会为非字母数字键触发按键事件 - [ ] 代码的逻辑顺序与显示的顺序要保持一致 -- [ ] 对于重复菜单的跳过,请[参考](../content-creation-link/page1.md) +- [ ] 需要能跳过页面重复出现的菜单,请参考上文[跳过多个页面重复出现的导航栏](../content-creation-link/page1.md) -- [ ] 关于元素的隐藏,请[参考](../content-creation-link/page2.md) +- [ ] 关于元素的隐藏,请参考[详情](./content-creation-link/page2.md) -### 2.2.2 语义化标签 +### 1.2 语义化标签 -- [ ] 务必使用语义化标签,并且 body 的直接子元素必须是以下几类标签。对于更多语义化标签请[查阅](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) +- [ ] 务必使用语义化标签,并且body的直接子元素必须是以下几类标签,其次以下语义化标签与role为等价关系。对于更多语义化标签请[查阅](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) - ```html -
- or role="banner" //` -
- `与`role="banner"`等价 - -
-
- ``` + + | 语义化标签 | role | + | :------| ------: | + | header | banner | + | nav | navigation | + | main | main | + | article | article | + | aside | complementary | + | footer | contentinfo | - [ ] 每个页面,有且仅有一个`
`标签或 role="main"的元素,并且为页面的主题内容 @@ -102,20 +89,20 @@ - [ ] 要正确使用如下标签: -``` + ``` b 粗体文本 em 着重文本 i 斜体字 strong 加重语气 ins 删除文本 del 下划线文本 -``` + ``` - [ ] 标题要使用 h1~h5,不能出现 h 标签跳跃,遵循从 h1 到 h5 顺序 -### 2.2.3 图片 +### 1.3 图片 -- [ ] 图片要设置 alt 属性或者 longdes 属性 +- [ ] 图片要设置 alt 属性或者 longdesc 属性 - 对于有意义的图片,要设置 alt 并且描述文字简洁,不冗余,例如 logo: @@ -131,7 +118,7 @@ - [ ] 不要使用图片标题,使用文本标题 -### 2.2.4 表单 +### 1.4 表单 - [ ] 表单元素的 label 要遵循约定关系[WCAG 用户输入目的的列表](https://w3c.github.io/WCAG21-zh/index.html#input-purposes) 遵循这些规范有助于浏览器自动回填数据、屏幕阅读器更好地传达信息 @@ -140,19 +127,18 @@ 使用 Tab 键可以顺序的切换表单元素 - 对于 label 描述表单控件,例如日期,提供具体的格式,方便用户输入,例子如下: - - ``` - - + 对于 label 描述表单控件,例如日期,提供具体的格式,方便用户输入,例子如下: + ```html + + ``` -### 2.2.5 颜色和对比度 +### 1.5 颜色和对比度 - [ ] 不要依赖单一元素。例如:在展示图片、表格时,用户要加入纹理或图案。保证色盲用户能辨别,不用担心颜色会影响他对数据的理解。 -## 2.3 参考文献 +## 2. 参考文献 - [Princeton Content Creator Checklist](https://ux.princeton.edu/accessibility/accessibility-checklist) - [MSU A11y Checklist](https://webaccess.msu.edu/Help_and_Resources/checklist.html) -- [a11yproject Checklist](https://a11yproject.com/) +- [The A11Y Project](https://a11yproject.com/) diff --git a/site/zh-cn/a11y/part2/component-usage.md b/site/zh-cn/a11y/part2/component-usage.md index a695a3137c..d575f30d17 100644 --- a/site/zh-cn/a11y/part2/component-usage.md +++ b/site/zh-cn/a11y/part2/component-usage.md @@ -1,30 +1,33 @@ -- [2.1.1 组件的分类](#211-组件的分类) - - [2.1.1.1 数据展示类](#2111-数据展示类) - - [2.1.1.2 即时反馈类](#2112-即时反馈类) - - [2.1.1.3 菜单与导航类](#2113-菜单与导航类) - - [2.1.1.4 表单类](#2114-表单类) -- [2.2 参考文献](#22-参考文献) -# 2.1 Funion 组件使用 -Fusion 是一种旨在提升设计与开发之间 UI 构建效率的工作方式。我们致力于对无障碍的支持,其中 Fusion 基础组件已提供无障碍支持,开发者可以进行测试和使用,并提供[Fusion](https://fusion.design/component)无障碍说明文档和使用。所有非组件 API 属性都可以透传至 DOM 元素(我们可以传递参数,改变 aria 和 role 属性)。 +- [1. 使用无障碍的Fusion组件](#1-使用无障碍的Fusion组件) +- [2. 组件的分类](#2-组件的分类) + - [2.1 数据展示类](#21-数据展示类) + - [2.2 即时反馈类](#22-即时反馈类) + - [2.3 菜单与导航类](#23-菜单与导航类) + - [2.4 表单类](#24-表单类) +- [3. 参考文献](#3-参考文献) -经过上一章节的学习,对无障碍有初步的认识,如何进行改造呢,下面我们给我一些指引: +## 1. 使用无障碍的Fusion组件 -- 对于组件,我们为开发者内置 role 和一些 aria-*属性,开发者也可以对非组件 API 属性都可以透传至 DOM 元素,进行修改 role 和 aria-*参数,但是要注意对应关系,请[参考](../part1/WAI-ARIA.md) -- 对一些特殊的组件传递参数才能支持无障碍,设置`id`,`autoFocus`和传参数,如下: - - id - `Balloon`,`Rating` - - autoFocus - 弹层自动聚焦,例如`Dialog`,`Overlay`,`Dropdown` - - 传参数 - 有些组件需要根据具体的业务,实现不同的可访问性,这里为开发者内置一些参数,想使用无障碍的时候,用户只需要根据现有的需求,选择对应的内置参数,例如设置 aria-label,以下组件需要用户传参数才支持无障碍组件如下:`NumberPicker`、`Transfer` +Fusion 是一种旨在提升设计与开发之间 UI 构建效率的工作方式。我们致力于对无障碍的支持,其中 Fusion 基础组件已提供无障碍支持,开发者可以进行测试和使用,并提供[Fusion](https://fusion.design/component)无障碍使用和说明文档。所有非组件 API 属性都可以透传至 DOM 元素(我们可以传递参数,修改aria和role属性)。 + +经过上一章节的学习,对无障碍有初步的认识,如何进行改造呢,下面给出一些指引: + +- 对于组件,我们为开发者内置role和特定aria-*属性,开发者也可以对非组件 API 属性都可以透传至 DOM 元素,进行修改 role 和 aria-*参数,但是要注意对应关系,请[参考](../part1/WAI-ARIA.md) +- 对一些特殊的组件传递参数才能支持无障碍,设置`id`,`autoFocus`和传参数,如下: + - id - `Balloon`,`Rating` + - autoFocus - 弹层自动聚焦,例如`Dialog`,`Overlay`,`Dropdown` + - 传参数 - 有些组件需要根据具体的业务,实现不同的可访问性,这里为开发者内置一些参数,想使用无障碍的时候,用户只需要根据现有的需求,选择对应的内置参数,例如设置 aria-label,以下组件需要用户传参数才支持无障碍组件如下:`NumberPicker`、`Transfer` - 我们为开发者提供无障碍的使用文档,请[参考](https://fusion.design/component)组件 API 中`ARIA and KeyBoard` -## 2.1.1 组件的分类 +## 2. 组件的分类 -本部分我们会为开发者介绍具体如何对组件改造,使开发者更好的使用组件,分如下四类: +本部分介绍具体如何对组件改造,让开发者更好的使用组件可访问性,分如下四类: -### 2.1.1.1 数据展示类 +### 2.1 数据展示类 - `Icon` - 图标类元素 @@ -38,9 +41,9 @@ Fusion 是一种旨在提升设计与开发之间 UI 构建效率的工作方式 - 默认为纯数据展示的表格 - 若作为布局使用复杂功能,需自定义 role 等属性,[参考文档](https://fusion.design/component/table) - `Tag` - 删除类标签,删除按钮默认朗读为“删除”,可自定义文案,自定义方式参考[国际化语言包的设置](https://fusion.design/component/config-provider) -- `Paragraph`, `Progress`, `Timeline`, `Collapse` +- `Paragraph`、`Progress`、`Timeline`、`Collapse` -### 2.1.1.2 即时反馈类 +### 2.2 即时反馈类 - `Message` - 默认 role="alert",当出现在 document 中时,屏幕阅读器会优先朗读它的内容。 @@ -58,14 +61,14 @@ Fusion 是一种旨在提升设计与开发之间 UI 构建效率的工作方式 - 可通过`autoFocus`开启默认聚焦,焦点为弹层内容上第一个可聚焦元素 `` - 请务必设置可聚焦的 trigger 元素 -### 2.1.1.3 菜单与导航类 +### 2.3 菜单与导航类 - 菜单 - `Menu` - 支持键盘导航 - 默认 role="menu",子元素为"menuitem",菜单自定义单选子元素为"menuitemradio",菜单自定义多选子元素为"menuitemcheckbox" - - 使用`selectMode`API 改变组件可选状态后,默认 role="listbox",跟是否多选改变`aria-multiselectable`的值,子元素为“listitem” + - 使用`selectMode`属性 改变组件可选状态后,默认 role="listbox",根节点是否多选改变`aria-multiselectable`的值,子元素为“listitem” - 请根据实际需求覆盖默认 role `` `` - `Nav` - 默认 role="listbox",子元素为"listitem" @@ -82,9 +85,8 @@ Fusion 是一种旨在提升设计与开发之间 UI 构建效率的工作方式 - 朗读格式默认为“上一页,当前\${i}页”,可自定义文案,自定义方式参考[国际化语言包的设置](https://fusion.design/component/config-provider) - `Step`、`Breadcrumb` - 默认`aria-current`标记当前步骤 - - -### 2.1.1.4 表单类 +### 2.4 表单类 - 推荐: Form Field Input CheckBox Radio Switch Select NumberPicker Button Range Rating DatePicker TimePicker Upload - 不推荐:TreeSelect CascaderSelect Transfer @@ -104,39 +106,39 @@ Fusion 是一种旨在提升设计与开发之间 UI 构建效率的工作方式 - `Button` `SplitButton` `MenuButton` - 默认使用` + + +- [1. 开发辅助工具](#1-开发辅助工具) + - [1.1 静态分析工具](#11-静态分析工具) + - [1.2 浏览器检测工具](#12-浏览器检测工具) + - [1.3 视觉测试工具](#13-视觉测试工具) +- [2. 参考文献](#2-参考文献) + +## 1. 开发辅助工具 + +开发测试由软件开发人员或工程师在软件开发生命周期的构建阶段执行。我们从代码静态分析、浏览器和视觉测试,对可访问性进行测试,降低软件的缺陷,因此从不同的角度进行测试: + +### 1.1 静态分析工具 + +静态分析是指在不运行程序的条件下,对程序分析的方法,这里为开发者提供[eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y),在不运行程序条件下,运行此工具对程序进行静态分析,介绍如下: + +* 对JSX代码进行无障碍标准测试。 +* eslint-plugin-jsx-a11y是静态扫描,无需侵入代码,能扫到事件缺失,其中定义30多条比较常见规则,请[参考](https://github.com/evcohen/eslint-plugin-jsx-a11y)。 +* 可以在开发和集成测试中使用。 + +### 1.2 浏览器检测工具 + +开发者在开发的过程中,可以通过浏览器插件对已经编写的代码进行可访问性测试,检测是否符合无障碍标准,这里为开发者提供[Axe Chrome Plugin](https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd),介绍如下: + +* 在浏览器中测试代码是否符合无障碍标准。 +* 与eslint-plugin-jsx-a11y工具相比,此插件的无障碍检测规则更多,请[参考](https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md) +* Axe可访问性检查器是一个快速、轻量级的可访问性测试工具,它基于业内最流行的开源无障碍测试库axe-core,安装成功后可在Chrome Dev Tools面板找到。也可以使用`axe-core`进行单元测试,请[参考](https://github.com/dequelabs/axe-core)。 +* 在控制台选择axe,就可以对网站进行测试,并列出不符合无障碍问题并给出解决方案。 + +### 1.3 视觉测试工具 +在全球范围内,存在很多视觉障碍的用户,比如红绿色盲,在设计和开发的过程中需要考虑到他们的使用体验,因此这里为开发者提供[I want to see like the colour blind](https://chrome.google.com/webstore/detail/i-want-to-see-like-the-co/jebeedfnielkcjlcokhiobodkjjpbjia),介绍如下: + +* 在浏览器运行,对视觉进行测试。 +* 与前面两个工具相比,此工具只能在视觉方面进行测试。需要开发者根据选择不同类型的视觉用户进行测试。 +* Chrome插件,开启可模拟红、绿、蓝、全色盲、色弱等用户眼中的站点,直接发现站点中存在的可辨别性问题。 + +## 2. 参考文献 + +* [Development Testing](https://en.wikipedia.org/wiki/Development_testing) +* [无障碍访问工具](https://www.w3cschool.cn/front_end_handbook_2017/front_end_handbook_2017-jtqp26ec.html) +* [Static code Analysis plugin](https://github.com/evcohen/eslint-plugin-jsx-a11y) +* [Visual plugin](https://websitecreationworkshop.com/blog/design-tips/see-like-color-blind/) diff --git a/site/zh-cn/a11y/part3/testing.md b/site/zh-cn/a11y/part3/testing.md index 37e5e11d06..ef3fa14ee4 100644 --- a/site/zh-cn/a11y/part3/testing.md +++ b/site/zh-cn/a11y/part3/testing.md @@ -1,86 +1,91 @@ -# 检验及测试 -- [自动化检查](#自动化检查) - - [内容检查工具](#内容检查工具) - - [视觉测试工具](#视觉测试工具) - - [Benchmark](#benchmark) -- [借助辅助技术进行自测](#借助辅助技术进行自测) - - [屏幕阅读器](#屏幕阅读器) - - [Checklist](#checklist) -- [邀请真实用户进行测试](#邀请真实用户进行测试) -按照测试的准确程度层层递进,可分为以下三个层次,业务可根据实际场景进行选择: +## 整体测试 -- 自动化检查 -- 借助辅助技术进行自测 -- 邀请真实用户进行测试 +- [1. 自动化检查](#1-自动化检查) + - [1.1 Benchmark](#11-benchmark) +- [2. 借助辅助技术进行自测](#2-借助辅助技术进行自测) + - [2.1 屏幕阅读器](#21-屏幕阅读器) + - [2.2 测试checklist](#22-测试checklist) +- [3. 邀请真实用户进行测试](#3-邀请真实用户进行测试) +- [4. 参考文献](#4-参考文献) -## 自动化检查 -自动化检查可以检查出一些可访问性遵从性问题,如标题的结构和顺序、alt 文本是否存在、页面标题和语言设置是否存在、颜色对比度是否合理、一定程度上的 HTML 结构是否语义化等。 -大多数用于测试活动网页可访问性的工具都是以浏览器扩展的形式提供的,推荐安装如下工具: +在开发完成以后,我们需要整体对项目进行无障碍测试,通过工具和人工检测,发现其中的问题,进行修复。这里按照测试的准确程度层层递进,可分为以下三个层次,业务可根据实际场景进行选择: -### 内容检查工具 +* 自动化检查 +* 借助辅助技术进行自测 +* 邀请真实用户进行测试 -[Axe Chrome Plugin](https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd)(推荐) +### 1. 自动化检查 -Axe 可访问性检查器是一个快速、轻量级的可访问性测试工具,它基于业内最流行的开源无障碍测试库[axe-core](https://github.com/dequelabs/axe-core),安装成功后可在 Chrome Dev Tools 面板找到。可以静态分析当前已存在于 document 中的内容。 - -[eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y/tree/master/docs/rules) -eslint-plugin-jsx-a11y 是对静态扫描,无需侵入代码,能扫到事件缺失,定义 30 多条比较常见规则,请参考。 - -### 视觉测试工具 - -[I want to see like the colour blind - Chrome Plugin](https://chrome.google.com/webstore/detail/i-want-to-see-like-the-co/jebeedfnielkcjlcokhiobodkjjpbjia) -Chrome 插件,开启可模拟红、绿、蓝、全色盲、色弱等用户眼中的站点,直接发现站点中存在的可辨别性问题。 - -### Benchmark - -[Lighthouse](https://developers.google.com/web/tools/lighthouse/) -lighthouse 是 Google 开发的网站性能评测工具,主要用于改进网络应用的质量,已开源。内置在 Chrome Dev Tools 中,也有插件版本。 +自动化检查可以检查出一些可访问性问题,如标题的结构和顺序、alt文本是否存在、页面标题和语言设置是否存在、颜色对比度是否合理、一定程度上的HTML结构是否语义化等。由于开发阶段和自动化检测工具的相似性,这里推荐按照工具的以下使用顺序进行检查,先对代码进行静态检测,然后通过axe进行测试,其次对于视觉测试,需要开发者根据不同类型的视觉用户进行测试: +* [eslint-plugin-jsx-a11y](./develop.md) +* [Axe Chrome Plugin](./develop.md) +* [I want to see like the colour blind](./develop.md) + +#### 1.1 Benchmark +在我们通过工具和人工测试后,怎么衡量我们测试是否达到一定的要求,这个时候我们需要寻找一些工具对我们的测试进行评估或生成生产测试报告,来对我们的测试给出有效的评估。[Lighthouse](https://developers.google.com/web/tools/lighthouse/)是Google开发的网站性能评测工具,主要用于改进网络应用的质量,已开源。内置在Chrome Dev Tools 中,也有插件版本。 + 无障碍的检测是该工具评测的一个子项,可以借助这个插件生成站点的无障碍评分报告。 -## 借助辅助技术进行自测 -手动测试将有助于识别准确性问题,例如标题结构是否与页面真实内容顺序相符、alt 文本是否准确地传递了相关图像的信息、弹出的窗口、对话框或其他通知是否与展示一致并且明显等。 +### 2. 借助辅助技术进行自测 + +手动测试将有助于识别准确性问题,例如标题结构是否与页面真实内容顺序相符、alt文本是否准确地传递了相关图像的信息、弹出的窗口、对话框或其他通知是否与展示一致并且明显等。 残疾人借助辅助技术(Assistive Technology)来操作软件产品,常用辅助技术有: 屏幕阅读器 - 用于读出屏幕上显示的文本 屏幕放大软件 - 用于放大显示器,使视力受损的用户轻松阅读。 -### 屏幕阅读器 +#### 2.1 屏幕阅读器 + +对于屏幕阅读器介绍,请[参考](../part1/basics.md),这里主要介绍通过屏幕阅读器如何测试,我们依据有障碍人群,浏览器和操作系统的不同使用,需要进行不同的测试,进行如下分类: -屏幕阅读器是无障碍测试的主要工具,[据统计](https://webaim.org/projects/screenreadersurvey7/),截止到 2017 年 10 月,约有 12%的用户使用 VoiceOver,46%的用户使用 JAWS,32%用户使用 NVDA。市面上常用的读屏软件推荐如下: +* 人群类型 + * 对于失明用户,我们在测试过程中需要开启屏幕阅读器和通过键盘去测试,对于视力障碍,我们推荐使用[I want to see like the colour blind](./develop.md)测试 -- MAC: [VoiceOver](https://help.apple.com/voiceover/mac) +* 浏览器 + * 在火狐和Chrome中我们使用[axe](./develop.md)插件进行测试(推荐),在IE中使用[Web Accessibility Toolbar](https://developer.paciellogroup.com/resources/wat/)测试,Safari使用[Web Development Tools](https://developer.apple.com/safari/tools/)测试 -- Windows: +* 操作系统 + * 推荐在widnow系统中我们可以在火狐或Chrome中使用[axe](./develop.md)插件进行测试,Apple系统下使用VoiceOver + Chrome中[axe](./develop.md)插件测试 - - [NVDA](https://www.nvaccess.org/) NVDA 是一个免费开源的读屏软件 - - [JAWS](https://www.freedomscientific.com/products/software/jaws/) Freedom Scientific 发布的一款屏幕阅读器(收费) -- Chrome 插件: [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn) 仅与浏览器相关 +#### 2.2 测试checklist -### Checklist +对于网站的可访问性,我们参考如下的条目,若基本符合,网站基本支持网站的可访问性,如下: -- [ ] 仅使用键盘,是否能使用站点的主要功能。 - 使用 Tab 在页面的可聚焦元素上切换,使用 shift+Tab 切回上一聚焦元素。 +* [ ] 仅使用键盘,是否能使用站点的主要功能 + + 使用Tab在页面的可聚焦元素上切换,使用 shift+Tab 切回上一聚焦元素。 -- [ ] 能否跳过导航栏 - 跳过导航栏对有运动障碍的人很有意义。 +* [ ] 能否跳过导航栏,详情点击[这里](../part2/content-creation-link/page1.md) + + 跳过导航栏对有运动障碍的人很有意义 -- [ ] 是否支持内容缩放 - 缩放后是否能正常展示,这对于部分有视觉障碍的人(比如老人)很有意义。 +* [ ] 是否支持内容缩放,详情点击[这里](https://aerolab.co/blog/web-accessibility/) + + 缩放后是否正常显示,这对于有视觉障碍的人(比如老人)很有意义 -- [ ] 能否通过屏幕阅读器,获取页面所传达信息 - 针对完全失明用户 +* [ ] 是否通过屏幕阅读器,准确获取页面所传达的信息 + + 针对完全失明用户 -- [ ] 开启色盲色弱模拟插件,能否使用站点的主要功能 +* [ ] 开启色盲弱模拟或对比度插件,能否使用站点的主要功能 -## 邀请真实用户进行测试 +### 3. 邀请真实用户进行测试 真实的有访问障碍的用户是无障碍的实际使用者,他们有不同的习惯和期望。有条件的话,可以邀请真实的存在访问障碍用户定期检查站点,以确保主要内容和功能对他们可用。 + + +### 4. 参考文献 + +* [Screen Reader User Survey](https://webaim.org/projects/screenreadersurvey7/) +* [25 Browser Extensions to Perform Accessibility Testing Effectively](https://www.digitala11y.com/accessibility-plug-ins-ie-chrome-firefox-browsers/) +* [Static code Analysis plugin](https://github.com/evcohen/eslint-plugin-jsx-a11y) +* [Visual plugin](https://websitecreationworkshop.com/blog/design-tips/see-like-color-blind/)