•  28-09-2019
  •  | 
  •  

题

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

有帮助吗？

解决方案

Wai-aria 是定义可访问的Web应用程序的规格。它定义了一系列标记扩展（主要是HTML5元素上的属性），Web应用程序开发人员可以使用它们来提供有关各种元素语义的其他信息，以辅助技术等屏幕阅读器等技术。当然，要使ARIA工作，可以解释标记需要支持ARIA的HTTP用户代理，但是规格是以某种方式创建的，以便允许下层的用户代理人忽略ARIA特定的标记，而不会影响该标记Web应用程序的功能。

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

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

其他提示

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

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

而且，如果您想知道Wai-Aria是什么，那是同一件事。

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

WAI = Web可访问性计划

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

如果您阅读本文，您的大多数疑问将被清除

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

它是什么？

Wai-aria代表 “ Web可访问性计划 - 可访问的互联网应用程序”. 。它是一组属性，可以帮助增强网站或Web应用程序的语义，以帮助辅助技术，例如盲人的屏幕阅读器，可以理解某些不是HTML本地的事物。暴露的信息范围从诸如告诉屏幕读取器的简单之类的内容激活链接或按钮仅显示或隐藏更多项目，到像整个菜单系统或分层树视图一样复杂的小部件。

这是通过将角色和状态属性应用于与布局或浏览器功能无关的HTML 4.01或以后的标记中实现的，但为辅助技术提供了其他信息。

Wai-Aria的一角石头是角色属性。它告诉浏览器告诉辅助技术，所使用的HTML元素实际上不是元素名称所建议的，而是其他内容。虽然它最初只是一个DIV元素，但此DIV元素可能是自动完成项目列表的容器，在这种情况下，“ ListBox”的角色将适合使用。同样，另一个是该容器div的孩子，其中包含一个选项项目，然后应扮演“选项”的角色。两个divs，但通过角色，完全不同的含义。这些角色以常用的桌面应用程序对应方式进行建模。

该文档的一个例外是具有里程碑意义的角色，它不会改变所讨论的元素的实际含义，而是提供有关文档中此特定位置的信息。

第二个角石是Wai-Aria州和财产。他们定义了某些本机或WAI-ARIA元素的状态，例如某些东西折叠或扩展，需要表单元素，其中包含弹出菜单或类似的弹出菜单。这些通常是动态的，并且在Web应用程序的整个生命周期中都会改变其价值，并且通常通过JavaScript操纵。

不是什么？

WAI-ARIA并不是要影响浏览器行为。与真实的按钮元素不同，例如，您将“按钮”角色倒在上面的DIV不会使您的键盘关注度，当将空间或Enter按下时，自动点击处理程序以及其他对按钮。浏览器本身并不知道具有“按钮”角色的DIV是按钮，只有其可访问性API部分才能。

结果，这意味着您绝对必须自己实施键盘导航，聚焦性和其他从桌面应用程序中知道的行为模式。您可以找到一些先进的咏叹调技术 这里.

我什么时候不应该使用它？

是的，是的，这节是第一个！因为使用Wai-aria的第一个规则是： 除非您绝对需要，否则不要使用它！ 您拥有的Wai-aria越少，您可以依靠使用本机HTML小部件的越多，越好！还有更多规则要遵循，您可以检查它们 这里.

什么是咏叹调？

ARIA出现是解决使用旨在用于文档HTML的标记语言来构建用户接口（UI）的标记语言的一种方法。 HTML包含许多可以处理文档的功能（P，H3，UL，表），但仅基本的UI元素，例如A输入和按钮。 Windows和其他操作系统支持允许（辅助技术）访问UI控件功能的API。 Internet Explorer和其他浏览器将本机HTML元素映射到可访问性API，但是HTML控件并不像桌面操作系统上常见的控件那样丰富，并且对于现代的Web应用程序而言，自定义控件不足以扩展HTML元素以提供富裕的元素来提供富裕的元素现代Web应用程序所需的UI。在ARIA之前，浏览器无法将这种额外的丰富性暴露于可访问性API或at。此问题的经典示例是将单击处理程序添加到图像中。它为鼠标用户创建似乎是可点击的按钮，但仍然只是键盘或用户的图像。

解决方案是创建一组属性，使开发人员可以使用UI语义扩展HTML。具有自定义功能并使用ARIA属性将这些功能映射到可访问性API的一组HTML元素的ARIA项是“小部件。 ARIA还为作者提供了一种记录内容本身的作用的手段，而内容又允许与内容更容易使用的内容构建替代导航机制，而不是阅读全文或仅在链接列表上迭代。

重要的是要记住，在简单的情况下，使用本机HTML控件并为其定型而不是使用ARIA，这是非常喜欢的。如果您不需要，那就不要重塑轮子或复选框。

幸运的是，可以将ARIA标记添加到现有站点中，而无需更改主流用户的行为。这大大降低了修改和测试网站或应用程序的成本。

我遇到了一些关于咏叹调的问题。但是，对于这个问题，内容看起来更有希望。想分享它们

什么是咏叹调？

如果您努力使您的网站访问具有各种不同浏览习惯和身体残疾的用户，则您可能会认识到角色和ARIA-*属性。 WAI-ARIA（可访问的互联网应用程序）是一种提供定义动态Web内容和应用程序的方法，以便残疾人可以识别并成功与之互动。这是通过定义文档或应用程序的结构的角色，或通过定义窗口小部件，关系，状态或属性的ARIA-*属性来完成的。

建议在规格中使用ARIA，以使HTML5应用程序更容易访问。使用语义HTML5元素时，应设置其相应的角色。

看看这个 Youtube 视频 为Aria Live。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top