Logo

菜单

发布于 2026-01-06 3 阅读
0

网站无障碍访问：通过提高网站的无障碍访问性，您可以自动扩大目标受众。

网站无障碍访问：通过提高网站的无障碍访问性，您可以自动扩大目标受众。

如果你一直在关注前端开发的最佳实践，你可能听说过“Web 可访问性”这个概念。本文将介绍可访问性的定义、相关的事实和数据，以及如何使你的网站更易于访问的最佳实践。

网络无障碍是指残障人士能够感知、理解、浏览网络并与网络互动，并且能够为网络做出贡献。

涵盖的主题

    * [Web Content Accessibility Guidelines](#chapter-1)
    * [Web Accessibility Statistics](#chapter-2)
    * [Accessibility Principles: POUR](#chapter-3)
    * [Types of Disabilities](#chapter-4)
    * [Different ways to Browse the web](#chapter-5)
    * [Keyboard Accessibility](#chapter-6)
    * [Tabtrapping](#chapter-7)
    * [Screen Readers](#chapter-8)
    * [Semantic HTML](#chapter-9)
    * [Contrast & Color](#chapter-10)
    * [Accessibility Developer Tools](#chapter-11)
    * [References](#chapter-12)
Enter fullscreen mode Exit fullscreen mode

网络内容无障碍指南

Web 内容无障碍指南（通常缩写为 WCAG）是一系列旨在提高网络无障碍性的指南。

Web 内容无障碍指南 2.0 分为三个符合性级别：

  • A 级– 最基本的网页无障碍功能
  • AA级——旨在解决残疾用户面临的最大和最常见的障碍
  • AAA 级——最高级别（也是最复杂级别）的网络可访问性

对于大多数网站而言，AA级加上一些AAA级是最佳目标。

网络可访问性统计数据

1) 阅读困难- 美国有 15%-20% 的人有阅读困难，包括阅读障碍（来源：nichd.nih.gov）。

2）色盲——美国白人男性中有 8% 患有某种形式的色盲，而女性的这一比例为 0.5%。（来源：nei.nih.gov）。

3）灵巧性障碍——7% 的工作年龄段成年人存在严重的灵巧性障碍（来源：《能力范围及其对计算机技术的影响》——微软/Forrester）。严重的灵巧性障碍意味着用户不太可能使用鼠标，而是依赖键盘。

4) 视力障碍- 美国、英国和加拿大有 3%-4% 的人视力不佳，无法阅读（来源：census.gov、加拿大统计局、英国国家统计局）。发病率随年龄增长而增加，70 岁以上的人群中有超过 10% 的人受到影响。

这些统计数据对网站使用情况影响最大，有助于评估无障碍访问问题对受影响人数的影响。那么，让我们来看看如何解决这个问题。

无障碍原则：POUR

1. 可感知性——用户可以通过感官识别内容和界面元素（例如，在线申请表包含多个输入字段。如果字段标签无法辨认，用户如何才能成功填写申请表？）。
2. 可操作性——用户能够成功使用控件、按钮、导航和其他必要的交互元素（例如，能够通过键盘进行控制）
。3. 可理解性——可理解的技术在呈现方式和格式上保持一致，在设计和使用模式上具有可预测性，简洁明了，支持多种模式，并且在语言和语气上适合目标受众。（例如，表单字段错误消息应该易于理解）
。4. 稳健性——技术设计应能与所有技术兼容（例如，不同的浏览器）。

残疾类型

  • 注意力缺陷
  • 失明或低视力
  • 聋人/听障人士
  • 学习障碍
  • 身体残疾
  • 言语和语言障碍

浏览网页的不同方式

1）键盘
2）头部魔杖和口控棒
3）单开关
4）屏幕阅读器

键盘辅助功能

  • 键盘快捷键帮助- 创建一些类似 Facebook 和 Twitter 的键盘快捷键，用于显示动态、通知等。如果您有很多导航链接，用户需要按 20-30 次 Tab 键才能找到特定链接，这种方法非常有用。以下是键盘快捷键帮助的示例图片。

替代文字

  • 键盘导航使用Tab方向键。Shift+Tab方向键用于后退导航，方向Tab键用于前进导航。

  • 可制表元素为<a>，，，，，<button>​​<input><select><textarea><iframe>

  • 可见焦点- 当前键盘焦点所在的页面元素会以视觉方式显示出来（例如，当您使用 Tab 键在页面上移动时，可以通过焦点颜色看出您当前所在的位置）。

  • Div默认情况下，这些Span项目不支持 Tab 键切换，但开发者可以使用名为 tabindex 的属性使任何项目都支持 Tab 键切换。

<div tabindex="0">focusable</div>
Enter fullscreen mode Exit fullscreen mode 
**Tab index contains three values**

**1) Negative value** - Element should be focusable but should not be
Enter fullscreen mode Exit fullscreen mode

可通过顺序键盘导航访问

**2) 0** - Element should be focusable but should  be reachable via
Enter fullscreen mode Exit fullscreen mode

键盘导航采用顺序方式，但其相对顺序
由平台约定定义。

**3) Positive value** - Element should be focusable but should
Enter fullscreen mode Exit fullscreen mode

可通过键盘顺序导航访问；其相对
顺序由属性值定义：顺序遵循
tabindex 值递增的顺序。

  • 跳转链接- 您可能在一些网站上看到过，很多内容都需要使用 Tab 键才能浏览。为了方便用户使用键盘 Tab 键，网站会提供类似“跳至导航”或“跳至内容”的跳转链接。
<a href="maincontent" class="skip-link">skip to main content</a>

....

<div class="navigation">....</div>

....

<div id="maincontent" tabindex="-1">....</div>
Enter fullscreen mode Exit fullscreen mode

这里我们将 skip-link 文本保持在 top-40px，一旦该文本获得焦点，其 top 值就会设置为 0，从而变得可见。

#skip-link{
 position:absolute;
 top:-40px;
 left:0;
 padding:8px;
 color:black;
 z-index:9999;
}

#skip-link:focus{
  top:0
}
Enter fullscreen mode Exit fullscreen mode
  • 焦点控制- 文档有一个 activeElement 属性，用于返回当前获得焦点的元素。可以通过 CSS 伪类 :focus 来查询。
var focusElement = document.activeElement
Enter fullscreen mode Exit fullscreen mode
  • 制表 假设您的网站中有一个模态框，并且您只想在模态框内使用 Tab 键，那么 Tab 键陷阱功能就能帮您解决这个问题。请按照以下步骤实现 Tab 键陷阱功能。

1) 查找并选择模型中所有可聚焦的子模型，并将它们保存到一个数组中。

2) 找到模态框中的第一个和最后一个可按制表符的项。

3）监听键盘上的 Tab 键事件和Shift+Tab 键事件。如果向前移动且位于最后一个项目上，则聚焦到第一个项目上；同样，如果向后移动且位于第一个项目上，则聚焦到最后一个项目上。

if(document.activeElement === lastTabStop){
  e.preventDefault()
  firstTabStop.focus()
}
Enter fullscreen mode Exit fullscreen mode

屏幕阅读器

有很多基于不同操作系统的屏幕阅读器，例如 VoiceOver（Mac）、NVDA（Windows）等。实现屏幕阅读器辅助功能的方法有很多种。

1）替代文字——务必为图片添加替代文字。这有助于旁白理解图片类型。尽量编写准确的替代文字。

<img src="abc.png" alt="alternative text"/>
Enter fullscreen mode Exit fullscreen mode

alt=""（空字符串）故意跳过元素，并将 alt 属性中的字母转换为大写，逐个字母读取。

2) 隐藏元素- 您可以使用 CSS 类在视觉上隐藏元素，但在屏幕阅读器中显示元素。

.hidden {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
Enter fullscreen mode Exit fullscreen mode

3) 标签和ARIA标签

如果我们在标签和输入字段中定义相同的 for 和 id 属性，那么当屏幕阅读器将焦点移到输入字段时，它将播报标签文本（名称）。

<label for="username">Name</label>
<input type="text" id="username">
Enter fullscreen mode Exit fullscreen mode

4) aria-label - 此属性用于定义一个字符串，该字符串用于标记当前元素。当屏幕上不可见文本标签时，请使用此属性。

<a href="..." aria-label="Google url">
  Google
</a>
Enter fullscreen mode Exit fullscreen mode

因此，屏幕阅读器会播报：Google 网址链接

5) aria-labelledby - 此属性接受多个 ID，以空格分隔的列表形式指向页面上的其他元素。此功能使得 aria-labelledby 在视力正常的用户利用周围上下文信息来识别控件的情况下尤为有用。

