重建图表以供可访问性:内部汗学院的包容性设计

由CPWA和Khan Academy高级前端工程师Cat Johnson撰写,我们的任务是“为任何人,任何人提供免费的世界一流教育。”此...阅读Morethe后重建图表以获取可访问性:内部汗学院的包容性设计首先出现在Khan Academy博客上。

来源:Khan Academy 博客

Cat Johnson,CPWA和高级前端工程师

在汗学院,我们的使命是“为任何地方的任何人提供免费的世界一流的教育”。这项承诺在我们致力于可访问性的奉献精神中亮相,并确保所有学习者,无论能力如何,都可以访问我们的内容库。但是,您是否知道直到最近,依靠屏幕阅读器的学习者才能使用我们的交互式图表?因此,我们通过改善图形练习的可访问性来更新对任务的承诺。您可能会问:“您如何使图形可访问?”我们很高兴您问!让我们踏上您如何创建适合每个人的可访问图的旅程。

为什么图形可访问性很重要(以及我们开始的位置)

我们的最初绘制练习是基于Raphael.js的非常古老的版本,该版本是可以使用SVG绘制2D图像的API。从那里开始,我们添加了一层互动元素,学生可以将这些元素拖动以完成练习。尽管这对于许多使用鼠标的学生来说效果很好,但它对依靠键盘或辅助设备的人构成了挑战。这意味着许多学生在没有其他人的情况下无法完成我们的练习。

结果,我们着手制作图形:

    在视觉上可访问:我们增强了颜色对比度,以确保图形易于区分和可访问具有视觉障碍或色盲的学生。键盘可访问:这使学生可以使用其键盘来移动点并更新图形来回答问题。Screen读取器兼容:这使学生可以使用其屏幕阅读器或其他辅助设备与我们的图形进行交互。
  • 视觉上可访问:我们增强了颜色对比度,以确保具有视觉障碍或色盲的学生易于区分和访问图。
  • 视觉上可访问:
  • 键盘可访问:这使学生可以使用键盘移动点并更新图表以回答问题。
  • 键盘可访问: MAFS
  • 线性