为可访问性和包容性而设计

“可访问性在设计阶段就解决了。” 这是 Daniel Na 和他的团队在参加会议时一遍又一遍地听到的一句话。 为可访问性而设计意味着包容用户的需求。 这包括您的目标用户、目标人群之外的用户、残障用户，甚至来自不同文化和国家的用户。 了解这些需求是为他们打造更好、更容易获得的体验的关键。

设计可访问性时最常见的问题之一是知道您应该设计什么需求。 并不是我们故意设计排斥用户，只是“我们不知道我们不知道什么”。 因此，在可访问性方面，有很多要了解的。

我们如何去了解无数的用户和他们的需求？ 我们如何确保他们的需求在我们的设计中得到满足？ 为了回答这些问题，我发现应用批判性分析技术从不同的角度观察设计是有帮助的。

“当您从许多不同的角度或镜头查看您的 [设计] 时，就会出现好的 [可访问] 设计。”

— 游戏设计的艺术：镜头之书

镜头是“一个缩小的过滤器，通过它可以考虑或检查一个主题。” 通常用于检查艺术作品、文学作品或电影，镜头要求我们抛开我们的世界观，而是通过不同的背景来看待世界。

例如，从历史的角度来看艺术要求我们了解“当时的社会、政治、经济、文化和/或知识氛围”。 这使我们能够更好地了解哪些世界影响了艺术家，以及这些影响如何塑造了艺术品及其信息。

可访问性镜头是一种过滤器，我们可以使用它来了解设计的不同方面如何影响用户的需求。 每个镜头都会在整个设计过程中提出一组问题来问自己。 通过使用这些镜头，您将更加包容用户的需求，从而为所有人设计更易于访问的用户体验。

可访问性的镜头是：

• 动画和特效镜头
• 音视频镜头
• 彩色镜片
• 控制镜头
• 字体的镜头
• 图像和图标的镜头
• 键盘镜头
• 布局的镜头
• 物质诚实的镜头
• 可读性的镜头
• 结构的镜头
• 时间的镜头

您应该知道，并非每个镜头都适用于每种设计。 虽然有些可以适用于每种设计，但有些则更具情境性。 在一种设计中最有效的东西可能不适用于另一种设计。

每个镜头提供的问题只是帮助您了解可能出现的问题的工具。 与往常一样，您应该与用户一起测试您的设计，以确保他们可以使用和访问。

动画和特效镜头

有效的动画可以帮助使页面和品牌栩栩如生，引导用户关注并帮助定位用户。 但动画是一把双刃剑。 滥用动画不仅会导致混乱或分散注意力，而且对某些用户来说也可能是致命的。

快速闪烁效果（定义为每秒闪烁超过 3 次）或高强度效果和模式可导致癫痫发作，称为“光敏性癫痫”。 光敏性也会引起头痛、恶心和头晕。 患有光敏性癫痫的用户在使用网络时必须非常小心，因为他们永远不知道什么时候可能会导致癫痫发作。

其他效果，例如视差或运动效果，可能会导致一些用户因前庭敏感而感到头晕或眩晕。 前庭系统控制人的平衡和运动感。 当这个系统不能正常工作时，它会导致头晕和恶心。

“想象一个你的内部陀螺仪无法正常工作的世界。 就像喝醉了一样，事情似乎会自行移动，你的脚在你脚下似乎从来都不是很稳定，你的感觉比你的身体移动得更快或更慢。”

— 前庭疾病入门

持续的动画或动作也会分散用户的注意力，尤其是难以集中注意力的用户。 GIF 尤其有问题，因为我们的眼睛被运动所吸引，很容易被任何不断更新或移动的东西分散注意力。

这并不是说动画不好，你不应该使用它。 相反，您应该了解为什么要使用动画以及如何设计更安全的动画。 一般来说，您应该尽量设计覆盖小距离、匹配其他移动对象（包括滚动）的方向和速度、并且相对于屏幕尺寸较小的动画。

