aria

最新推荐文章于 2025-09-11 21:09:27 发布

转载最新推荐文章于 2025-09-11 21:09:27 发布 · 85 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c1908be6fb9a049c9659da8

文章标签：

#ui

本文探讨了ARIA（Accessible Rich Internet Applications）1.0与1.1规范在提升网页无障碍性方面的作用，包括如何使用ARIA角色和状态来增强自定义控件的可访问性，例如自定义复选框和开关按钮。强调了在创建自定义小部件时，正确结合使用role和tabindex属性的重要性，以及如何为仅包含图片的按钮添加替代文本。

ARIA：ARIA 1.0 规范：www.w3.org/TR/wai-aria… (英)ARIA 1.1 规范：www.w3.org/TR/wai-aria… (英)aria可以表达html中不存在的语义UI强烈建议使用原生元素ARIA使用（此列子纯粹面向方法，并不建议使用）：自定义复选框，自己定意的div标签checkbox加入“role=“checkbox aria-checked=“true/false””,屏幕阅读器即可读出role和state信息，aria的角色修改了无障碍树（DOM+aria），但没有修改元素表现、元素行为，没有添加聚焦和键盘事件。role="switch"可为button作开关角色确保创建自定义小部件的时候，始终将role属性应用在tabindex属性的同一位置，以便键盘事件出现在正确位置树列表

为只有图片的按钮添加替代文本

控制特定部分是否可见

屏幕阅读器提醒

转载于:https://juejin.im/post/5c1908be6fb9a049c9659da8