aria- 标签 html,HTML5教程 如何使用ARIA
本篇教程探讨了HTML5教程 如何使用ARIA,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 。
<
ARIA是Accessible Rich Internet Application的简称,指无障碍富互联网应用。可以使一些有功能障碍(如听力,视力)的人群,使用你的网站。下面看一下做为开发人员的我们,如何让他们使用起来更容易。
使用ARIA的一种方式,是添加ARIA到我们的html中。你可能对在HTML中使用语义化元素很熟悉了,如nav,button,header。使用它们,可以很容易表达块的作用。这些元素可以更好地表达页面中内容的意思,我们可以把这些元素和ARIA组合使用。不过,在一起使用它们时,有几件需要记住的事情。
ARIA角色
ARIA role可以像属性一样添加到HTML标记上。声明元素类型并建议其提供的信息作用。下面是一个识别元素为banner的例子:
下面这个例子,通常放到一个包含元素中,提示其内容提供了,有关包含的元素中的内容的一些信息:
This website was built by Georgie.
使用动态内容的alert,使用role="alert":
Please upgrade to the latest version of your browser for the best experience.
这是一个用于表示元素只是简单演示的角色,想象一下,一个人使用屏幕阅读器,考虑到一些元素,他们并不想读出来。这里有一个例子,一个元素包含一个虚拟的描述,或一个空元素只是简单地提供了一张图片和背景颜色。
ARIA属性
ARIA属性和角色略有不同,添加到HTML标记的方法相同,但有一定范围的ARIA属性可供使用。所以ARIA属性都带aria-前缀。有两种ARIA属性类型,分别为状态和属性值。
状态值,是在用户交互时必然要修改的
属性值,是不太可能修改的
这里有一个ARIA状态属性aria-checked的例子,这里去模拟交互元素的显示元素的状态,比如checkbox和radio按钮,但它们本身并不是原生的元素(如:用div和span标签来构建自定义UI元素)
aria-checked="true"
tabindex="0"
id="simulatedcheckbox">
使用ARIA属性,其中属性名为aria-label的例子。这是一个在页面中不显示(如果设计要求显示也可以显示),但用来表示form元素的label标签的。当label文字显示,使用aria-labelledby属性是比较合适的。
也可以像下面这样,配合figure元素使用
We saw the opera Barber of Seville here!
想了解更多的状态和属性的信息,可以参照W3C的相关内容。
ARIA的规则
当你特别想去用的时候,请记住,我们并不希望你在每个元素上都添加ARIA,有两个原因。
尽可能地使用语义化的HTML元素
浏览器的语义化标签已经默认隐含ARIA语义,像nav,article,button已经隐含ARIA的role="navigation",role="article",role="button"声明。在语义化标签出来之前,常见的元素如
元素只能有一个角色
一个元素不能有多个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去重定义语义化的标签。
ARIA使用第二规则,但是,如果必须重定义,那就使用嵌套HTML元素来替代
Purchase this e-book
其他关于无障碍阅读的标记
尽可能使用主义化元素
这是明显的做法,如果你认为你正要构建的功能块,可以给它比直接使用div ,span更好的元素来定义。在实践中,你会不断认识到,更好地使用哪些元素,并且很好地熟悉它们。
这里有个例子是对blockquote的使用(它经常被误用)。还有其他类似的服务于特殊用途的元素。
q --用于提供行内引用,比如在段落文本中直接引用某人
cite --用于在文本中引用创作作品,如引用的一首诗
In The Love Song of J. Alfred Prufock
by T.S. Eliot, the clinical imagery of the line
Like a patient etherized upon a table
suggests themes of loneliness.
有许多你可能没有注意到的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”。尽管写了这个,但这无法给有障碍的人,提供足够的信息,去了解这张图片的内容。
下面是更好的方式:
请注意,alt属性和figcaption元素所起到的作用是不同的。alt的意图是为图像提供一种替代文本,而figcaption是为figure提供相关的标题。相同的例子中使用figcaption时,它应该提供的文本如下:
使用语义化HTML和ARIA,使所有用户都能使用
如果看一下文章前面包含的示例,你会看到里面包含了以下内容:
为图像和它的标题,使用语义化HTML
在适当的地方使用cite元素
恰当地提供alt文本
使用一个上面提到过的ARIA属性
Barber of Seville here!
总结
ARIA 角色和属性可以改善页面的可读性,如在屏幕阅读器或其他辅助性技术上。由于辅助技术变得越来越普遍,需要把在代码中集成ARIA,作为一个常规项来完成。
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道!
aria- 标签 html,HTML5教程 如何使用ARIA相关推荐
- java aria,ARIA 标签和关系
ARIA 标签和关系 标签 ARIA 提供了多种向元素添加标签和说明的机制.事实上,ARIA 是唯一一种可以添加可访问帮助或说明文本的方式. 我们来看一下 ARIA 用于创建可访问标签的属性. ari ...
- title标签-HTML5精讲 课时ID:6.4 【表严肃】#HTML教程 #HTML5教程 #title标签
6.4 <title>标签-HTML5精讲 课时ID:6.4 [表严肃]#HTML教程 #HTML5教程 #title标签 是什么 <title>标签用于指定浏览器标签上显示的 ...
- html5 form表单,html5 教程
2019独角兽企业重金招聘Python工程师标准>>> html5 form表单 html5 教程 html5 form表单表单介绍 1.XHTML中需要放在form之中的诸如inp ...
- html 移动设备不显示,IT兄弟连 HTML5教程 在移动设备上设置原始大小显示
原标题:IT兄弟连 HTML5教程 在移动设备上设置原始大小显示 在iPhone系列和iPod Touch中使用的是Safari浏览器,它支持前面介绍的媒体查询表达式.例如,使用iPhone 320p ...
- php识别html5,CSS_在IE6/7/8下识别html5标签(让老式浏览器识别html5),识别html5标签: html5添加了许 - phpStudy...
在IE6/7/8下识别html5标签(让老式浏览器识别html5) 识别html5标签: html5添加了许多语义化的标签,比如,,什么的,当时看到这些标签的时候心想html5估计很多老式IE浏览器都 ...
- HTML5超链接和多媒体,IT兄弟连 HTML5教程 多媒体应用 创建图像和链接
原标题:IT兄弟连 HTML5教程 多媒体应用 创建图像和链接 指引 多媒体来自多种不同的格式.它可以是您听到或看到的任何内容,文字.图片.音乐.音效.录音.电影.动画等等.在因特网上,您会经常发现嵌 ...
- HTML5教程:1.1 迎接新的Web时代
一.HTML 5时代即将来临 自从2010年HTML 5正式推出以来,它就以一种惊人的速度被迅速推广着,就连微软也因此为下一代IE 9做了标准上的改进,使其能够支持HTML 5.关于各主流浏览器对于H ...
- HTML5教程实例-用Canvas制作线性渐变图形
HTML5教程实例-用Canvas制作线性渐变图形 到目前为止,我们使用canvas绘制图形的基本知识已经介绍完毕,从本节开始,我们将介绍其他比较高级的绘制知识之一 - 线性渐变,首先我们来回顾一下& ...
- html5的教程pdf,html5 教程pdf
html5 教程pdf [2021-02-11 11:54:39] 简介: php去除nbsp的方法:首先创建一个PHP代码示例文件:然后通过"preg_replace("/(\ ...
最新文章
- 独立云计算服务商的多维实践之道:用户需求驱动变革
- Win server 2012 R2 文件服务器--(三)配额限制
- Codeforces 1338E JYPnation (图论)
- 牛客 - 焦糖布丁(线性基+博弈)
- python cursor游标重置位置scroll_MySQL的游标
- leetcode题库:1.两数之和
- spring整合hibernate初步
- 1104 LED Test
- 蓝牙:协议/服务复用(PSM)
- c++实现计算二十四点--zj
- 2022新版彩虹易支付系统源码支持当面付通道轮询第三方支付免签约
- AI:大力出奇迹?Bigger is better?AI下一代浪潮?—人工智能的大语言模型(LLMs)/预训练大模型的简介、发展以及未来趋势
- 使用ADF Faces 之二:数据可视化组件 Thematic Map
- Tableau 仪表板例子1
- springboot+redis实现微博热搜排行榜
- 保险初识经验汇总(重疾、医疗、寿险、意外)
- 富而喜悦2023直播盛典 唐苓馨主题演说“特别的礼物”!
- python读取excel表头_13-用 Python 读写 Excel 文件
- java开源cad_CAD设计你需要以下几款开源工具
- linux下使用mdadm组软raid,Linux下使用mdadm创建和管理软raid
热门文章
- Python随机生成一注双色球彩票
- 忘记UCENTER创始人密码的解决办法
- 2015华为暑期实习面试全过程
- Python3【pyecharts 0.5.11】pyecharts图表生成总结
- C#——获取银行卡所属银行,验证银行卡号是否正确
- LIVE MINI ESP32开发板教程系列(三)drv2605L模块+手机常用振动器实现117种震动效果
- 【Android每日一讲】2012.11.27 向左或向右 - RadioGroup组与onCheckedChanged事件
- 强化学习 Reinforcement Learning(三)——是时候用 PARL 框架玩会儿 DOOM 了!!!(下)
- 手机关机不拔电池也能被定位吗?
- Android大话设计模式 第三章----开放封闭原则---孙悟空任弼马温一职