radio
| <div role="radio" aria-checked="true" aria-label="单选2" tabindex="0">单选tabindex="0"</div> |
这个div模拟了radio的功能，在平时读屏软件是分辨不出来的，但是加上role及aria-checked状态，屏幕阅读器就能阅读出其内容了。
aira-label
正常情况下，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.
aria-labelledby
如果想要屏幕阅读器读的标签文本在其他元素中存在时，可以将其值为该元素的 id。设置 aria-labelledby 的值为某个元素的 id 。那么屏幕阅读器就可以读取它的值。
|
<body> |
当 ul 获取到焦点时，屏幕阅读器会读：“选择你的职业”。
如果一个元素同时有 aria-labelledby 和 aria-label ，读屏软件会优先读出 aria-labelledby 的内容。
progressbar、aria-valuenow、aria-valuemin、aria-valuemax
|
<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来更新。
除了直接给标签加属性，还可以通过JavaScript代码把ARIA属性添加到元素并动态地更新，如下面所示：
|
// Find the progress bar <div> in the DOM. var progressBar = document.getElementById("percent-loaded");
// Set its ARIA roles and states, // so that assistive technologies know what kind of widget it is. progressBar.setAttribute("role", "progressbar"); progressBar.setAttribute("aria-valuemin", 0); progressBar.setAttribute("aria-valuemax", 100);
// Create a function that can be called at any time to update // the value of the progress bar. function updateProgress(percentComplete) { progressBar.setAttribute("aria-valuenow", percentComplete); } |
无障碍模式下点击事件失效
a标签可能会导致点击事件无效也就是弹层不出来，所以我们可以将a替换成div
无障碍弹窗
应该在绝对必要的情况下才使用弹出窗口，因为这将牵扯到网页的可访问性问题，例如：用户使用的屏幕读取软件无法向用户说明弹出了窗口，因此如果某个网页的链接将弹出新窗口，最好在这个链接本身的文字中予以说明。
参考