bts防弹少年团演唱会

bts防弹少年团演唱会

优化器的Web可访问性指南

《优化器的Web可访问性指南》

如果您发现自己最多只能为81%可能访问过该网站的人优化您的网站,该怎么办?

无论您花了多年时间来完善网站的可用性还是刚开始使用,您都希望了解其他19%,对吗? 19%代表数以百万计的残疾人无法以传统方式访问或参与网站。

这就是网络可访问性的来源,为您提供您甚至不知道自己错过的转换机会。

什么是网络辅助功能?

Web可访问性是消除阻碍残疾人访问和与站点交互的障碍的做法。 在%E8%AE%BE%E8%AE%A1“>

为什么对优化器有用?

根据最近的美国人口普查 ,根据残疾人的广义定义,2010年约有5670万人(占人口的19%)患有残疾。 超过一半的人报告说残疾严重。

让您的网站更容易为残疾人使用有两个核心好处……

  1. 您是确保每个人都可以访问,享受和从您的网站购买的好人。 (有时这是法律。)
  2. 你并没有毫无意义地丢掉数以百万计的人的潜在转换。

不过,它并不止于此。 W3C认为 ,非残疾人也受益于网络可访问性……

网络可访问性也使残疾人受益。

例如,Web可访问性的一个关键原则是设计灵活的网站和软件,以满足不同的用户需求,偏好和情况。

在某些情况下,这种灵活性也有益于残疾人,例如使用慢速互联网连接的人,具有“临时残疾”的人,例如手臂骨折,以及因衰老而变化能力的人。

优化者的残疾考虑

如上所述,残疾的定义很广泛。 它可能包括视力残疾,听力残疾,运动障碍甚至认知障碍。

1.视觉

视力残疾通常意味着失明,视力低下或色盲。

2015年全国健康访问调查(NHIS)确定 ,估计有2370万美国人(占人口的10%)“难以看到”(即使戴眼镜)或根本无法看到。

想象一下是色盲并试图在这个网站上选择毛衣颜色……

《优化器的Web可访问性指南》

MaintainableCSS的 Adam Silver撰写了一篇关于优化色盲的优秀Smashing Magazine文章 ,我建议你阅读。 在其中,他说……

听证会

这适用于任何人,你猜对了,谁患有耳聋或只是听力困难。

根据美国卫生和公共服务部的统计 ,15%的18岁以上的成年人在没有助听器的情况下有听力障碍。

另一项研究估计,从2001年到2008年,根据标准听力检查,12.7%的美国12.7%的人在双耳听力损失。当你只用一只耳朵听力损失时,这个数字会上升到20.3%。

用于听力残疾的网络无障碍解决方案非常简单。 提供所有多媒体内容的标题和成绩单,并提供所有音频内容的成绩单。

电机

运动障碍最常见的是无法使用鼠标,响应时间慢以及电机控制受限。

此类别涵盖范围广泛的残疾。 脊髓损伤,关节炎,肌萎缩侧索硬化症,脑瘫,帕金森病等。毋庸置疑,许多人患有某种运动​​障碍。

Web可访问性解决方案差别很大,因为许多残疾都属于这一类。 WebAIM提供了一些最常见的挑战和解决方案的直观解释……

《优化器的Web可访问性指南》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

4.认知

认知障碍包括从学习障碍到注意力分散和记忆力不足的一切。

或多或少,这归结为专注,记忆和理解。 这是完整清单……

  1. 记忆。
  2. 问题解决。
  3. 注意。
  4. 阅读,语言和口头理解。
  5. 数学理解。
  6. 视觉理解。

这些残疾会影响您网站的可访问性和可用性,就像身体残疾一样。

现有的Web可访问性指南和标准

WCAG 2.0

Web内容可访问性指南(WCAG)2.0本质上是一组建议,旨在使残疾人和非残疾人更容易访问网站。 尽管被认为是一种标准,但(具有讽刺意味的是)它被批评为难以理解。

出于这个原因,我建议使用快速参考指南

《优化器的Web可访问性指南》

WCAG 2.0有四个支柱:可感知,可操作,易懂和强大(就兼容的辅助技术而言)。

以下是12个基本的WCAG 2.0指南……

    • 准则1.1:为任何非文本内容提供文本替代方案,以便将其更改为人们需要的其他形式,例如大字体,盲文,语音,符号或更简单的语言。
    • 准则1.2:为基于时间的媒体提供替代方案。
    • 准则1.3:创建可以以不同方式呈现的内容(例如更简单的布局),而不会丢失信息或结构。
    • 准则1.4:让用户更容易看到和听到内容,包括将前景与背景分开。
    • 准则2.1:通过键盘提供所有功能。
    • 准则2.2:为用户提供足够的时间阅读和使用内容。
    • 准则2.3:不要以已知会导致癫痫发作的方式设计内容。
    • 准则2.4:提供帮助用户浏览,查找内容和确定其位置的方法。
    • 准则3.1:使文本内容易读和易懂。
    • 准则3.2:使网页以可预测的方式显示和运行。
    • 准则3.3:帮助用户避免和纠正错误。
  • 准则4.1:最大限度地提高与当前和未来用户代理的兼容性,包括辅助技术。

