⽆障碍开发（⼗）之读屏软件读什么？
例如使⽤了 a 标签制作了按钮，如果不进⾏额外的优化，读屏软件在朗读时会读作"⽂字内容链接"，但实际上该 a 标签是⽤作按钮使⽤，因此可以在标签上添加role="button"属性。此时，读屏软件会读作"⽂字内容按钮"。
可以看到，读屏软件在朗读时会在结尾朗读出元素的属性，这也是⽆障碍优化中重要的⼀环。⽆障碍优化就是要解决如何使得元素的属性被正确识别，如何使得元素的内容被清晰准确地朗读，如何排除⼲扰元素等问题。在了解 WeRead
H5 的⽆障碍优化处理之前，⾸先需要了解 Web ⽆障碍开发的基础知识，及读屏软件的⼯作⽅式（以 Apple VoiceOver 为例），可以参考以下资料：页⾯⽆障碍基础知识：
⽆障碍教程：
读屏软件的使⽤：
Android和iOS表现
安卓和ios的读法可能会有不同，属性在不同的浏览器上⽀持不同
DOM 的顺序很重要
读屏软件在读屏时默认按照 DOM 的顺序朗读，因此如果 DOM 的顺序与内容的语义顺序不⼀致，例如使⽤了flex-direction: row-reverse；使得内容的顺序倒序显⽰，会使得内容难以理解。因此尽量避免使⽤会影响到 DOM 视
觉顺序的样式，如果⽆法避免，需要⼿动设置tabIndex属性，告知读屏软件正确的内容顺序。
为⾮⽂本元素提供⽂本说明
关于Image
图⽚或者动画均需提供alt信息，对于某些⽤于装饰性的图⽚，则需设置alt为空，使得读屏软件可以忽略此元素。如图⽤于装饰页头的图⽚，实际并没有传递有价值的信息。
对于图表⽂件，alt属性的设置则需要简明扼要的表达出图表的信息，并不⽤把⾥⾯的细节都详细得描述出来。例如下⾯的图alt信息设置为销售额从 1996 年到 2004 年间持续稳定增长，从 400 万增长到了 1600 万。并不需要把每⼀年的
增长额都详细得描述出来。
<img>标签需要加上alt属性，读屏软件会⾃动读出alt的内容，例如alt内容为"⼀只⽬光汹汹凝视远⽅的猫"，那么会被读作"⼀只⽬光汹汹凝视远⽅的猫图像"。如果没有添
加alt属性，那么仅会读作"图像"，视障⽤户会完全⽆法
理解其实际含义。但是，当<img>标签出现在<a>标签内部，作为⼀个图像链接时，对于放在链接⾥⾯的图⽚，如果已经有⽂字的说明，alt也设置为空，这样避免读屏软件重复同样的内容。如下⾯的 HTML：
<a href=”apple/iphone/”> <img src=”iphone.jpg” alt=””>Apple iPhone </a>
a的内容已经指明了这是个苹果⼿机，img的alt属性就没必要再设置⼀次了。否则读屏软件会连续读两次重复的内容，引起混乱。
视频使⽤ title 属性
与上⾯的<img>标签相似，<video>标签需要加上title属性，例如title内容为"⼀只正在奔跑的猫"，那么会被读作⼀只正在奔跑的猫视频"。
使⽤语义化的元素
尽量使⽤语义化标签
语义化的 HTML 标签，例如<header><footer><nav><section><main><aside><button>，使⽤语义化的标签，主要影响两个⽅⾯：
选中元素时是否会整块选中
朗读时结尾会加上怎样的修饰词
其中默认设置下，⽬前仅<button>标签可以使得选中元素时会整块选中，⽽不单独选中⼦元素。⾄于修饰词这⾥列举具体的情况：
<header>读作"xxx 横幅标志性内容"。
<footer>读作"xxx 页脚标志性内容"。
<nav>读作"xxx 导航标志性内容"。
<section>仅读作"xxx"，没有结尾修饰词。
<main>读作"xxx 主要标志性内容"。
<aside>读作"xxx 补充标志性内容"。
<button>读作"xxx 按钮"。
<a>读作"xxx 链接"。
实际上，在浏览器内部，使⽤语义化标签会隐式加上特定的role属性，最后朗读时的结尾修饰词也正是这些role属性的值以及分类，其他role的值朗读时也可以以此类推，⽽以上标签与role属性具体对应的关系如下：
以上role属性值的分类⼤多数都属于。
role 属性
如果出于其他考虑，使⽤了⾮对应语义的标签，例如开头提到的使⽤ a 标签实现按钮，就需要添加role="button"属性来声明这是⼀个按钮。同理，其他类似情况也可以这样处
理，主要的就是影响朗读时的修饰词。
禁⽤状态使⽤ disabled 属性
使⽤特定的 class 来增加禁⽤态样式是常见的⼿法，但由于 class 语义并不能被读屏软件识别，因此读屏时⽆法知道当前处于禁⽤态。可以改为使⽤disabled属性实现禁⽤态，例如：
<input type="search" name="q" placeholder="请输⼊⽤户名" aria-label="搜索⽤户" disabled/>
/* 禁⽤态样式 */
input[disabled] {
opacity: .5;
}
会读作搜索⽤户请输⼊⽤户名变暗搜索栏，读屏软件会⽤"变暗"这个词表⽰搜索栏处于不可⽤的状态。⽽对于没有disabled属性的标签，例如 a 标签，可以使⽤aria-disabled属性达到同样的效果。
可使⽤ aria 标签向不存在原⽣语义的元素添加语义
aria-label="screen reader only label"，⽤于添加朗读时的描述，读屏时会读出其中的内容，⽽忽略标签的原有的⽂字，例如为 a 标签同时添加role="button"和aria-label="额外的按钮描述"，最终会朗读
成"额外的按钮描述按钮"。
aria-controls="main"，⽤于给操作按钮关联控制区域，VoiceOver 上这个属性没有任何作⽤，但 PC 读屏软件中，添加了该属性后，可以把焦点从按钮快速移动到被控制区域。
aria-live="true"，添加了该属性的元素，在其内容发⽣变化时，读屏软件会⾃动读出变化后的新内容。可以⽤于会动态刷新的元素，例如发现卡⽚上的“XXX⼈参与活动”，书城的换⼀批功能，⽤于监听实时变化的数据。实际
效果可以参考这个。
动画
可在 iOS 下通过 CSS 选择器@media(prefers-reduced-motion)来针对开启了“避免动画”的⽤户取消动画。
隐藏屏幕外的元素
确保屏幕外的内容已通过display: none或visibility: hidden隐藏（如浮动出现的 alert 和 banner 等），如没有隐藏，读屏软件仍会读出元素内容，但屏幕外的元素通常不希望被读出，如果不⽅便使⽤样式进⾏隐藏，可以为
元素添加aria-hidden="true"属性，元素则会被读屏软件忽略。
隐藏的内容分为两种，⼀种是为了布局的需要，在条件满⾜的情况下才会显⽰出来；另⼀种是只给读屏软件读的内容：有时候我们为了使读屏软件更准确的读取信息，会提供⼀些额外的描述来达到此效果，但为了不给正常⽤户带来困扰，
这些内容对正常⽤户来说是隐藏起来的。隐藏内容我们通常⽤display：none或者visibility:hidden来表⽰，但读屏软件同样也会忽略这类内容。那如何隐藏内容⼜能使读屏软件读出来呢？另外⼀种隐藏内容的⽅式是使⽤绝对定
位使得内容不出现在当前屏幕上，如：{position:absolute;top:-30000px;}所以在选择使⽤哪种⽅式隐藏内容时就需要慎重考虑，display:none visibility:hidden对任何⼈都是隐藏的，如果想只给读屏软件读到就需要使
⽤上⾯的绝对定位⽅式。著作权归作者所有。
空格的使⽤
我们可能会遇到⼀种情况例如：招商银⾏卡（9326），读屏软件⼦读屏的时候会读为“招商银⾏卡九千三百⼆⼗六”但是这个并不是盲⼈⽤户期待听到的，或者读为“招商银⾏卡九三四六”会更合适，所
以我们要如何处理呢？有两种想法
第⼀种：将9346这⼏个“数字”分别替换成“中⽂”，但是需要注意的就是因为银⾏卡号哪个数字都有可能，所以我们需要做⼀个数字和中⽂的映射
第⼆种：在9326这⼏个数字中间分别加⼀个空格，这样因为每个数字都不挨着，中间有⼀个看不见的空格，所以读屏软件在读屏的时候就不会读成“九千三百⼆⼗六”⽽是“九三四六”
中⽂的使⽤
在某些情况下如果有些读法不对可以替换为中⽂
常⽤场景
⼀、图像的编写
如上⽂所述，图像需要补充⽂字描述，补充时需要使⽤具体的内容标题，例如书籍封⾯，可以使⽤书籍名称，⽽不要直接统⼀描述为"书籍封⾯"，同理⽤户头像也应该使⽤⽤户名作为描述⽂字。
⼆、按钮的编写
在 H5 中，为了避免⼀些浏览器默认样式的⼲扰，以及制作点击效果（），⽬前采⽤ a 标签实现。但从⽆障碍的⾓度考虑，a 标签默认会被当做链接处理，读屏时会读作"链接内的⽂字链接"。
基础⽆障碍适配
需要加上aria="button"属性，例如：
<a class="test_btn" role="button" href="javascript:;">⽂字</a>
读屏时会读出"⽂字按钮"。
增加描述⽂字
如果 a 标签内本⾝没有⽂字，例如以图⽚、背景⾊和边框制作的按钮，还需要加上aria-label="描述⽂字"，读屏时会读作"描述⽂字按钮"的形式。当 a 标签内的⽂字对于视障⼈⼠不⾜以描述清楚按钮作⽤时（例如需要结合上下的元
素，或者结合按钮本⾝的背景图才能理解按钮的含义时），也可以加上aria-label属性，aria-label的内容会被优先读出，例如：
<a class="test_btn" role="button" href="javascript:;" aria-label="更完整的描述">⽂字</a>
读屏时会读出"更完整的描述按钮"。
多重标签嵌套
另外 a 标签内容如果有嵌套的标签，并不会影响⽂字被读出，例如：
flex软件<a class="test_btn" role="button" href="javascript:;">
<span class="test_btn_inner">
<span class="test_btn_inner_text">⽂字</span>
</span>
</a>
读屏时仍会读出"⽂字按钮"。
三、整块可点击元素的编写
在遇到 banner 等本⾝由多个⼦元素组成，但点击时为整块点击的元素，需要分为两种情况考虑
使⽤ a 标签实现
如果使⽤了默认的点击效果，即使⽤了 a 标签实现外层框，读屏时⼦元素会被分别选中，但实际上单独读出每个⼦元素不能表达按钮整体的完整含义。因此，我们建议整块当作按钮处理，但⼀般⽆需添加aria-label，让读屏软件直接
按 DOM 顺序读出⼦元素的⽂字内容即可，例如：
<a class="welcomeBonus_packet" href="javascript:;" role="button" @click="packetRedeem">
<div class="welcomeBonus_packet_info">
<div class="welcomeBonus_packet_info_title">主标题内容⽂字</div>
<div class="welcomeBonus_packet_info_desc">描述⽂字</div>
</div>
<div class="welcomeBonus_packet_btn">
<span>提⽰⽂字</span>
</div>
</a>
会被读作"主标题内容⽂字描述⽂字提⽰⽂字按钮"，视障⼈⼠会清楚这是整体点击的按钮，并且了解到其作⽤。如果部分内容不希望被读出来，精简朗读⽂案的时长，例如作⽤不⼤的辅助语句，可以单独添加aria-hidden="true"。
需要注意，可点击元素点击后跳转页⾯通常采⽤role="link"声明，⽽点击后进⾏⼀些操作则通常采⽤rol
e="button"声明，读屏的时候结尾分别为"链接"和"按钮"，但本场景下建议统⼀使⽤role="button"或者role="text"或者role="heading"，因为role="link"并不会让元素整块被识别，实际体验上，整体识别能带来更好的体验，⽽视障⼈⼠对于"链接"和"按钮"的理解包容度也⽐较⾼。但是role="button"还存在的⼀个问题就是在读屏软件最后会读出⾓⾊"按钮"，有些场景并不适⽤。
使⽤语义化标签实现
如果⽆需使⽤默认的点击效果，建议使⽤语义化的标签实现外层框，例如section、aside，这样⽤户在使⽤“container 模式”进⾏读屏时，元素会直接被整体识别，⽽不会单独读出⼦元素。
以 VoiceOver 为例，双指旋转可以调节焦点选择的模式，”container 模式“下焦点仅会被section这类外层容器捕捉。
使⽤aria-hidden实现
如果使⽤了默认的点击效果，即使⽤了 a 标签实现外层框，读屏时⼦元素会被分别选中，但实际上单独读出每个⼦元素不能表达按钮整体的完整含义，所以我们可以使⽤aria-hidden对a标签中的⼦元素进⾏隐藏，这样隐藏的部分就不会获得焦点，屏幕阅读器就不会读，再给a标签添加role为button、text、heading等都可以，另外获得焦点时读的内容可以使⽤js给a标签动态添加aria-label
<a class="welcomeBonus_packet" href="javascript:;" role="button">
<div class="welcomeBonus_packet_info" aria-hidden="true">
<div class="welcomeBonus_packet_info_title">主标题内容⽂字</div>
<div class="welcomeBonus_packet_info_desc">描述⽂字</div>
</div>
<div class="welcomeBonus_packet_btn" aria-hidden="true">
<span>提⽰⽂字</span>
</div>
</a>
实例
实例⼀：
<div class="pay-total" role="text">
<strong class="JS-pay-total">
<span class="JS-pay-total-icon">¥</span>
14
<em>.22</em>
</strong>
</div>
问题：ios中屏幕阅读器将⽀付⾦额14.26分开读，并且不读元
原因：⽗元素包含很多⼦元素，每次都是单独获取，⽆法获取整块元素
调整：设置role="text"/role="heading"，并将调整好的数据赋值给aria-label，并对JS-pay-total类所在的元素设置aria-hidden="true"
代码：
HTML：
<div class="pay-total" role="text">
<strong class="JS-pay-total" aria-hidden="true">
<span class="JS-pay-total-icon">¥</span>
14
<em>.22</em>
</strong>
</div>
Javascript:
if (total[1].length > 1) {
total[2] = total[1].substr(0,1);
total[3] = total[1].substr(1,1) == '0' ? '零' : total[1].substr(1,1);
}
$('.pay-total').attr({
'role':'text',
'aria-label':total[0] + '点' + total[2] + ' ' + total[3] + '元'
});
实例⼆：
问题：收银台⾸页点击全部付款⽅式，出现弹层，发现还可以访问弹层下⾯的元素
原因：当弹层弹出的时候，弹层下⾯的元素仍然可以获得焦点
调整：当弹层弹出的时候，弹层下⾯的元素不能获取焦点，也就是当弹层弹出时对下⾯的元素应⽤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"
});
});
参考
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论