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

原文链接https://medium.com/@smashingmag/designing-for-accessibility-and-inclusion-b3d5fac8dc87
史蒂文·兰伯特
“可访问性在设计阶段就解决了。” 这是Daniel Na和他的团队在参加会议时一遍又一遍地听到的一句话。为可访问性而设计意味着包容用户的需求。这包括您的目标用户、目标人群之外的用户、残障用户，甚至来自不同文化和国家的用户。了解这些需求是为他们打造更好、更容易获得的体验的关键。
设计可访问性时最常见的问题之一是知道您应该设计什么需求。并不是我们故意设计排斥用户，只是“我们不知道我们不知道什么”。因此，在可访问性方面，有很多要了解的。
我们如何去了解无数的用户和他们的需求？我们如何确保他们的需求在我们的设计中得到满足？为了回答这些问题，我发现应用批判性分析技术从不同的角度观察设计是有帮助的。
“当您从许多不同的角度或镜头查看您的 [设计] 时，就会出现好的 [可访问] 设计。”
—游戏设计的艺术：镜头之书
镜头是“一个缩小的过滤器，通过它可以考虑或检查一个主题。” 通常用于检查艺术作品、文学作品或电影，镜头要求我们抛开我们的世界观，而是通过不同的背景来看待世界。
例如，从历史的角度来看艺术要求我们了解“当时的社会、政治、经济、文化和/或知识氛围”。这使我们能够更好地了解哪些世界影响影响了艺术家，以及这些影响如何塑造了艺术品及其信息。
可访问性镜头是一种过滤器，我们可以使用它来了解设计的不同方面如何影响用户的需求。每个镜头都会在整个设计过程中提出一组问题来问自己。通过使用这些镜头，您将更加包容用户的需求，从而为所有人设计更易于访问的用户体验。
可访问性的镜头是：

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

您应该知道，并非每个镜头都适用于每种设计。虽然有些可以适用于每种设计，但有些则更具情境性。在一种设计中效果最好的东西可能不适用于另一种设计。
每个镜头提供的问题只是帮助您了解可能出现的问题的工具。与往常一样，您应该与用户一起测试您的设计，以确保他们可以使用和访问。

动画和效果的镜头

有效的动画可以帮助使页面和品牌栩栩如生，引导用户关注并帮助定位用户。但动画是一把双刃剑。滥用动画不仅会导致混乱或分散注意力，而且对某些用户来说也可能是致命的。
快速闪烁效应（定义为每秒闪烁超过 3 次）或高强度效应和模式可导致癫痫发作，称为“光敏性癫痫”。光敏性也会引起头痛、恶心和头晕。患有光敏性癫痫的用户在使用网络时必须非常小心，因为他们永远不知道什么时候可能会导致癫痫发作。
其他效果，例如视差或运动效果，可能会导致一些用户因前庭敏感而感到头晕或眩晕。前庭系统控制人的平衡和运动感。当这个系统不能正常工作时，它会导致头晕和恶心。
“想象一个你的内部陀螺仪无法正常工作的世界。就像喝醉了一样，事情似乎会自行移动，你的脚在你的脚下似乎从来都不是很稳定，你的感官比你的身体移动得更快或更慢。”
—前庭疾病入门
持续的动画或动作也会分散用户的注意力，尤其是难以集中注意力的用户。GIF 尤其有问题，因为我们的眼睛被运动所吸引，很容易被任何不断更新或移动的东西分散注意力。
这并不是说动画不好，你不应该使用它。相反，您应该了解为什么要使用动画以及如何设计更安全的动画。一般来说，你应该尽量设计覆盖距离小的动画，匹配其他移动物体（包括滚动）的方向和速度，并且对屏幕尺寸相对较小。
您还应该提供控件或选项来满足用户的体验。例如，Slack 允许您将动画图像或表情符号隐藏为全局设置和每个图像。
要使用Lens of Animation and Effects，请问自己以下问题：

• 是否有任何可能导致癫痫发作的影响？
• 是否有任何动画或效果可能通过使用运动导致头晕或眩晕？
• 是否有任何动画可能会因不断移动、闪烁或自动更新而分散注意力？

