从 HTML5 和 ARIA 开始构建无障碍网站

什么是无障碍网站

随着互联网的普及和成熟，越来越多的人开始借助互联网获取各种资源和服务，但是存在着一些身体上或智力上存在障碍的用户，例如盲人、聋人、手部受伤等人群，他们很难通过视觉和听觉获取信息和与网站进行交互，这就需要网站设计人员充分考虑此类用户的需求，构建无障碍的网站。

无障碍网站的特点包括：

• 易于访问：所有人都可以在相同的条件下使用网站，不受身体上或智力上的限制；
• 易于导航：用户可以轻松地找到所需信息，并通过各种方式进行交互；
• 易于理解：网站内容应该简单明了，易于理解。

HTML5 中的无障碍机制

HTML5 是一种新的网页标准，它为创建无障碍网站提供了很多有用的机制。下面是一些常用的 HTML5 无障碍机制。

使用语义化标签

语义化标签包括 <header>、<nav>、<section>、<article>、<aside> 和 <footer> 等，它们用于表示文档结构和内容，不仅为用户提供了更好的阅读体验，还有助于 Web 站点的无障碍性。

例如，我们可以使用 <nav> 标签来定义网站的导航栏：

-- -------------------- ---- -------
-----
  ----
    ------ ----------------------
    ------ --------------------------
    ------ --------------------------
    ------ -------------- -----------
    ------ ---------------- -----------
  -----
------

使用 alt 属性

对于所有的图片标签 <img>，都应该添加 alt 属性，以便屏幕阅读器能够描述图片内容。如果图片只是用于装饰，可以将 alt 属性设置为空字符串。

<img src="example.jpg" alt="一只可爱的小狗">

使用表单元素

表单元素是与用户交互最频繁的元素，因此必须用正确的方式使用它们。在表单元素中，我们需要为所有标签添加 label 标签，以便屏幕阅读器能够准确地描述表单的作用。

<label for="username">用户名：</label>
<input type="text" id="username" name="username">

ARIA 标准

ARIA（Accessible Rich Internet Applications）是一组用于 Web 应用程序的辅助功能标准，它提供了更广泛的辅助功能和语义，使得用户能够更轻松地交互网站。

以下是最常用的 ARIA 标准：

role 属性

role 属性用于描述元素在页面上的角色，例如 role="button" 标记按钮元素，屏幕阅读器可以通过该属性描述按钮的作用。

<div role="button">点击我</div>

aria-labelledby 和 aria-describedby 属性

在某些情况下，存在多个元素需要描述相同的概念，这时候可以使用 aria-labelledby 和 aria-describedby 属性，用于描述元素的关联关系。

<p id="message">请输入用户名和密码</p>
<form aria-labelledby="message">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" aria-describedby="message">
  <label for="password">密码：</label>
  <input type="password" id="password" name="password" aria-describedby="message">
</form>

aria-expanded 和 aria-checked 属性

aria-expanded 和 aria-checked 属性用于描述元素的状态，例如展开或折叠、选中或未选中等。

<button aria-expanded="true">展开</button>
<input type="checkbox" aria-checked="true">选中

总结

无障碍网站可以为所有用户提供更好的体验和选择，而不仅仅是那些没有身体或智力限制的人。掌握 HTML5 和 ARIA 标准是创建无障碍 Web 站点的关键，我们应该时刻关注网站的可访问性，并为所有用户构建一个无障碍且友好的网站。

参考文献

• Web Content Accessibility Guidelines (WCAG) 2.1
• ARIA in HTML
• Creating Accessible HTML5 Forms
• How to Meet WCAG (Quick Reference)

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646024bc968c7c53b01ed7f4