改善盲人和视力障碍 Ceph 用户仪表板的可访问性

Ngwa Sedrick Meh

简介

Web 可访问性，或电子可访问性，是一种包容性实践，旨在确保身体残疾、情境残疾以及带宽和速度方面的社会经济限制不会妨碍人们与万维网上的网站进行交互或访问。当网站经过正确的设计、开发和编辑时，更多用户可以平等地访问信息和功能。（维基百科）

Ceph 仪表板是一个内置的基于 Web 的 Ceph 管理和监控应用程序，您可以通过它检查和管理集群内的各个方面和资源。

问题描述

虽然 Ceph 仪表板很可能符合某些可访问性指南（ARIA 属性、alt 文本等），但我们目前忽略了它符合 WCAG 2.1 标准（A、AA 和 AAA 级别）的程度。

在世界银行最近发表的一篇文章中，关于 残疾包容性，残疾影响着全球约 10 亿人。这些人以各种方式使用 Web 技术。有些人主要通过键盘单独导航网站，而另一些患有视力障碍的人则依赖于屏幕阅读器等辅助技术。

通过确保仪表板符合 WCAG 2.1 A 级合规性，盲人和视力障碍的 Ceph 用户将不会被排除在外，并且能够舒适地管理他们的 Ceph 集群。

项目

在过去几个月里，我们一直在努力更新仪表板，使其符合 WCAG 2.1 A 级合规性，以便盲人和视力障碍的 Ceph 用户也可以舒适地使用它来管理和监控他们的 Ceph 集群。

为了实现这个目标，我们必须

  1. 测试并识别需要进行可访问性更新的仪表板区域
  2. 应用基于 WCAG 2.1 指南的修复
  3. 添加自动化测试以防止回归

识别可访问性问题

在测试 W3C 推荐的几个 可访问性检查器 后，我们选择了 可访问性洞察插件 来帮助快速识别仪表板每个页面的最常见可访问性问题。

可访问性改进

基于识别出的问题，我们改进了几个关键组件的可访问性，包括

登录页面

通过改善登录表单的颜色对比度，用户现在可以清楚地阅读标签并使用键盘导航输入框。

登录页面之前

login page before

登录页面之后

login page

健康页面

仪表板健康页面显示有关集群状态、容量和性能的关键监控信息。我们改进了以下方面

  • 更新集群标签（HEALTH_OK、HEALTH_WARN、 HEALTH_ERROR）以使其更具描述性（OK、WARNING、 ERROR）

  • 更新标签颜色以使其更具可读性

    旧的新的
    HEALTH_OKOK
    HEALTH_WARNWARNING
    HEALTH_ERRORERROR

  • 为屏幕阅读器添加了信息图标按钮的可访问名称

    <button aria-label="learn more" i18n-aria-label>
  <i [ngClass]="[icons.infoCircle, icons.large]"></i>
</button>

健康页面之前

Health page before

健康页面之后

Health page

导航组件可以快速访问仪表板的所有部分。我能够进行以下可访问性更新

  • 为所有下拉菜单添加可访问的角色，以便屏幕阅读器更容易检测

    <a role="button">
  <ng-container i18n>Cluster</ng-container>
</a>

  • 使用更深的背景 颜色 并增加标签字体大小以提高可读性

导航之前

Navigation before

导航之后

Navigation

数据表

数据表组件广泛用于仪表板中，以显示更详细的信息。这里进行的改进包括

  • 为行选择复选框添加了可访问的标签，以便屏幕阅读器更好地识别

    <input
  type="checkbox"
  [attr.aria-label]="isSelected ? 'selected' : 'select'"
/>

  • 创建了一个具有更好用户体验和可访问性的自定义分页组件

    旧的分页

    old pagination

    新的分页

    new pagination

  • 将表格操作按钮标签颜色从 红色 更改为 青色 以提高可读性和焦点

数据表之前

Datatable before

数据表之后

Datatable

许多其他子组件也已更新，可以在 GitHub 上找到。

可访问性测试

为了防止未来的回归，我们为健康页面和导航等高影响组件添加了端到端可访问性测试。如果这些组件将来发生任何回归，将生成一个表格化的错误描述并添加到 Cypress 日志中进行调试。

Error message

有关可访问性端到端测试的更多信息，请参见仪表板开发人员 文档。

面临的挑战

在进行这个项目时，我遇到了一些挑战。实际上，找到需要进行修复的代码，大多数时候是一项艰巨的任务，因为 Ceph 代码库非常大。使用 grep 帮助我更快地找到代码部分。

此外，一些组件（如数据表）实际上是由第三方库提供的。这使得改进某些部分的可访问性有些具有挑战性。幸运的是，我们可以开发和使用具有更好可访问性的自定义模板。在某些极端情况下，整个组件必须被替换，例如表格分页组件。

此外，我进行的一些更新改变了仪表板中当前的 QA 测试。这让我花费了几天时间来弄清楚我做错了什么以及如何在遇到困难时寻求帮助。

结论

可访问性非常重要，应该考虑用于由广泛受众使用的每个应用程序。即使在撰写此博客文章时，并非所有拉取请求都已合并，我们也可以确定在下一个 Ceph 版本中，仪表板将更符合 WCAG 2.1 A 级合规性，因此对于盲人和视力障碍的 Ceph 用户来说得到了改进。

这对我来说是一次真正引人入胜的体验，我学习了很多，同时也为 Ceph 做了大量贡献。我想感谢我的导师 Laura Flores 和 Ernesto Puerta 以及整个仪表板团队提供的坚定支持和指导。

我不仅掌握了 Cypress 和端到端测试等新技术技能，还学会了如何进行沟通、参与讨论以及在遇到挑战时寻求帮助。

待更新

虽然我们还计划在此期间向仪表板添加深色模式功能，但由于时间限制，我们不幸未能实现。不用担心，它肯定计划在将来添加。我仍然是 Ceph 的贡献者，并将继续在任何我可以的地方进行改进。

您可以通过我的电子邮件与我联系：nsedrick101@gmail.com 或在 Github 上 @nsedrickm。

感谢阅读 👋