• 是否可以提供控件或选项来停止、暂停、隐藏或更改任何动画或效果的频率？

  音视频镜头

  自动播放视频和音频可能很烦人。它们不仅打破了用户的注意力，而且还迫使用户寻找违规媒体并将其静音或停止。作为一般规则，不要自动播放媒体。
  “谨慎使用自动播放。自动播放可以是一种强大的参与工具，但如果播放了不想要的声音，或者他们认为由于不需要的视频播放而导致不必要的资源使用（例如数据、电池），它也会让用户感到厌烦。”
  —谷歌自动播放指南
  您现在可能会问，“但是如果我在后台自动播放视频但保持静音怎么办？” 虽然在当今的网页设计中使用视频作为背景可能是一种增长趋势，但背景视频与 GIF 和不断移动的动画存在相同的问题：它们可能会分散注意力。因此，您应该提供暂停或禁用视频的控件或选项。
  除控件外，视频还应具有脚本和/或字幕，以便用户可以以最适合他们的方式消费内容。视障用户或宁愿阅读而不是观看视频的用户需要脚本，而无法或不想听视频的用户则需要字幕。
  要使用音频和视频镜头，请问自己以下问题：

• 是否有任何音频或视频可能会因自动播放而烦人？

• 是否可以提供控件来停止、暂停或隐藏任何自动播放的音频或视频？

• 视频是否有文字记录和/或字幕？

  彩色镜片

  颜色在设计中起着重要的作用。颜色唤起情感、感觉和想法。颜色还可以帮助加强品牌的信息和认知。然而，当用户看不到颜色或以不同方式感知颜色时，颜色的力量就会消失。
  色盲影响大约每 12 名男性中的 1 名和每 200 名女性中的 1 名。Deuteranopia（红绿色盲）是最常见的色盲形式，影响约 6% 的男性。红绿色盲的用户通常将红色、绿色和橙色视为淡黄色。
  
  Deuteranopia（绿色盲）很常见，导致红色呈现棕色/黄色，绿色呈现米色。Protanopia（红色盲）很少见，会导致红色显示为暗/黑色，橙色/绿色显示为黄色。Tritanopia（蓝黄色色盲）非常罕见，蓝色出现更多绿色/蓝绿色，黄色出现紫色/灰色。
  对于国际用户来说，颜色含义也存在问题。颜色在不同的国家和文化中意味着不同的东西。在西方文化中，红色通常用于代表消极趋势和绿色积极趋势，但在东方和亚洲文化中则相反。
  因为颜色及其含义可能会因文化差异或色盲而丢失，所以您应该始终添加非颜色标识符。诸如图标或文本描述之类的标识符可以帮助弥合文化差异，而图案则可以很好地区分颜色。
  
  Trello 的色盲友好标签使用不同的图案来区分颜色。
  过饱和的颜色、高对比度的颜色，甚至只是黄色，对于一些用户来说可能会让人感到不舒服和不安，尤其是那些自闭症谱系中的用户。最好避免这些颜色的高浓度，以帮助用户保持舒适。
  前景和背景颜色之间的对比度差，使得视力不佳的用户、使用低端显示器或只是在阳光直射下的用户更难看清。用于使用键盘的用户的所有文本、图标和任何焦点指示符都应满足与背景颜色 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，请问自己以下问题：

• 设计是否足够灵活，字体可以被用户修改到舒适的阅读水平？