<div id="myBillingId">Billing</div>
 <div>
  <div id="myNameId">Name</div>
  <input type="text" aria-labelledby="myBillingId myNameId">
 </div>
<div>
 <div id="myAddressId">Address</div>
 <input type="text" aria-labelledby="myBillingId myAddressId"/>
</div>
Enter fullscreen mode Exit fullscreen mode

因此，屏幕阅读器会播报：
账单姓名
账单地址

6) ARIA 角色- 它为菜单、轮播图等元素赋予含义，也有助于描述网页的结构。您可以在这里查看不同类型的角色。

<div id="header" role="banner">
<div id="nav"  role="navigation">
Enter fullscreen mode Exit fullscreen mode

7) ARIA CSS 选择器

.dropdown[aria-expanded="false"].icon::after{
   content:'>'
}
Enter fullscreen mode Exit fullscreen mode

8) aria-describedby - 此属性用于通过 ID 引用列表将描述信息附加到一个或多个元素。

<button aria-label="Close" aria-describedby="descriptionClose" 
    onclick  ​="myDialog.close()">X</button>
...
<div id="descriptionClose">Closing this window will discard any information entered and 
return you back to the main page</div>
Enter fullscreen mode Exit fullscreen mode

9) 实时区域- 当屏幕上动态内容过多，或者需要关注特定区域（如聊天、错误处理、通知等）时，此属性非常有用。

