无障碍开发（七）之实例讲解
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); } |
aria-hidden
问题：收银台首页点击全部付款方式，出现弹层，发现还可以访问弹层下面的元素
原因：当弹层弹出的时候，弹层下面的元素仍然可以获得焦点
调整：当弹层弹出的时候，弹层下面的元素不能获取焦点，也就是当弹层弹出时对下面的元素应用aria-hidden=true，当关闭弹层的时候对下面的元素应用aria-hidden=false，让弹层下元素重新获得焦点
代码：
|
// 点击弹出弹层 show: function(cardList) { var that = this; if (cardList) { that._initCardList(cardList); } that._viewport.append(that._wrapper); var tid=setTimeout(function () { that._viewport.append(that._mask); that._mask.attr({ "aria-hidden":"false" }); that._wrapper.attr({ "aria-hidden":"false" }); $(".order-bar-wrap,.JS-page-ct,.newPay-btn-container").attr({ "aria-hidden":"true" }); that._mask.show(); that._wrapper.addClass('COM_LAYER_IN'); },320) }, // 点击关闭弹层 that._viewport.delegate('.choose-card-layer-mask,.choose-card-Layer-close','click',function() { that.hide(); $(".order-bar-wrap,.JS-page-ct,.newPay-btn-container").attr({ "aria-hidden":"false" }); }); |
aria-selected
问题：收银台打白条分期方式选项缺少选中状态
重现步骤：
1. 收银台界面，选择打白条，打开分期方式切换选择器
2. 单指触摸选中的分期状态
调整：添加选中状态，对当前选中的选项应用aria-selected=true
|
// 白条无障碍选中状态修复 $('.COMM_BLANK_NOTE_STAGE_LAYER_LIST_ITEM.judge-checked').attr('aria-selected','true'); |
无障碍模式下点击事件失效
a标签可能会导致点击事件无效也就是弹层不出来，所以我们可以将a替换成div
无障碍弹窗
应该在绝对必要的情况下才使用弹出窗口，因为这将牵扯到网页的可访问性问题，例如：用户使用的屏幕读取软件无法向用户说明弹出了窗口，因此如果某个网页的链接将弹出新窗口，最好在这个链接本身的文字中予以说明。
参考
