什么是HTML5 ARIA?


249

什么是HTML5 ARIA?我不知道如何实施。


4
请注意,WARI-ARIA早于HTML5,但并不需要它,尽管ARIA属性只会被HTML5验证器视为有效,或者与ARIA扩展DTD比较时才被视为有效。但是,HTML5草案目前不允许某些WAI-ARIA构造。
Alohci

我已经在Facebook的html中看到了这一点。
Sorter

Answers:


213

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

这是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元素,以便屏幕阅读器可以将其解释为菜单,并以足够的上下文大声阅读,以使最终用户能够理解(例如, “菜单”音频提示),并能够与其进行交互(例如,语音导航)。


11
数据属性和aria有什么区别?
JackMahoney 2012年

55
aria专为可访问性而设计,不应用于存储随机数据。data用于应用程序需要与节点关联的随机数据。
弗朗西·佩诺夫(Francis Penov)2012年

2
请记住:role="menu""menuitem"对APPS(= File > Open或带有菜单的软件)是正确的Edit > Copy to clipboard。对于经典网站,最好保持通常的状态<ul>(默认为=角色列表),因为您仅提供指向其他网页的链接,而没有提供类似的功能如果您使用的是“保存”或“复制/粘贴”,则role="menu"还必须像平常的软件/应用程序菜单一样
Oops D'oh

62

ARIA代表可访问的富Internet应用程序。

WAI-ARIA是一项功能强大的技术,它使开发人员可以轻松地描述视觉丰富的用户界面的目的,状态和其他功能-辅助技术可以理解的方式。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/


23

它是什么?

WAI-ARIA代表“ Web Accessibility Initiative –可访问的富Internet应用程序”。它是一组属性,可帮助增强网站或Web应用程序的语义,以帮助辅助技术(例如盲人的屏幕阅读器)理解HTML固有的某些内容。公开的信息范围很广,从告诉屏幕阅读器激活链接或按钮仅显示或隐藏更多项目的简单信息,到像整个菜单系统或分层树状视图一样复杂的小部件。

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

WAI-ARIA的一个基石是角色属性。它告诉浏览器告诉辅助技术,所使用的HTML元素实际上不是元素名称所暗示的内容,而是其他内容。尽管它最初只是一个div元素,但该div元素可能是自动完成项列表的容器,在这种情况下,将适合使用“列表框”角色。同样,另一个div是该容器div的子级,并且包含单个选项项,则应获得“选项”的作用。两个div,但通过角色,含义完全不同。角色是根据常用的桌面应用程序对应对象建模的。

文档界标角色是一个例外,它不会更改所讨论元素的实际含义,但会提供有关文档中此特定位置的信息。

第二个基石是WAI-ARIA州和州。它们定义某些本机或WAI-ARIA元素的状态,例如是否折叠或展开某些东西,是否需要一个form元素,某物具有附加的弹出菜单等。这些通常是动态的,并且会在Web应用程序的整个生命周期中改变其值,并且通常通过JavaScript进行操作。

什么啊

WAI-ARIA并非旨在影响浏览器的行为。与实际的按钮元素不同,例如,将“按钮”角色倒在其上的div不会为您提供键盘的可聚焦性,在其上按下Space或Enter时会自动单击处理程序,以及其他与按钮无关的属性按钮。浏览器本身并不知道具有“按钮”角色的div是按钮,只有其可访问性API部分知道。

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

什么时候不应该使用它?

是的,没错,本节排在第一位!因为使用WAI-ARIA的第一条规则是:除非绝对必要,否则不要使用它!您拥有的WAI-ARIA越少,使用本地HTML窗口小部件就可以指望的越多,越好!还有其他一些规则需要遵循,您可以在此处查看


13

什么是ARIA?

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

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

重要的是要记住,在简单的情况下,使用本机HTML控件并设置其样式比使用ARIA更可取。如果不需要,那就不要重新发明轮子或复选框。

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


7

我对ARIA提出了其他问题。但是,对于该问题,其内容看起来更有希望。想要分享

什么是ARIA?

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

在规范中建议使用ARIA,以使HTML5应用程序更易于访问。使用语义HTML5元素时,应设置它们的相应角色。

并观看此视频直播ARIA。


较小的更正:使用语义HTML5元素时,应在所选元素的语义不能提供足够信息的情况设置其相应角色。换句话说,如果您有一个nav元素,则无需添加role =“ navigation”,因为该角色已经从元素选择中清除了。但是,如果您有用于搜索站点的输入元素,则应添加role =“ search”,因为输入元素除了用于搜索之外还用于许多其他事情,这会将特定输入标记为具有搜索角色。
brennanyoung
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.