根据设计的空间维度加以区分可以分为-从12个维度理解无障碍设计

6. 图像和图标尺寸

人们常说，“一张图片胜过千言万语”。然而，一张看不见的图片是无言的，对吧？图像可用于设计以传达特定的含义或感觉。有时它们可​​用于简化复杂的想法。无论图像是什么，使用屏幕阅读器的用户都需要知道图像的含义。

作为设计师，您是最了解图像试图传达的含义或信息的人。因此，您应该使用此信息来解释设计，以免以后遗漏或误解。这将用于为图像创建替代文本。

“你很少会描述图片是什么样子的；你会解释它说了什么。”——合规 Alt Text 的五条黄金法则

知道描述图像很困难，在做决定时拥有一个方便的决策树会很有帮助。一般来说，如果图像是装饰性的或者已经有描述图像的文字，则不需要进一步的信息。否则，您应该描述图像。如果图像包含文字，请在描述中重复文字。

描述应简洁。建议不超过两句话，尽可能使用简洁的一句话。这样用户无需听冗长的描述即可快速了解图片。

例如，如果您向屏幕阅读器描述这幅图像，您会说什么？

由于我们描述的是图像所传达的信息根据设计的空间维度加以区分可以分为，而不是图像本身，因此描述可以是梵高的《星夜》，而无需任何其他上下文描述。您不应该只写一些绘画风格或图片外观的描述。

如果图片中包含需要长篇描述的信息，则不应将长篇描述放在关键信息（如复杂的图表）中，而应将关键文本的简短描述作为标题，然后在内容或链接到另一个页面时给出详细描述。

这样，用户仍然可以快速获得最重要的信息，当然，如果他们愿意，也可以进一步深入了解。如果图像是图表，则应重复图表的数据，就像重复图像中的文本一样。

如果你正在设计的平台允许用户上传图片，那么你应该提供一种方式让用户在上传图片的同时输入关键信息。例如，Twitter 允许用户在将图片上传到推文时输入关键信息。

使用图片和图标需要注意以下问题：

7. 键盘尺寸

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

用户更喜欢使用键盘而不是鼠标的原因有很多。一些使用屏幕阅读器的人经常使用键盘阅读网页卡通形象，而一些患有震颤的人使用键盘是因为它比鼠标更准确。甚至一些高级用户也使用键盘，因为它更快、更高效。

键盘用户通常使用 Tab 键按顺序浏览每个控件。Tab 键的逻辑顺序可帮助用户知道下一个按键的位置。在西方文化中，这通常是从左到右、从上到下。但意外的 Tab 命令也会导致用户迷失方向，他们会疯狂地扫描网页以寻找焦点。

有序的 Tab 键切换还意味着用户必须先找到所需的控件才能完成任务。如果用户需要点击数十或数百个控件才能完成任务，那么这对用户来说可能是一个真正的痛点。

通过将最重要的用户流程放在标签栏顶部附近，我们可以帮助用户提高效率。然而，这并不总是有效。在这些情况下，提供一种快速跳转到特定流程或内容的方法可能会提高他们的效率。这就是“跳至内容”链接存在的原因。

一个很好的例子就是Facebook吉祥物设计，它提供了键盘导航菜单，可以让用户跳转到网站的特定部分，大大提高用户与所需页面和内容交互的效率。

Facebook 为所有键盘用户提供了跳转到页面特定部分或其他页面的方法，以及“辅助功能帮助”菜单。

在设计标签交互时，焦点状态应始终可见，否则用户很容易迷失。就像意外按标签一样，没有良好的焦点指示器可能会导致用户不知道自己在哪里，不得不浏览整个页面才能找到焦点。

更改默认焦点指示器的样式有时可以改善用户体验。好的焦点指示器不仅要依靠颜色来指示焦点（请参阅颜色维度），还应足够清晰，以便用户轻松找到它。例如，在焦点状态下根据设计的空间维度加以区分可以分为，带有蓝色按钮的蓝色线框在视觉上不会太过明显，从而难以识别。

虽然这个维度侧重于键盘的可访问性，但值得注意的是，它适用于没有鼠标的用户，为他们提供了一种与网站交互的方式。

用户无需鼠标即可与网站交互的任何方式。开关按钮、吸气按钮和眼动追踪软件等设备都要求页面可通过键盘操作。

