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

问题描述

什么是 HTML5 ARIA?我不明白如何实现它.

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

推荐答案

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

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>

注意外部

元素上的 role 属性.该属性不会以任何方式影响浏览器在屏幕上呈现标记的方式；但是，支持 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屋！