| <div role="radio" aria-checked="true" aria-label="单选2" tabindex="0">单选tabindex="0"</div> |
这个div模拟了radio的功能，在平时读屏软件是分辨不出来的，但是加上role及aria-checked状态，屏幕阅读器就能阅读出其内容了。
正常情况下，form 表单的 input 组件都有对应的 label 。
|
<form role="form"> |
当 input 组件获取到焦点时，屏幕阅读器会读出相应的 label 里的文本。
但是如果我们没有给输入框设置 label 时，当其获得焦点时，屏幕阅读器会读出 aria-label 属性的值，aria-label 不会在视觉上呈现效果。
|
<form role="form"> |
经测试，aria-label 只有加在可被 tab 到的元素上，读屏才会读出其中的内容。
| <span tabindex="0″ aria-label="标签提示内容">可被tab的span标签</span> |
使用aria-label时需注意：
同时使用aria-label和label for时，忽略后者。
同时使用aria-label和aria-labelledy时，忽略前者
IE不支持对input使用aria-label，但是支持aria-labelledby。
使用aria-labelledby时，即使对应的注释文本被隐藏，依然能读出来。
label for针对表单元素和div有效，span不行
表单元素中input type=button，不用加注释，读屏软件可以读出value
不是所有的title读屏软件都读，a，span以及button的title个别情况下不读，a，span在IE下直接读标签里的内容，button读value值
a标签必须加上href属性之后才能定位，否则就要用到tabindex.
如果想要屏幕阅读器读的标签文本在其他元素中存在时，可以将其值为该元素的 id。设置 aria-labelledby 的值为某个元素的 id 。那么屏幕阅读器就可以读取它的值。
|
<body> |
当 ul 获取到焦点时，屏幕阅读器会读：“选择你的职业”。
如果一个元素同时有 aria-labelledby 和 aria-label ，读屏软件会优先读出 aria-labelledby 的内容。
|
<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" /> |
由于这个滚动条是用div写的，没有字面含义。然而，对开发者来说，在HTML4中，又没有更多的语义化的标签，所以我们需要引入ARIA这个角色和属性，来给元素增加特定的属性。举个例子，role="progressbar"这个属性告诉浏览器，
该元素其实是一个JavaScript实现的进度条组件。aria-valuemin 和aria-valuemax 属性表明了进度条的最小值和最大值。 aria-valuenow则描述了当前进度条的状态， 因此它得用JavaScript来更新。
原文：https://www.cnblogs.com/kunmomo/p/11572839.html