[ARIA] What is Accessible Name Calculation?
What's in a name? In this lesson, I'll explain the concept of naming interactive elements for screen reader users, including forms, buttons, and links. You'll learn how to debug accessible names and descriptions using the Chrome Accessibility Developer Tools (previously a Canary experiment, now in Chrome), using multiple labeling techniques. We'll also listen to the effects of proper accessible names and descriptions in Voiceover and Safari.
For more information and the nitty-gritty browser implementation algorithm, refer to WAI-ARIA 1.1:
Search box:
<form class="search">
<input aria-labelledby="search-button" />
<button id="search-button">
<span aria-hidden="true" class="icon icon-search"></span>
<span class="visuallyhidden">Search</span>
</button>
</form>
Input field is labelled by the button, button is labelled by the text content.
Read more link:
<a href="#" aria-labelledby="readmore1 readMoreLabel1">
<span id="readmore1">Read more</span>
<span id="readMoreLabel1" class="visuallyhidden"> articles about cute animals</span>
</a>
aria-labelledby can accpet multi ids.
DIalog:
<dialog open role="dialog" aria-label="Newsletter sign up">
<!-- For custom button, we can use aria-label & aria-describedby-->
<custom-button role="button" tabindex="0" aria-label="Cancel" aria-describedby="cancelNote">
X
</custom-button>
<fieldset>
<!-- it is good to use legend to tell users what this form is all about-->
<legend>
<h2>Sign up your favorite friends for our newsletter!</h2>
</legend>
<div>
<!-- label for-->
<label for="dogs">Dog</label>
<input type="text" id="dogs" name="dogs" />
</div> <div>
<!-- best: using both for & label wrapping-->
<label for="cats">
Cat
<input type="text" id="cats" name="cats" />
</label>
</div> <div>
<!-- who else will be the label -->
<label>
Who else?
<input type="text" placeholder="e.g. Frank the Lizard" name="superfriends" />
</label>
</div>
<div>
<input type="submit" value="Submit" />
</div>
</fieldset>
<p id="cancelNote">Closing this dialog will cancel your submission.</p>
</dialog>
[ARIA] What is Accessible Name Calculation?的更多相关文章
- [ARIA] Create an Accessible Tooltip on a Text Input
Here we use HTML and CSS to create a stylish yet semantic tooltip on a form input. I am using aria-d ...
- [ARIA] Accessible modal dialogs
Learn how to create a modal dialog with accessible keyboard and screen reader mechanics using the na ...
- ARIA无障碍技术
ARIA Accessible Rich Internet Applications (ARIA) 规定了能够让 Web 内容和 Web 应用(特别是那些由 Ajax 和 JavaScript 开发的 ...
- HTML5+Bootstrap 学习笔记 3
HTML5 aria-* and role aria是指Accessible Rich Internet Application.role的作用是描述一个非标准的tag的实际作用,而aria-*的作用 ...
- ARIA(Accessible Rich Internet Application)
ARIA 为Web app提供满足用户不同需求的解决方案.建设起用户和软件之间的桥梁. 新的HTML5标准中增加 aria-* 的标签属性,全称Accessible Rich Internet App ...
- [ARIA] Accessible animations with reduced motion
Animations can make people sick, or worse! By adding animation toggles and listening in to the user' ...
- [HTML5] Accessible Icon Buttons
Icon buttons are very common in web applications, yet they often have accessibility problems. Learn ...
- web语义化之SEO和ARIA
在快速理解web语义化的时候,只知道web语义化有利于SEO和便于屏幕阅读器阅读,但并不知道它是如何有利于SEO和便于阅读器阅读的,带着这个疑问,进行了一番探索总结. SEO 什么是SEO? SEO( ...
- [翻译]如何在HTML5中有效使用ARIA
ARIA是Accessible Rich Internet Application的简称,指无障碍富互联网应用.可以使一些有功能障碍(如听力,视力)的人群,使用你的网站.下面看一下做为开发人员的我们, ...
随机推荐
- 【转帖】linux内存管理原理深入理解段式页式
linux内存管理原理深入理解段式页式 https://blog.csdn.net/h674174380/article/details/75453750 其实一直没弄明白 linux 到底是 段页式 ...
- springMVC设置不拦截静态资源的方法
SpringMVC提供<mvc:resources>来设置静态资源,但是增加该设置如果采用通配符的方式增加拦截器的话仍然会被拦截器拦截,可采用如下方案进行解决: 方案一.拦截器中增加针对静 ...
- Linux基础-02-目录文件管理
1. Linux文件系统的层次结构 1) Linux文件系统的树状结构: 在Linux或UNIX操作系统中,所有的文件和目录都被组织成一个以根节点开始的倒置的树状结构. 2) 目录的定义: 目录相当于 ...
- HTML5 Notification
H5的Notification特性 Web桌面通知 Notification API的通知接口用于向用户配置和显示桌面通知. 生产环境仅支持https下使用:否则会被默认禁止.开发环境可以在local ...
- Jmeter之分布式测试/压测
Jmeter做分布式测试的原因: 测试机器的配置低,对服务器进行压测时,造成不了压力. jmeter并发10000后,测试机就已经卡顿了,而且测试结果有大量失败(忽略了jmeter自身问题=.=||| ...
- CentOS7.9防火墙命令
CentOS7防火墙命令有变化: CentOS7: systemctl status firewalld.service 查看防火墙状态 systemctl stop firewalld. ...
- kvm第三章--虚拟化存储管理
- TensorFlow实现自编码器及多层感知机
1 自动编码机简介 传统机器学习任务在很大程度上依赖于好的特征工程,比如对数值型,日期时间型,种类型等特征的提取.特征工程往往是非常耗时耗力的,在图像,语音和视频中提取到有效的特征就更难 ...
- HTTP协议超级详解
HTTP协议简介 超文本传输协议(英文:HyperText Transfer Protocol,缩写:HTTP)是一种用于分布式.协作式和超媒体信息系统的应用层协议.HTTP是万维网的数据通信的基础. ...
- MM-发票校验与收货的差异处理
SAP FI-财务发票校验修改金额后没有进入差异科目问题:公司新建物料采购订单,在MM科目自动确定配置完成后,做发票校验时,修改金额没修改数量时,差异进入了原材料科目 换采购订单继续测试时,修改金额没 ...