html - 在网络上使用特殊字符符号时应该注意什么？

Question

在我们的网络应用程序中，我们使用彩色星星(★ 又名 ★)来表示评分。因此，前四颗星将是纯色，而最后一颗星将是白色，表示评分为 4 分(满分 5 分)。像这样:

• 这会在可访问性和支持方面引发哪些问题？
• 我不能确定用户浏览器中的字体版本是否支持这个字符，有什么方法可以对此提供“优雅降级”？还是覆盖范围足够好，这不是问题？
• 屏幕阅读器是如何“呈现”的？将用 <span title="4 out of 5"> 包装评级提供更多的可访问性？

Answer 1

标题中的一般问题非常宽泛。简单说一下，主要是字体问题，比较严重，确实没有优雅退化；如需更长的答案，请参阅我的 Guide to using special characters in HTML .

关于彩色星星的具体问题要简单得多，简短的回答是有充分的理由使用五张图片，每张图片都有不同数量的彩色星星。然后您可以使用有意义的 alt 属性，例如 alt="four stars"，并且一切都相当可靠。它们应该是内容图像(通过 img)，因为没有办法指定文本替代背景图像。

考虑到使用黑星“★”字符的可能性，其font support不是特别糟糕，但也不是很普遍。没有简单的方法可以找出包含某些字体的计算机的百分比。此外，如果该字符存在于系统中的某些字体中，则其外观可能会有很大差异。对于这个特定的字符，可以预期字形看起来非常相似——但大小不同。

如果你的上下文确实需要使用一个符号作为文本字符，那么你可能需要冒险，但这里的符号伴随着文本而不是真正包含在文本中，所以没关系使用图像。

通过 @font-face 使用嵌入字体是可能的，但在这里听起来有点过分了。

屏幕阅读器在处理特殊字符时有很大差异。一般来说，它们被设计为阅读某些人类语言的普通文本，而且它们常常无法有意义地说出特殊字符——或者根本无法说出特殊字符，即使只是简单地说出字符的名称。 title 属性可以说出来，但通常仅作为一个选项，用户可能不知道此类选项的存在。

图像会引起一些 HTTP 请求，但影响很小或可忽略。 (你可以使用 CSS sprites，尽管这在像这样的简单情况下几乎没有用。)图像通常会得到很好的缓存。如果需要，它们可以缩放以匹配文本大小，例如通过以 em 为单位设置 img 元素的高度(并且不设置宽度，以便缩放它们以保持宽高比)。