3

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

在此处输入图像描述

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

4 回答 4

6

标题中的一般问题非常广泛。简单来说，主要关注的是字体问题，可能比较严重，确实没有优雅的退化；如需更长的答案，请参阅我在 HTML 中使用特殊字符的指南。

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

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

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

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

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

图像会引起一些 HTTP 请求，但这是微不足道的或可忽略的影响。（您可以使用 CSS 精灵，尽管在这样的简单情况下几乎没有用处。）图像通常可以很好地缓存。如果需要，可以缩放它们以匹配文本大小，例如通过img以单位设置元素的高度em（而不是设置宽度，以便它们被缩放以保持宽度：高度比）。

于 2012-10-23T21:14:12.950 回答
0

我认为如果你不想尝试，你应该遵循Jukkas 的建议并使用img元素。

如果出于某种原因，您想使用 Unicode 星号，则必须尝试使其可访问。根据您的描述，我猜您目前正在执行以下操作：

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

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

这个例子没有标记评级的语义，因此屏幕阅读器和其他用户代理不能“理解”（宣布）它的含义。评分仅由颜色描述 → 这是不可访问的。

一种可能的方式可能是使用abbrelement，但是，这个用例可能会将定义延伸得太远（“五颗星真的是评分的缩写吗？”）：

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

<!-- CSS: .rating span {color:yellow;} -->
于 2012-10-24T15:44:40.317 回答
0

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

于 2012-10-23T19:32:38.307 回答
-1

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

于 2012-10-23T19:26:55.403 回答