什么是 HTML5 ARIA？
什么是 HTML5 ARIA？我不明白如何实施它。
What is HTML5 ARIA? I do not understand how to implement it.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
什么是 HTML5 ARIA？我不明白如何实施它。
What is HTML5 ARIA? I do not understand how to implement it.
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
发布评论
评论（5）
WAI-ARIA 是定义对可访问 Web 应用程序的支持的规范。它定义了一堆标记扩展（主要是 HTML5 元素上的属性），Web 应用程序开发人员可以使用这些扩展来向屏幕阅读器等辅助技术提供有关各种元素语义的附加信息。当然，要使 ARIA 正常工作，解释标记的 HTTP 用户代理需要支持 ARIA，但规范的创建方式是允许下层用户代理安全地忽略特定于 ARIA 的标记，而不影响网络应用程序的功能。
以下是 ARIA 规范中的示例：
请注意外部
元素上的role属性。此属性不会以任何方式影响浏览器在屏幕上呈现标记的方式；但是，支持 ARIA 的浏览器会将特定于操作系统的辅助功能信息添加到呈现的 UI 元素中，以便屏幕阅读器可以将其解释为菜单，并在足够的上下文中大声朗读，以便最终用户理解（例如，显式的“菜单”音频提示）并能够与其交互（例如，语音导航）。WAI-ARIA is a spec defining support for accessible web apps. It defines bunch of markup extensions (mostly as attributes on HTML5 elements), which can be used by the web app developer to provide additional information about the semantics of the various elements to assistive technologies like screen readers. Of course, for ARIA to work, the HTTP user agent that interprets the markup needs to support ARIA, but the spec is created in such a way, as to allow down-level user agents to ignore the ARIA-specific markup safely without affecting the web app's functionality.
Here's an example from the ARIA spec:
Note the
roleattribute on the outer<ul>element. This attribute does not affect in any way how the markup is rendered on the screen by the browser; however, browsers that support ARIA will add OS-specific accessibility information to the rendered UI element, so that the screen reader can interpret it as a menu and read it aloud with enough context for the end-user to understand (for example, an explicit "menu" audio hint) and is able to interact with it (for example, voice navigation).ARIA 代表可访问的富互联网应用程序。
如果您想知道 WAI-ARIA 是什么，那也是一样的。
WAI = Web Accessibility Initiative
从表面上看，ARIA 用于辅助技术，主要用于屏幕阅读。
您的大部分疑虑都会得到解答
如果您阅读这篇文章http://www.w3， 。 org/TR/aria-in-html/
ARIA stands for Accessible Rich Internet Applications.
And if you are wondering what WAI-ARIA is, its the same thing.
WAI = Web Accessibility Initiative
From the looks of it, ARIA is used for assistive technologies and mostly screen reading.
Most of your doubts will be cleared if you read this article
http://www.w3.org/TR/aria-in-html/
它是什么？
WAI-ARIA 代表“Web Accessibility Initiative – Accessible Rich Internet Applications”。。它是一组属性，可帮助增强网站或 Web 应用程序的语义，以帮助辅助技术（例如盲人屏幕阅读器）理解某些非 HTML 原生的内容。公开的信息范围很广，从简单的告诉屏幕阅读器激活链接或按钮只是显示或隐藏更多项目，到复杂的小部件，如整个菜单系统或分层树视图。
这是通过将角色和状态属性应用于 HTML 4.01 或更高版本的标记来实现的，这些标记与布局或浏览器功能无关，但为辅助技术提供了附加信息。
WAI-ARIA 的基石之一是角色属性。它告诉浏览器告诉辅助技术所使用的 HTML 元素实际上并不是元素名称所暗示的内容，而是其他内容。虽然它最初只是一个 div 元素，但该 div 元素可能是自动完成项目列表的容器，在这种情况下，适合使用“列表框”角色。同样，作为该容器 div 的子级且包含单个选项项的另一个 div 应该获得“选项”角色。两个div，但是通过角色，意义完全不同。这些角色是根据常用的桌面应用程序对应角色建模的。
文档地标角色是一个例外，它不会改变相关元素的实际含义，但提供有关文档中此特定位置的信息。
第二块基石是 WAI-ARIA 状态和属性。它们定义某些本机或 WAI-ARIA 元素的状态，例如某些内容是否折叠或展开、需要表单元素、某些内容附加了弹出菜单等。这些通常是动态的，并在 Web 应用程序的整个生命周期中更改其值，并且通常通过 JavaScript 进行操作。
它不是什么？
WAI-ARIA 无意影响浏览器行为。例如，与真正的按钮元素不同，您将“按钮”角色倒入的 div 不会为您提供键盘可聚焦性、按下空格键或 Enter 时的自动单击处理程序以及其他固有的属性。按钮。浏览器本身并不知道角色为“button”的 div 是一个按钮，只有其可访问性 API 部分知道。
因此，这意味着您绝对必须自己实现桌面应用程序中已知的键盘导航、可聚焦性和其他行为模式。您可以找到一些高级 ARIA 技术 这里。
什么时候不应该使用它？
是的，没错，这部分是第一位的！因为使用 WAI-ARIA 的第一条规则是：除非绝对必要，否则不要使用它！您拥有的 WAI-ARIA 越少，并且您越可以信赖使用本机 HTML 小部件，更好的！还有更多规则需要遵循，您可以在此处查看。
What is it?
WAI-ARIA stands for “Web Accessibility Initiative – Accessible Rich Internet Applications”. It is a set of attributes to help enhance the semantics of a web site or web application to help assistive technologies, such as screen readers for the blind, make sense of certain things that are not native to HTML. The information exposed can range from something as simple as telling a screen reader that activating a link or button just showed or hid more items, to widgets as complex as whole menu systems or hierarchical tree views.
This is achieved by applying roles and state attributes to HTML 4.01 or later markup that has no bearing on layout or browser functionality, but provides additional information for assistive technologies.
One corner stone of WAI-ARIA is the role attribute. It tells the browser to tell the assistive technology that the HTML element used is not actually what the element name suggests, but something else. While it originally is only a div element, this div element may be the container to a list of auto-complete items, in which case a role of “listbox” would be appropriate to use. Likewise, another div that is a child of that container div, and which contains a single option item, should then get a role of “option”. Two divs, but through the roles, totally different meaning. The roles are modeled after commonly used desktop application counterparts.
An exception to this are document landmark roles, which don’t change the actual meaning of the element in question, but provide information about this particular place in a document.
The second corner stone are WAI-ARIA states and properties. They define the state of certain native or WAI-ARIA elements such as if something is collapsed or expanded, a form element is required, something has a popup menu attached to it or the like. These are often dynamic and change their values throughout the lifecycle of a web application, and are usually manipulated via JavaScript.
What is it not?
WAI-ARIA is not intended to influence browser behavior. Unlike a real button element, for example, a div which you pour the role of “button” onto does not give you keyboard focusability, an automatic click handler when Space or Enter are being pressed on it, and other properties that are indiginous to a button. The browser itself does not know that a div with role of “button” is a button, only its accessibility API portion does.
As a consequence, this means that you absolutely have to implement keyboard navigation, focusability and other behavioural patterns known from desktop applications yourself. You can find some Advanced ARIA techniques Here.
When should I not use it?
Yes, that’s correct, this section comes first! Because the first rule of using WAI-ARIA is: Don’t use it unless you absolutely have to! The less WAI-ARIA you have, and the more you can count on using native HTML widgets, the better! There are some more rules to follow, you can check them out here.
什么是 ARIA？
ARIA 的出现是为了解决使用用于文档的标记语言 HTML 来构建用户界面 (UI) 的可访问性问题。 HTML 包含大量处理文档的功能（P、h3、UL、TABLE），但仅包含基本的 UI 元素，例如 A、INPUT 和 BUTTON。 Windows 和其他操作系统支持 API，允许（辅助技术）AT 访问 UI 控件的功能。 Internet Explorer 和其他浏览器将本机 HTML 元素映射到辅助功能 API，但 html 控件不如桌面操作系统上常见的控件丰富，对于现代 Web 应用程序来说还不够。 自定义控件可以扩展 html 元素以提供丰富的功能现代 Web 应用程序所需的 UI。在 ARIA 之前，浏览器无法向可访问性 API 或 AT 公开这种额外的丰富性。此问题的典型示例是向图像添加点击处理程序。它创建的内容对于鼠标用户来说似乎是一个可点击的按钮，但对于键盘或 AT 用户来说仍然只是一个图像。
解决方案是创建一组属性，允许开发人员使用 UI 语义扩展 HTML。 ARIA 术语是指一组具有自定义功能并使用 ARIA 属性将这些功能映射到辅助功能 API 的 HTML 元素，称为“Widget”。 ARIA 还为作者提供了一种记录内容本身作用的方法，这反过来又允许 AT 为内容构建替代导航机制，这比阅读全文或仅迭代链接列表更容易使用。
重要的是要记住，在简单的情况下，最好使用本机 HTML 控件并设置它们的样式，而不是使用 ARIA。也就是说，如果不需要的话，不要重新发明轮子或复选框。
幸运的是，ARIA 标记可以添加到现有站点，而无需改变主流用户的行为。这大大降低了修改和测试网站或应用程序的成本。
What is ARIA?
ARIA emerged as a way to address the accessibility problem of using a markup language intended for documents, HTML, to build user interfaces (UI). HTML includes a great many features to deal with documents (P, h3,UL,TABLE) but only basic UI elements such as A, INPUT and BUTTON. Windows and other operating systems support APIs that allow (Assistive Technology) AT to access the functionality of UI controls. Internet Explorer and other browsers map the native HTML elements to the accessibility API, but the html controls are not as rich as the controls common on desktop operating systems, and are not enough for modern web applications Custom controls can extend html elements to provide the rich UI needed for modern web applications. Before ARIA, the browser had no way to expose this extra richness to the accessibility API or AT. The classic example of this issue is adding a click handler to an image. It creates what appears to be a clickable button to a mouse user, but is still just an image to a keyboard or AT user.
The solution was to create a set of attributes that allow developers to extend HTML with UI semantics. The ARIA term for a group of HTML elements that have custom functionality and use ARIA attributes to map these functions to accessibility APIs is a “Widget. ARIA also provides a means for authors to document the role of content itself, which in turn, allows AT to construct alternate navigation mechanisms for the content that are much easier to use than reading the full text or only iterating over a list of the links.
It is important to remember that in simple cases, it is much preferred to use native HTML controls and style them rather than using ARIA. That is don’t reinvent wheels, or checkboxes, if you don’t have to.
Fortunately, ARIA markup can be added to existing sites without changing the behavior for mainstream users. This greatly reduces the cost of modifying and testing the website or application.
我提出了一些有关 ARIA 的其他问题。但它的内容对于这个问题来说看起来更有希望。想要分享它们
ARIA 是什么？
如果您努力让具有各种不同浏览习惯和身体残疾的用户可以访问您的网站，您可能会认识到角色和 aria-* 属性。 WAI-ARIA（可访问的富互联网应用程序）是一种提供定义动态 Web 内容和应用程序的方法，以便残障人士可以识别并成功与之交互。这是通过定义文档或应用程序结构的角色，或通过定义小部件角色、关系、状态或属性的 aria-* 属性来完成的。
规范中建议使用 ARIA，以使 HTML5 应用程序更易于访问。当使用语义HTML5元素时，应该设置它们相应的角色。
请观看此 YouTube 视频的 ARIA 直播。
I ran some other question regarding ARIA. But it's content looks more promising for this question. would like to share them
What is ARIA?
If you put effort into making your website accessible to users with a variety of different browsing habits and physical disabilities, you'll likely recognize the role and aria-* attributes. WAI-ARIA (Accessible Rich Internet Applications) is a method of providing ways to define your dynamic web content and applications so that people with disabilities can identify and successfully interact with it. This is done through roles that define the structure of the document or application, or through aria-* attributes defining a widget-role, relationship, state, or property.
ARIA use is recommended in the specifications to make HTML5 applications more accessible. When using semantic HTML5 elements, you should set their corresponding role.
And see this you tube video for ARIA live.