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

Question

在我们的网络应用程序中，我们使用彩色星星（★又名★）来表示评分。因此，第一个四星级的是纯色，而最后一颗星星会是白色代表一个等级的4出5所示：

• 什么担忧这是否加薪在可访问性和支持方面？
• 我无法确定用户浏览器中的字体版本是否支持此字符，有什么方法可以为此提供“优雅的降级”？或者覆盖面是否足够好，这不是问题？
• 这是如何由屏幕阅读器“呈现”？如果将评分打包为<span title="4 out of 5">可提供更多的辅助功能？

Answer 1

标题中的一般问题非常广泛。为了简要说明，主要关注的是字体问题，这可能是相当严重的，并且确实没有优雅的降级;对于更长的回答，请参阅我的Guide to using special characters in HTML。

有关彩色星星的具体问题要简单得多，简短的回答是，有五个图像有很强的理由，每个图像都有不同数量的彩色恒星。然后你可以使用有意义的alt属性，比如alt="four stars"，而且事情可以相当可靠地工作。他们应该是内容图像（通过img），因为没有办法指定文本替代背景图像。

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

如果你的背景下真正需要使用符号作为文本字符，那么你可能需要承担风险，但这里的符号伴随文本，而不是真的被包含在文本，所以没关系使用的图片。

通过@font-face使用嵌入字体是可能的，但听起来有点矫枉过正。

屏幕阅读器在处理特殊字符方面有很多不同。一般来说，它们被设计为用一些人类语言阅读正常文本，而且它们通常不会有意义地说出特殊的字符 - 或者甚至只是简单地说出字符的名称。可以说出title属性，但通常仅作为选项，并且用户可能不知道这些选项的存在。

图像会导致一些HTTP请求，但这是一种边缘或可忽略的影响。 （你可以使用CSS sprites，虽然在这样的简单情况下这样做几乎没有用）。图像通常可以很好地缓存。如果需要，可以缩放它们以匹配文本大小，例如，通过在em单位中设置img元素的高度（而不是设置宽度，以便它们被缩放以保持宽度：高度比率）。

Answer 2

您可以在字体松鼠中使用@ font-face。如果评分永远不会改变，那么如何使用Photoshop或类似的程序创建一个图像作为背景图片？跨度的标题并不是一个好的标题。如果您稍后更改评分，会发生什么情况，那么您必须更改所有标题属性。我会制作一个更为一般的标题，如“评分”。如果评分不是您页面上的内容绝对必要的，请考虑使用JavaScript来显示评分。这样，您实际上不会更改HTML，因此应该处理您的安全问题。

Answer 3

为了获得最佳整体兼容性，请使用图像。您知道它会是什么样子，可访问性问题很简单，您不需要担心浏览器对各种功能的支持。

Answer 4

我想如果你不想试验，你应该遵循Jukkas advice并使用img元素。

如果出于任何原因想要使用Unicode星号符号，则必须尝试使其可访问。根据你的描述，我想你现在做这样的事情：

<div class="rating"> 
    <span>★★★★</span>★ 
</div> 

<!-- CSS: .rating span {color:yellow;} --> 

这个例子不马克-了评级的语义，并为此屏幕阅读器和其他用户代理不能“明白“（宣布）它的意义。评分仅用颜色描述→这是不可访问的。

一种可能的方法可能是使用abbr element的，然而，这种使用情况下可拉伸的定义太远（“是五颗星真是一个等级分数的缩写？”）：

<div class="rating"> 
    <abbr title="rating of 4 out of 5"><span>★★★★</span>★</abbr> 
</div> 

<!-- CSS: .rating span {color:yellow;} -->