首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他
关于

html之”aria-*“标签

2019年01月30日 发布 阅读(539) 作者:懒炖

概述

ARIA是W3C的一个规范。其全称是’Accessible Rich Internet Applications’,是WAI-ARIA的一部分(它是W3C的Web无障碍推进组织(Web Accessibility Initiative / WAI)在2014年3月20日发布的可访问富互联网应用实现指南)。

WAI-ARIA是一个为残疾人士等提供无障碍访问动态、可交互Web内容的技术规范。主要针对的是视觉缺陷,失聪,行动不便的残疾人以及假装残疾的测试人员。尤其像盲人,眼睛看不到,其浏览网页则需要借助辅助设备,如屏幕阅读器,屏幕阅读机可以大声朗读或者输出盲文。


ARIA 简介

无障碍网络倡议的无障碍丰富互联网应用规范(WAI-ARIA,简称 ARIA)适用于跨越某些领域的障碍,这些领域存在的无障碍问题无法通过原生 HTML 进行管理。它通过允许您指定某些属性来发挥作用,这些属性可以修改元素转换成无障碍树的方式。 下面我们来看一个示例。

在以下代码段中,我们使用列表项作为一种自定义复选框。CSS “checkbox” 类为元素提供了所需的视觉特性。

  1. <li tabindex="0" class="checkbox" checked>
  2. Receive promotional offers
  3. </li>

尽管这适合视力正常的用户,屏幕阅读器却不会给予任何指示来说明该元素旨在作为复选框使用,因此弱视用户可能会完全错过该元素。

如果使用 ARIA 属性,我们就可以为元素提供缺少的信息,以便屏幕阅读器能正确解读它。 我们在以上代码中添加了 rolearia-checked 属性,将该元素显式标识为一个复选框,并指定它在默认情况下处于选中状态。该列表项现在将添加到无障碍树中,屏幕阅读器将把它正确地报告为一个复选框。

  1. <li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">
  2. Receive promotional offers
  3. </li>

ARIA 通过更改和补充标准 DOM 无障碍树来发挥作用。

标准 DOM 无障碍树

ARIA 补充后的无障碍树

尽管 ARIA 允许我们为任何页面元素对无障碍树进行细微(乃至彻底的)修改,但那却是其唯一更改之处。ARIA 不会补充元素的任何固有行为;它不会使元素可获焦点,也不会为其提供键盘事件侦听器。那仍旧是我们开发任务的组成部分。

必须要了解的是,不需要重新定义默认语义。 无论如何使用,标准 HTML <input type="checkbox"> 元素都不需要额外的 role="checkbox" ARIA 属性就能正确声明。

同样值得注意的是,某些 HTML 元素上可以使用的 ARIA 角色和属性会受到限制。 例如,不得对标准 <input type="text"> 元素应用任何额外角色/属性。

请参阅 ARIA in HTML 规范,了解详细信息。

让我们看一看 ARIA 还能提供哪些其他功能。

ARIA 可以做什么?

正如您在复选框示例中所见,ARIA 可以修改现有元素语义,也可以向不存在原生语义的元素添加语义。 它还可以表达 HTML 中根本不存在的语义模式,例如菜单或标签面板。

ARIA 允许我们创建的小部件型元素通常无法通过普通 HTML 实现。

  • 例如,ARIA 可以添加只向辅助技术 API 公开的附加标签和说明文本。
  1. <button aria-label="screen reader only label"></button>
  • ARIA 表达的元素间语义关系能够扩展标准父项/子项联系,例如控制特定区域的自定义滚动条。
  1. <div role="scrollbar" aria-controls="main"></div>
  2. <div id="main">
  3. . . .
  4. </div>
  • 并且 ARIA 可以使页面的某些部分具有“实时性”,让它们在发生变化时立即通知辅助技术。
  1. <div aria-live="true"> <span>GOOG: $400</span>
  2. </div>

ARIA 系统的其中一个核心层面是其角色集。在无障碍术语中,角色是指特定 UI 模式的简略指示器。我们可以通过任意 HTML 元素上的 role 属性使用 ARIA 提供的模式词汇表。

我们在上例中应用 role="checkbox" 时,是指示辅助技术,元素应遵循 “checkbox” 模式。 也就是说,我们可以保证它具有选中状态(选中或未选中),并且这一状态可使用鼠标或空格键进行切换,就像切换标准 HTML 复选框元素那样。

事实上,由于键盘交互在屏幕阅读器使用中的作用极其重要,因此必须确保在创建自定义小部件时,始终在同一位置应用 role 属性和 tabindex 属性;这可以确保键盘事件发生在正确的位置,并且当某个元素获得焦点时,其角色能得到准确传递。

ARIA 规范 分类介绍了 role 属性以及可与这些角色联用的关联 ARIA 属性的可接受值。这是最佳的权威信息来源,其中包含 ARIA 角色和属性如何协作,以及如何以浏览器和辅助技术支持的方式使用它们。

所有可用 ARIA 角色的列表

不过,该规范非常深奥;一个更为浅显的入门读物是 ARIA 制作实践文档,该文档探究了使用可用 ARIA 角色和属性的最佳做法。

ARIA 还提供了可对 HTML5 中提供的选项进行扩展的地标角色。请参阅地标角色设计模式规范,了解详细信息。

参考

https://www.w3.org/TR/wai-aria/
https://www.w3.org/TR/html-aria/#sec-strong-native-semantics
https://developers.google.com/web/fundamentals/accessibility/semantics-aria/aria-labels-and-relationships?hl=zh-cn
https://developers.google.com/web/fundamentals/accessibility/semantics-aria/?hl=zh-cn

版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •  
  • canvas封装工具类

    收集的一些Canvas工具类,有库,有框架,有api,会持续更新

    发布:2019-03-04 阅读(465)

  • html之”aria-*“标签

    ARIA是W3C的一个规范。其全称是’Accessible Rich Internet Applications’,是WAI-ARIA的一部分(它是W3C的Web无障碍推进组织(Web Accessibility Initiative / WAI)在2014年3月20日发布的可访问富互联网应用实现指南)。 WAI-ARIA是一个为残疾人士等提供无障碍访问动态、可交互Web内容的技术规范。主要针对的是视觉缺陷,失聪,行动不便的残疾人以及假装残疾的测试人员。尤其像盲人,眼睛看不到,其浏览网页则需要借助辅助设备,如屏幕阅读器,屏幕阅读机可以大声朗读或者输出盲文。

    发布:2019-01-30 阅读(539)

  • window.onhashchange事件

    hashchange事件会在浏览器地址的hash值改变时被触发。这是html5新增的一个事件,IE6/IE7及IE8兼容模式不支持onhashchange,但IE8标准模式支持onhashchange。这对于基于ajax开发的web应用程序是非常有用的一个事件,因为ajax请求不能触发浏览器添加新的历史条目,使得“前进”“后退”按钮在ajax开发的应用程序中不能使用。

    发布:2014-04-22 阅读(596)

  • HTML5 对history新增的API:pushState,replaceState,state,popstate

    基于MVC设计模式和ajax技术实现单页面结构时,如果实现前进后退功能呢?这在以前我们可以采用hash方法,但终究不是很完美,我们在访问facebook或google的一些页面时会发现,页面不仅实现了局部刷新,而且页面URL也发生了变化。这就是HTML5对history的贡献.

    发布:2014-04-22 阅读(786)

  • 语义化HTML-语义化你的HTML标签或属性

    HTML赋予了每个标签以不同的语义。高质量的HTML代码,要求我们在遵循HTML语法的同时,也应该遵循HTML的标签语义

    发布:2012-10-21 阅读(670)