Html 什么是 HTML5 ARIA？

What is HTML5 ARIA?

提问by Subbu

What is HTML5 ARIA? I do not understand how to implement it.

什么是 HTML5 ARIA？我不明白如何实现它。

采纳答案by Franci Penov

WAI-ARIAis 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.

WAI-ARIA是定义对可访问 Web 应用程序的支持的规范。它定义了一堆标记扩展（主要作为 HTML5 元素的属性），Web 应用程序开发人员可以使用这些扩展来向屏幕阅读器等辅助技术提供有关各种元素语义的附加信息。当然，要让 ARIA 工作，解释标记的 HTTP 用户代理需要支持 ARIA，但规范的创建方式是允许下层用户代理安全地忽略特定于 ARIA 的标记而不影响网络应用程序的功能。

Here's an example from the ARIA spec:

以下是 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>

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).

请注意role外部<ul>元素上的属性。此属性不会以任何方式影响浏览器在屏幕上呈现标记的方式；然而，支持 ARIA 的浏览器会向呈现的 UI 元素添加特定于操作系统的可访问性信息，以便屏幕阅读器可以将其解释为菜单并使用足够的上下文大声朗读以供最终用户理解（例如，明确的“菜单”音频提示）并能够与之交互（例如，语音导航）。

回答by Ranhiru Jude Cooray

ARIA stands for Accessible Rich Internet Applications.

ARIA 代表可访问的富互联网应用程序。

WAI-ARIA is an incredibly powerful technology that allows developers to easily describe the purpose, state and other functionality of visually rich user interfaces - in a way that can be understood by Assistive Technology. WAI-ARIA has finally been integrated into the current working draft of the HTML 5 specification.

WAI-ARIA 是一项非常强大的技术，它允许开发人员以辅助技术可以理解的方式轻松描述视觉丰富的用户界面的目的、状态和其他功能。WAI-ARIA 终于被集成到 HTML 5 规范的当前工作草案中。

And if you are wondering what WAI-ARIA is, its the same thing.

如果你想知道 WAI-ARIA 是什么，它也是一样的。

Please note the terms WAI-ARIA and ARIA refer to the same thing. However, it is more correct to use WAI-ARIA to acknowledge its origins in WAI.

请注意术语 WAI-ARIA 和 ARIA 指的是同一件事。但是，使用 WAI-ARIA 来确认其起源于 WAI 更为正确。

WAI = Web Accessibility Initiative

WAI = 网络无障碍倡议

From the looks of it, ARIA is used for assistive technologies and mostly screen reading.

从它的外观来看，ARIA 用于辅助技术，主要用于屏幕阅读。

Most of your doubts will be cleared if you read this article

看完这篇文章，你的大部分疑惑都会迎刃而解

http://www.w3.org/TR/aria-in-html/

http://www.w3.org/TR/aria-in-html/

回答by Faisal Naseer

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.

WAI-ARIA 代表“Web Accessibility Initiative – Accessible Rich Internet Applications”。它是一组属性，用于帮助增强网站或 Web 应用程序的语义，以帮助辅助技术（例如盲人屏幕阅读器）理解某些非 HTML 原生的内容。暴露的信息范围很广，从简单的告诉屏幕阅读器激活链接或按钮只是显示或隐藏更多项目，到复杂的小部件，如整个菜单系统或分层树视图。

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.

这是通过将角色和状态属性应用于 HTML 4.01 或更高版本的标记来实现的，这些标记与布局或浏览器功能无关，但提供辅助技术的附加信息。

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.

WAI-ARIA 的基石之一是角色属性。它告诉浏览器告诉辅助技术所使用的 HTML 元素实际上并不是元素名称所暗示的，而是别的东西。虽然它最初只是一个 div 元素，但这个 div 元素可能是自动完成项目列表的容器，在这种情况下，“列表框”的角色将适合使用。同样，另一个 div 是该容器 div 的子级，并且包含单个选项项，然后应该获得“选项”的角色。两个div，但是通过角色，完全不同的意思。这些角色以常用的桌面应用程序对应物为模型。

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.

第二个基石是 WAI-ARIA 状态和属性。它们定义了某些本机或 WAI-ARIA 元素的状态，例如某些内容是否折叠或展开、是否需要表单元素、某些内容是否附有弹出菜单等。这些通常是动态的，并且在 Web 应用程序的整个生命周期中都会改变它们的值，并且通常通过 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.

WAI-ARIA 无意影响浏览器行为。与真正的按钮元素不同，例如，您将“按钮”的角色倾注到其上的 div 不会为您提供键盘可聚焦性、在按下 Space 或 Enter 时的自动单击处理程序，以及其他与按钮。浏览器本身不知道具有“按钮”作用的 div 是按钮，只有它的可访问性 API 部分知道。

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.

因此，这意味着您绝对必须自己实现桌面应用程序中已知的键盘导航、可聚焦性和其他行为模式。您可以在此处找到一些高级 ARIA 技术。

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.

是的，没错，本节先来！因为使用 WAI-ARIA 的第一条规则是：除非万不得已，否则不要使用它！您拥有的 WAI-ARIA 越少，使用原生 HTML 小部件的次数就越多，效果就越好！还有一些规则要遵循，您可以在此处查看。

回答by Krishna

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.

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 用户来说仍然只是一个图像。

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.

解决方案是创建一组属性，允许开发人员使用 UI 语义扩展 HTML。一组具有自定义功能并使用 ARIA 属性将这些功能映射到可访问性 API 的 HTML 元素的 ARIA 术语是“小部件”。ARIA 还为作者提供了一种记录内容本身角色的方法，这反过来又允许 AT 为内容构建替代导航机制，这些机制比阅读全文或仅遍历链接列表更容易使用。

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.

重要的是要记住，在简单的情况下，最好使用原生 HTML 控件并为其设置样式，而不是使用 ARIA。如果您不需要，那就不要重新发明轮子或复选框。

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 标记可以添加到现有站点，而不会改变主流用户的行为。这大大降低了修改和测试网站或应用程序的成本。

回答by user10

I ran some other question regarding ARIA. But it's content looks more promising for this question. would like to share them

我问了一些关于 ARIA 的其他问题。但是对于这个问题，它的内容看起来更有希望。想分享他们

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-* 属性。WAI-ARIA（可访问的富 Internet 应用程序）是一种提供定义动态 Web 内容和应用程序的方法，以便残障人士可以识别并成功与之交互。这是通过定义文档或应用程序结构的角色，或通过定义小部件角色、关系、状态或属性的 aria-* 属性来完成的。

ARIA use is recommended in the specifications to make HTML5 applications more accessible. When using semantic HTML5 elements, you should set their corresponding role.

规范中建议使用 ARIA 以使 HTML5 应用程序更易于访问。当使用语义 HTML5 元素时，你应该设置它们对应的角色。

And see this you tube videofor ARIA live.

看看这个你管的 ARIA 直播视频。