屏幕阅读器如何处理 HTML 表的 td 中的 utf-8 复选标记字符？

问题描述

我有 HTML 表格，其中的复选标记用于指示果酱（列标题，th）是否可用作（行 th = 风味）葡萄或草莓。

复选标记可以是 gif，在这种情况下，img 标签的 alt 标签会告诉屏幕阅读器这是一个复选标记。

但假设不是 img，而是使用 utf-8 复选标记字符。例如，Jaws 会说“对勾”吗？

解决方法

理论上您应该可以使用任何 UTF-8 字符。

但是在实践中，这在某些屏幕阅读器中可能是“笨拙的”（读取“特殊字符”“字符名称”），并且在某些情况下它们被完全忽略，因为它们被认为是装饰性的。这些屏幕阅读器使用较少，JAWS 和 NVDA 都表现得很好。

话虽如此，您可能最好使用以下方法来最好地处理特殊字符。

特殊字符是否纯粹是装饰性的，即笑脸表情符号 - 如果是，用 <span aria-hidden="true">Your UTF-8 Character</span> 隐藏它。
如果它不是纯粹的装饰，那么没有它，句子/段落是否有意义？如果是，您可能再次最好将它隐藏在屏幕阅读器中。或者，如果您愿意加倍努力，请使用第 3 步。
如果字符很重要/您想为屏幕阅读器提供一流的体验，您应该像步骤 1 和 2 一样隐藏特殊字符，然后添加包含字符描述的 visually hidden 跨度。下面是一个例子。

在下面的示例中需要注意的一件事是，我不会用相同的文本替换“复选标记”。相反，我用最有意义的词替换它（在您的示例中是“可用”）。这为屏幕阅读器用户提供了最佳体验。

.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); /*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 */
}

<p>
    <span aria-hidden="true">&#x2713;</span>
    <span class="visually-hidden">Available</span>
</p>

一种更好的探索方式。

SVG 可能是一个更好的解决方案。它们具有内置语义，例如 title 和 desc 元素，您可以使用它们向屏幕阅读器公开信息。

因为它们可以内嵌显示，所以您也不必担心额外的网络调用。

如果您需要有关如何实施的帮助，请提出另一个问题，我们可以为您提供帮助。

accessibility accessibility jaws-screen-reader