什么是HTML5 ARIA?

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

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

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

请注意外部<ul>元素上的role属性。 这个属性并不影响浏览器在屏幕上呈现标记的方式。 但是,支持ARIA的浏览器会将特定于操作系统的辅助function信息添加到呈现的UI元素中,以便屏幕阅读器可以将其解释为菜单,并以足够的上下文为terminal用户理解(例如, “菜单”audio提示)并且能够与其交互(例如,语音导航)。

ARIA代表无障碍的富互联网应用程序。

WAI-ARIA是一个令人难以置信的强大的技术,允许开发人员以一种Assistive Technology可以理解的方式轻松地描述视觉丰富的用户界面的目的,状态和其他function。 WAI-ARIA最终被整合到HTML 5规范的当前工作草案中。

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

请注意术语WAI-ARIA和ARIA指的是同样的事情。 但是,使用WAI-ARIA来承认它在WAI的起源是更正确的。

WAI = Web Accessibility Initiative

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

如果你阅读这篇文章,大部分的疑问将被清除

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

它是什么?

WAI-ARIA代表“无障碍networking倡议 – 无障碍富互联网应用程序” 。 这是一组属性,用于帮助增强网站或Web应用程序的语义,以帮助诸如盲人屏幕阅读器之类的辅助技术理解某些非HTML原生的东西。 暴露的信息范围可以很简单,只要告诉屏幕阅读器激活一个链接或button只显示或隐藏更多的项目,小部件就像整个菜单系统或分层树视图一样复杂。

这是通过将angular色和状态属性应用于与布局或浏览器function无关的HTML 4.01或更高版本的标记来实现的,但提供了有关辅助技术的其他信息。

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

文档标志性angular色是一个例外,它不会改变所讨论元素的实际含义,而是在文档中提供关于这个特定位置的信息。

第二个angular落石头是WAI-ARIA状态和物产。 它们定义了某些本地或WAI-ARIA元素的状态,如某些东西是折叠或扩展的,需要一个表单元素,某些东西具有附加到它的popup菜单等。 这些通常是dynamic的,并且在Web应用程序的整个生命周期中改变它们的值,通常通过JavaScript来操作。

那不是什么?

WAI-ARIA并不打算影响浏览器行为。 例如,与真正的button元素不同,例如,将“button”angular色倒入的div不会提供键盘的可聚焦性,按下Space或Enter时的自动点击处理程序,以及其他属性不明显button。 浏览器本身并不知道具有“button”angular色的div是一个button,只有它的可访问性API部分。

因此,这意味着您必须自己实现桌面应用程序中已知的键盘导航,可聚焦性和其他行为模式。 你可以在这里find一些先进的ARIA技术。

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

是的,这是正确的,这个部分是第一位! 因为使用WAI-ARIA的第一条规则是: 不要使用它,除非你绝对必须! 您拥有的WAI-ARIA越less,使用本机HTML小部件的指数就越多,效果就越好! 还有一些规则可以遵循,你可以在这里查看 。

什么是ARIA?

ARIA的出现是为了解决使用用于文档的标记语言(HTML)的可访问性问题来构build用户界面(UI)的方法。 HTML包含许多处理文档(P,h3,UL,TABLE)的function,但只包含基本的UI元素,如A,INPUT和BUTTON。 Windows和其他操作系统支持允许(辅助技术)AT访问UI控件function的API。 Internet Explorer和其他浏览器将本地HTML元素映射到可访问性API,但是HTML控件并不像桌面操作系统上常见的控件那样丰富,而且对于现代Web应用程序还不够用自定义控件可以扩展html元素以提供丰富现代Web应用程序所需的UI。 在ARIA之前,浏览器无法将这种额外的丰富性暴露给可访问性API或AT。 这个问题的典型例子是添加一个点击处理程序的图像。 它创build了一个鼠标用户似乎是可点击的button,但仍然是一个键盘或AT用户的图像。

解决scheme是创build一组允许开发人员使用UI语义扩展HTML的属性。 一组具有自定义function并使用ARIA属性将这些function映射到可访问性API的HTML元素的ARIA术语是“Widget”。 ARIA还为作者提供了一种手段来logging内容本身的作用,这反过来又允许AT为内容构build备用的导航机制,比阅读全文更容易使用,或者只是遍历链接列表。

重要的是要记住,在简单的情况下,使用本地HTML控件和样式,而不是使用ARIA更好。 如果你不需要,那就不要重新发明轮子或checkbox。

幸运的是,ARIA标记可以添加到现有的网站,而不会改变主stream用户的行为。 这大大降低了修改和testing网站或应用程序的成本。

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

什么是ARIA?

如果您努力使您的网站能够被各种不同的浏览习惯和身体残疾的用户访问,您可能会认识到angular色和咏叹调属性。 WAI-ARIA(可访问富互联网应用程序)是一种提供方法来定义dynamic网页内容和应用程序的方法,以便残障人士可以识别并成功地与其进行交互。 这是通过定义文档或应用程序结构的angular色或通过定义小部件angular色,关系,状态或属性的aria- *属性完成的。

在规范中推荐使用ARIA,以使HTML5应用程序更易于访问。 使用语义HTML5元素时,您应该设置其相应的angular色。

现在看看你pipe这个ARIA的video 。