为非交互式文本的屏幕阅读器中的文本提供替代文本答案

【问题标题】：Providing an alternative text for a text in screen reader for non-interactive text为非交互式文本的屏幕阅读器中的文本提供替代文本
【发布时间】：2020-07-13 20:29:01
【问题描述】：

我有以下标记：

<p><span alt="Something else">Lorem</span> ipsum blah blah</p>

但我想将 Lorem 替换为“Something else”，仅用于屏幕阅读器。我怎样才能做到这一点？我将无法使用aria-label，因为span 不是交互式元素。

【问题讨论】：

标签： html accessibility screen-readers wcag

【解决方案1】：

您需要结合使用aria-hidden 和视觉隐藏文本。

首先，关于执行您所要求的操作的快速警告。

视觉上隐藏的文本（我建议并在下面解释）应该用于添加上下文信息。替换信息很少是个好主意。

这样做的原因是，您可能会为屏幕阅读器用户提供与非屏幕阅读器用户不同的体验，这违反了可访问性的核心原则！

在不了解您的具体用例的情况下，我无法建议您的用例是否属实（因此为什么此答案会向您展示如何操作），但一般规则是，如果它对一组人有用，它就是有用的致所有人。而是寻找使解释/信息等适用于所有用户的方法，以便每个人都有尽可能相似的体验。

咏叹调隐藏

aria-hidden 允许您从屏幕阅读器中隐藏信息。可以将其想象为 display: none，但用于辅助技术。

你会隐藏你不想读出的部分。

Lorem

视觉上隐藏的文字

视觉上隐藏的文字与aria-hidden相反。它通常被称为“仅限屏幕阅读器”文本。

您只需将要让屏幕阅读器阅读的文本放在一个元素中（通常是）并应用该类。这将由屏幕阅读器读取，但视觉上不可见。

大多数库都内置了类，但我鼓励您使用下面示例中指示的 CSS，如 my visually hidden class has better compatibility / support as discussed in this answer I gave.。

由于视觉隐藏的文本可以一直使用到 IE6，所以您不应该有任何兼容性问题（尽管某些屏幕阅读器可能会忽略 aria-hidden 并宣布以及所以请记住这一点，但您对此无能为力）

Something else

将所有内容放在一起 - 示例

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

&lt;p&gt;&lt;span aria-hidden="true"&gt;Lorem&lt;/span&gt;&lt;span class="visually-hidden"&gt;Something else&lt;/span&gt; ipsum blah blah&lt;/p&gt;

【讨论】：

【解决方案2】：

TL;DR：您可以在标签上设置role 以使其成为交互式元素，但请稍等...

但我想将 Lorem 替换为“Something else”，仅用于屏幕阅读器。我怎样才能做到这一点？我将无法使用 aria-label，因为 span 不是交互式元素。

许多类似问题的问题在于，您专注于屏幕阅读器，而替代文本可能对每个人都有用：例如有语言障碍的人（失语症、诵读困难症、文盲、聋人......）甚至是盲人使用非屏幕显示器（盲文显示器）。

或者更糟糕的是，替代文本可能会破坏用户体验，例如，将“FBI”等易于阅读的文本替换为“联邦调查局”。

您可能会想用以下标记来表达一种日期格式，例如“09/11/01”：

<div role="img" aria-label="September 11th, 2001">09/11/01</div>

它适用于屏幕阅读器。它可能会帮助不在美国生活的盲人，但它不会帮助 99.9% 的全球英语用户，因为全文可以帮助他们理解日期格式（是“2001 年 11 月 9 日”吗？或“2009 年 11 月 1 日”？）。

【讨论】：

【解决方案3】：

另一种方法是：

Loremipsum blah blah

... NVDA 将其宣布为 “图形其他东西 ipsum blah blah”。

img 角色告诉 ATnot 在元素内部查找更多可访问的名称，这有点类似于 aria-hidden，因此它对于可访问地标记“dingbat”类型字形特别有用和表情符号（即表示为“文本”字符的“图形”图标），或当一系列字符可以以多种方式解释（特别是通过语音合成器）或根本不宣布时。这将允许您锁定单一解释。

示例：单引号字符 ' 可能表示分钟或英尺，具体取决于上下文。 NVDA 根本不会宣布它，除非在首选项中启用了标点符号。

现在，与默认的无语义范围不同，img 角色允许您将任意字符序列视为图形，并使用aria-label。

缺点是角色被宣布（例如“图形”或“图像”），并且该元素将出现在您的 AT 提供的任何图像列表 UI 中。

您可能对职位公告感到满意，也可能不满意。（在这种情况下，它根本不是图形）。您可以使用aria-roledescription 进行调整，因此：

You turned over the 5&#9829;

... NVDA 将其宣布为 “你翻出了 5 个花色红心”。

不完美，但这将字形固定为卡片套装“红心”，而不是（说）“爱”这个词（如“I ♥ NY”）。其他特殊角色名称可能更适合您的情况。请注意，空的 aria-roledescription 属性在 ARIA 中无效有效，因此您无法使用此技术完全取消它们，并且您无法准确预测不同的 AT 将如何将角色声明插入语音流。因此，使用aria-roledescription 属性时要格外小心。

格雷厄姆的警告仍然很重要。这些方法的有效用例是纯 AT 内容对于有视力的用户来说是多余的或具有破坏性的。这些案例比您想象的要少。

还要考虑到某些屏幕阅读器用户没有视力障碍 - 例如，他们可能有阅读障碍。

另一个不太明显的问题是并非所有 AT 都是屏幕阅读器！

一些针对文本变体的“创意”解决方案可能适用于屏幕阅读器，但不适用于（例如）盲文设备。如果您尝试“二次猜测”屏幕阅读器将如何发音某些内容，并试图提供某种语音技巧，那么盲文用户将难以理解，则尤其如此。

作为一般规则，应避免向 AT 隐藏内容或仅为 AT 提供内容。

如果您绝对必须这样做，请考虑阅读障碍的屏幕阅读器用户、盲文设备用户，并且（最好）从无障碍社区或一些代表性用户那里获得关于您的实施的第二意见，提供足够的上下文（即不仅仅是 lorem ipsum）以便适当地判断您的实施。

【讨论】：