如何在 React 中将一个 div 变成一个可访问的按钮
如何在 React 中将一个 div 变成一个可访问的按钮
创建可访问的按钮
在 React 中，通常通过添加一个按钮来制作一个按钮 点击 事件到一个不是 <button> .
创建按钮时偷工减料会损害用户体验，尤其是在可访问性方面。使用键盘、屏幕阅读器或其他辅助技术使用该网站的人可能无法与该按钮进行交互。
本文将分解非语义按钮创建的问题，并逐步解释如何创建一个功能强大且可访问的按钮。
Not an accessible button
是什么让按钮可访问？
可访问的按钮具有焦点，可以通过 Space 和 Enter 键激活。此外，按钮的作用是 '按钮' 并且有一个可访问的名称。
示例中的按钮可能看起来像一个按钮，但它不可访问。屏幕阅读器不会将该元素识别为按钮，因此屏幕阅读器不会将该元素作为按钮呈现给用户。使用键盘导航网页的人将无法与元素交互。只有使用鼠标浏览网页的人才能激活该按钮。
改变一个的最好方法 div 变成一个按钮
理想情况下，您可以通过交换使按钮可访问 <div> 和 <button> .
开箱即用，更新后的按钮可通过键盘访问，具有可见的焦点状态，并且可以由屏幕阅读器宣布。
如何删除默认按钮样式
这 <button> 元素包含默认样式，所以这个按钮看起来与第一个示例中的按钮有点不同。我们可以从按钮中删除一些默认样式。
我不建议删除 大纲 按钮样式的属性。
该属性为按钮提供可见的焦点状态。 WCAG 成功标准 2.4.7 指定交互元素必须具有可见的焦点指示器。焦点状态突出显示交互元素。它可以帮助使用键盘导航页面的人找到他们在页面上的位置。
您可以依靠浏览器来获得默认的焦点轮廓，也可以自己设计。如果你自己设计，为了造型满足 WCAG 成功标准 1.4.11 ，请确保元素的焦点轮廓与背景颜色的对比度至少为 3:1。
为什么使用 div 而不是按钮？
同样，我建议使用 HTML <button> 尽可能使用元素，而不是创建自己的按钮。但是，有时由于限制，您必须凑合着使用 <div> 或其他非按钮元素。例如，如果您正在使用的应用程序使用不使用语义按钮元素作为按钮的 UI 库，则您可能需要向元素添加属性以使其可访问。
如何将 div 转换为可访问的按钮？
1.添加角色='按钮'
有必要添加 角色='按钮' 以便辅助技术可以将元素作为按钮呈现给用户。
Non-accessible button with role=’button’
虽然 按钮角色 允许屏幕阅读器将元素识别为按钮，角色不赋予元素按钮功能。
VoiceOver presenting a list of elements with role=’button’
按钮是用户可以使用鼠标、手指、键盘、语音命令或其他辅助技术触发的交互式 HTML 元素。使用按钮角色，元素现在被屏幕阅读器识别为按钮；但是，它不能通过键盘访问。
2.添加tabIndex='0'
表索引 使元素可通过键盘聚焦。通过添加 标签索引='0' ，该按钮可通过键盘访问。
Non-accessible button with tabIndex=’0'
现在，按钮具有焦点状态，但键盘无法激活按钮。必须将键盘事件处理程序添加到元素。
3.添加键盘事件处理程序
因为预计 Enter 和 Space 键会触发 点击 对于可访问按钮的事件，我们需要添加按下任一键触发按钮的功能。我们可以通过添加事件来做到这一点 onKeyDown 到按钮。这 onKeyDown 按下任何键但在浏览器处理该键之前触发事件。由于 Space 键默认触发页面滚动，我们需要使用 防止默认 中的方法 onKeyDown 功能。这 防止默认 方法取消触发的键，这是可能的，因为 onKeyDown 在浏览器处理触发的键之前触发事件。
An accessible button
4.禁用状态
当按钮的操作不可用时，您可能希望禁用它，以便用户无法与之交互。当。。。的时候 <button> 元素具有属性 禁用=真 ， 这 <button> 不是键盘可聚焦的，并且覆盖有不透明度。
需要注意的是 禁用按钮有缺点 例如不通知用户为什么按钮被禁用并且不能被键盘聚焦。但是，在某些用例中，包含禁用的按钮可以正常工作，例如防止用户意外提交表单两次。
为了 <div> 我们已经变成了一个可访问的按钮，在视觉上它可以通过样式设置为禁用状态。
添加 指针事件：无； 使按钮不可点击。但是，按钮仍然具有焦点状态。为了使它不是键盘可聚焦的， 标签索引 需要从 0 更改为 -1。最后，我们需要添加属性 咏叹调禁用='真' 以便屏幕阅读器向用户显示该按钮已禁用。
Disabled button
这些步骤使元素的禁用状态类似于 禁用 的状态 <button> 元素。但是，有一些方法可以 禁用的按钮可以更具包容性 ，例如使按钮可聚焦并显示帮助文本来解释为什么禁用按钮。
结论
创建可访问的按钮可确保所有用户都可以与按钮进行交互，无论他们的能力如何。重要的是可以使用键盘激活按钮，并且辅助技术将元素识别为按钮。
我希望，在阅读本文后，您可以检查您网站上的按钮是否可以访问。如果它们缺少属性，例如屏幕阅读器无法识别或需要可见的焦点状态，请务必进行适当的更改，以便可以访问它们。当您使您的网站易于访问时，它会改善每个人的用户体验。
资源
- ARIA 创作实践指南：按钮
- WCAG 成功标准 2.4.7 焦点可见 2.4.7
- WCAG 成功标准 1.4.11 非文本对比
- 关于 ARIA 的 MDN 文档：按钮角色
- MDN 文档
- 可访问性的 Button vs Div
- 令人沮丧的设计模式：禁用按钮
- 使禁用按钮更具包容性
- 设计 CSS 按钮：技术和资源
- 按钮设计的 7 条基本规则
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