您还应该提供控件或选项来满足用户的体验。 例如，Slack 允许您将动画图像或表情符号隐藏为全局设置和每个图像。

要使用动画和效果镜头，请问自己以下问题：

• 是否有任何可能导致癫痫发作的影响？
• 是否有任何动画或效果可能通过使用运动导致头晕或眩晕？
• 是否有任何动画可能会因不断移动、闪烁或自动更新而分散注意力？
• 是否可以提供控件或选项来停止、暂停、隐藏或更改任何动画或效果的频率？

音视频镜头

自动播放视频和音频可能很烦人。 它们不仅打破了用户的注意力，而且还迫使用户寻找违规媒体并将其静音或停止。 作为一般规则，不要自动播放媒体。

“谨慎使用自动播放。 自动播放可以是一种强大的参与工具，但如果播放了不想要的声音，或者他们认为由于不需要的视频播放而导致不必要的资源使用（例如数据、电池），它也会让用户感到厌烦。”

— 谷歌自动播放指南

您现在可能会问，“但是如果我在后台自动播放视频但保持静音怎么办？” 虽然在当今的网页设计中使用视频作为背景可能是一种增长趋势，但背景视频与 GIF 和不断移动的动画存在相同的问题：它们可能会分散注意力。 因此，您应该提供暂停或禁用视频的控件或选项。

除控件外，视频还应具有脚本和/或字幕，以便用户可以以最适合他们的方式消费内容。 视障用户或宁愿阅读而不是观看视频的用户需要脚本，而无法或不想听视频的用户则需要字幕。

要使用音频和视频镜头，请问自己以下问题：

• 是否有任何音频或视频可能会因自动播放而烦人？
• 是否可以提供控件来停止、暂停或隐藏任何自动播放的音频或视频？
• 视频是否有文字记录和/或字幕？

彩色镜片

颜色在设计中起着重要的作用。 颜色唤起情感、感觉和想法。 颜色还可以帮助加强品牌的信息和认知。 然而，当用户看不到颜色或以不同方式感知颜色时，颜色的力量就会消失。

色盲影响大约每 12 名男性中的 1 名和每 200 名女性中的 1 名。 Deuteranopia（红绿色盲）是最常见的色盲形式，影响约 6% 的男性。 红绿色盲的用户通常将红色、绿色和橙色视为淡黄色。

对于国际用户来说，颜色含义也存在问题。 颜色在不同的国家和文化中意味着不同的东西。 在西方文化中，红色通常用于代表消极趋势和绿色积极趋势，但在东方和亚洲文化中则相反。

因为颜色及其含义可能会因文化差异或色盲而丢失，所以您应该始终添加非颜色标识符。 诸如图标或文本描述之类的标识符可以帮助弥合文化差异，而图案则可以很好地区分颜色。

过度饱和的颜色、高对比度的颜色，甚至只是黄色，对于一些用户来说可能会让人感到不舒服和不安，尤其是那些自闭症患者。 最好避免这些颜色的高浓度，以帮助用户保持舒适。

前景和背景颜色之间的对比度差，使视力不佳的用户、使用低端显示器或只是在阳光直射下的用户更难看清。 供使用键盘的用户使用的所有文本、图标和任何焦点指示符与背景颜色的最小对比度应为 4.5:1。

您还应该确保您的设计和颜色在 Windows 高对比度模式的不同设置下都能正常工作。 一个常见的缺陷是文本在某些高对比度模式的背景上变得不可见。

要使用彩色镜头，请问自己以下问题：

• 如果从设计中去掉颜色，会失去什么意义？
• 不使用颜色如何提供意义？
• 是否有任何颜色过饱和或具有高对比度，可能导致用户过度刺激或不舒服？
• 所有文本、图标和焦点指示器的前景色和背景色是否符合 4.5:1 的对比度准则？

控制镜头

控件，也称为“交互式内容”，是用户可以与之交互的任何 UI 元素，可以是按钮、链接、输入或任何带有事件侦听器的 HTML 元素。 控件太小或太靠近会给用户带来很多问题。

