10.1 Accessibility
可访问性 (accessibility) 是现代网页设计中的一个重要部分。它旨在确保所有用户，包括有障碍的用户，可以轻松地与网页互动。
实现这一目标的关键工具之一是 ARIA 属性 (Accessible Rich Internet Applications)，它们通过让内容更易于理解来增强网页的可访问性，帮助辅助技术如屏幕阅读器更好地理解和与网页交互。
什么是 ARIA?
ARIA (Accessible Rich Internet Applications) 是一组特殊的属性，可以添加到 HTML 元素中以改善其可访问性。这些属性提供了有关元素结构和行为的额外信息，帮助辅助技术更好地解释和互动网页内容。
提升文本可读性的主要 ARIA 属性：
aria-label 属性
aria-label 属性用于为元素提供文本标签，供屏幕阅读器读出。这个属性在元素没有可见标签或需要更详细描述时特别有用。
使用示例：
<button aria-label="关闭对话框">X</button>
aria-labelledby 属性
aria-labelledby 属性通过使用标签的 id 将元素与页面上的其他标签关联起来。这在需要关联元素与已经存在的标签时提供了上下文和描述。
使用示例：
<h2 id="section-title">部分标题</h2>
<p aria-labelledby="section-title">这是一段与部分标题相关的文本。</p>
aria-describedby 属性
aria-describedby 属性使用其 id 将元素与一个或多个包含描述的元素关联起来。这个属性有助于为元素提供额外的信息或上下文。
使用示例：
<input type="text" aria-describedby="input-description">
<p id="input-description">输入您的姓名。</p>
10.2 Role
role 属性
role 属性定义了元素的角色，告诉辅助技术如何解释该元素。存在许多角色，比如 button, navigation, main, article 等。
使用示例：
<nav role="navigation">
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#about">关于我们</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</nav>
aria-live 属性
aria-live 属性用于动态更新的内容。它告知屏幕阅读器，元素内的内容已更改并需要播报。值包括 off, polite 和 assertive。
使用示例：
<div aria-live="polite">
<p>这里将展示重要信息。</p>
</div>
aria-hidden 属性
aria-hidden 属性指示辅助技术元素是否应对用户可访问。值 true 会将元素隐藏于辅助技术中，而 false 则使其可访问。
使用示例：
<div aria-hidden="true">
<p>这个文本将对屏幕阅读器不可见。</p>
</div>
aria-expanded 属性
aria-expanded 属性指示元素是展开还是折叠。在控件元素如 "accordion" 和下拉菜单中经常使用。
使用示例：
<button aria-expanded="false" aria-controls="menu">菜单</button>
<ul id="menu" hidden>
<li><a href="#item1">元素 1</a></li>
<li><a href="#item2">元素 2</a></li>
<li><a href="#item3">元素 3</a></li>
</ul>
aria-controls 属性
aria-controls 属性指示哪个元素由当前元素控制。它与 aria-expanded 等属性配合使用，以创建交互式控件。
使用示例：
<button aria-controls="content" aria-expanded="false">显示/隐藏</button>
<div id="content" hidden>
<p>隐藏内容。</p>
</div>
GO TO FULL VERSION