互联网不断演化提高用户经验,网站无障碍性也不例外完成点可用性会议后, 我们终于意识到浏览网站有多难作为一个行业,我们需要帮助传播字并教育组织了解ADA对网站无障碍性的重要性并不只是避免被起诉, 并因为它是正确的事做
博客文章中, 我们将讨论网站无障碍性的重要性, 以及如何实现网站ADA兼容性
为什么要考虑网站无障碍性
- 公法类/sorta
- 这是我们的责任
- 做正确的事情
可视性残疾状态和图
2015视觉残疾流行
由全国盲人联合会提供
理解视觉缺陷
开工全盲
二叉低视觉
挑战小文本对比
3级色盲
红绿缺陷最常见
我们怎么到这里
1973年
复健法
1973年《康复法》经修正(Rehabct)禁止联邦机构实施方案、接受联邦财政援助方案、联邦就业和联邦承包商就业实践中基于残疾的歧视
源码 :https://www.ada.gov/cguide.htm?#anchor65610
1990年
美洲残疾人法
美国残疾人法于1990年成为法律ADA是一项民权法,禁止在公共生活所有领域歧视残疾人,包括工作、学校、交通和向公众开放的所有公共和私人场所。法律的宗旨是确保残疾人享有与其他人相同的权利和机会。ADA向残疾人提供公民权利保护,类似于根据种族、肤色、性别、民族血统、年龄和宗教向个人提供的权利保护保障残疾人在公共设施、就业、交通、州和地方政府服务以及电信方面的平等机会ADA划分为五大标题(或分段),涉及公共生活的不同领域。
源码 :https://www.ada.gov/cguide.htm?#anchor62335
1998年
恢复法第508节
国会修正了《康复法》,要求联邦机构向残疾人提供电子信息
恢复法第504节
接受联邦资助或赠款的组织需要在线内容无障碍化
源码 :https://www.ada.gov/cguide.htm?#anchor65610
2010年
DOJ根据ADA法提议网站访问规范
2015
信息和通信技术标准
美国存取局提交官方信通技术指南刷新WCAG(WEB内容无障碍指南)2.0AA级达标标准
2017
视障原告通过ADA网站无障碍首次测试胜出
2017年6月, 佛罗里达州一名联邦法官发布支持客户裁决 告杂货链, 声称它违反了《美国残疾人法》,据信这是网站ADA
2018年拟议条例由Trump管理
源码 :http://www.pepperlaw.com/publications/doj-puts-ada-website-project-on-hold-2017-08-02/
从这里我去哪儿
有两种选项考虑:
- 令网站ADA兼容实现所有项目WCAG2.0A
- 超出守法范围-潜在问题无法通过自动化ADA审核检测 帮助提高用户经验详解
网站ADA兼容性
除非网站是专为ADA达达标而建 不太可能百分百达
如何发现网站兼容性
- hire专业人员雇用一家Web公司,它经验ADA达守约并让他们为您审核
- 二维桌面或移动模拟程序应用或最常用ADA网站校验器http://wave.webaim.org.
- 可使用性例程搭建本地盲中心并查看是否有志工愿意浏览网站并提供反馈
网站无障碍桌面模拟器
NVDAWindows
免费工具很容易搭建连USB驱动器都可以运行,免得下载到PCWindows也有内置设置,但这些设置可能难以搭建Google Chrome还有一个插件命名为 "CHOMEVOX....
附加源码 :
网站无障碍移动模拟器
iphone-voiceOver
2015WEBAIM研究显示,VoiceOver是视障者使用顶级应用自由易开关变音Over使用网站经验模拟
如何激活语音Over或iPad上
- 启动设置应用自家屏幕
- 接通通用磁带
- 无障碍磁带
- 顶级Vision类Tap
- 接通语音OVER
Android-Talkack
安卓设备预安装
如何激活Talk背包
- 打开设备设置应用
- 开放无障碍环境,然后TalkBack
- 打开TalkBack
- 验证对话框中开机确定
ADA网站无障碍指南
目前有两套指南需要考虑
目前的508法(2000年发布)非常过期并引用1990年代后期Web技术WCAG2.0越多, 路边守法条件越好更新指南覆盖508法所包括的内容
第508节ADA网站无障碍指南
(a)文本等值非文本元素应提供(例如通过“alt”、“longdec”或元素内容提供)。
(b)等价多媒体演示文稿应与演示文稿同步
(c)网页设计应使所有带色信息都无色可用,例如上下文或标记
d)文件组织性应使其可读性而无需相关样式表
e)冗余文本链路应提供给服务器端图像映射的每个活动区
f)客户端图像地图应提供替代服务器端图像地图,除非无法用可用几何形状定义区域
g)行列标题应指向数据表
h)标记应用为数据表关联数据单元格和标题单元格,数据表有2或2以上逻辑行或列标题
高山市一)框架标题应配有便于框架识别和导航的文本
WCAG2.0指南
W3C发布Web内容无障碍指南,帮助所有用户包括残疾用户无障碍数字内容
WCAG2.0指南包括三级合规性
- A级优先级通常最易实现
- AA级比较全面GOLD达标
- 级AA最严格最全面无障碍设计
源码 :https://www.w3.org/TR/WCAG20/
POUR系统四大无障碍原理
可感知性:关联视觉信息(图形/颜色/布局)
操作性能 :与导航相关联(键盘/标签式)
可理解性:关联逻辑线性顺序
强势 :困难技术/功能性相关联(JavaScript,Flash等)
源码 :https://webaim.org/articles/pour/
ADA网站无障碍指南
ADA兼容网络设计资源
密钥失明概念
导航用户通常不使用鼠标
解析-不写脚本需要鼠标使用提供键盘替代
ALT标签图片 图片 图形无法使用
解析-提供alt文本文本描述,必要时提供较长解释(或同页或带链接到另一页)。与SEO团队协作,因为他们可能有特定关键字
链接用户常使用Tab键从链接跳转链接PDF链接-通知用户链接开PDF文件
解析-确定链路从上下文看有意义 (“点击这里有问题 ” ) 。总是为每个链接添加标题标签
框架类无法同时全看必须分别查看,这可能导致偏转性
解析-免用框架使用时提供框架标题表达目的导航框架,主内容
表单用户监听表单内容时可能很难辨别到哪里
解析-提供列和行头帮助用户逐行读取这些知识
复杂表图像这样项目通常通过视觉解读是不可使用性
解析-提供摘要和/或文本描述
图像地图并非所有屏幕阅读器支持这些
解析-提供冗余文本链接图像地图热点
页面标题每一页应该有独有标题
解析-由于您的CMS, 这可能是一个问题 一些页面 动态生成与SEO团队协作
低视界密钥概念
图形文本文本不扩增非专用软件,加宽时看起来像素化用户可自定义字体和背景颜色
解析-限制或消除图形内文本允许用户使用尽可能多的实文本,而不是图形内文本
字体大小屏幕放大镜减少可用窗口大小
解析-减少水平滚动量使用相对单位而非绝对单位百分比表宽度替代像素)
密钥盲点
红绿颜色常不可分
解析-通常这不是问题,除非颜色传递重要信息
其它颜色颜色可能无法分辨
解析-通常这不是问题,除非颜色传递重要信息
颜色对比度在许多网站,这是一个需要解决的问题
解析-特别用小字体,确保前台和后台颜色间有足够的色对比离Orange远一点,因为这是网络设计师工作最富挑战性颜色资源使用ADA安全网络颜色
需考虑的其他项目-超越遵章
网站导航-页面页眉中传统下拉菜单对视障者可能构成挑战
解析-可能时,提供页面顶端的 skip导航链路直接带用户到页面内容例子举几例处理:
- https://www.sos.state.oh.us/左上角信头区
- https://www.akronmetro.org/-使用标签键并看到跳转按钮出现(仅显示屏幕阅读器)
移动菜单- 这可能出问题
解析-确保彻底用户模拟测试
表单屏幕阅读器表单难解
解析-确保所有表单字段都贴标签CAPTCHA使用时,请确认它能读取确保用户理解哪些字段需要并读出错误消息
如何制作音视频ADA编译
- 轨迹描述-需求化
- 说明-很高兴拥有大多数W3C媒体需要点
- 音频描述-唯一需要相关视觉内容
- 符号语言-W3C多媒体不需要
如何制作PDFsADA编译
ADA守法清单中最被忽视的项目之一是PDFs对,这些需要兼容性并能够由屏幕阅读器阅读PDF网站内容丰富,程序建立后很容易确保培训所有网站内容提供商遵守这些指南
TIP:WORDPower等微软产品在输出文档成PDF前都有能力检查ADA
- 图片制作所有图像需要aLT标签
- 启动无障碍PDF转换设置需要正确设置可访问性需要检验
- 启动文本存取检查视觉缺陷屏幕阅读器
- 标题显示确定区域填充适当信息
- 语言类确定选择语言英美
- 文件名- 保存PDF时,从不使用空间常用连字符或下划线表示文件名空间
下一步步骤:ADA兼容程序
- 让你的团队上机
- 获取进程到位
- 创建工作流并授权
- 创建培训文档
- 组织培训课
- 保持顺从
资源 :
- 终极ADA网络守法资源http://webaim.org
- ADA守法审核工具http://wave.webaim.org
- NVDA下载桌面模拟程序https://en.softonic.com/download/nvda/windows/post-download?sl=1
- 第508节标准-https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-section-508-standards/section-508-standards
- WGAC2.0指南https://www.3playmedia.com/2016/02/24/wcag-2-0-the-international-standard-for-web-accessibility-and-inclusive-design/
- 视频无障碍-https://www.w3.org/2008/06/video-notes
- 跳过导航信息-https://webaim.org/techniques/skipnav/
- 跳过导航样本-https://www.sos.state.oh.us/
- 如何编码ADAhttps://designsystem.digital.gov
- 如何修复字体图标ADAhttp://fontawesome.io/accessibility/
- 视觉缺陷统计-https://nfb.org/blindness-statistics
- 关于2017ADA守法诉讼http://associationsnow.com/2017/07/website-accessiblity-legal-precedent/