对于无法准确使用指针的用户，例如颤抖的用户，或因年龄而导致灵活性下降的用户，很难点击小控件。 例如，复选框和单选按钮的默认大小可能会给老用户带来问题。 即使提供了可以点击的标签，也不是所有用户都知道他们可以这样做。

太靠近的控件可能会给触摸屏用户带来问题。 手指很大，很难精确。 不小心触摸了错误的控件可能会导致挫败感，尤其是当该控件将您带走或让您失去上下文时。

嵌套在另一个控件中的控件也可能导致触摸错误。 它不仅在 HTML 规范中是不允许的，而且还很容易意外选择父控件而不是您想要的那个。

为了给用户足够的空间来准确选择控件，建议控件的最小尺寸为 34 x 34 设备独立像素，但 Google 建议至少为 48 x 48 像素，而 WCAG 规范建议至少为 44 x 44 像素。 此大小还包括控件具有的任何填充。 因此，一个控件在视觉上可能是 24 x 24 像素，但在所有边上增加 10 像素的填充会使它达到 44 x 44 像素。

还建议将控件放置得足够远，以减少触摸错误。 Microsoft 建议至少 8 像素间距，而 Google 建议控件间距至少 32 像素。

控件还应该有一个可见的文本标签。 不仅屏幕阅读器需要文本标签来了解控件的作用，而且已经表明文本标签可以帮助所有用户更好地理解控件的用途。 这对于表单输入和图标尤其重要。

要使用控制镜头，请问自己以下问题：

• 是否有任何控件不够大，让人无法触摸？
• 是否有任何控件靠得太近而容易触错？
• 另一个控件或可点击区域内是否有任何控件？
• 所有控件都有可见的文本标签吗？

字体的镜头

在网络的早期，我们设计的网页字体大小在 9 到 14 像素之间。 这在当时效果很好，因为显示器的屏幕尺寸相对已知。 我们设计时认为浏览器窗口是一个常数，无法更改。

今天的技术与 20 年前大不相同。 今天，浏览器可以在任何尺寸的任何设备上使用，从小手表到巨大的 4K 屏幕。 我们不能再使用固定的字体大小来设计我们的网站。 字体大小必须与设计本身一样灵敏。

不仅字体大小应该是响应式的，而且设计应该足够灵活，以允许用户自定义字体大小、行高或字母间距以达到舒适的阅读水平。 许多用户使用自定义 CSS 来帮助他们获得更好的阅读体验。

字体本身应该易于阅读。 您可能想知道一种字体是否比另一种字体更具可读性。 事情的真相是字体并没有真正影响可读性。 相反，字体样式在字体可读性中起着重要作用。

对于许多用户来说，装饰性或草书字体样式更难阅读，但对于有阅读障碍的用户来说尤其成问题。 小字体、斜体文本和全大写文本对用户来说也很困难。 总体而言，更大的文本、更短的行长、更高的行高和增加的字母间距可以帮助所有用户获得更好的阅读体验。

要使用Lens of Font ，请问自己以下问题：

• 设计是否足够灵活，用户可以将字体修改为舒适的阅读水平？
• 字体样式是否易于阅读？

图像和图标的镜头

他们说，一张图片胜过千言万语。” 不过，你看不到的图片是无语的，对吧？

图像可用于设计以传达特定的含义或感觉。 其他时候，它们可以用来简化复杂的想法。 无论图像是哪种情况，都需要告知使用屏幕阅读器的用户图像的含义。

作为设计师，您最了解图像所传达的含义或信息。 因此，您应该使用此信息对设计进行注释，以便以后不会遗漏或误解。 这将用于为图像创建替代文本。

您如何描述图像完全取决于上下文，或者描述信息的文本信息已有多少。 它还取决于图像是否仅用于装饰、传达意义或包含文本。

“你几乎从不描述图片的样子，而是解释图片包含的信息。”

— 合规替代文本的五个黄金法则

