码迷,mamicode.com
首页 > 其他好文 > 详细

无障碍开发(十二)之怎样做好信息无障碍?

时间:2020-01-15 00:08:27      阅读:130      评论:0      收藏:0      [点我收藏+]

标签:目录   问题   一个   bind   阳光   键盘   fragment   合规   网页   

一、提供等效替代(文字或者语音来替代)

1.1图像的等效替代

移动端或Web端开发,都是用相应的文本信息等效替代图像。(为图像添加描述性信息,并不是文本越长越好)

(1) 避免添加额外的、无意义、无价值信息的图像

(2) 避免使用图像来表现文本(也就是文字图片)

(3) 为图像提供替代文本

(4) 装饰性图像应该可以被辅助技术忽略(非文字图片)

技术图片

1.2验证码的等效替代

验证码不仅有图形和声音,也有手机验证码、数学计算验证码等其他类型。部署验证码时,需要至少考虑两种验证码,以帮助感官功能缺失的障碍群体可以替代使用。

技术图片

技术图片

1.3音视频的等效替代

技术图片

1.4颜色的等效替代

在设计中,应该考虑使用足够清晰的对比度,帮助这部分色盲用户,但是不仅是色盲用户需要这类设计,友好的对比度能够帮助他们更好地阅读内容。

在WCAG2.0等级AA中对比度有明确的要求:文本的视觉呈现以及文本图像至少有4.5:1的对比度。其公式如下:L1/L2 =4.5/1,L1是对比颜色中相对较亮的颜色,L2为对比颜色中相对较暗的颜色。

如果面对的是全色盲用户,可以考虑采用线条的粗细、线型、凹凸感或其他方式来对色彩进行等效替代。

二、用户界面和导航可被辅助技术操作

2.1功能可被辅助技术操作

作为设计者来说,需要考虑如下两点:

  • 所有的功能可以被辅助技术访问,比如读屏软件。

  • 辅助技术操控时,不会陷入某个控件。 

这样做对于普通用户也会有帮助,例如平板电脑,虽然只有虚拟键盘,但可以通过语音识别技术访问某个应用

技术图片

选项卡组件要做到信息无障碍,需要做到两点:

  • 交互无障碍,键盘事件响应合理 

  • 控制好页面的焦点,信息提示合理,每一个获得焦点的元素要提示出组件状态

键盘的交互操作如下:

  • 左方向键←:展示上一个选项卡内容。

  • 右方向键→:展示下一个选项卡内容。

  • Home键:展示第一个选项卡内容。

  • End键:展示最后一个选项卡内容。

 

      <ul class="tabs" role="tablist">↓

      <li tabindex=“0" id="tab1" role="tab" class="tm-selected"

      aria-selected=“true” aria-controls=“panel1”>商品详情</li>↓

      <li tabindex="-1" id="tab2" role="tab" aria-selected="false"

      aria-controls="panel2">规格参数</li>↓

      <li tabindex="-1" id="tab3" role="tab" aria-selected="false"

      aria-controls="panel3">累计评价</li> ↓

      <li tabindex="-1" id="tab4" role="tab" aria-selected="false"

      aria-controls=" panel4">服务详情</li>↓

      </ul>↓.

      <div id="panel1" aria-labelledby="tab1" role="tabpanel">...</div>↓

      <div id="panel2" aria-labelledby="tab2" role="tabpanel">...</div>↓

      <div id="panel3" aria-labelledby="tab3" role="tabpanel">...</div>↓

      <div id="panel4" aria-labelledby="tab4" role="tabpanel">...</div>

aria-controls:字符串、空格分隔的id值列表,定义了元素间不能通过文档结构决定的关系,在选项卡中非常适用

如上所述,在 HTML 元素上添加必要的属性,用JavaScript添加键盘响应事件,可以实现选项卡组件的无障碍操作和访问。

技术图片

2.2充足的时间读取和使用内容

一些人需要更多的时间输入文字、理解内容、操作控件或者是完成某个任务。

(1)除非是拍卖、考试等特定时间必须完成的内容,应该让用户可以停止、延长或者调整时间限制。

(2)可以暂停、停止或隐藏移动、闪烁或滚动的内容,对于学习障碍、读写障碍人士来说,这些内容会分散注意力,打扰他们读取内容。

(3)用户可以主动推迟或完全禁止、中断,除非是紧急中断,用户发现某个错误,可以及时中断,以避免造成不必要的法律、财产纠纷。

2.3避免引发病症

闪动的内容以某种频率或方法闪烁,可能引起光敏性反应,因此应避免使用闪动内容,即使使用也应该确保不会造成相应的风险。WCAG2.0对此的规范是:闪光三次或低于阙值:网页不包含任何闪光超过3次/秒的内容,或闪光低于一般闪光和红色闪光阙值。

光敏性反应巳知的风险病症是光敏性癫痫(PhotosensitiveEpi1epsy,PSE),是反射性癫痫中最常见的一种形式,由视网膜受闪烁的刺激所诱发,于1885 年由Gower首次报道。60%的患者首次发作由看电视引起。其他刺激如电脑屏幕、舞厅的灯光、穿过树林的阳光、水面反光等也常有报道。

我们可以通过Photosensitive EpilepsyAnalysisTool(PEAP)等工具分析视频文件中不合规的闪烁问题。

2.4快速导航

内容的结构化越来越复杂,信息的体量也越来越大,对于大多数人来说,快速导航、查找内容以及快速定位自己在结构化内容中的位置,是非常好的用户体验。

  • 清晰的标题,可以帮助用户快速了解信息窗口中的大致内容。

  • 可以快速地在一系列相似内容中找到所需内容。

   例如通过浅层次的菜单目录查找或者通过搜索引擎,快速找到自己所需要的信息内容,对于残障用户来说,减少了操作频率,对于普通用户,也是一种非常好的用户体验。

  • 通过某种机制,可以快速跳过重复的内容,帮助辅助工具快速找到主要内容。

     由于辅助技术是线性地读取内容,重复的内容和模块,将消耗读屏软件用户大量的时间。对于这类用户,这些模块是冗余的信息,使用起来非常不便。

无障碍开发(十二)之怎样做好信息无障碍?

标签:目录   问题   一个   bind   阳光   键盘   fragment   合规   网页   

原文地址:https://www.cnblogs.com/kunmomo/p/12172064.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!