改善网页可访问性
本文介绍了一种通过调整HTML元素的属性来提升网页对于视障用户的友好性方法，特别是针对包含数字链接的模块进行改造，使得读屏工具能正确读取内容。
- 分别去掉数字a链接的aria-label属性和值，分别其加上aria-labelledby和href属性并赋值,给class="d_tit"的p标签加上id值如：id="tabs2"
- 把此模块的第一个数字a链接对应的class="d_picBox"的div的id值去掉，添加到 此模块内对应的class="d_txt"的p标签上
- 分别给其余数字a链接对应的class="d_txt"的p标签，加上ID,例如：id="002" 此demo以第二个数字a链接为例，实现的最终效果为：当focus到第二个数字a链接，读屏工具读出title：“Seat Pitch”，当点击回车时读出具体文本内容：“The pitch is 74 to 80 inches. Seats can lie flat at 180°, giving you more comfort during your journey.”
<a class="d_btn fl d_active" href="#002" aria-labelledby="tabs2">2</a>
<div class="d_eachText d_active"> <p class="d_tit" id="tabs2">Seat Pitch</p> <p id="002" class="d_txt">The pitch is 74 to 80 inches. Seats can lie flat at 180°, giving you more comfort during your journey.</p> </div>
注：其余模块解决方案参考此demo
扫一扫
41
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
