在网站和应用中，可调用的组件是用户界面的基本元素之一，例如按钮、链接、下拉菜单等。但是，对于身体残障人士来说，使用这些组件往往会带来很大的困难。因此，在设计可调用的组件时，必须考虑无障碍性问题。
本文将介绍可调用的组件无障碍性的重要性，并为设计者提供一些指导原则，以确保用户界面的可访问性和易用性。
为什么需要无障碍性？
在现代社会中，无障碍性已成为一项重要的公共责任。因为许多项目都是为许多不同类型的人设计的，例如身体残障人士、老年人、普通用户等。这就要求我们设计出尽可能适合不同用户的界面。
考虑下列情况：当我们使用可调用的组件时，它们的行为和状态是如何反馈给用户的？对于大多数用户来说，这可能不是一个问题，但对于盲人、色盲和使用屏幕阅读器等辅助设备的人而言，这是一个巨大的挑战。因此，设计一个无障碍的可调用组件意味着让不同类型的用户都可以使用它。
如何确保可调用的组件无障碍性？
基于以上原则，以下是一些设计者需要考虑的无障碍性要点：
1. 明确的状态反馈
可调用的组件应当提供明确的状态反馈。例如，当用户点击一个按钮时，组件应当提供一个视觉效果，表明它已被激活。对于盲人和色盲用户，这个视觉反馈无法传达。因此，我们需要在代码中使用一个aria属性，可以添加到标准HTML元素或自定义组件中，作为一个额外的、在布局中不可见的信息。这个属性应当提供一个可供屏幕阅读器读取的描述信息。
<button type="button" aria-pressed="true" aria-describedby="button-description">Button</button> <div id="button-description" hidden>This button is pressed</div>
在这个例子中，当按钮被点击时，aria-pressed属性被设为“true”，表示按钮已经激活。同时，在页面上隐藏了一个div元素，id为“button-description”，它包含了一个人类可读的状态描述，由屏幕阅读器来读取。
2. 快捷键
许多人无法使用鼠标，但可以使用键盘来浏览网站。因此，对于不同的可调用组件，应当设计可访问的键盘快捷键，以确保相同的操作也可以通过键盘执行。
<a href="#" role="button" onclick="doSomething()" accesskey="s">Search</a>
在这个例子中，accesskey属性被设置为“s”，这意味着用户可以通过按下键盘上的“Alt + s”组合键来触发该链接。
3. 聚焦和焦点顺序
通过tab键可以使用户在页面中移动焦点。焦点顺序应该是必须正确的，因为用户会按照标准顺序在页面上移动焦点。因此，对于可调用组件，应该将它们包含在正确的tab顺序中，并确保它们能够接受焦点。例如，当用户按下“Tab”键时，按钮或链接应该聚焦在合适的位置。
<a href="#" tabindex="2">Link 2</a> <a href="#" tabindex="1">Link 1</a>
在这个例子中，tabindex属性被设置为“1”和“2”，这意味着在按“Tab”键时，Link 1会首先获得焦点，然后是Link 2。
4. 根据语境设置标签
组件的标签应该根据其语境来进行适当的设置。例如，当一个按钮在执行某个操作时，其标签应当适当地描述这个操作。同时，应该尽可能地使用标准化的 HTML 标签，以便屏幕阅读器能够更好地理解组件的作用。
<button type="button" aria-label="Search">Search</button>
在这个例子中，aria-label属性被用来为按钮提供一个有意义的标签，其值为“Search”。
结论
对于可调用的组件，无障碍性非常重要，因为它能够让不同类型的用户更加方便地使用网站和应用程序。设计师需要考虑到以上指导原则，以确保用户体验友好和无障碍。后续的文章中，我们还将介绍更多可调用组件的无障碍性指南。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672dc55aeedcc8a97c85e239