对于每个指南,您将找到成功标准和技术。 我建议您花点时间阅读快速参考指南。

还存在用户代理可访问性指南(UAAG)创作工具可访问性指南(ATAG)

UAAG用于使用户代理(例如浏览器,浏览器扩展,媒体播放器,阅读器)更易于访问。 ATAG用于制作在线创作工具(例如网站创作,多媒体创作,博客创作,维基创作)。

对于大多数优化程序,WCAG 2.0是熟悉的主要指南集。

在美国,有些法律要求您尽可能使您的网站易于访问,包括美国残疾人法案(ADA)Sweden and the UK have their own national guidelines as well.加拿大,日本,西班牙, 菲律宾, 瑞典和英国也有自己的国家指导方针。

评估您网站的Web辅助功能

普遍接受的无障碍目标是WCAG 2.0 AA级,这意味着您已满足A级和AA级成功标准(请参阅快速参考指南)。

您可以通过三种方式评估网站当前的可访问性级别:自动化工具,专家审阅者和用户测试。

1.自动Web辅助功能评估工具

自动化工具允许您在相对较短的时间内评估数十个和几十个页面。 但是,他们只能识别您网站上的某些辅助功能问题。 可能存在更多。

以下是一些您可以查看的自动化工具……

以下是这些类型的工具可能会返回的示例…

《优化器的Web可访问性指南》

2.专家网站无障碍审查员

专家审阅者可以识别您网站上存在的大部分(如果不是全部)可访问性问题。 但是,这个过程非常耗时,许多站点都太大,无法进行此类评估。

大多数专家评审员将使用网站可访问性一致性评估方法(WCAG-EM) ,这是一个五步过程…

  1. 定义评估范围。 评估中包含哪些内容? 评估的目标是什么? 什么是目标WCAG一致性水平(即A,AA或AAA)?
  2. 浏览目标站点。 什么是关键页面? 有哪些关键功能? 有哪些不同类型的内容? 什么是必需的技术?
  3. 选择代表性样本。 如果无法评估每个页面,则必须选择结构化且随机选择的页面样本。
  4. 审核所选样本。 是否符合成功标准? 网站在哪里不足? 这里需要深入理解指南。
  5. 报告评估结果。 汇总并报告结果,并计算总分。

如果您决定采用此路线,则可以使用此报告工具 ,该工具将指导您完成五个步骤。

《优化器的Web可访问性指南》

3.用户测试

您还可以使用用户测试来支持自动化工具和专家审阅者。 我们写%E4%BA%86%E4%B8%80%E7%AF%87%E5%85%B3%E4%BA%8E%E7%94%A8%E6%88%B7%E6%B5%8B%E8%AF%95%E7%9A%84%E6%96%87%E7%AB%A0“>

理想情况下,您将使用这三种方法的组合而不是一种方法。

实现Web辅助功能修复

如果您管理大型网站,则您不太可能同时解决所有可访问性问题,这意味着您需要确定优先级。 通常,您需要优先考虑……

  1. 关键任务和渠道。 这包括注册表单,内部搜索,结帐流程等。
  2. 关键内容。 您最常访问的内容。
  3. 报道内容。 访问者报告的已知问题的内容。
  4. 开发内容。 检查所有传入的内容,以便您不会添加新问题。

现在,您可以通过专注于低成本修复和高影响力修复来进一步确定优先级。

  1. 省力的修复工具。 需要更少的时间,金钱,技能,测试和/或验证。
  2. 高影响力的修复。 导航,主页,购买流程和WCAG 2.0 A级问题(请参阅快速参考指南)。

当然,最好是刚刚开始时,可​​以从一开始就优先考虑Web可访问性。 但由于情况很少,因此在重新设计中包含Web可访问性而不是逐个修复和测试可能更容易。

设计Web可访问性

在设计Web可访问性时,请记住W3C的以下准则 ……

  • 在前景和背景之间提供足够的对比度
  • 不要仅使用颜色来传达信息。
  • 确保易于识别交互式元素。
  • 提供清晰一致的导航选项。
  • 确保表单元素包含明确关联的标签。
  • 提供易于识别的反馈。
  • 使用标题和间距对相关内容进行分组。
  • 为不同的视口大小创建设计。
  • 在您的设计中包含图像和媒体替代品。
  • 为自动启动的内容提供控件。

以下是BustedTees如何结合清晰的消息,颜色和图标来表明表单错误的示例…

《优化器的Web可访问性指南》

MailChimp对他们的成功消息做同样的事情 ……

《优化器的Web可访问性指南》

如果他们仅依靠颜色来表示失败或成功,则残疾人无法获得这些表格。

