如何提高网站的可访问性？

这篇文章的目的是：

1. 为什么可访问性很重要
2. 使网站可访问
3. 测试可访问性

关于可访问性的错误观念 可访问性影响所有用户，而不仅仅是那些有特定障碍的用户。接受这一点意味着实现可访问性就是建立压力案例。压力案例指的是影响任何一个人的任何医疗或任何情境状况，无论是什么场景时间点。一些常见的压力案例原因是：

• 老年
• 慢性疾病如关节炎
• 在外面有一个太阳眩光
• 药物或睡眠不足造成的认知障碍
• 需要使用具有不同设备的站点
• 慢的WiFi
• 地板有什么东西跑过

其中只有一些仅适用于那些有特殊残疾的人。这很重要，因为它将您的可访问性概念从“因为只有一些人有X残疾并不重要”转变为“我们需要覆盖所有用户的压力情况”。这有助于其他人更好地了解为什么可访问性如此重要。这也是为什么在与其他人谈论它时，最好称之为“压力案例”。 更多关于辅助功能的参数 如果上述内容不起作用，那么从业务角度来看：

• 辅助功能扩展了App的潜在受众，增加了利润和吸引力。
• 可访问性减少了需要帮助的客户援助资源，可以在其他地方再投资。
• 辅助功能可以保护您免受潜在的法律责任（至少在美国，作为美国残疾人法案的一部分）。只要看看全国盲人联合会诉Target公司的法庭案件, 该案例帮助确立了法律要求无障碍的广泛使用的网站的先例。

这些论点很适合说服你，表明无障碍对公司有利，无论是赚钱还是省钱。 Web可访问性的四个关键 最广泛接受的可访问性规则是Web内容和可访问性指南2.0，或简称WCAG 2.0。它们是任何技术界面的通用规则，这也是它们如此受欢迎的原因之一。他们在定义可访问性方面也很全面。 WCAG 2.0的四个主要原则是首字母缩略词POUR - Perceivable，Operable，Understandable和Robust： 1. Perceivable可感知 简单地说，可感知意味着不同的压力情况不会阻止用户阅读，观看或收听您的内容。

• 排版：可感知的内容必须是可读的！更易读的简单方法是给文本和背景颜色足够的对比度，以便视力不好或光线不好的人仍然可以阅读它。出于同样的原因，排版也应该倾向于更大的尺寸，并且易于调整尺寸。甚至可能是因为很多人试图一次阅读一个屏幕，不能太近，需要更大版面才可以一次阅读更多文章。
• 图片：可感知图像最重要的是alt文本。这样盲人或无法通过慢的无线网络加载图像的人仍然会对图像的基本概念有所了解。也永远不应该将重要文本作为图像的一部分。
• 音频和视频：音频和视频内容都会带来更多压力。有听力障碍的人，在非常大声或安静的地方，或只是喜欢阅读，不能或不会听。视频脚本是最简单的解决方案，但字幕也要适合。

2.Operable可操作 这意味着不同的压力情况不会阻止用户访问所有页面和阻止他们填写表单。 界面和导航： 用户应该能够与他们需要的东西进行互动，例如：

• 链接到其他页面
• 表格填写
• 要点击的按钮
• 设置在门口的陷阱
• 在网站上移动或发送/接收信息的任何其他内容。

键盘导航：键盘导航涵盖了许多压力情况 - 屏幕阅读器，摇晃的运动控制，与头晕和肌肉控制相关的医疗问题，不可靠的鼠标垫，或仅仅是个人偏好。在文本编辑器中，您可依靠键盘快捷键快速工作，从而进行Web浏览。 渐进式增强：有助于处理压力情况，即使某些或所有样式都失败，事情仍应可操作。在不支持较新CSS功能的旧浏览器上，表单不应该不可用 - 它们看起来更简单或更粗糙，但仍然可以工作。渐进增强有助于从坚如磐石的可操作基础开始，并在可能的情况下添加可用功能。您无法控制用户的浏览器，您只能为他们的选择做好准备。 3.Understandable可理解 可理解性比其他要点更容易理解：压力案例不会阻止用户理解网站的预期含义。这有助于涵盖与用户如何解释您网站的消息相关的认知压力案例。 简单明了：正如乔治卡林经常提出的那样，最好的语言是简单，诚实和直接的。用夸大术语写作会让用户厌恶，虽然看起来令人印象深刻。直截了当的写作是可理解的，可以帮助用户建立对您网站的信任。否则他们不太可能注意或买你卖的东西。

避免假设：许多网站元素都假设用户已经理解了它们的含义。例如，假设“星形”图标表示喜欢。这对你来说很明显，但你永远不会知道它对用户有多么明显。这可能不是由于认知压力案例，文化压力案例或仅仅是网络新手。永远不要依赖隐含的象征意义。添加标题或副标题可以快速，轻松，无限地访问，以确保它们被理解。如果设计师畏缩，不要害怕坚持自己的立场。 4.Robust健壮 意味着压力情况不会阻止用户从各种设备访问内容。 语义标记:这是制作可作为整体访问的健壮内容的最佳方式。对于网络，这意味着：

• 语义HTML标记
• 正确使用aria标签
• 逻辑上排序DOM元素
• 服务器端呈现以确保正确传递

如果CSS无法加载，这使得内容对键盘导航，屏幕阅读器甚至是可用的界面都很友好，还有更多！语义，可访问的标记使您可以访问可访问的网站。 响应式设计 考虑设备种类和屏幕尺寸，例如：

• 智能手表（可能）
• 手机
• 平板
• 大型外接显示器
• 投影仪屏幕
• 电影屏幕

与其他类型相比，屏幕尺寸可能会影响Web应用程序，尤其是随着渐进式Web应用程序的兴起。虽然没有任何网站可以在如此多的尺寸上获得相同的体验或者像素逐个相同，但它们仍然可以使用且功能齐全。 测试可访问性 使用一个或多个工具自动测试：

• 颜色对比
• 语义HTML
• 不需要的div元素
• 翻译文本
• ARIA和其他可访问性属性，如标题

自动测试涵盖了至少75％的可访问性问题。但只有一个条件：必须尽早在项目中添加可访问性测试。 辅助功能测试有助于衡量与压力情况相关的因素，但不能测量实际压力情况。有些可以模拟基本操作，例如点击元素，但这还不够。在撰写本文时，最好的方法是自己重新创建压力案例。一些开始的建议是：

• 使用键盘导航
• 使用键盘和屏幕阅读器导航
• 使用手机
• 在强烈的阳光下使用手机
• 减慢您的互联网连接速度
• 打破一些或全部CSS
• 让不熟悉网站的人浏览并执行基本任务
• 使用灰度滤色镜（用于色盲）
• 只用一只手
• 在握手时使用，以模拟关节炎或肌肉疼痛
• 疲倦（或醉酒）时使用或模拟认知障碍
• 在街上奔跑的同时使用，被追逐报复的自由怪物追赶

建议是制作一份不同压力情况的清单，并尽可能多地涵盖从最重要到最不重要的情况。这样，如果您无法重新创建它们，那么至少可以获得影响最多用户的那些。 永远不要忘记无障碍 可访问性与数据库管理，应用程序架构，数据安全性或远程镇静剂枪一样重要 - 如果没有它们，它们很快就会分崩离析，可能会火上浇油。 可悲的是，你的早期教育和稀缺的大学课程都没有充分关注它。因此，您需要自己继续研究可访问性方法，为其提供案例，及早将其提交给应用程序，对其进行测试以及与他人共享该信息。