Skip to content

搞英语 → 看世界

翻译英文优质信息和名人推特

Menu
  • 首页
  • 作者列表
  • 独立博客
  • 专业媒体
  • 名人推特
  • 邮件列表
  • 关于本站
Menu

无障碍改造

Posted on 2022-08-16

这是左侧原始 FlightView 图表和右侧最终可访问改造的并排比较。

我们分享数据可视化改造,以说明看似微小的变化如何使数据更易于访问。如果没有额外的上下文,“可访问”这个词可以有几个含义。 “创建易于理解的图表”是一种解释。另一个是“设计支持各种残障人士的图表”。

这两种含义都是有效且有价值的目标。不幸的是,许多改造工作更多地依赖于第一种解释——包括我自己的创作。这并不是说设计简单的图表和具有包容性是分开的努力,但如果目标是在所有方面都可以访问,则需要更多的努力。

几年前, Amy Cesal发表了一篇客座文章,分享了使您的数据可视化可访问的五种方法——牢记第二个定义。你可以在这里阅读她的帖子,我还列出了以下建议。

  1. 添加替代文本

  2. 使用外卖标题

  3. 直接标注数据

  4. 检查类型和颜色对比

  5. 使用空白

今天,我将逐步介绍 Amy 的每个最佳实践,以创建一个完全可访问的数据可视化改造。

我将利用FlightView中的图表,这是一个跟踪航班和机场状态的免费资源。这是我旅行时经常依赖的一个很棒的应用程序;但是,我一直认为图表可以更易于访问。

FlightView 的原始 100% 堆叠条形图显示 IAD 机场的航班状态,使用绿色、黄色和红色表示准时、迟到或非常晚状态。

资料来源:https://www.flightview.com/airport/IAD-Washington-DC-(杜勒斯)/delay

所以,让我们从第一个建议开始:添加替代文本。

添加替代文本

现在,我将第一个承认我已经跳过写替代文本太多次了,我需要做得更好。 Alt 文本允许人们使用屏幕阅读器与图形和图像进行交互。 Amy 建议数据可视化的替代文本应该简明扼要,包括三件事:图表类型、数据类型和要点。此外,周围的描述性文本中应提供指向基础数据的链接。

据我所知,原始图形不包含替代文本;但是,附近的一块文本提供了相关信息。

在图表的原始上下文中,这可以被认为是包含“足够”的描述性文本;但通常,图表会从其原始上下文中提取出来,并在其他文章、演示文稿和帖子中共享——就像我在这里所做的那样。在原始文本中包含替代文本将意味着该解释随后将用于视觉的任何其他未来用途。

上图的替代文本可以是“100% 堆叠条形图,按状态显示华盛顿杜勒斯国际机场 (IAD) 的航班活动,大多数起飞和到达目前准时或关闭。”出于说明目的,我假设图表是静态的,但如果在 FlightView 网站上使用替代文本,则需要是动态的。我还将链接到本文末尾的数据文件。

使用外卖标题

外卖标题可帮助所有查看图表的人理解其目的。当前标题是描述性的,并将解释留给用户。

让我们更加尖锐。

带有新标题的更新视觉效果“IAD 航班:正常活动,大部分准时或关闭”。

直接标注数据

默认情况下,许多工具会向图表添加颜色图例。但请记住,图例与数据之间的距离越远,人们在两者之间扫描的工作就越多,这会减慢并让理解视觉的过程变得复杂。如果颜色不易区分,图例也可能会出现问题,因此在可能的情况下,直接删除图例和标记数据是一个好习惯。

已删除图例的更新视觉效果,现在每个类别都在图表上标记。

虽然我在栏的右侧确实有足够的空间,但网格线和背景阴影使标签看起来很乱。我们将在下一步中解决这个问题。

检查类型和颜色对比

可视化中的颜色之间以及任何文本元素与其出现的背景颜色之间的足够对比对于可访问性至关重要。幸运的是,有几个免费的在线工具可用于帮助识别任何问题区域。我将使用色盲模拟器Coblis和WCAG 对比检查器扩展。

首先,让我们看看我们的色盲模拟的结果。

带有色盲模拟过滤器的最新图表视图显示红色和绿色类别几乎无法区分。

