【IT之家学院】改善视障用户的网页体验就这么简单
10月15日是第36个国际盲人节，在当天，国内外许多组织都举行了相关活动。而在IT之家数以万计的网友中，也有这样一批“特殊”的用户。以下这篇文章来自于一个多年为IT之家提供无障碍优化方案的老朋友，本期IT之家学院将由他为我们说说针对视障用户的网页体验，我们该如何改善。
首先要感谢IT之家邀请我撰写本文，作为长期隐秘于IT之家的一个视障用户，受到邀请十分激动，但内心十分惶恐，因本人嘴笨笔拙，水平一般能力有限，尝试撰写这类技术性文章还是头一回。在今天撰写本文想来意义重大，但个人才疏学浅，有不足之处还请各位大佬指教。
一款优秀的产品，它所涵盖的用户一定是多方面的，从不为了讨好绝大部分的用户而放弃对小众用户的支持，很荣幸，全程参与并见证了IT之家无障碍的逐步完善，说出来你们可能不信，在国内资讯类应用中，IT之家的无障碍体验可能是最好的了。而今天，我们将扒开IT之家无障碍完善之前的“惨状”，对，今天，我们将会已IT之家为蓝本，介绍视障用户在网页体验中的问题。
1、为HTML标签增加lang属性
长久以来，创建一个网页的HTML部分，我们习惯使用如下代码
<!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之家所有文章均包含本声明。
