什么是 HTML5 ARIA？我不明白如何实现它。
【问题讨论】：
标签： html accessibility wai-aria
WAI-ARIA 是定义对可访问网络应用程序支持的规范。它定义了一堆标记扩展（主要作为 HTML5 元素上的属性），Web 应用程序开发人员可以使用这些扩展向屏幕阅读器等辅助技术提供有关各种元素语义的附加信息。当然，要使 ARIA 工作，解释标记的 HTTP 用户代理需要支持 ARIA，但规范是以这样一种方式创建的，即允许下级用户代理安全地忽略 ARIA 特定标记而不影响网络应用的功能。
这是来自 ARIA 规范的示例：
<ul role="menubar">
<!-- Rule 2A: "File" label via aria-labelledby -->
<li role="menuitem" aria-haspopup="true" aria-labelledby="fileLabel"><span id="fileLabel">File</span>
<ul role="menu">
<!-- Rule 2C: "New" label via Namefrom:contents -->
<li role="menuitem" aria-haspopup="false">New</li>
<li role="menuitem" aria-haspopup="false">Open…</li>
...
</ul>
</li>
...
</ul>
注意外部<ul> 元素上的role 属性。此属性不会以任何方式影响浏览器在屏幕上呈现标记的方式；但是，支持 ARIA 的浏览器会将特定于操作系统的可访问性信息添加到呈现的 UI 元素中，以便屏幕阅读器可以将其解释为菜单并在足够的上下文中大声朗读以供最终用户理解（例如，显式“菜单”音频提示）并能够与之交互（例如，语音导航）。
【讨论】：
aria 专门用于可访问性，不应用于存储随机数据。 data 用于应用程序需要与节点关联的随机数据。
role="menu" 和 "menuitem" 对 APPS 是正确的（= 带有 File > Open 或 Edit > Copy to clipboard 等菜单的软件。对于经典网站来说，最好保持平常<ul>（默认为角色列表）因为您只提供指向其他网页的链接，没有“保存”或“复制/粘贴”等功能。如果您使用的是role="menu"，您还必须添加支持以导航菜单with arrow keys of your keyboard as usual software/app menus
ARIA 代表 Accessible Rich Internet Applications。
WAI-ARIA 是一项非常强大的技术，它允许开发人员以一种辅助技术可以理解的方式轻松描述视觉丰富的用户界面的目的、状态和其他功能。 WAI-ARIA 终于被集成到 HTML 5 规范的当前工作草案中。
如果您想知道 WAI-ARIA 是什么，那也是一回事。
请注意术语 WAI-ARIA 和 ARIA 指的是同一事物。但是，使用 WAI-ARIA 来确认其起源于 WAI 更为正确。
WAI = 无障碍网页倡议
从表面上看，ARIA 用于辅助技术，主要用于屏幕阅读。
如果你读了这篇文章，你的大部分疑惑都会被清除
【讨论】：
这是什么？
WAI-ARIA 代表“Web Accessibility Initiative – Accessible Rich Internet Applications”。它是一组属性，可帮助增强网站或 Web 应用程序的语义，以帮助辅助技术（例如盲人屏幕阅读器）理解某些非 HTML 原生内容。暴露的信息范围很广，从告诉屏幕阅读器激活链接或按钮只是显示或隐藏更多项目这样简单的事情，到像整个菜单系统或分层树视图这样复杂的小部件。
这是通过将角色和状态属性应用于 HTML 4.01 或更高版本的标记来实现的，这些标记与布局或浏览器功能无关，但为辅助技术提供了附加信息。
WAI-ARIA 的一个基石是角色属性。它告诉浏览器告诉辅助技术所使用的 HTML 元素实际上并不是元素名称所暗示的，而是别的东西。虽然它最初只是一个 div 元素，但这个 div 元素可能是自动完成项目列表的容器，在这种情况下，“listbox”角色将适合使用。同样，另一个 div 是该容器 div 的子项，并且包含单个选项项，然后应该获得“选项”角色。两个div，但是通过角色，意义完全不同。这些角色以常用的桌面应用程序对应物为模型。
文档地标角色是一个例外，它不会改变相关元素的实际含义，但会提供有关文档中此特定位置的信息。
第二个基石是 WAI-ARIA 状态和属性。它们定义了某些本机或 WAI-ARIA 元素的状态，例如是否折叠或展开某些内容、需要表单元素、是否附加了弹出菜单等。这些通常是动态的，并且在 Web 应用程序的整个生命周期中都会更改其值，并且通常通过 JavaScript 进行操作。
不是什么？
WAI-ARIA 并非旨在影响浏览器行为。与真正的按钮元素不同，例如，您将“按钮”角色倾注到一个 div 上并不会为您提供键盘可聚焦性、按下 Space 或 Enter 时的自动单击处理程序，以及其他对按钮。浏览器本身并不知道具有“按钮”角色的 div 是按钮，只有其可访问性 API 部分知道。
因此，这意味着您必须自己实现键盘导航、可聚焦性和其他桌面应用程序已知的行为模式。您可以找到一些高级 ARIA 技术Here。
什么时候不应该使用它？
是的，没错，这部分是第一位的！因为使用 WAI-ARIA 的第一条规则是：除非万不得已，否则不要使用它！你拥有的 WAI-ARIA 越少，你就越能依靠使用原生 HTML 小部件，更好的！还有一些规则要遵守，你可以查看here。
【讨论】：
什么是 ARIA？
ARIA 的出现是为了解决使用用于文档的标记语言 HTML 构建用户界面 (UI) 的可访问性问题。 HTML 包含许多处理文档的功能（P、h3、UL、TABLE），但只有基本的 UI 元素，例如 A、INPUT 和 BUTTON。 Windows 和其他操作系统支持允许（辅助技术）AT 访问 UI 控件功能的 API。 Internet Explorer 和其他浏览器将原生 HTML 元素映射到无障碍 API，但 html 控件不如桌面操作系统上常见的控件丰富，对于现代 Web 应用程序来说还不够 自定义控件可以扩展 html 元素以提供丰富的现代 Web 应用程序所需的 UI。在 ARIA 之前，浏览器无法将这种额外的丰富性暴露给可访问性 API 或 AT。此问题的典型示例是向图像添加点击处理程序。它创建了对鼠标用户来说似乎是可点击的按钮，但对键盘或 AT 用户来说仍然只是一个图像。
解决方案是创建一组属性，允许开发人员使用 UI 语义扩展 HTML。一组具有自定义功能并使用 ARIA 属性将这些功能映射到可访问性 API 的 HTML 元素的 ARIA 术语是“Widget。 ARIA 还为作者提供了一种记录内容本身角色的方法，这反过来又允许 AT 为内容构建替代导航机制，这比阅读全文或仅遍历链接列表更容易使用。
重要的是要记住，在简单的情况下，最好使用原生 HTML 控件并为其设置样式，而不是使用 ARIA。那就是不要重新发明轮子或复选框，如果你不需要的话。
幸运的是，ARIA 标记可以添加到现有网站，而不会改变主流用户的行为。这大大降低了修改和测试网站或应用程序的成本。
【讨论】：
我提出了一些关于 ARIA 的其他问题。但是对于这个问题，它的内容看起来更有希望。想分享他们
什么是 ARIA？
如果您努力让具有各种不同浏览习惯和身体残疾的用户能够访问您的网站，您可能会认识到角色和 aria-* 属性。 WAI-ARIA（可访问的富 Internet 应用程序）是一种提供定义动态 Web 内容和应用程序的方法的方法，以便残障人士能够识别并成功与之交互。这是通过定义文档或应用程序结构的角色或通过定义小部件角色、关系、状态或属性的 aria-* 属性来完成的。
规范中建议使用 ARIA，以使 HTML5 应用程序更易于访问。使用语义 HTML5 元素时，应设置其对应的角色。
看到这个you tube video 的 ARIA 直播。
【讨论】：