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

Question

在我们的网络应用程序中,我们使用彩色星星(★aka ★)来表示评级.所以前四颗星是纯色,而最后一颗星是白色代表4分中的4分.如下:

• 在可访问性和支持方面,这会引起什么问题？
• 我无法确定用户浏览器中的字体版本是否支持此字符,有哪些方法可以为此提供"优雅降级"？或者覆盖范围是否足够好,这不是问题？
• 这是如何由屏幕阅读器"渲染"的？是否会<span title="4 out of 5">提供更多的可访问性？

Answer 1

标题中的一般问题非常广泛.简单地说,主要关注的是字体问题,它可能相当严重,并且确实没有优雅的降级; 要获得更长的答案,请参阅我在HTML中使用特殊字符的指南.

关于彩色星星的具体问题要简单得多,简单的回答是有充分的理由使用五个图像,每个图像都有不同数量的彩色星星.然后你可以使用有意义的alt属性,比如alt="four stars",事情可靠地工作.它们应该是内容图像(via img),因为无法指定背景图像的文本替代.

考虑到使用BLACK STAR"★"字符的可能性,它的字体支持并不是特别糟糕,但也不是很普遍.没有简单的方法可以找出包含某些字体的计算机的百分比.此外,如果角色存在于系统中的某些字体中,则其外观可能会有很大差异.对于这个特定字符,可以预期字形看起来非常相似 - 但是大小不同.

如果您的上下文确实需要使用符号作为文本字符,那么您可能需要承担风险,但这里符号伴随文本而不是真正包含在文本中,因此可以使用图像.

使用嵌入式字体@font-face是可能的,但这听起来有点过分.

屏幕阅读器在处理特殊字符方面差异很大.一般来说,它们被设计为以某种人类语言阅读普通文本,并且它们通常无法有意义地说出特殊字符 - 或者甚至只是简单地说出字符的名称.title可以说出该属性,但通常仅作为选项,并且用户可能不知道这些选项的存在.

图像会导致一些HTTP请求,但这会产生微不足道的影响.(你可以使用CSS sprites,虽然这在像这样的简单情况下几乎没用.)图像通常可以很好地缓存.如果需要,可以缩放它们以匹配文本大小,例如通过img以em单位设置元素的高度(而不是设置宽度,以便缩放它们以便保持宽度:高度比).