• 字体样式是否易于阅读？

  图像和图标的镜头

  他们说，一张图片胜过千言万语。” 不过，你看不到的照片是无语的，对吧？
  图像可用于设计以传达特定的含义或感觉。其他时候，它们可以用来简化复杂的想法。无论图像是哪种情况，都需要告知使用屏幕阅读器的用户图像的含义。
  作为设计师，您最了解图像所传达的含义或信息。因此，您应该使用此信息对设计进行注释，以便以后不会遗漏或误解。这将用于为图像创建替代文本。
  您如何描述图像完全取决于上下文，或者描述信息的文本信息已有多少。它还取决于图像是否仅用于装饰、传达意义或包含文本。
  “你几乎从不描述图片的样子，而是解释图片包含的信息。”
  —合规替代文本的五个黄金法则
  由于知道如何描述图像可能很困难，因此有一个方便的决策树可以在决定时提供帮助。一般来说，如果图像是装饰性的，或者周围的文字已经描述了图像的信息，则不需要进一步的信息。否则你应该描述图像的信息。如果图像包含文本，请重复描述中的文本。
  描述应该简洁。建议不要超过两个句子，但尽可能使用一个简洁的句子。这使用户无需听冗长的描述即可快速理解图像。
  例如，如果您要为屏幕阅读器描述此图像，您会怎么说？
  
  由于我们描述的是图像的信息而不是图像本身，因此描述可能是文森特梵高的《星夜》，因为没有其他描述它的周围环境。你不应该放的是对绘画风格或图片外观的描述。
  如果图像信息需要冗长的描述，例如复杂的图表，则不应将该描述放在替代文本中。相反，您仍应为 alt 文本使用简短描述，然后将长描述作为标题或指向不同页面的链接提供。
  这样，用户仍然可以快速获得最重要的信息，但如果他们愿意，他们可以进一步挖掘。如果图像是图表，您应该像在图像中的文本一样重复图表的数据。
  如果您设计的平台允许用户上传图片，您应该提供一种方法让用户在图片中输入替代文本。例如，Twitter 允许其用户在将图像上传到推文时编写替代文本。
  要使用图像和图标镜头，请问自己以下问题：

• 是否有任何图像包含如果不可见会丢失的信息？

• 我如何以非视觉方式提供信息？

• 如果图像由用户控制，是否可以为他们提供一种输入替代文本描述的方法？

  键盘镜头

  键盘可访问性是可访问设计中最重要的方面之一，但它也是最容易被忽视的方面之一。
  用户使用键盘而不是鼠标的原因有很多。使用屏幕阅读器的用户使用键盘阅读页面。颤抖的用户可能会使用键盘，因为它比鼠标提供更好的准确性。即使是高级用户也会使用键盘，因为它更快、更高效。
  使用键盘的用户通常使用 tab 键按顺序导航到每个控件。Tab 键的逻辑顺序极大地帮助用户了解下一次按键将把他们带到哪里。在西方文化中，这通常意味着从左到右，从上到下。意外的标签顺序会导致用户迷失方向，不得不疯狂地扫描焦点所在的位置。
  连续的 Tab 键顺序还意味着他们必须在他们想要的控件之前的所有控件中进行 Tab 键。如果该控件在数十或数百次击键之外，它可能是用户真正的痛点。
  通过使最重要的用户流更接近标签顺序的顶部，我们可以帮助我们的用户更加高效和有效。但是，这并不总是可行的，也不实际。在这些情况下，提供一种快速跳转到特定流程或内容的方法仍然可以让它们变得高效。这就是为什么“跳转到内容”链接很有帮助的原因。
  一个很好的例子是 Facebook，它提供了一个键盘导航菜单，允许用户跳转到网站的特定部分。这极大地提高了用户与页面和他们想要的内容进行交互的能力。
  
  Facebook 为所有键盘用户提供了一种跳转到页面的特定部分或 Facebook 内其他页面的方法，以及一个辅助功能帮助菜单。
  在浏览设计时，焦点样式应始终可见，否则用户很容易迷失方向。就像意外的标签顺序一样，没有好的焦点指示器会导致用户不知道当前的焦点是什么而不得不扫描页面。
  更改默认焦点指示器的外观有时可以改善用户体验。一个好的焦点指示器不仅仅依靠颜色来指示焦点（颜色透镜），而且应该足够清晰，以便用户轻松找到它。例如，类似颜色的蓝色按钮周围的蓝色对焦环可能在视觉上并不明显，无法辨别它是否已对焦。
  尽管此镜头侧重于键盘可访问性，但需要注意的是，它适用于用户无需鼠标即可与网站交互的任何方式。嘴棒、开关访问按钮、sip 和 puff 按钮以及眼动追踪软件等设备都要求页面可以通过键盘访问。
  通过改进键盘可访问性，您可以让广大用户更好地访问您的网站。
  要使用键盘镜头，请问自己以下问题：

• 什么样的键盘导航顺序对设计最有意义？

