Web可访问性
#css #网络开发人员 #初学者 #a11y

人们具有各种能力，技能，工具，偏好和期望，可以影响他们使用网络的方式。

我想开始引用我通过Sheri Byrne-Haber找到的统计数据。

使用辅助技术的个人无法访问95％以上的网络，并且大约需要8秒钟的时间才能下定决心，以确定他们将继续还是放弃该网站或应用程序。

Web可访问性意味着网站，工具和技术是故意设计和开发的，以便残疾人可以使用它们。

创建可访问的网站和应用程序可显着吸引更多用户。

我们可以更好地与可能拥有的用户联系：

  • 永久残疾，例如视觉，移动性，认知或听觉障碍

  • 临时残疾，例如手指骨折或扭伤的用户或由于眼镜丢失或触点而导致的临时视力丧失

  • 情况障碍，例如，父母可能用一只手做饭，在试图在网站上下订单时将孩子握在另一只手臂上。或由于明亮的阳光而引起的低屏幕可见性

Web可访问性包含很大，我在本文末尾提供了更多信息，以获取更多信息。因为我只能在这里刮擦表面，所以我将重点关注3个主要的可访问性考虑。

1.可感知的内容

为非文本内容提供文本替代方案

信息图像：对于传达信息或内容的图像，提供简洁的描述性alt文本。

alt=”description of image”;

复杂的图像：如果图像很复杂，并且无法用几句话进行完全描述，请考虑通过aria-describedby或链接的描述提供更长的描述。

<button aria-describedby="delete-desc">Add Friend</button>

<p id="delete-desc">  Items that are deleted will be permanently removed immediately. Deleted items can no longer be accessed after deletion. </p>

aria-labelledby和aria-describedby参考其他元素来计算文本替代方案，但标签应该简洁，而描述旨在提供更多的详细信息；标签描述了对象的本质，而描述提供了用户可能需要的更多信息。

通过aria-describedby链接的元素不需要可见。即使隐藏该元素，也可以引用元素。例如，表单控件可以具有默认情况下隐藏的描述，该描述使用披露小部件（如“更多信息”图标）按请求显示。视力用户点击图标；对于辅助技术用户，直接使用aria-describedby引用了该表单字段的描述。

带有文本标签的图标：尽可能将图标与文本标签配对。这可以帮助患有不同类型残疾的用户了解上下文。另外，通常使用 ARIA标签：ARIA（代表可访问的Internet应用程序）标签，以提供有关图标或图形的其他信息，如有必要。

// The aria-label attribute defines a string value that labels an interactive element.
<button aria-label="Open" onclick="modal.open()">

2.可操作的用户界面

键盘可访问性

键盘可访问性是Web可访问性的一个基本方面。它确保有行动不便的人，尤其是那些无法使用鼠标的人，只能使用键盘输入来导航和与网站进行交互。

  • 良好的HTML语义
    包括适当使用nav，section，main和标签标签层次结构：h1 thru h6标签。这允许用户：

  • 跳过链接：
    在页面开头的“ TAB”键的跳过链接，使用户可以直接跳到main内容或重要部分，绕过导航菜单。

  • 选项卡顺序：
    以逻辑顺序排列元素的选项卡顺序，以反映视觉布局。用户应该能够以可预测和直观的方式导航内容。设置选项卡订单：tabindex="0"表示在任何正tabindex值之后，该元素应在顺序键盘导航中焦点。这些元素的焦点导航顺序由文档源中的订单定义。

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>
    <div class="overflow-hidden">
      <p>Click Here and start tabbing.</p>
      <label>First in tab order:<input type="text" /></label>
      <div tabindex="0">Tabbable due to tabindex 0.</div>
      <div>Not tabbable: no tabindex.</div>
      <label>Third in tab order:<input type="text" /></label>
      <div>Not tabbable: no tabindex AGAIN.</div>
      <div tabindex="0">Tabbable due to tabindex 0.</div>
      <div>Not tabbable: no tabindex AGAIN.</div>
      <div tabindex="-1">Not tabbable: due to tabindex -1 HERE.</div>
      <script src="./index.mjs" type="module"></script>
    </div>
  </body>
</html>
  • 重点指标： 当使用键盘突出显示时，请确保交互式元素（例如链接，按钮和表单字段）具有可见的焦点指示器。 focus-visible可帮助用户了解页面上的位置以及当前选择了哪些元素。 

input:focus-visible,
div:focus-visible {
  outline: 2px solid blueviolet;
  border-radius: 3px;
}

3.测试可访问性功能

  • 使用屏幕读取器测试网站或应用程序。这是加州大学旧金山加州大学的马克·萨顿（Mark Sutton）的出色屏幕阅读器演示：
    https://www.youtube.com/watch?v=dEbl5jvLKGQ

  • 测试类型颜色v。背景颜色带有对比检查器：https://webaim.org/resources/contrastchecker/

  • 使用自动检查器检查网站的可访问性：https://wave.webaim.org/

  • 在启动任何功能时，用户测试和获得反馈是理想的选择。确保让残疾用户参与测试。如果我们真正想确保用户可访问性，这将非常重要。

  • 继续收集反馈。随着这些技术的发展，继续与各种辅助技术进行改进和文本兼容性。

感谢您的阅读，我真的希望这很有帮助。

资源

W3C：https://www.w3.org/WAI/fundamentals/accessibility-intro/
快速参考：https://www.w3.org/WAI/WCAG21/quickref/
对比检查器：https://webaim.org/resources/contrastchecker/
WCAG 2：清单和标准：https://webaim.org/standards/wcag/checklist
ADA.GOV网络可访问性指南：https://www.ada.gov/resources/web-guidance/
UCSF屏幕读取器演示：https://www.youtube.com/watch?v=dEbl5jvLKGQ
残疾人第一次到达网站时检查什么：https://www.youtube.com/watch?v=xYl2lAX-BTM