通过提高键盘的可访问性，您可以让更多用户更轻松地访问您的网站。

使用键盘时需要注意以下问题：

8. 布局尺寸

布局对网站的可用性有很大影响。良好的布局可让您轻松找到有用的内容，并且良好的布局应提供对用户有意义的逻辑顺序。

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

结构布局由屏幕阅读器和键盘用户使用。当视觉页面布局发生变化（但底层结构布局不变）时，这些用户可能会感到困惑，因为他们的 Tab 键顺序不合逻辑。如果您必须更改视觉页面布局，则应通过更改结构布局来实现，以便键盘用户保持有序、合乎逻辑的 Tab 键顺序。

布局应可调整大小，且至少可灵活调整至 320 像素，且无水平滚动条，以便在手机上轻松查看。布局还应足够灵活，可放大至 400%（同样无水平滚动条），以便需要增大字体大小以获得更好阅读体验的用户使用。

当相关内容彼此非常接近时，使用屏幕放大镜的用户会受益。屏幕放大镜只能为用户提供整个布局的一小部分视图，因此很难找到远处的内容或

远离发生互动的地点，从而忽略这些地点的内容。

在 CodePen 上执行搜索时，页面右上角会出现。单击按钮会在屏幕另一侧显示一个大型搜索输入框。使用屏幕放大镜的用户很难注意到这些变化，可能会认为按钮不起作用。

使用布局时需要注意以下问题：

9. 物质忠诚度维度

材料保真度是一种建筑设计价值，它表明一种材料本身是真实的，不能用来替代另一种材料。这意味着混凝土应该看起来像混凝土，而不是被涂漆或雕刻成看起来像砖块。

材料保真度是衡量每种材料独特属性和特征的属性。遵循材料保真度的建筑师知道何时使用哪种材料以及如何使用而不损害其价值。

不过，材料保真度并不是一个硬性规定。它是一个连续体，就像所有价值观一样，你可以随着对它们的理解而将其分解。俗话说，它们更像是所谓的指导方针，而不是实际规则。

在网页设计中，材料保真度意味着一个页面元素或组件的外观、操作或功能不应与另一个元素或组件相似。这样做会欺骗用户并造成混淆。一个常见的例子是看起来像按钮的链接或看起来像链接的按钮。

链接和按钮具有不同的行为和功能。链接通过 Enter 键激活，通常会将您带到另一个页面，并在右键单击时显示特殊的上下文菜单。按钮通过空格键激活，主要用于触发当前页面上的交互，并且没有这样的上下文菜单。

当链接被设计成看起来像按钮或反之亦然时，用户可能会感到困惑，因为它的行为和工作方式都不太好。如果这个“按钮”意外地导致用户离开，并在此过程中丢失数据，他们可能会感到非常沮丧。

“乍一看一切都很好，但经不起考验。一旦这样的网站在各种浏览器上进行压力测试，它就会面临崩溃的风险。”——弹性网页设计

最大的问题是，当链接和按钮的样式相同且彼此相邻放置时，由于无法区分两者，网站可能会以意想不到的方式引导用户。

您能分辨出哪些会让您离开页面，哪些不会吗？

当组件的行为与预期不同时，很容易给使用键盘或屏幕阅读器的用户带来麻烦。自动完成菜单并不是唯一的例子。

自动完成功能用于建议或预测用户正在输入的单词的其余部分。当无法显示所有选项时，自动菜单生成功能可让用户从大量选项中进行选择。

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

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

通过添加编辑、删除和配置文件按钮，这个自动生成的菜单实际上在本质上是不忠诚的。

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

屏幕阅读器受此行为变化的影响最大，因为没有简单的方法可以帮助它们理解。需要做大量工作才能确保屏幕阅读器能够使用非标准方式访问菜单。

因此，这可能会导致他们获得糟糕或不适当的体验。

为了避免这些问题，最好诚实地对待用户和设计，不要将两种不同的行为（自动生成菜单的编辑和删除功能）合并在一起，而应将它们保留为两种单独的行为。使用自动生成的菜单自动填充用户的名称，并使用不同的组件或页面编辑和删除用户。

使用材质保真度时需要注意以下问题：

10.可读性

你是否曾经读过一本书，读了几段或几页后就想过放弃，因为内容太难读了？那些艰难的阅读会让人精神疲惫。

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

