【it之家学院】改善视障用户的网页体验就这么简单 - 视障人士,优化,无障碍 - it之家

2021-10-08 17:40:37

【it之家学院】改善视障用户的网页体验就这么简单

2019/10/25 19:21:24来源: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的天性,它无法被拆分成多个焦点,使用它我们成功解决了一个复杂的问题。但在此,我们并不推荐使用它,虽然当前市面上的屏幕阅读器都能在他的帮助下整合被拆分的焦点,但不保证在长远的将来,该属性仍具有相关优良特性。

看到这里的朋友,我敬你是条汉子,本文写到这里真的就结束了,今天介绍的这几种方法虽然适用人群为小众,但他们同样也是这个点和线钩织成世界中的一员,他们理应和普通用户获得相同的用户体验。本文虽结束了,但他的后续篇目正在路上,在不久的将来定会和大家见面。

延伸阅读:

wai-aria 官方说明页

Copyright © 夜幻游戏网 @2021