<!DOCTYPE HTML> <html> ... </html>
这样创建网页并非不可,但极有可能会给视障用户带来一些麻烦。比如iOS的旁白在使用默认语言语音的情况下,该页面中的英文字符能正常读出,而中文字符则被忽略或错误的读出。从用户层面上解决该问题并不复杂,只需在旁白的语音设置中为转子语言添加中文中国大陆选项,并配置好相关语音即可,但只有极少部分的视障用户知道这样的解决方案。因此,开发者只需要在网页创建的过程中,为标签增加属性即可完美解决该问题。
<!DOCTYPE HTML> <html lang="zh"> ... </html>
PS:该方案已应用于IT之家的移动网页版
2、为网页增加路标
一个完整的网页一般包括横幅、导航栏、主要内容、补充内容、版权信息等区域,如果有幸你的网页包含这些区域,你该如何使用户轻松地认识它们?显然,针对不同区域设置不同的CSS效果即可做到。那么,如何为完全失明的视障用户描述这些区域呢?
其实在W3C的标准中就有一项名为WAI-ARIA的技术能应对此类问题。在这项技术中,有一类元素被称为路标元素,在当前区域的顶级元素上使用路标元素,即可为视障用户提供区域描述信息,而这些更改并不会对普通用户的体验带来影响。
精简后的代码如下
<div role="navigation"> <a href="">首页</a> <div> <a href="">辣品</a> <a href="">圈子</a> <button>我</button> </div> </div>
在屏幕阅读器的朗读中,该区域会朗读出“导航”二字,并在第一个元素和最后一个元素朗读结束后,提示视障用户该元素所处区域的开始或结尾。
这类路标导航元素应用得十分稀少,但应用了的都是十分优秀的产品,诸如Bootstrap、WordPress等在内的开源项目,谷歌、微软、苹果等国际大厂的网站,当然还有我大之家的移动网页版。想和它们一样优秀吗,那就快来添加这些属性吧!
WAI-ARIA路标导航role属性值一览表▼
值 | 含义 |
banner | 横幅区 |
search | 搜索区 |
navigation | 导航区 |
main | 主内容区 |
complementary | 补充内容区 |
contentinfo | 版权与隐私声明区 |
form | 表单区 |
通过这张一览表,你的网站也能为视障用户带来十分友好的体验。
3、为图片增加描述信息
精美的网页设计,与搭配的图片密切相关。除对网页起装饰作用的图片外,应该为每一张图片增加描述信息,这可使得视障用户的网页体验大幅度增强。国内为图片增加描述信息的网站十分稀少,而在微软、苹果、谷歌等国际大厂的网站中,图片描述基本是全覆盖的。如果你也希望你的网站获得相关技术,请参看如下代码:
<img src="image.jpg" alt="图片描述信息" /> <img src="image.jpg" aria-label="图片描述信息" />
这两种方案可任选其一,所区别的是前者为HTML的img元素提供的属性,而后者为W3C WAI-ARIA的替代文本属性。IT之家iOS版的文章界面采用的是后者,问起开发小哥选择后者的原因时,他一昂头略显迷茫的回复到:”我跟苹果官网上学的啊!”
4、为可点击控件添加TAB键支持
在网页开发过程中,难免使用到自定义控件。比如点击一张图片起到链接跳转的作用。
<img src="image.jpg" onclick="location.href='index.htm'" />
开发者通常会使用CSS技术为这张图片加上链接或按钮的样式,对于普通用户来说,毫无影响。但对于习惯用TAB键浏览网页的视障用户来说,这张图片很容易被忽略,那么如何为这张图片增加TAB键支持呢?
<img src="image.jpg" onclick="location.href='index.htm'" tabindex="0" />
你没看错,仅仅增加了tabindex属性即可做到。该属性为网页元素定义TAB键浏览顺序所用,参数为数值,当参数为0时,该元素即可被TAB键聚焦。
当然,你可以让这段代码更完美:
<img src="image.jpg" onclick="location.href='index.htm'" tabindex="0" role="button" aria-label="首页" />
这样做的好处在于,使该图片获取TAB键支持的同时,还能提示视障用户该元素为按钮,并且用替代文本为该元素提供了“首页”的提示,而这些更改仍然不会对普通用户造成影响。
5、不影响视觉效果的文本提示
看到这里的你,是否联想到之前我们提到的aria-label替代文本,这的确是个不错的选择,你可为视障用户浏览的任何未添加文本标签的元素使用该属性。但请注意,如果该元素本身携带文本标签,仍然使用aria-label后,绝大多数屏幕阅读器会只朗读aria-label中的内容。
<button aria-label="替代标签">标签</button>
(该按钮会被朗读成“替代标签”)
还有一种方案也来自WAI-ARIA,该属性为aria-LabelLedby。它的值为元素ID,多个值用空格分割。该属性通常用于没有文本标签的元素,值为非语义化的标签ID。
举个例子展示它的应用场景。在iOS版IT之家的帖子编辑器中,正文编辑区为自定义控件,而该输入控件的标签在它的顶部,在开启旁白的情况下,编辑器的标签和正文输入区域为两个焦点,代码如下
<div>请输入正文</div> <div contenteditable="true"></div>
此时,你只需要为第一个div增加一个独有的ID,并在第二个div中使用aria-labelledby即可获得一个提示“请输入正文”的自定义编辑区。
<div id="EditLabel" aria-hidden="true">请输入正文</div> <div contenteditable="true" aria-labelledby="EditLabel"></div>
第一个div中的aria-hidden="true"是什么鬼?设想一下,编辑区的文本标签已经获得了,第一个div的焦点还会存在吗?明确告诉你,依然会存在,所以使用aria-hidden="true"隐藏它,该属性的隐藏技能仅针对视障用户,并不影响普通用户的观感体验。
6、合并焦点
不得不佩服你还有耐心读到这里,我都写累了呢!
在视障用户浏览网页过程中,还会经常遇到的一种麻烦就是焦点过于分散,这样的麻烦并非开发者有意为之,实在是机缘巧合下产生的,不信你看
▲图为IT之家移动网页版资讯列表项
代码如下:
<a href=""> <div> <img src=""> </div> <div> <p>< span>时间</span> <span>评论数</span> </p> <p>标题</p> </div> </a>
这样的设计会严重影响视障用户在移动版网页上的体验。具体表现为,该链接被拆分成了多个焦点,图片、时间、评论数和标题各自为战,任意点击当中的一个焦点,都会打开相同的页面。由于该链接焦点被拆分成了四个焦点,导致视障用户的滑动浏览效率大大降低,如何解决呢?
我们通过此前大篇幅的介绍,这个问题的解决方案已经很多了,可以用aria-label重新再A元素中定义标签;还可以通过aria-labelledby关联所有被拆分焦点的ID。不过,这些看似都比较复杂,我们简单粗暴的启用了一种新方案,使用role="option"将焦点合并了。
role = "option"是为自定义选择项控件提供语义化支持的属性,由于option的天性,它无法被拆分成多个焦点,使用它我们成功解决了一个复杂的问题。但在此,我们并不推荐使用它,虽然当前市面上的屏幕阅读器都能在他的帮助下整合被拆分的焦点,但不保证在长远的将来,该属性仍具有相关优良特性。
看到这里的朋友,我敬你是条汉子,本文写到这里真的就结束了,今天介绍的这几种方法虽然适用人群为小众,但他们同样也是这个点和线钩织成世界中的一员,他们理应和普通用户获得相同的用户体验。本文虽结束了,但他的后续篇目正在路上,在不久的将来定会和大家见面。
延伸阅读:
广告声明:文内含有的对外跳转链接(包括不限于超链接、二维码、口令等形式),用于传递更多信息,节省甄选时间,结果仅供参考,IT之家所有文章均包含本声明。