由于知道如何描述图像可能很困难，因此有一个方便的决策树可以在决定时提供帮助。 一般来说，如果图像是装饰性的，或者周围的文字已经描述了图像的信息，则不需要进一步的信息。 否则，您应该描述图像的信息。 如果图像包含文本，请重复描述中的文本。

描述应该简洁。 建议不要超过两个句子，但尽可能使用一个简洁的句子。 这使用户无需听冗长的描述即可快速理解图像。

例如，如果您要为屏幕阅读器描述此图像，您会怎么说？

由于我们描述的是图像的信息而不是图像本身，因此描述可能是文森特梵高的《星夜》 ，因为没有其他描述它的周围环境。 你不应该放的是对绘画风格或图片外观的描述。

如果图像的信息需要冗长的描述，例如复杂的图表，则不应将该描述放在替代文本中。 相反，您仍应为替代文本使用简短描述，然后将长描述作为标题或指向不同页面的链接提供。

这样，用户仍然可以快速获得最重要的信息，但如果他们愿意，还可以进一步挖掘。 如果图像是图表，您应该像对图像中的文本一样重复图表的数据。

如果您设计的平台允许用户上传图片，您应该为用户提供一种方法来输入图片和替代文本。 例如，Twitter 允许其用户在将图像上传到推文时编写替代文本。

要使用图像和图标镜头，请问自己以下问题：

• 是否有任何图像包含不可见时会丢失的信息？
• 我如何以非视觉方式提供信息？
• 如果图像由用户控制，是否可以为他们提供一种输入替代文本描述的方法？

键盘镜头

键盘可访问性是可访问设计中最重要的方面之一，但它也是最容易被忽视的方面之一。

用户使用键盘而不是鼠标的原因有很多。 使用屏幕阅读器的用户使用键盘阅读页面。 颤抖的用户可能会使用键盘，因为它比鼠标提供更好的准确性。 即使是高级用户也会使用键盘，因为它更快、更高效。

使用键盘的用户通常使用 tab 键按顺序导航到每个控件。 Tab 键的逻辑顺序极大地帮助用户了解下一次按键将把他们带到哪里。 在西方文化中，这通常意味着从左到右，从上到下。 意外的标签顺序会导致用户迷失方向，不得不疯狂地扫描焦点所在的位置。

连续的 Tab 键顺序还意味着他们必须在他们想要的控件之前的所有控件中进行 Tab 键。 如果该控件在数十或数百次击键之外，它可能是用户真正的痛点。

通过使最重要的用户流更接近标签顺序的顶部，我们可以帮助我们的用户提高效率和效率。 然而，这并不总是可行的，也不实际。 在这些情况下，提供一种快速跳转到特定流程或内容的方法仍然可以让它们变得高效。 这就是为什么“跳转到内容”链接很有帮助的原因。

一个很好的例子是 Facebook，它提供了一个键盘导航菜单，允许用户跳转到网站的特定部分。 这极大地提高了用户与页面和他们想要的内容进行交互的能力。

在浏览设计时，焦点样式应始终可见，否则用户很容易迷失方向。 就像意外的标签顺序一样，没有好的焦点指示器会导致用户不知道当前的焦点是什么而不得不扫描页面。

更改默认焦点指示器的外观有时可以改善用户体验。 一个好的焦点指示器不仅仅依靠颜色来指示焦点（颜色透镜），而且应该足够清晰，以便用户轻松找到它。 例如，类似颜色的蓝色按钮周围的蓝色对焦环可能在视觉上并不明显，无法辨别它是否已对焦。

尽管此镜头侧重于键盘可访问性，但需要注意的是，它适用于用户无需鼠标即可与网站交互的任何方式。 嘴棒、开关访问按钮、sip 和 puff 按钮以及眼动追踪软件等设备都要求页面可以通过键盘访问。

通过改进键盘可访问性，您可以让广大用户更好地访问您的网站。

要使用键盘镜头，请问自己以下问题：

• 什么样的键盘导航顺序对设计最有意义？
• 键盘用户如何以最快的方式获得他们想要的东西？
• 焦点指示器是否始终可见且视觉上不同？