aria-live - 默认情况下此功能处于“关闭”状态，但我们也提供礼貌模式和自信模式。

10) aria-live="polite" - 启用此属性值后，辅助技术用户将收到元素任何更改的通知。通知将在下一个可用时间点发出，这意味着不会中断用户当前正在处理的任何任务或信息。

<fieldset>
 <legend>Planet information</legend>
 <label for="planetsSelect">Planet:</label>
 <select id="planetsSelect" aria-controls="planetInfo">
  <option value="">Select a planet</option>
  <option value="mercury">Mercury</option>
  <option value="venus">Venus</option>
</select>
<button id="renderPlanetInfoButton">Go</button>
</fieldset>

<div role="region" id="planetInfo" aria-live="polite">
 <h2 id="planetTitle">No planet selected</h2>
 <p id="planetDescription">Select a planet to view its description</p>
</div>

<p>
<small>Information courtesy 
<a href="https://en.wikipedia.org/wiki/Solar_System#Inner_Solar_System">Wikipedia</a></small>
</p>
Enter fullscreen mode Exit fullscreen mode

11)aria-live="assertive" - assertive 值会立即传达对元素的更改，中断用户当前正在处理的任何其他任务或信息。

<button onclick="document.getElementById('content').textContent = 'I have changed!'">
    Click me to change the content of the div element below
</button>

<div id="content" aria-live="assertive">
  My content will change
</div>
</div>
Enter fullscreen mode Exit fullscreen mode

12) aria-relevant - aria-relevant 设置提示哪些类型的更改是相关的，应该由辅助技术播报。任何不相关的更改都应视为该区域已设置 aria-live="off"，不应播报。

语义化 HTML

语义化 HTML 是实现良好无障碍实践的关键起点。它赋予网页意义，而不仅仅是外观。因此，始终建议使用语义标签来构建网页结构。

  • a) 结构语义标签
<header>
<main>
<article>
<aside>
<footer>
Enter fullscreen mode Exit fullscreen mode
  • b) 文本级语义标签
<strong>
<em>
<small>
Enter fullscreen mode Exit fullscreen mode 



### Contrast & Color<a name="chapter-10"></a>
Find colors that provide maximum contrast, including enough contrast between content and the background, so that text and non-decorative images are legible for anyone with low vision or color deficiencies.

**Best Practices**

**1) Ratio**: Text and interactive elements should have a color contrast ratio of at least 4.5:1.
**2) Color as indicator**: Color should not be the only indicator for interactive elements. For example, underline links on hover, or mark a required field with an asterisk.
**3) Color blindness**: Red/green color blindness is the most common, so avoid green on red or red on green. (Think especially about avoiding using red and green for “bad” and “good” indicators).

### Accessibility Developer Tools<a name="chapter-11"></a>

1) [Accessibility Developer Tools](https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb)

2) [axe](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd)

3) [total11y](https://khan.github.io/tota11y/) - an accessibility visualization toolkit

4) [ally](https://github.com/addyosmani/a11y)

### References<a name="chapter-12"></a>
https://www.w3.org/WAI/fundamentals/accessibility-intro/

https://webaim.org/standards/wcag/checklist

http://web-accessibility.carnegiemuseums.org/design/color/

https://frontendmasters.com/courses/web-accessibility/
Enter fullscreen mode Exit fullscreen mode
文章来源：https://dev.to/karkranikhil/web-accessibility-by-making-your-site-accessible-you-automatically-increase-the-target-audience-d8d
获得你的第一个软件开发实习机会！D...
加快 Android 项目的 Gr...