为Web辅助功能编写

在编写Web辅助功能时,请记住W3C的以下准则 ……

  • 提供信息丰富,独特的页面标题
  • 使用标题来表达意义和结构
  • 使链接文本有意义
  • 为图像编写有意义的文本替代品
  • 为多媒体创建成绩单和标题
  • 提供明确的说明
  • 保持内容清晰简洁

例如,在CXL研究所 ,我们提供三种格式的课程内容:视频,音频和文本记录……

《优化器的Web可访问性指南》

它是残疾人士的理想选择,也是没有残疾人士的好处。 有些人喜欢在健身房听,在火车上看书等等。

这是另一个复制示例。 加拿大航空公司的随身行李信息既不清晰也不简洁……

《优化器的Web可访问性指南》

加拿大航空运输安全局(CATSA)采取了不同的方法来传达类似内容……

《优化器的Web可访问性指南》

更清晰,更简洁,对吗? 认知负荷现在相对较低。

开发Web可访问性

在开发Web可访问性时,请记住W3C的以下准则 ……

  • 将标签与每个表单控件相关联
  • 包括图像的替代文本
  • 确定页面语言和语言更改
  • 使用标记来表达意义和结构
  • 帮助用户避免和纠正错误
  • 在代码顺序中反映阅读顺序
  • 编写适合用户技术的代码
  • 为非标准互动元素提供意义
  • 确保所有交互式元素都可通过键盘访问
  • 尽可能避免使用CAPTCHA

许多残障人士依靠键盘来浏览您的网站。 下面,您可以看到我正在使用标签按钮浏览加拿大航空公司网站…

《优化器的Web可访问性指南》

钩住低垂的水果

当您准备开始应用这些设计,复制和开发指南时,请问自己以下问题……

    • 标题和标题
        • 标题是否准确,简洁地描述了页面的内容?
        • 标题是否将网页与网站上的其他网页区分开来?
        • 每张图片都有适当的替代文字吗?
        • 每个页面至少有一个标题吗?
        • 标题文本标记为标题?
        • 文字标记为标题真的是一个部分的头部吗?
      • 标题层次结构和消息层次结构有意义吗? 它是否跳过级别?
    • 文本
        • 对于文本,页面的对比度是否至少为4.5:1?
      • 你有文字大小选择器吗? 所有文字都变大了吗? 随着它变大,有没有消失或被切断? 随着它变大,有什么重叠吗?
    • 键盘控制
        • 所有按钮和表单都是高度可见和可用的吗?
        • 读句子需要水平滚动吗?
        • 你可以选择所有元素吗?
        • 你可以远离所有元素吗?
        • 使用标签时,您能告诉当前选择哪个元素吗?
        • 你可以在没有鼠标帮助的情况下使用该网站吗? 所有功能都应通过键盘提供。
        • 您可以选择一个下拉列表并使用箭头键滚动列表吗?
      • 图像链接是否明显,是否可以通过“Enter”激活它们?
    • 表格和领域
        • 是否可以通过键盘访问所有表单控件?
        • 表格标签是否正确定位于从左到右的读者?
        • 是否明确表示必填字段而不依赖于颜色?
        • 需求指标是否包含在标记的字段标签或图例中?
        • 表格顶部是否有表格说明?
        • 标记的字段标签中是否需要日期和电话号码格式?
        • 表单错误容易被注意到吗? 是否提供明确和具体的指导?
      • 没有错误的表单字段是否仍然正确填写?
  • 媒体
      • 媒体播放器可以用键盘控制吗?
      • 是否启用了自动播放? 如果是这样,它应该:3秒后停止,包括控制暂停或停止,或包括控制以调低音量。
      • 你自己写过字幕了吗? 自动字幕很少准确。
      • 字幕是否与音频内容同步?
      • 是否清楚谁在任何特定时间说话? 他们被识别出来了吗?
      • 重要声音和上下文是否包含在标题中(例如,门砰击,电子邮件通知声音)?
      • 有成绩单吗?
      • 成绩单很容易找到吗?
      • 成绩单是否也提供视觉信息?
    • 被描述的音频可用吗?

只是做网络可访问性的基础知识将使您更好地开始转换近20%的残障人口。

结论

Webcredible的 Trenton Moss曾写道:“这不仅仅是因为残障用户能够访问您的网站 – 而是每个人都可以访问您的网站。”

花时间了解WCAG 2.0然后评估您网站的网站可访问性不仅是正确的事情,而且也是有利可图的事情。 您正在努力建立一个针对100%人口进行优化的网站,而不是努力建立一个针对81%人口进行优化的网站。

当然,上面列出的行动项目并非详尽无遗,也不能代替理解WCAG 2.0,但每一步都向前迈进,这意味着您可以向更多潜在的转换开放。

为获得最佳效果,首先针对那些低悬的水果项目,然后使用逐步过程继续进行完整的WCAG 2.0评估。

相关文章

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注