布局的镜头

布局对网站的可用性有很大贡献。 拥有易于遵循的布局和易于查找的内容会对您的用户产生重大影响。 布局应该具有对用户有意义且符合逻辑的顺序。

随着 CSS Grid 的出现，能够根据可用空间将布局更改为更有意义比以往任何时候都更容易。 但是，更改视觉布局会给依赖页面结构布局的用户带来问题。

结构布局是屏幕阅读器和使用键盘的用户使用的布局。 当视觉布局改变但底层结构布局没有改变时，这些用户可能会因为他们的标签顺序不再合乎逻辑而感到困惑。 如果您必须更改视觉布局，您应该通过更改结构布局来实现，以便使用键盘的用户保持顺序和逻辑的 Tab 键顺序。

布局应可调整大小且灵活至至少 320 像素，没有水平滚动条，以便在手机上舒适地查看。 对于需要增加字体大小以获得更好阅读体验的用户，布局还应该足够灵活，可以放大到 400%（也没有水平滚动条）。

当相关内容彼此靠近时，使用屏幕放大镜的用户会受益。 屏幕放大镜仅向用户提供整个布局的一个小视图，因此相关但距离较远的内容，或远离交互发生位置的内容很难找到并且可能被忽视。

要使用布局镜头，请问自己以下问题：

• 布局是否具有有意义且合乎逻辑的顺序？
• 当在小屏幕上查看或放大到 400% 时，布局会发生什么变化？
• 由于用户交互而相关或更改的内容是否彼此靠近？

物质诚实的镜头

材料诚实是一种建筑设计价值，它表明材料应该对自己诚实，而不是用作另一种材料的替代品。 这意味着混凝土应该看起来像混凝土，而不是被涂漆或雕刻成看起来像砖块。

材料诚实重视并庆祝每种材料的独特属性和特性。 遵循材料诚实的建筑师知道何时应该使用每种材料以及如何使用它而不会使自己失去光泽。

不过，物质上的诚实并不是硬性规定。 它位于一个连续统一体上。 像所有价值观一样，当你理解它们时，你可以打破它们。 俗话说，它们“更像是你所说的‘指导方针’，而不是实际的规则。”

当应用于网页设计时，材料诚实意味着一个元素或组件不应看起来、行为或功能就像另一个元素或组件一样。 这样做会欺骗用户并可能导致混乱。 一个常见的例子是看起来像链接的按钮或看起来像按钮的链接。

链接和按钮具有不同的行为和可供性。 使用回车键激活链接，通常会将您带到不同的页面，并在右键单击时具有特殊的上下文菜单。 按钮使用空格键激活，主要用于触发当前页面上的交互，并且没有这样的上下文菜单。

当链接的样式看起来像按钮或反之亦然时，用户可能会感到困惑，因为它的行为和功能不像它看起来那样。 如果“按钮”意外地引导用户离开，他们可能会因为在此过程中丢失数据而感到沮丧。

“乍一看，一切看起来都很好，但经不起推敲。 一旦这样一个网站通过一系列浏览器的实际使用情况进行压力测试，它的外观就会崩溃。”

— 弹性网页设计

这成为最成问题的地方是当链接和按钮的样式相同并且彼此相邻放置时。 由于两者之间没有任何区别，用户可能会在他们认为不会导航时意外导航。

当组件的行为与预期不同时，很容易给使用键盘或屏幕阅读器的用户带来问题。 一个不只是自动完成菜单的自动完成菜单就是一个这样的例子。

自动完成用于建议或预测用户正在输入的单词的其余部分。 当不能显示所有选项时，自动完成菜单允许用户从大量选项列表中进行选择。

自动完成菜单通常附加到输入字段，并使用向上和向下箭头键导航，将焦点保持在输入字段内。 当用户从列表中选择一个选项时，该选项将覆盖输入字段中的文本。 自动完成菜单意味着只是文本列表。

