什么是HTML5 ARIA？

Question

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

Answer 1

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

Answer 2

ARIA代表Accessible Rich Internet Applications.

WAI-ARIA是一项非常强大的技术,允许开发人员以辅助技术可以理解的方式轻松描述视觉丰富的用户界面的目的,状态和其他功能.WAI-ARIA最终被整合到HTML 5规范的当前工作草案中.

如果你想知道WAI-ARIA是什么,那就是同样的事情.

请注意,WAI-ARIA和ARIA这两个术语指的是同一个词.但是,使用WAI-ARIA来确认其在WAI中的起源更为正确.

WAI =网络无障碍倡议

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

如果您阅读本文,您的大部分疑虑都将被清除

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

Answer 3

它是什么？

WAI-ARIA代表"Web可访问性计划 - 可访问的富Internet应用程序".它是一组属性,有助于增强网站或Web应用程序的语义,以帮助辅助技术,如盲人的屏幕阅读器,理解某些非HTML本机的东西.暴露的信息可以是简单的事情,如告诉屏幕阅读器激活链接或按钮刚显示或隐藏更多项目,以及像整个菜单系统或分层树视图一样复杂的小部件.

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

WAI-ARIA的一个角落是角色属性.它告诉浏览器告诉辅助技术,HTML元素实际上并不是元素名称所暗示的,而是其他东西.虽然它最初只是一个div元素,但是这个div元素可能是自动完成项列表的容器,在这种情况下,"listbox"的角色适合使用.同样,另一个div是该容器div的子节点,并且包含一个选项,然后应该获得"option"的角色.两个div,但通过角色,完全不同的意义.这些角色是在常用的桌面应用程序对应物之后建模的.

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

第二个角落是WAI-ARIA状态和属性.它们定义某些本机或WAI-ARIA元素的状态,例如,如果某些内容被折叠或展开,则需要表单元素,某些内容具有附加到其上的弹出菜单等.这些通常是动态的,并在Web应用程序的整个生命周期中更改其值,并且通常通过JavaScript进行操作.

什么不是？

WAI-ARIA不打算影响浏览器行为.例如,与真正的按钮元素不同,你将"按钮"角色放在上面的div不能提供键盘可聚焦性,当按下空格或回入时自动点击处理程序,以及其他属于按钮.浏览器本身不知道具有"按钮"角色的div是按钮,只有它的可访问性API部分.

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

什么时候不应该使用它？

是的,这是正确的,这部分是第一位的!因为使用WAI-ARIA的第一条规则是:除非绝对必要,否则不要使用它!您拥有的WAI-ARIA越少,您使用本机HTML小部件的次数越多越好!还有一些规则需要遵循,您可以在这里查看.

Answer 4

什么是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术语表示一组HTML元素具有自定义功能并使用ARIA属性将这些函数映射到辅助功能API,这是一个"小部件".ARIA还为作者提供了记录内容本身角色的方法,这反过来又允许AT为内容构建替代导航机制,这些内容比阅读全文或仅迭代链接列表更容易使用.

重要的是要记住,在简单的情况下,最好使用本机HTML控件并设置样式而不是使用ARIA.如果你不需要,那就不要重新发明轮子或复选框.

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

Answer 5

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

什么是ARIA？

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

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

看到这个你为ARIA直播视频.