无障碍开发（七）之实例讲解

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 。

当 input 组件获取到焦点时，屏幕阅读器会读出相应的 label 里的文本。

但是如果我们没有给输入框设置 label 时，当其获得焦点时，屏幕阅读器会读出 aria-label 属性的值，aria-label 不会在视觉上呈现效果。

经测试，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>
　　<div class="dropdown">
　　　　<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
　　　　选择你的职业
　　　　　　<span class="caret"></span>
　　　　</button>
　　　　<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
　　　　　　<li role="presentation">
　　　　　　　　<a role="menuitem" tabindex="-1" href="#">教师</a>
　　　　　　</li>
　　　　　　<li role="presentation">
　　　　　　　　<a role="menuitem" tabindex="-1" href="#">医生</a>
　　　　　　</li>
　　　　　　<li role="presentation">
　　　　　　　　<a role="menuitem" tabindex="-1" href="#">学生</a>
　　　　　　</li>
　　　　</ul>
　　</div>
</body>

当 ul 获取到焦点时，屏幕阅读器会读：“选择你的职业”。

如果一个元素同时有 aria-labelledby 和 aria-label ，读屏软件会优先读出 aria-labelledby 的内容。

progressbar、aria-valuenow、aria-valuemin、aria-valuemax

由于这个滚动条是用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

无障碍弹窗

应该在绝对必要的情况下才使用弹出窗口，因为这将牵扯到网页的可访问性问题，例如：用户使用的屏幕读取软件无法向用户说明弹出了窗口，因此如果某个网页的链接将弹出新窗口，最好在这个链接本身的文字中予以说明。

参考

ARIA