当自动完成菜单开始获得更多行为时，就会出现问题。 您不仅可以从列表中选择一个选项，还可以对其进行编辑、删除，甚至展开或折叠部分。 自动完成菜单不再只是一个简单的可选文本列表。

添加的行为不再意味着您可以只使用向上和向下箭头来选择一个选项。 现在，每个选项都有多个操作，因此用户需要能够遍历两个维度而不仅仅是一个维度。 这意味着使用键盘的用户可能会对如何操作组件感到困惑。

屏幕阅读器受这种行为变化的影响最大，因为没有简单的方法可以帮助他们理解它。 需要做大量工作来确保屏幕阅读器可以使用非标准方式访问菜单。 因此，这可能会导致他们的体验低于标准或无法访问。

为了避免这些问题，最好对用户和设计诚实。 不要将两种不同的行为（自动完成菜单以及编辑和删除功能）结合起来，而是将它们保留为两种不同的行为。 使用自动完成菜单仅自动完成用户名，并使用不同的组件或页面来编辑和删除用户。

要使用物质诚实的镜头，请问自己以下问题：

• 设计是否对用户诚实？
• 是否有任何元素的行为、外观或功能与另一个元素一样？
• 是否有任何组件将不同的行为组合成一个组件？ 这样做是否会使该组件在实质上不诚实？

可读性的镜头

你是否曾经拿起一本书，只读了几段或几页，却因为文字太难读而想放弃？ 难以阅读的内容是精神上的负担和累人。

句子长度、段落长度和语言的复杂性都会影响文本的可读性。 复杂的语言会给用户带来问题，尤其是那些有认知障碍或语言不流利的用户。

除了使用简单明了的语言外，您还应该确保每个段落都集中在一个想法上。 具有单一想法的段落更容易记住和消化。 单词较少的句子也是如此。

另一个影响内容可读性的因素是行的长度。 理想的行长通常被引用为 45 到 75 个字符。 过长的线条会导致用户注意力不集中，难以正确移动到下一行，而过短的线条会导致用户跳跃过于频繁，导致眼睛疲劳。

“跳到下一行时，潜意识会充满活力。 在每行新行的开头，读者都会集中注意力，但随着行的持续时间，这种注意力会逐渐消失”

— 排版：设计手册

您还应该用标题、列表或图像来分解内容，让读者在精神上休息并支持不同的学习方式。 使用标题对信息进行逻辑分组和总结。 标题、链接、控件和标签应清晰且具有描述性，以增强用户的理解能力。

要使用可读性镜头，请问自己以下问题：

• 语言是否简单明了？
• 每个段落都集中在一个想法上吗？
• 是否有任何长段落或长段不间断的文本？
• 所有标题、链接、控件和标签是否清晰且具有描述性？

结构的镜头

正如布局镜头中提到的，结构布局是屏幕阅读器和使用键盘的用户使用的布局。 Lens of Layout 专注于视觉布局，Lens of Structure 专注于结构布局，或设计的底层 HTML 和语义。

作为设计师，您可能不会编写设计的结构布局。 这不应该阻止您思考您的设计最终将如何构建。 否则，您的设计可能会导致屏幕阅读器无法访问。

以单场淘汰锦标赛支架的设计为例。

您如何知道使用屏幕阅读器的用户是否可以访问此设计？ 如果不了解结构和语义，您可能不会。 就目前而言，该设计可能会给使用屏幕阅读器的用户带来无法访问的体验。

要理解为什么会这样，我们首先必须了解屏幕阅读器按顺序阅读页面及其内容。 这意味着将读取锦标赛第一列中的每个名字，然后是第二列中的所有名字，然后是第三列，然后是最后一个。

“乔治，弗雷德，莱纳斯，露西，杰克，吉尔，弗雷德，姜，乔治，露西，杰克，姜，乔治，姜，姜。”

如果你只有一个看似随机的名字列表，你会如何解释比赛的结果？ 你能说谁赢得了比赛吗？ 或者谁赢了第六场比赛？

没有更多的东西可以使用，使用屏幕阅读器的用户可能会对结果感到有点困惑。 为了能够理解视觉设计，我们必须在结构设计中为用户提供更多的信息。

