网站可访问性

1、什么是可访问性？

可访问性是一种让尽可能多的用户可以使用你的网站的做法。传统上我们认为这只与残疾人士有关，但是从更广的意义上来讲，对于移动端用户、低网速用户、键盘使用者等都适用。

无障碍指南和法律

万维网联盟：万维网联盟成立之时，就把普遍的访问（Universal Access）作为它的首要任务。并在1997年成立了网页内容易访问性推动小组（WAI Web Accessibility Initiative），该组织于1999年5月5日发布了网页内容易访问性规范 1.0版（WCAG），这个规范被认为是易访问的网站开发的国际标准，其中明确建议在网站开发过程中，应该遵守易访问性的原则。目前版本为WCAG2.1，2.2版本计划2021年发布。

美国“康复法”第508条、德国关于无障碍信息技术的联邦法令、联合王国的“平等法”、意大利的“无障碍法”、澳大利亚的“残疾歧视法”等。

目前国外的一些网站做的还比较好，比如google，youtube，mdn等，国内的一些网站目前看了一下北京政府网站无障碍版，前端一些组件库运用了wai-aria。大家可以尝试用chrome的screen reader插件结合键盘访问这些网站试试效果。

2、HTML与可访问性

正确的使用HTML标签来表达正确的意图。

使用HTML语义化，不仅不会花更多的时间，而且又有以下的可访问性优点：

1. 更便于开发 —你可以使HTML更易于理解，并且可以毫不费力的获得一些功能。
2. 更适配移动端 — 语义化的HTML文件比非语义化的HTML文件更加轻便，并且更易于响应式开发。
3. 更便于SEO优化 — 比起使用非语义化的<div>标签，搜索引擎更加重视在“标题、链接等”里面的关键字，使用语义化可使网页更容易被用户搜索到。

 2.1 页面布局

        创建页面布局时多用html5语义化标签，如nav, main, article, aside, section, footer等，屏幕阅读器对这些支持标签支持性还可以。滥用table布局的方式要禁止。

<header>
  <h1>Header</h1>
</header>
<nav>
  <!-- main navigation in here -->
</nav>
<!-- Here is our page's main content -->
<main>
  <!-- It contains an article -->
  <article>
    <h2>Article heading</h2>
    <!-- article content in here -->
  </article>
  <aside>
    <h2>Related</h2>
    <!-- aside content in here -->
  </aside>
</main>
<!-- And here is our main footer that is used across all the pages of our website -->
<footer>
  <!-- footer content in here -->
</footer>

2.2 文本内容

2.2.1 良好的文本结构，最好拥有标题，段落，列表等。避免打断

1. 屏幕阅读器会在您浏览内容时读取每个标题，通知您标题是什么，段落是什么等。
2. 它在每个元素之后停止，让你以任何适合你的速度前进。
3. 你可以在许多屏幕阅读器中跳到下一个/上一个标题。
4. 你还可以在许多屏幕阅读器中显示所有标题的列表，使您可以像使用便利的目录一样使用它们以查找特定内容。

 2.2.2 使用通俗易懂的语言

尽量使用不太复杂的清晰语言，不要使用不必要的行话或俚语。除此之外，你应该尽量避免使用没有被屏幕阅读器清楚读出的语言和字符。

• 如果可以避免的话，不要用破折号。写 5 到 7 ，来替代 5-7。
• 展开缩写 — 写 January，来替代 Jan 。
• 展开首字母缩略词，至少一次或两次。 例如写明 “超文本标记语言”（ Hypertext Markup Language），而不是直接用缩写 HTML。

2.3 语义化标签 

2.3.1 按钮