• 键盘用户如何以最快的方式获得他们想要的东西？
• 焦点指示器是否始终可见且视觉上不同？

  布局的镜头

  布局对网站的可用性有很大贡献。拥有易于遵循的布局和易于查找的内容会对您的用户产生重大影响。布局应该具有对用户有意义且符合逻辑的顺序。
  随着 CSS Grid 的出现，能够根据可用空间更改布局以使其更有意义比以往任何时候都更容易。但是，更改视觉布局会给依赖页面结构布局的用户带来问题。
  结构布局是屏幕阅读器和使用键盘的用户使用的布局。当视觉布局改变但底层结构布局没有改变时，这些用户可能会因为他们的标签顺序不再合乎逻辑而感到困惑。如果您必须更改视觉布局，您应该通过更改结构布局来实现，以便使用键盘的用户保持顺序和逻辑的 Tab 顺序。
  布局应可调整大小且灵活至至少 320 像素且没有水平滚动条，以便在手机上舒适地查看。对于需要增加字体大小以获得更好阅读体验的用户，布局还应该足够灵活，可以放大到 400%（也没有水平滚动条）。
  当相关内容彼此靠近时，使用屏幕放大镜的用户会受益。屏幕放大镜仅向用户提供整个布局的一个小视图，因此相关但距离较远的内容，或远离交互发生位置的内容很难找到并且可能被忽视。

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

• 布局是否具有有意义且合乎逻辑的顺序？
• 当在小屏幕上查看或放大到 400% 时，布局会发生什么情况？

• 由于用户交互而相关或更改的内容是否彼此靠近？

  Lens Of Material Honesty

  材料诚实是一种建筑设计价值，它表明材料应该对自己诚实，而不是用作另一种材料的替代品。这意味着混凝土应该看起来像混凝土，而不是涂漆或雕刻成看起来像砖块。
  材料诚实重视并庆祝每种材料的独特属性和特性。遵循材料诚实的建筑师知道何时应该使用每种材料以及如何使用它而不会使自己失去光泽。
  不过，物质诚实并不是硬性规定。它位于一个连续统一体上。像所有价值观一样，当你理解它们时，你可以打破它们。俗话说，它们“更像是你所谓的‘指导方针’，而不是实际的规则。”
  当应用于网页设计时，材料诚实意味着一个元素或组件不应看起来、行为或功能就像另一个元素或组件一样。这样做会欺骗用户并可能导致混乱。一个常见的例子是看起来像链接的按钮或看起来像按钮的链接。
  链接和按钮有不同的行为和可供性。使用回车键激活链接，通常会将您带到不同的页面，并在右键单击时具有特殊的上下文菜单。按钮使用空格键激活，主要用于触发当前页面上的交互，并且没有这样的上下文菜单。
  当链接的样式看起来像按钮或反之亦然时，用户可能会感到困惑，因为它的行为和功能不像它看起来那样。如果“按钮”意外地引导用户离开，他们可能会因为在此过程中丢失数据而感到沮丧。
  “乍一看，一切看起来都很好，但经不起推敲。一旦这样的网站通过一系列浏览器的实际使用情况进行压力测试，其外观就会崩溃。”
  —弹性网页设计
  这成为最成问题的地方是当链接和按钮的样式相同并且彼此相邻放置时。由于两者之间没有任何区别，用户可能会在他们认为不会导航时意外导航。
  
  你能说出其中哪一个会引导你离开页面，哪一个不会吗？
  当组件的行为与预期不同时，很容易给使用键盘或屏幕阅读器的用户带来问题。一个不只是自动完成菜单的自动完成菜单就是一个这样的例子。
  自动完成用于建议或预测用户正在输入的单词的其余部分。当无法显示所有选项时，自动完成菜单允许用户从大量选项列表中进行选择。
  自动完成菜单通常附加到输入字段，并使用向上和向下箭头键导航，将焦点保持在输入字段内。当用户从列表中选择一个选项时，该选项将覆盖输入字段中的文本。自动完成菜单意味着只是文本列表。
  当自动完成菜单开始获得更多行为时，就会出现问题。您不仅可以从列表中选择一个选项，还可以对其进行编辑、删除，甚至展开或折叠部分。自动完成菜单不再只是一个简单的可选文本列表。
  
  由于添加了编辑、删除和配置文件按钮，这个自动完成菜单在本质上是不诚实的。
  添加的行为不再意味着您可以只使用向上和向下箭头来选择一个选项。现在，每个选项都有多个操作，因此用户需要能够遍历两个维度而不仅仅是一个维度。这意味着使用键盘的用户可能会对如何操作组件感到困惑。
  屏幕阅读器受这种行为变化的影响最大，因为没有简单的方法可以帮助他们理解它。需要做大量工作来确保屏幕阅读器可以使用非标准方式访问菜单。因此，这可能会导致他们的体验低于标准或无法访问。
  为了避免这些问题，最好对用户和设计诚实。不要将两种不同的行为（自动完成菜单以及编辑和删除功能）结合起来，而是将它们保留为两种不同的行为。使用自动完成菜单仅自动完成用户名，并使用不同的组件或页面来编辑和删除用户。
  要使用物质诚实的镜头，请问自己以下问题：