这意味着作为设计师，您需要了解屏幕阅读器如何与页面上的 HTML 元素交互，以便了解如何增强他们的体验。

• 地标元素（页眉、导航、主要和页脚）
  Allow a screen reader to jump to important sections in the design.
• Headings ( h1 → h6 )
  Allow a screen reader to scan the page and get a high level overview. Screen readers can also jump to any heading.
• Lists ( ul and ol )
  Group related items together, and allow a screen reader to easily jump from one item to another.
• Buttons
  Trigger interactions on the current page.
• Links
  Navigate or retrieve information.
• Form labels
  Tell screen readers what each form input is.

Knowing this, how might we provide more meaning to a user using a screen reader?

To start, we could group each column of the tournament into rounds and use headings to label each round. This way, a screen reader would understand when a new round takes place.

Next, we could help the user understand which players are playing against each other each game. We can again use headings to label each game, allowing them to find any game they might be interested in.

By just adding headings, the content would read as follows:

“__Round 1, Game 1__, George, Fred, __Game 2__, Linus, Lucy, __Game 3__, Jack, Jill, __Game 4__, Fred, Ginger, __Round 2, Game 5__, George, Lucy, __Game 6__, Jack, Ginger, __Round 3__, __Game 7__, George, Ginger, __Winner__, Ginger.”

This is already a lot more understandable than before.

The information still doesn't answer who won a game though. To know that, you'd have to understand which game a winner plays next to see who won the previous game. For example, you'd have to know that the winner of game four plays in game six to know who advanced from game four.

We can further enhance the experience by informing the user who won each game so they don't have to go hunting for it. Putting the text “(winner)” after the person who won the round would suffice.

We should also further group the games and rounds together using lists. Lists provide the structural semantics of the design, essentially informing the user of the connected nodes from the visual design.

If we translate this back into a visual design, the result could look as follows:

Since the headings and winner text are redundant in the visual design, you could hide them just from visual users so the end visual result looks just like the first design.

“If the end result is visually the same as where we started, why did we go through all this?” You may ask.

The reason is that you should always annotate your design with all the necessary structural design requirements needed for a better screen reader experience. This way, the person who implements the design knows to add them. If you had just handed the first design to the implementer, it would more than likely end up inaccessible.

To use the Lens of Structure , ask yourself these questions:

• Can I outline a rough HTML structure of my design?
• How can I structure the design to better help a screen reader understand the content or find the content they want?
• How can I help the person who will implement the design understand the intended structure?

Lens Of Time

Periodically in a design you may need to limit the amount of time a user can spend on a task. Sometimes it may be for security reasons, such as a session timeout. Other times it could be due to a non-functional requirement, such as a time constrained test.

Whatever the reason, you should understand that some users may need more time in order finish the task. Some users might need more time to understand the content, others might not be able to perform the task quickly, and a lot of the time they could just have been interrupted.

“The designer should assume that people will be interrupted during their activities”

— The Design of Everyday Things

Users who need more time to perform an action should be able to adjust or remove a time limit when possible. For example, with a session timeout you could alert the user when their session is about to expire and allow them to extend it.

To use the Lens of Time , ask yourself this question:

• Is it possible to provide controls to adjust or remove time limits?

把它放在一起

So now that you've learned about the different lenses of accessibility through which you can view your design, what do you do with them?

The lenses can be used at any point in the design process, even after the design has been shipped to your users. Just start with a few of them at hand, and one at a time carefully analyze the design through a lens.

Ask yourself the questions and see if anything should be adjusted to better meet the needs of a user. As you slowly make changes, bring in other lenses and repeat the process.

By looking through your design one lens at a time, you'll be able to refine the experience to better meet users' needs. As you are more inclusive to the needs of your users, you will create a more accessible design for all your users.

Using lenses and insightful questions to examine principles of accessibility was heavily influenced by Jesse Schell and his book “The Art of Game Design: A Book of Lenses.”