除了使用简单、清晰的语言外，您还应确保每段都集中于一个想法。只有一个想法的段落更容易让用户记住和消化。单词较少的句子也是如此。

内容可读性的另一个因素是一行文本的长度。理想的行长通常在 45 到 75 个字符之间。如果太长，用户会失去注意力，难以正确移动到下一行；而如果太短，用户会频繁跳转，导致眼睛疲劳。

“跳到下一行会潜意识地激发活力。在每一行的开头，读者都会集中注意力，但随着行的阅读，这种注意力就会逐渐消失。”——《Typographie：设计手册》

您还应该使用标题、表格或图片来划分内容，以便为读者提供思维休息，同时支持不同的学习风格。使用标题以系统的方式对信息进行分组和总结。标题、链接、控件和标签应清晰且具有描述性，以增强用户的理解力。

使用可读性时，请注意以下几点：

11. 结构尺寸

如布局维度中所述，结构布局是屏幕阅读器和键盘用户所使用的布局。页面布局侧重于视觉布局，而页面结构侧重于结构布局，或设计的底层 HTML 和语义。

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

以下是锦标赛促销设计的一个例子：

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

要理解原因，我们首先必须了解屏幕阅读器是按顺序读取页面及其内容的。这意味着将先读取锦标赛第一列中的每个名称，然后读取第二列中的所有名称，然后读取第三列，依此类推。

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

如果你手头只有一份看似随机的名单，你该如何解读锦标赛的结果？你能说出谁赢得了锦标赛吗？或者谁赢得了第六场比赛？

如果不做额外的工作，使用屏幕阅读器的用户可能会对结果感到有些困惑。为了能够理解视觉设计，我们必须为用户提供更多有关结构设计的信息。

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

标志性元素（页眉、导航、主页和页脚）

允许屏幕阅读器跳转到设计的重要部分：

允许屏幕阅读器扫描页面并获取内容的高级概述。屏幕阅读器还可以跳转到任何标题。

将相关项目组合在一起，并允许屏幕阅读器轻松地从一个项目跳转到另一个项目。

在当前页面上触发交互。

导航或检索信息。

告诉屏幕阅读器每个表单输入是什么。

了解了这一点，我们如何为屏幕阅读用户提供更多有意义的东西？

首先，我们可以将锦标赛的每一列划分为几轮，并给每轮添加标题。这样，屏幕阅读器就能知道新一轮何时开始。

接下来，我们可以帮助用户了解谁在玩每个游戏。我们可以再次使用标题来标记每个游戏，让他们找到他们可能感兴趣的任何游戏。

通过添加标题，内容如下所示：

“第 1 轮：第一场比赛：乔治、弗雷德；第二场比赛：莱纳斯、露西；第三场比赛：杰克、吉尔；第四场比赛：弗雷德、金杰；第 2 轮：第五场比赛：乔治、露西；第六场比赛：杰克、金杰；第 3 轮：第七场比赛：乔治、金杰；获胜者：金杰。”

这比以前更容易理解。

不过，这些信息并不能回答每场比赛的获胜者是谁。要知道这一点，你必须在获胜者的下一场比赛时知道谁赢得了上一场比赛。例如，要知道第 4 场比赛的获胜者是谁，你必须知道在第 6 场比赛中谁从第 4 场比赛晋级。

我们可以通过告诉用户每场比赛的获胜者来进一步增强体验，这样他们就不必寻找了。在获胜者后面加上“获胜者”标签就足够了。

我们还应该使用列表来进一步对游戏和回合进行分组。列表提供了设计的结构语义，本质上是通过视觉设计告知用户连接的节点。如果我们将其转换回视觉设计，结果可能如下所示：

具有描述性标题和获胜者信息的比赛（此处显示为灰色背景）

由于标题和获胜者字段在视觉设计中显得多余，因此您可以在视觉上隐藏它们，以便最终的视觉效果看起来就像第一个设计一样。

您可能会问“如果最终结果看起来与我们开始时一样，为什么我们要经历这一切？”

原因是，您应该用所有必要的结构设计要求来解释您的设计，以获得更好的屏幕阅读体验。这样，实现此设计的人就会知道如何添加它们。如果您只是将您的第一个设计交给实施者，那么很有可能它最终无法访问。