• 设计是否对用户诚实？

• 是否有任何元素的行为、外观或功能与另一个元素一样？

• 是否有任何组件将不同的行为组合成一个组件？这样做是否会使该组件在实质上不诚实？

  可读性的镜头

  您是否曾经拿起一本书，只读了几段或几页，却因为文字太难读而想放弃？难以阅读的内容是精神上的负担和累人。
  句子长度、段落长度和语言的复杂性都会影响文本的可读性。复杂的语言会给用户带来问题，尤其是那些有认知障碍或语言不流利的用户。
  除了使用简单明了的语言外，您还应该确保每个段落都集中在一个想法上。具有单一想法的段落更容易记住和消化。单词较少的句子也是如此。
  另一个影响内容可读性的因素是行的长度。理想的行长通常被引用为 45 到 75 个字符。过长的线条会导致用户注意力不集中，难以正确移动到下一行，而过短的线条会导致用户跳跃过于频繁，导致眼睛疲劳。
  “跳到下一行时，潜意识会充满活力。在每行新行的开头，读者都会集中注意力，但随着行的持续时间，这种注意力会逐渐消失”
  — 排版：设计手册
  您还应该用标题、列表或图像来分解内容，以便让读者在精神上休息并支持不同的学习方式。使用标题对信息进行逻辑分组和总结。标题、链接、控件和标签应清晰且具有描述性，以增强用户的理解能力。
  要使用可读性镜头，请问自己以下问题：

• 语言是否简单明了？

• 每个段落都集中在一个想法上吗？
• 是否有任何长段落或长段不间断的文本？

• 所有标题、链接、控件和标签是否清晰且具有描述性？

  结构的镜头

  正如布局镜头中提到的，结构布局是屏幕阅读器和使用键盘的用户使用的布局。Lens of Layout 专注于视觉布局，Lens of Structure 专注于结构布局，或设计的底层 HTML 和语义。
  作为设计师，您可能不会编写设计的结构布局。不过，这不应该阻止您思考您的设计最终将如何构建。否则，您的设计可能会导致屏幕阅读器无法访问。
  以单场淘汰锦标赛支架的设计为例。
  
  您如何知道使用屏幕阅读器的用户是否可以访问此设计？如果不了解结构和语义，您可能不会。就目前而言，该设计可能会给使用屏幕阅读器的用户带来无法访问的体验。
  要理解为什么会这样，我们首先必须了解屏幕阅读器按顺序阅读页面及其内容。这意味着将读取锦标赛第一列中的每个名字，然后是第二列中的所有名字，然后是第三列，然后是最后一个。
  “乔治，弗雷德，莱纳斯，露西，杰克，吉尔，弗雷德，姜，乔治，露西，杰克，姜，乔治，姜，姜。”
  如果你只有一个看似随机的名字列表，你会如何解释比赛的结果？你能说谁赢得了比赛吗？或者谁赢了第六场比赛？
  没有更多的东西可以使用，使用屏幕阅读器的用户可能会对结果感到有点困惑。为了能够理解视觉设计，我们必须在结构设计中为用户提供更多的信息。
  这意味着作为设计师，您需要了解屏幕阅读器如何与页面上的 HTML 元素交互，以便了解如何增强他们的体验。

• 地标元素（页眉、导航、主要和页脚）
  允许屏幕阅读器跳转到设计中的重要部分。

• 标题( h1→ h6)
  允许屏幕阅读器扫描页面并获得高级概览。屏幕阅读器也可以跳转到任何标题。
• 列表(ul和ol)
  将相关项目组合在一起，并允许屏幕阅读器轻松地从一个项目跳转到另一个项目。
• 按钮
  触发当前页面上的交互。
• 链接
  导航或检索信息。