红色和绿色部分不容易区分。幸运的是,因为我直接标记了数据,仍然可以确定大部分航班准点,一小部分非常晚点。

接下来,让我们看看我们的对比度检查器对这个视觉效果的看法。

在检查对比度(使用 AA 级合规性)后,最新图表的视图显示脚注和数据标签不容易看到。

对比度检查器帮助我意识到微小的蓝色脚注可能难以阅读。此外,有些数据标签很难在图表背景下查看。

让我们更新堆栈颜色以使用互补色(橙色和蓝色),删除图表背景,并提高脚注的可见性。

更新后的视觉效果通过使用蓝色和橙色、删除浅绿色图表背景并将文本标签更改为白色背景上的深灰色来提高对比度。

使用空白

通常,我主张删除数据周围的轮廓或边框,但白色轮廓是例外。添加白色边框(在白色背景上)有助于在视觉上将堆叠条形图(或饼图)中的每个部分分开,这样它们就不会相互渗透。

更新后的视觉效果包括 100% 堆叠条形图中每个堆栈之间的白色边框或间距。

最后的想法(和改造)

我对这里的改进很满意。最好的部分是所有这五个步骤都非常快速地实施,这意味着您的视觉效果可以在几分钟内从难以理解变为可访问。

这是左侧原始 FlightView 图表和右侧最终可访问改造的并排比较。

现在,我还想做更多的改变吗?是的!我不喜欢浅蓝色背景阴影和边框。我也更喜欢水平定位此图表(个人喜好),加宽条形,澄清类别,删除一些粗体,甚至标记关键部分。总的来说,我的最终调整可能如下所示。

100% 水平堆叠条形图按状态显示华盛顿杜勒斯国际机场 (IAD) 的航班活动,大多数起飞和到达目前准时或关闭。

创建可访问的设计很重要,应该成为设计过程的常规部分。 (我是在自言自语!)对于想要浏览这个特定数据集或尝试自己的可访问设计的任何人,这里是相关的 Excel 文件。

原文: https://www.storytellingwithdata.com/blog/accessible-data-viz

本站文章系自动翻译,站长会周期检查,如果有不当内容,请点此留言,非常感谢。
  • Abhinav
  • Abigail Pain
  • Adam Fortuna
  • Alberto Gallego
  • Alex Wlchan
  • Answer.AI
  • Arne Bahlo
  • Ben Carlson
  • Ben Kuhn
  • Bert Hubert
  • Bits about Money
  • Brian Krebs
  • ByteByteGo
  • Chip Huyen
  • Chips and Cheese
  • Christopher Butler
  • Colin Percival
  • Cool Infographics
  • Dan Sinker
  • David Walsh
  • Dmitry Dolzhenko
  • Dustin Curtis
  • Elad Gil
  • Ellie Huxtable
  • Ethan Marcotte
  • Exponential View
  • FAIL Blog
  • Founder Weekly
  • Geoffrey Huntley
  • Geoffrey Litt
  • Greg Mankiw
  • Henrique Dias
  • Hypercritical
  • IEEE Spectrum
  • Investment Talk
  • Jaz
  • Jeff Geerling
  • Jonas Hietala
  • Josh Comeau
  • Lenny Rachitsky
  • Liz Danzico
  • Lou Plummer
  • Luke Wroblewski
  • Matt Baer
  • Matt Stoller
  • Matthias Endler
  • Mert Bulan
  • Mostly metrics
  • News Letter
  • NextDraft
  • Non_Interactive
  • Not Boring
  • One Useful Thing
  • Phil Eaton
  • Product Market Fit
  • Readwise
  • ReedyBear
  • Robert Heaton
  • Ruben Schade
  • Sage Economics
  • Sam Altman
  • Sam Rose
  • selfh.st
  • Shtetl-Optimized
  • Simon schreibt
  • Slashdot
  • Small Good Things
  • Taylor Troesh
  • Telegram Blog
  • The Macro Compass
  • The Pomp Letter
  • thesephist
  • Thinking Deep & Wide
  • Tim Kellogg
  • Understanding AI
  • 英文媒体
  • 英文推特
  • 英文独立博客
©2025 搞英语 → 看世界 | Design: Newspaperly WordPress Theme