在 HTML 中使用 ARIA 的规则
什么是 ARIA?
Accessible Rich Internet Applications(WAI-ARIA,简称 ARIA)是能够让残障人士更加便利的访问 Web 内容和使用 Web 应用(特别是那些由 JavaScript 开发的)的一套机制。最值得注意的是,它包含了一组属性,我们可以添加到 HTML 元素中,将更多的语义信息嵌入其中,这些信息可以被辅助技术读取。
ARIA 可以通过 HTML 属性为屏幕阅读器提供了额外的信息。其不影响元素如何被渲染在浏览器中。
ARIA
role
没有为大多数元素的默认语义添加任何内容。您可以通过遵循 ARIA 标准(例如:HTML 语义,使用
alt
属性并以预期的方式使用[role = button]
)来使您的网站更易于访问
一个例子:
<style>[role='note'] {padding: 10px;border: 1px solid;border-left: 5px solid rebeccapurple;color: rebeccapurple;border-radius: 5px;}
</style>
<section><div role="note">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo illum cum totam.</div>
</section>
它将向用户代理暗示,这是一个 note
,用来记录一些您需要留意的事情。
尽管 ARIA 非常有用,但我们必须注意何时以及如何使用它。
使用 HTML5 语义以支持 ARIA
您应该使用已经内置了所需语义和行为的原生 HTML 元素或属性,而不是重新使用 HTML 元素并添加 ARIA
role
、状态或属性使其可访问。
在 HTML 中使用 ARIA 的首要规则是尽量不要在 HTML 中使用 ARIA(如果不需要的话)。HTML5 语义元素为我们提供了一系列具有隐式含义的元素,类似于我们可以使用 ARIA 定义的显式含义,常被称为元素的默认隐式 ARIA 语义。
因此,只要有可能,我们就应该使用 HTML 语义元素来代替 ARIA 属性。
例如下面这个例子:
<div role="button">Click Me</div>
上面的写法是错误的,你不应该使用 <div>
和 ARIA role
来创建一个按钮。
我们应该只使用一个明确其语义的 <button>
元素,就像这样:
<button>Click Me</button>
不要使用 role 属性改变语义元素的含义
不要改变原生语义,除非你真的必须这样做。
正如我们提到的,许多 HTML 语义元素对它们都有隐含的意义。
例如:
当我们使用
<button>
元素时,它向用户代理暗示这是一个交互元素(通过光标单击、回车键或空格键进行交互),它将触发页面上的一些交互。如果我们使用一个
<a>
元素,那么对用户代理来说,与该元素交互(通过光标单击或回车键)会将用户从页面导航到另一个位置,或者导航到同一页面上的不同位置。
由于这些元素中的许多元素都具有隐含的含义,因此建议不要使用 ARIA role
来更改它们。以下是一个例子:
<h1 role="button">Heading Button</h1>
以上写法是错误的,我们应该使用适当的元素,而不是重新调整语义元素的用途。
<h1><button>Heading Button</button>
</h1>
或者,我们可以将 ARIA role
应用到一个没有任何含义的元素上(你觉得有必要的话),如 <span>
。
<h1><span role="button">Heading Button</span></h1>
其他一些冗余 ARIA 的示例:
<button role="button">戳我</button>
<a href="https://www.baidu.com" role="link">你敢点我吗?</a>
<input type="checkbox" role="checkbox" />
<input type="radio" role="radio" />
HTML5 使用默认的隐式语义定义了一组新的结构和分段元素,这些语义与 ARIA role
匹配(在某些情况下):
使用
role=button
时,考虑使用<button>
元素,或者其他各种原生 HTML 按钮类型。使用
role=link
时,考虑改用<a href>
元素。使用
role=heading
和aria-level="1-6"
,考虑改用<h1>
到<h6>
元素。使用
role=list
和role=listitem
时,考虑改用<ol>
或<ul>
和<li>
元素。使用
role=listbox
和role=option
,考虑改用<select>
和<option>
元素。使用
role=checkbox
或role=radio
时,考虑改用<input type="checkbox">
或<input type="radio">
元素。使用
role=textbox
,可以考虑使用<input type="text">
或搜索、电子邮件、URL 或电话。其他一些语义元素:
article
、aside
、footer
、header
、main
、nav
、section
等等…
这意味着在实现后,浏览器将公开该元素的默认隐式语义,因此您不必这样做。
交互式 ARIA 元素必须被所有媒体访问
所有交互式 ARIA 控件必须与键盘一起使用。
在元素上使用 ARIA role
并不足以真正改变元素的 role
。例如,如果我们试图将一个 <div>
更改为一个 <button>
,则需要手动添加适合 <button>
的交互功能。
在 ARIA 指南中,有一个每个元素应该具有的功能列表。例如,一个有效的按钮必须满足以下要求:必须可以用光标、回车键、空格键单击(配合 JS 可以轻松实现)。
在使用 ARIA role
时,我们需要了解这些需求。使元素看起来像按钮并不能使它成为按钮。我们需要考虑所有媒介中的用户如何与元素交互。
对可见的可聚焦元素使用适当的 Role
不要在可见的可聚焦元素上使用
role="presentation"
或aria-hidden="true"
。
ARIA role="presentation"
属性意味着元素仅用于视觉目的,并且不以任何方式交互。aria-hidden="true"
属性表示元素不应可见。
当我们使用这些属性时,我们需要知道它们所应用到的元素以及它们的可见性和交互状态。例如,这两个按钮都会导致一些用户关注他们不存在的元素。
<button role="presentation">Click Me</button>
<button aria-hidden="true">Click Me</button>
以上写法都是不正确,这些属性只能应用于非交互或不可见的元素。
<button role="presentation" tabindex="-1">Don't Click Me</button>
<button aria-hidden="true" style="display: none;">Don't Click Me</button>
交互元素必须具有可访问的名称
所有交互元素必须具有可访问的名称。
可以与之交互的元素,例如按钮和链接,需要有一个可访问的名称(Accessible Name)。可访问名称是在可访问性 API 属性具有有效值时确定的。
可以根据元素的类型指定元素的可访问名称。例如,表单输入通常从相应的 <label>
元素获取其可访问的名称。
<label>Username<input type="text">
</label><label for="password">Password</label>
<input type="password" id="password">
其他元素,例如按钮和链接,可以从它们的文本内容或标签属性中获得它们的可访问名称。
更多资源
MDN:ARIA —— MDN 上丰富的 ARIA 资料
在 HTML 和 ARIA 大括号上(默认的隐式 ARIA 语义,他们不想让你知道)
HTML5 – W3C建议书2014年10月28日
在 HTML 中使用 ARIA 的注意事项
http://www.taodudu.cc/news/show-2761197.html
相关文章:
- HALCON_XLD轮廓算子_二
- G1垃圾回收器详细解读
- Java垃圾回收器
- MVP注册登录和XListView刷新加载
- 垃圾收集器G1与ZGC
- OCR论文阅读笔记01--multi-oriented scence text detection via corner localization and regin segmentation
- regin,clip Android
- TiDB监控pd面板显示:Region Health: empty-regin-count很多,怎么回收empty-regin?
- HBase原理 -Regin切分
- 世界上最著名也最危险的APT恶意软件清单
- Regin恶意软件:何以潜伏如此久?
- 3dmax全套黄金自学教程
- Unity3D自学笔记
- vue 使用three.js 实现3D渲染
- 3D软件渲染教程
- pytorch3D参考教程
- Unity3d shader 教程一 准备
- 3Dmax建模教程详细步骤3D建模速成入门到高级教程
- panda3d python教程_图解 Panda3D引擎开发入门
- 3Dmax制作锁模型教程
- Web 3D渲染引擎HOOPS Communicator动画编辑器的使用 | HOOPS教程
- keyshot手机渲染教程_keyshot渲染教程
- Cocos技术派 | 3d人物渲染详细教程
- keyshot渲染图文教程_KeyShot中渲染汽车教程
- 自学3D建模
- 3dMAX足球建模教程
- 3D MAX界面操作教程及渲染技巧
- 3D建模软件测试自学,收藏:5个自学3DMAX教程以及3D模型资源的网站
- Word技巧之:将PPT框图以可编辑形式插入Word文档
- VISIO无法插入到word,ppt中
在 HTML 中使用 ARIA 的规则相关推荐
- 介绍sendmail中mail relay的规则
介绍sendmail中mail relay的规则 以前总结和写的一些教程的一些资料,一直没时间发布到博客上面,五一到了,终于有点时间发布啦!关于Linux上面还会有RHCE系列的学习笔记发表 一.什么 ...
- c语言程序中unit怎么定义,c ++中的一个定义规则(One definition rule in c++)
c ++中的一个定义规则(One definition rule in c++) 根据c ++标准: 任何翻译单元都不得包含任何变量,函数,类类型,枚举类型或模板的多个定义. //--translat ...
- Ajax中的url使用规则
Ajax中的url使用规则 Ajax中的url使用规则如下: 先封装项目访问地址: String basePath = request.getScheme() + "://" + ...
- 论文浅尝 | 知识图谱推理中表示学习和规则挖掘的迭代学习方法
作者:张文,浙江大学在读博士,研究方向为知识图谱的表示学习,推理和可解释. 本文是我们与苏黎世大学以及阿里巴巴合作的工作,发表于WWW2019,这篇工作将知识图谱推理的两种典型方法,即表示学习和规则进 ...
- mysql排序规则错误_MySQL中“非法混合排序规则”错误的疑难解答
阿波罗的战车 更改字符串的一个(或两者)的排序规则以使它们匹配,或者添加一个COLLATE从句到你的表情.这"校对"到底是什么?如下文所述字符集和排序规则:A 字符集是一组符号和编 ...
- 怎么查看ingress的规则_有机合成中常见的基础理论规则
本文总结了本号以往发布的一些有机合成中常见的基础理论规则,方便大家学习交流,点击下方标题链接链接可以查看详细内容,内容不全,小编后面还会更新.在下方菜单"知识技能"中也可以点击查看 ...
- mysql 中文字符排序规则_mysql中字符集和排序规则说明
数据库需要适应各种语言和字符就需要支持不同的字符集(Character Set),每种字符集也有各自的排序规则(Collation). 一.字符集 字符集,即用于定义字符在数据库中的编码的集合. 常见 ...
- vue验证整数_前端Vue中常用rules校验规则
前端Vue中常用rules校验规则 1.是否合法IP地址 export function validateIP(rule, value,callback) {if(value==''||value== ...
- android intent-filter作用,Android中Intent-Filter的匹配规则是什么
Android中Intent-Filter的匹配规则是什么 发布时间:2020-12-14 15:19:32 来源:亿速云 阅读:67 作者:Leah 今天就跟大家聊聊有关Android中Intent ...
最新文章
- hibernate Expression详解
- Tomcat 5.5 配置 MySQL 数据库连接池
- 【MCtalk直播】全面复盘直播答题,深度剖析产品架构的难点与坑
- pipenv 虚拟环境新玩法
- SQL Server 性能调优(cpu)
- Django中--自定义模型管理器类
- 后代元素 span:first-child{...}
- Windows核心编程_获取鼠标指定位置的RGB颜色值
- 18家机构批量刷新SOTA!T5 is all you need!
- 每天一个linux命令(25):chgrp命令
- java的addattribute_Java AttributeSet.addAttributeListener方法代码示例
- 关于各操作系统对UVC协议支持的说明
- 永久免费的pdf编辑器
- 将罗马字符串转换为整数(C#)
- 大学c语言如何自学,大学c语言的学习方法指导
- whta is the前后端分离
- 树莓派3B+:串口通讯
- 关于自建ip池可能出现的问题
- 马士兵mysql_MYSQL相关总结(马士兵教育)
- request无法获取到前端发送的form表单数据
热门文章
- Ubuntu上git的简单使用,拉取远程分支,修改并提交
- imx6 linux 开发环境,米尔iMX6UL开发板Linux操作系统的环境部署
- 怎么查看笔记本内存条型号_新买的笔记本如何查看笔记本内存条型号有哪些方法...
- 洛谷P1567 统计天数
- 面向接口编程VS《倚天屠龙记》里张三丰教无忌打太极
- 全连接神经网络基础——正向传播及损失函数
- matlab的汉明窗函数如何导出,基于汉明窗函数的FIR低通滤波器的设计.doc
- php的解析别名,浅谈laravel aliases别名的原理
- 朱丹老师课程学习笔记:8、职场晋升-没人带怎么办?这样搜资料的小白也能变大神
- unbantu...