无障碍技术是指通过设计和开发无障碍产品和服务，让人们无论是否有残障都能够访问和使用。在 Web 网站中，无障碍技术可以帮助视力障碍者、听力障碍者、运动障碍者等人群更好地访问和使用网站。
HTML5 提供了很多新的无障碍技术，包括语义化标签、ARIA 属性等。在本文中，我们将介绍如何在 HTML5 中使用这些新的无障碍技术。
语义化标签
语义化标签是指具有特定含义的 HTML 标签，它们可以让浏览器和屏幕阅读器更好地理解页面内容。在 HTML5 中，新增了很多语义化标签，包括 header、nav、section、article、aside、footer 等。
header
header 标签用于表示页面或者页面中的一部分的页眉。例如，可以使用 header 标签来表示网站的标题和导航栏。
-- -------------------- ---- -------
--------
-------------
-----
----
------ --------------------
------ --------------------
------ ----------------------
-----
------
---------nav
nav 标签用于表示页面的导航部分。例如，可以使用 nav 标签来表示网站的导航栏。
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>section
section 标签用于表示页面中的一节内容。例如，可以使用 section 标签来表示新闻列表。
<section>
<h2>新闻</h2>
<ul>
<li><a href="#">新闻 1</a></li>
<li><a href="#">新闻 2</a></li>
<li><a href="#">新闻 3</a></li>
</ul>
</section>article
article 标签用于表示独立的文章内容。例如，可以使用 article 标签来表示新闻详情。
<article> <h2>新闻标题</h2> <p>新闻内容</p> </article>
aside
aside 标签用于表示页面中的附加内容，例如侧边栏。
<aside> <h2>广告</h2> <p>广告内容</p> </aside>
footer
footer 标签用于表示页面或者页面中的一部分的页脚。
<footer> <p>版权信息</p> </footer>
ARIA 属性
ARIA 属性是指 Accessible Rich Internet Applications 属性，它可以帮助开发人员在 HTML 元素中添加无障碍功能。在 HTML5 中，可以使用 ARIA 属性来使网站更加易于访问和使用。
aria-label
aria-label 属性可以为元素添加一个文本标签，用于描述元素的作用。例如，可以使用 aria-label 属性为一个按钮添加一个文本说明。
<button aria-label="搜索">搜索</button>
aria-describedby
aria-describedby 属性可以为元素添加一个文本标签，用于描述元素的详细信息。例如，可以使用 aria-describedby 属性为一个表单元素添加一个描述说明。
<label for="username">用户名</label> <input type="text" id="username" aria-describedby="username-help"> <p id="username-help">请输入您的用户名</p>
aria-hidden
aria-hidden 属性可以将元素从屏幕阅读器中隐藏。例如，可以使用 aria-hidden 属性将一个装饰性图片从屏幕阅读器中隐藏。
<img src="decorative.png" alt="" aria-hidden="true">
总结
在 HTML5 中，语义化标签和 ARIA 属性可以帮助开发人员创建无障碍网站，让更多的人能够访问和使用网站。通过使用这些新的无障碍技术，我们可以为残障人士提供更好的网站体验。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650f9cad95b1f8cacd84ea47