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

Question

在我们的网络应用中，我们使用彩色星星（★aka ★）来表示评级。因此，前四颗星将是纯色，而最后一颗星将是白色，代表5分中的4分。如此：

  

• 在可访问性和支持方面，这会引起什么问题？
• 我无法确定用户浏览器中的字体版本是否支持此字符，有哪些方法可以为此提供“优雅降级”？或者覆盖范围是否足够好，这不是问题？
• 如何通过屏幕阅读器“呈现”？用<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，虽然这在像这样的简单情况下几乎没用。）图像通常可以很好地缓存。如果需要，可以缩放它们以匹配文本大小，例如，通过以img单位设置em元素的高度（而不是设置宽度，以便缩放它们以便保留宽度：高度比）。

Answer 2

为获得最佳整体兼容性，请使用图像。您知道它的外观，可访问性问题很简单，您无需担心浏览器对各种功能的支持。

Answer 3

我认为如果您不想进行试验，则应遵循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;} -->

Answer 4

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