• 表单标签
  告诉屏幕阅读器每个表单输入是什么。

知道了这一点，我们如何为使用屏幕阅读器的用户提供更多意义？
首先，我们可以将锦标赛的每一列分组为几轮，并使用标题来标记每一轮。这样，屏幕阅读器就会了解新一轮何时发生。
接下来，我们可以帮助用户了解哪些玩家在每场比赛中互相对抗。我们可以再次使用标题来标记每个游戏，让他们找到他们可能感兴趣的任何游戏。
只需添加标题，内容将如下所示：
“第 1 轮，第 1 场，乔治，弗雷德，第 2 场，莱纳斯，露西，第 3 场，杰克，吉尔，第 4 场，弗雷德，姜， 第 2 场，第 5 场，乔治，露西，第 6 场，杰克，姜，轮3，第 7 场，乔治，姜，Winner，姜。”
这已经比以前容易理解了。
不过，这些信息仍然没有回答谁赢得了比赛。要知道这一点，您必须了解获胜者接下来要玩哪场比赛才能看到谁赢得了上一场比赛。例如，您必须知道第四场比赛的获胜者参加了第六场比赛，才能知道谁从第四场比赛中晋级。
我们可以通过通知赢得每场比赛的用户来进一步增强体验，这样他们就不必去寻找它。将文本“（获胜者）”放在赢得回合的人之后就足够了。
我们还应该使用列表进一步将游戏和回合分组在一起。列表提供了设计的结构语义，本质上是告知用户视觉设计中的连接节点。
如果我们将其转换回视觉设计，结果可能如下所示：

带有描述性标题和获胜者信息的锦标赛（此处显示为灰色背景）。
由于标题和获胜者文本在视觉设计中是多余的，您可以只对视觉用户隐藏它们，这样最终的视觉结果看起来就像第一个设计一样。
“如果最终结果在视觉上与我们开始的地方相同，我们为什么要经历这一切？” 你可能会问。
原因是您应该始终使用所有必要的结构设计要求来注释您的设计，以获得更好的屏幕阅读器体验。这样，实现设计的人就知道要添加它们。如果您刚刚将第一个设计交给实施者，它很可能最终无法访问。
要使用结构透镜，请问自己以下问题：

• 我可以勾勒出我设计的粗略 HTML 结构吗？
• 如何构建设计以更好地帮助屏幕阅读器理解内容或找到他们想要的内容？

• 我如何帮助实施设计的人理解预期的结构？

  时间的镜头

  在设计中，您可能需要定期限制用户可以花费在任务上的时间。有时可能是出于安全原因，例如会话超时。其他时候可能是由于非功能性要求，例如时间受限的测试。
  无论是什么原因，您都应该了解某些用户可能需要更多时间才能完成任务。一些用户可能需要更多时间来理解内容，其他用户可能无法快速执行任务，而且很多时候他们可能只是被打断了。
  “设计师应该假设人们在活动中会被打断”
  — 日常用品的设计
  需要更多时间来执行操作的用户应该能够在可能的情况下调整或删除时间限制。例如，使用会话超时，您可以在会话即将到期时提醒用户并允许他们延长会话。
  要使用时间镜头，请问自己这个问题：

• 是否可以提供控制来调整或取消时间限制？

  把它放在一起

  既然您已经了解了可访问性的不同视角，您可以通过这些视角查看您的设计，那么您将如何处理它们？
  镜片可以在设计过程中的任何时候使用，即使在设计已经交付给您的用户之后。只需从手头的几个开始，一次一个地通过镜头仔细分析设计。
  问自己这些问题，看看是否应该调整任何东西以更好地满足用户的需求。当你慢慢做出改变时，带上其他镜头并重复这个过程。
  通过一次查看一个镜头的设计，您将能够改进体验以更好地满足用户的需求。随着您对用户需求的包容性更强，您将为所有用户创建更易于访问的设计。
  使用镜头和有见地的问题来检查可访问性原则深受Jesse Schell和他的书“游戏设计艺术：镜头之书”的影响。
  Steven Lambert 拥有超过 7 年的行业经验，擅长设计系统、性能和可访问性。另一方面，他是一名业余游戏开发者和自由网络开发者。
  最初于2018 年 4 月 9 日在www.smashingmagazine.com上发布。