Descargitas

来自中国的最新突发新闻。

优先考虑 ABC 网站的可访问性

优先考虑 ABC 网站的可访问性

在 ABC,我们不仅致力于澳大利亚各地团队和观众的多元化和包容性,而且致力于为世界各地依赖我们平台提供值得信赖的媒体和娱乐报道的每个人提供多样性和包容性。

我们意识到 六分之一 我们中的许多人都有残障,但超过 95% 的主页无法满足无障碍要求。

在 100 万个主页中,检测到 49,991,225 个独特的可访问性错误,平均每个页面有 50 个错误。

-WebAim (2023年报告)

随着越来越多的人转向互联网进行媒体消费并作为…的一部分 我们的第一个数字计划让残疾人能够访问我们的内容变得非常重要。

需要辅助技术来浏览网络的用户应该能够访问我们的内容,尤其是突发新闻和有关紧急情况的重要信息。

在我们的辅助功能专家的帮助下,我们实施了一些方法来帮助我们的开发人员满足辅助功能要求 网页内容无障碍指南 (WCAG)

规划

在开发开始之前,我们与设计师和辅助功能团队合作,审查设计的辅助功能、用户体验和可行性。 然后,我们提前讨论任何潜在的开发挑战或视觉问题,并从一开始就设定明确的路径。

我们的辅助功能专家将反馈纳入有关交互样式、屏幕阅读器应如何解释内容以及用户应如何使用键盘进行导航的设计中。 这确保了我们将开发的内容与辅助技术兼容,并显着减少了开发后所需的更改数量。

我们的设计工具中关于可访问性的详细说明的示例 (Figma)

建筑

创建网页从本机可访问的 HTML 元素开始。 然而,每个网站的独特设计和功能都需要创建自定义组件,这可能需要以不同的方式重新集成这些辅助功能。 考虑到我们有多少 ABC 地点,这个过程可能会充满压力。

为了简化开发并减少返工,我们开发了 Nucleus,这是由我们的设计语言系统 (DLS) 团队设计的中央库。 Nucleus 的设计以可访问性为主要焦点,并提供了各种经过我们的可访问性团队审查的预构建组件。 它还确保一致性并促进我们 ABC 站点的更新,例如最近的 WCAG 2.2 焦点外观改进。

WCAG 2.2 的焦点外观改进记录在我们的库中
WCAG 2.2 的焦点外观改进记录在我们的库中

短篇小说

短篇小说 这是我们独立于网站构建组件的地方,使我们能够在代码库之外共享组件库并提供文档。 为了强调在 Storybook 中记录可访问性的重要性, 我们创建了一个专门的工具 与平台无缝集成。 它提供了一个专门的区域来突出显示使用某些成分时需要考虑的潜在提醒和陷阱。

我们的 Storybook 工具记录了 Button 组件的辅助功能部分
我们的 Storybook 工具记录了按钮组件的可访问性部分

我们利用 Storybook 的集成辅助工具来帮助评估组件在不同视口中的响应能力,确保在移动设备上进行适当的缩放。 它还可以通过放大内容来模拟有视觉障碍的用户的体验,以提高可读性或取代模糊的视力。

我们的轮播组件模拟移动显示框架中的模糊视觉
我们的轮播组件模拟移动显示框架中的模糊视觉

测试

我们使用测试工具来确保我们的组件和网站尽可能易于访问,并以多种方式检测问题。

实验单位

在我们的第一个方法中,我们利用了 测试库,以其内置的辅助功能而闻名。 我们的重点是创建最能代表用户交互的测试,确保独立代码组件(例如 HTML 元素)的功能。 测试库框架允许我们模拟一系列交互,包括键盘导航和滚动。

我们的下拉导航模块测试之一,用于验证对箭头键和焦点状态的支持
我们的下拉导航模块测试之一,用于验证对箭头键和焦点状态的支持

我们还包括一个简单的测试 基本斧头 自动识别常见辅助功能实践的引擎,例如确保图像具有适当的标签,以便屏幕阅读器对其进行广告宣传。

使用 Axe 引擎进行单元测试的示例
使用 Axe 引擎进行单元测试的示例

全面的自动化测试

除了单元测试之外,我们还自动模拟真实的用户场景,通过导航不同的页面来从头到尾识别问题。 使用 剧作家无障碍测试我们可以检测屏幕上显示的多个组件的 WCAG 违规情况。 这可能包括组件相互重叠,导致文本难以阅读,或者不同的交互元素具有重复的 ID,从而使屏幕阅读器感到困惑。

剧作家报告提供了有关无障碍违规的详细信息
剧作家报告提供了有关无障碍违规的详细信息

与手动测试相比,这些类型的测试具有巨大的价值。 它涵盖了可访问性专家定义的要求,并捕获可能影响可用性的更改。 当对代码进行更改时自动执行这些操作有助于保持我们的可访问性级别以进一步提高它。

手动测试

尽管上述测试方法很有价值,但值得注意的是,它们无法检测所有可访问性问题,并且不能完全复制人类与辅助技术的交互。 为了填补这一空白,我们执行手动测试,旨在解决其他测试可能失败的潜在错误。

仅使用键盘输入导航我们的组件和网站时,我们使用屏幕阅读器。 这使我们能够听到内容是如何朗读的,并识别有关内容结构、导航流程或缺乏描述性元素的任何问题。

此外,我们还会评估与不同辅助功能配置(例如高对比度模式和低运动设置)的兼容性,以确保我们的网站对于感官敏感的用户来说感到舒适。 此方法存在颜色对比度和动画问题,在这些条件下可能无法正常工作。

最后,为了确保我们的网站在一系列常用平台上保持可访问性功能,我们测试了屏幕阅读器与流行浏览器、操作系统和设备的不同组合。

无障碍评论

我们的无障碍团队对我们工作的密切合作和审查是我们创作过程的重要组成部分。 他们的专业知识确保更严格地遵守 WCAG 标准,并帮助识别任何潜在的无障碍障碍。 我们能够在整个开发生命周期(从初始设计到发布后更新)中收到宝贵的反馈并解决可访问性问题。

我们流程的一个重要部分涉及迭代 观众反馈模型,特别是在可访问性方面,因为用户报告他们在浏览网站时遇到的问题。 这种直接沟通使我们能够快速响应用户反馈并及时解决问题。

然而,对于我们无法通过开发变更来解决可访问性反馈的情况,我们的设计团队会帮助提供替代设计来帮助解决反馈。

分享知识

除了我们的其他策略之外,我们还专注于全面的文档会议和知识共享,确保一致性并加强团队之间的学习。

测试方法位于我们关于开发期间可访问性的内部文档中
测试方法位于我们关于开发期间可访问性的内部文档中

定期会议为我们的团队提供了讨论关键辅助功能主题并分享相关工具的机会,以促进团队成员之间的持续发展和协作。

通过相互教育并通过我们的文档和会议提供指导,我们的目标是提高透明度,标准化我们的工作流程并无缝集成可访问性。

结论

我们的开发流程体现了我们对包容性的承诺,将其融入到我们工作文化的各个方面,以确保我们的网站尽可能易于访问。 通过改进我们的网络框架并与我们的团队合作,我们正在继续我们的计划,为每个人创建一个数字优先的平台,无论他们的能力如何。

READ  男孩套装:Brothers Reinvented 床单和 Donna Cover