[翻译]如何在HTML5中有效使用ARIA
ARIA是Accessible Rich Internet Application的简称,指无障碍富互联网应用。可以使一些有功能障碍(如听力,视力)的人群,使用你的网站。下面看一下做为开发人员的我们,如何让他们使用起来更容易。
使用ARIA的一种方式,是添加ARIA到我们的html中。你可能对在HTML中使用语义化元素很熟悉了,如nav,button,header。使用它们,可以很容易表达块的作用。这些元素可以更好地表达页面中内容的意思,我们可以把这些元素和ARIA组合使用。不过,在一起使用它们时,有几件需要记住的事情。
ARIA角色
ARIA role可以像属性一样添加到HTML标记上。声明元素类型并建议其提供的信息作用。下面是一个识别元素为banner的例子:
<header role="banner">
下面这个例子,通常放到一个包含元素中,提示其内容提供了,有关包含的元素中的内容的一些信息:
<div role="contentinfo">
This website was built by Georgie.
</div>
使用动态内容的alert,使用role="alert":
<div role="alert">
Please upgrade to the latest version of your browser for the best experience.
</div>
这是一个用于表示元素只是简单演示的角色,想象一下,一个人使用屏幕阅读器,考虑到一些元素,他们并不想读出来。这里有一个例子,一个元素包含一个虚拟的描述,或一个空元素只是简单地提供了一张图片和背景颜色。
<a href="aria.html" role="presentation">
<img src="aria-thumbnail.jpg" role="presentation" alt="Use ARIA effectively">
</a>
ARIA属性
ARIA属性和角色略有不同,添加到HTML标记的方法相同,但有一定范围的ARIA属性可供使用。所以ARIA属性都带aria-前缀。有两种ARIA属性类型,分别为状态和属性值。
- 状态值,是在用户交互时必然要修改的
- 属性值,是不太可能修改的
这里有一个ARIA状态属性aria-checked的例子,这里去模拟交互元素的显示元素的状态,比如checkbox和radio按钮,但它们本身并不是原生的元素(如:用div和span标签来构建自定义UI元素)
<span role="checkbox"
aria-checked="true"
tabindex="0"
id="simulatedcheckbox">
</span>
使用ARIA属性,其中属性名为aria-label的例子。这是一个在页面中不显示(如果设计要求显示也可以显示),但用来表示form元素的label标签的。当label文字显示,使用aria-labelledby属性是比较合适的。
也可以像下面这样,配合figure元素使用
<figure aria-labelledby="operahouse_1" role="group">
<img src="operahousesteps.jpg" alt="The Sydney Opera House">
<figcaption id="operahouse_1">
We saw the opera <cite>Barber of Seville</cite> here!
</figcaption>
</figure>
想了解更多的状态和属性的信息,可以参照W3C的相关内容。
ARIA的规则
当你特别想去用的时候,请记住,我们并不希望你在每个元素上都添加ARIA,有两个原因。
尽可能地使用语义化的HTML元素
浏览器的语义化标签已经默认隐含ARIA语义,像nav,article,button已经隐含ARIA的role="navigation",role="article",role="button"声明。在语义化标签出来之前,常见的元素如<div class="main-navigation" role="navigation">。现在可以使用nav来代替div,而且不再需要添加role="navigation"。可以到W3C的目录上去查看,哪些元素已经隐含的ARIA属性。
元素只能有一个角色
一个元素不能有多个ARIA角色,role的定义如下:
Main indicator of type. This semantic association allows tools to present and support interaction with the object in a manner that is consistent with user expectations about other objects of that type.
HTML元素不能有两个角色,所有角色都是以这样或那样的方式进行主义化的,就像定义上面说的,一个元素不可能是两种类型的对象。你能想象一个元素既是按钮又是标题吗?不可能,两者只能选其一。选择一个可以最可以体现元素功能的角色。
不要修改原始的语义
不应该为一个语义化的标签定义不同的角色,通过添加role去重定义语义化的标签。
<footer role="button">
ARIA使用第二规则,但是,如果必须重定义,那就使用嵌套HTML元素来替代
<footer><button>Purchase this e-book</button></footer>
其他关于无障碍阅读的标记
尽可能使用主义化元素
这是明显的做法,如果你认为你正要构建的功能块,可以给它比直接使用div ,span更好的元素来定义。在实践中,你会不断认识到,更好地使用哪些元素,并且很好地熟悉它们。
这里有个例子是对blockquote的使用(它经常被误用)。还有其他类似的服务于特殊用途的元素。
- q --用于提供行内引用,比如在段落文本中直接引用某人
- cite --用于在文本中引用创作作品,如引用的一首诗
<p>
In <cite>The Love Song of J. Alfred Prufock</cite>
by T.S. Eliot, the clinical imagery of the line
<q>Like a patient etherized upon a table</q>
suggests themes of loneliness.
</p>
有许多你可能没有注意到的HTML元素,包括一些新引入的,保证尽可能多地了解HTML元素。
alt属性
这是一个经常被遗忘的属性,使用它可以大大增加标记的无障碍的阅读性,尤其是对屏幕阅读器。它实际上从HTML2就已经引入了,描述如下:
text to use in place of the referenced image resource, for example due to processing constraints or user preference.
文本用于替代引用的图像资源,例如处理限制或用户偏好。
由于处理限制或用户偏好。不管是图像没有加载(处理限制),视力不好的用户实际没有偏好。l默认情况下,他们根本无法像正常人一样,观看图像。
虽然规范上没有提可访问性的术语,它表明,是在图像无法加载或用户停止加载时,来替代使用的。虽然我们无法设身处地地为他们考虑,但我们也不能保证我们所有的用户没有这方面的需求,因此,我们应该给用户一个替代选择。
例如,人们经常给在公园玩的狗的照片的alt文本中写上如“dog”。尽管写了这个,但这无法给有障碍的人,提供足够的信息,去了解这张图片的内容。
下面是更好的方式:
<img src="bobby.jpg" alt="我的狗在公园里玩耍">
请注意,alt属性和figcaption元素所起到的作用是不同的。alt的意图是为图像提供一种替代文本,而figcaption是为figure提供相关的标题。相同的例子中使用figcaption时,它应该提供的文本如下:
<figcaption>小狗可爱不?</figcaption>
使用语义化HTML和ARIA,使所有用户都能使用
如果看一下文章前面包含的示例,你会看到里面包含了以下内容:
- 为图像和它的标题,使用语义化HTML
- 在适当的地方使用cite元素
- 恰当地提供alt文本
- 使用一个上面提到过的ARIA属性
<figure aria-labelledby="operahouse_1" role="group">
<img src="operahousesteps.jpg" alt="The Sydney Opera House"/>
<figcaption id="operahouse_1">We saw the opera
<cite>Barber of Seville</cite> here!
</figcaption>
</figure>
总结
ARIA 角色和属性可以改善页面的可读性,如在屏幕阅读器或其他辅助性技术上。由于辅助技术变得越来越普遍,需要把在代码中集成ARIA,作为一个常规项来完成。
原文:How to Use ARIA Effectively with HTML5
原文作者:Georgie Luhur
原文链接:https://www.sitepoint.com/how-to-use-aria-effectively-with-html5/
[翻译]如何在HTML5中有效使用ARIA的更多相关文章
- 如何在HTML5中使用SVG
复制而来---原地址http://www.php100.com/html/webkaifa/HTML5/2012/0731/10776.html SVG 即 Scalable Vector Graph ...
- 如何在MySQL中查询每个分组的前几名【转】
问题 在工作中常会遇到将数据分组排序的问题,如在考试成绩中,找出每个班级的前五名等. 在orcale等数据库中可以使用partition语句来解决,但在mysql中就比较麻烦了.这次翻译的文章就是专门 ...
- HTML5 中 40 个最重要的技术点
介绍 我是一个ASP.NET MVC的开发者,最近在我找工作的时候被问到很多与HTML5相关的问题和新特性.所以以下40个重要的问题将帮助你复习HTML5相关的知识. 这些问题不是你得到工作的高效解决 ...
- [翻译] 如何在 ASP.Net Core 中使用 Consul 来存储配置
[翻译] 如何在 ASP.Net Core 中使用 Consul 来存储配置 原文: USING CONSUL FOR STORING THE CONFIGURATION IN ASP.NET COR ...
- HTML5中的DOMContentLoaded 和 touchmove
Html5的出现确实解决了一部分页面交互的问题,同时它的一些特性还是没能被我们掌握,今天主要聊聊Html5中的DomcontenLoaded和touchmove事件的属性和使用: DomcontenL ...
- MVC如何在Pipeline中接管请求的?
MVC如何在Pipeline中接管请求的? 文章内容 上个章节我们讲到了,可以在HttpModules初始化之前动态添加Route的方式来自定义自己的HttpHandler,最终接管请求的,那MVC是 ...
- 如何在Python中从零开始实现随机森林
欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 决策树可能会受到高度变异的影响,使得结果对所使用的特定测试数据而言变得脆弱. 根据您的测试数据样本构建多个模型(称为套袋)可以减少这种差异,但是 ...
- 如何在Git中撤销一切 | 干货
翻译:李伟 审校:张帆 译自:Github JF杰微刊:如何在Git中撤销一切 任何一个版本控制系统中,最有用的特性之一莫过于 "撤销(undo)"操作.在Git中,"撤 ...
- 服务化改造实践 | 如何在 Dubbo 中支持 REST
什么是 REST REST 是 Roy Thomas Fielding [[1]](#fn1) 在 2000 年他的博士论文 [[2]](#fn2) “架构风格以及基于网络的软件架构设计” 中提出来的 ...
随机推荐
- ipad4没有声音提示消息
打开『设置』-『通用』-侧边开关用于: 1:锁定屏幕旋转 2:静音 √ 把对号去掉 选择1即可
- python--excel
import xlrd, xlwt # 读取Exceldef read_excel(excel_name, sheet_name): if excel_name and excel_name: all ...
- No Feign Client for loadBalancing defined. Did you forget to include spring-cloud-starter-netflix-ribbon?
... 60 common frames omittedCaused by: java.lang.IllegalStateException: No Feign Client for loadBala ...
- hook Extending the Framework Core
w Task Scheduling - Laravel - The PHP Framework For Web Artisanshttps://laravel.com/docs/5.4/schedul ...
- SpringBoot 配置文件 YML/Profile
1. 全局配置文件 application.properties application.yml 配置文件名是固定的; 配置文件存放在src/main/resources目录或者类路径/config下 ...
- Appium+python移动端自动化测试-环境搭建(一)
搭建所在系统环境:Windows7版本64位系统 一.环境准备 jdk8.0.151 android-sdk_r20.3.4-windows python3.5 appium1.4.16.1 Node ...
- python学习笔记(十三)接口开发
一.开发接口的作用 1.mock接口,模拟一些接口,在别的接口没有开发好的时候,需要开发一些模拟接口进行调试和测试. 2.查看数据,比如,获取所有学员信息的接口,就不需要提供数据库的查看信息. 二.接 ...
- Hadoop2.7.3+spark2.1.0+hbase0.98分布式集群部署
运行环境配置(10.79.115.111-114) 1.关闭防火墙与selinux 关闭防火墙: CentOS 7.x默认使用的是firewall作为防火墙. systemctl stop firew ...
- JAVA与ACM
这两天学了一下JAVA的语法,还没有学习后面的核心地方,突然间觉得JAVA这门语言很棒,我要在接下来的时间系统的学习一下.就这么愉快地决定了. Java对于大数计算这方面的优势很大.最重要的是代码量小 ...
- 推荐系统第5周--- 基于内容的推荐,隐语义模型LFM
基于内容的推荐