什么是HTML5 ARIA？ [英] What is HTML5 ARIA?

问题描述

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

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

推荐答案

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

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.

以下是ARIA规范的一个示例：

Here's an example from the ARIA spec:

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

注意角色 code>< ul> 元素。此属性不会以任何方式影响浏览器在屏幕上呈现标记的方式;但是，支持ARIA的浏览器会将特定于操作系统的辅助功能信息添加到所呈现的UI元素中，以便屏幕阅读器可以将其解释为菜单并用足够的上下文为终端用户理解而朗读它（例如，显式菜单音频提示），并且能够与其进行交互（例如，语音导航）。

Note the role attribute 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).

这篇关于什么是HTML5 ARIA？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！