五星评分系统 - 真正易于访问，无需 JS、无需 WAI-ARIA 和语义 HTML！⭐⭐⭐⭐⭐ [轻松转换为任何框架！]

在本文中，我将解释如何构建一个星级评定系统，该系统实际上可访问，易于根据您自己的需要进行设计，并且由于使用语义 HTML 而易于集成到任何框架中。

如果你很忙，直接跳到第一个例子

介绍

我看到最近分享的几种星级评定系统对于使用屏幕阅读器（一种可以将网站大声读出或转换为盲文的设备）的人或依赖键盘的人（患有运动障碍/准确性问题的人，如帕金森病、脑瘫等）来说完全无法访问。

当作者向世界发布导致缺乏可访问性的代码时，我对这种缺乏思考的情况感到沮丧。

然后人们只是不假思索地复制和粘贴示例代码（或者他们可能是开发新手，还不了解可访问性），并且可访问性问题永远存在（这就是为什么我们仍然有人使用<a href="#"按钮......这是 13 年前我们无法设计 s 时的悬而未决的问题<button>......这就是消除不良做法所需的时间！）

无论如何，这不是我的愤怒咆哮之一，所以这就是我为解决这个问题所做的第一次贡献，一个真正可访问的星级评定系统。

易于访问的星级评定系统

为什么这比您以前见过的其他示例更好？

• 它使用语义正确的元素 -radio输入，因为这是评级之间的选择。
• 通过使用语义正确的元素，它就不需要 WAI-ARIA，因为 WAI-ARIA 实际上并没有人们想象的那么多的支持。
• 只需进行一些小的调整，它就可以一直工作到 IE9，这一点很重要，因为仍然有很多屏幕阅读器用户（12.4%！）使用 IE9、10 和 11。
• 无需 JavaScript，因此即使在廉价硬件上也能快速运行。
• 适用于任何框架...您可以简单地将单选按钮组值挂接到标准单选按钮组上（因为本质上它就是）！
• 只需更改选中、未选中、悬停状态的 SVG 以及显示大小，即可随心所欲地设置样式。我鼓励您创建一些更精美的 SVG，因为这些 SVG 还处于草稿阶段，仅供演示使用！
• 它将支持任意数量的星星（尽管您必须调整一些东西并在 CSS 中添加一些规则）
• 您可以安全地复制粘贴 CSS 和 HTML 并知道它是可访问的！

无障碍星级评定系统示例

尝试使用键盘、鼠标、屏幕阅读器（如果您知道如何使用）等。它应该可以完美运行。

IE9、IE10 和 IE11 兼容性

在 IE9、IE10 和 IE11 中只有两件事无法运行。

第一种是使用 CSS 变量 - 因此只需将它们替换为实际值即可。

第二种方法是focus-within将焦点放在框周围。对于 IE，我们只需将焦点指示器放在包含<span>星星的 周围即可。

第二个示例的美妙之处在于，它可以让您看到使用键盘聚焦项目时一切是如何运作的！（您可以看到标签如何堆叠在一起并具有不同的宽度以实现我们的星级评定效果）。

无障碍星级评定系统 IE9+

对逻辑的解释。

<fieldset>是一种语义上正确的控件分组方式。由于单选“按钮”都与同一项（您的星级评分）相关，因此屏幕阅读器用户能够清楚地知道他们正在回答什么。

我们使用按钮<input type="radio">，因为这是最合理的 HTML 表单元素。radio当有多个选项但一次只能选择一个时，应该使用按钮。

为了确保输入框具有正确关联的标签，我for在标签上使用了指向具有该 ID 的相关输入框的功能。这一点很重要，因为屏幕阅读器用户需要正确关联的标签，以便他们知道输入框的用途。否则，他们只会听到“输入”——这没什么用！

仅供参考，您可以使用以下方法执行相同操作（将标签与输入正确关联）：

<label>
   <input type="radio">
</label> 

但显然Dragon Naturally Speaking 难以处理隐式标签，因此我追求最大程度的兼容性。

<span>但是标签里面的 s是什么意思呢？

这<span>是为屏幕阅读器用户准备的。

我使用称为“视觉隐藏文本”的类来在视觉上隐藏文本。

该文本在屏幕上不可见，但屏幕阅读器用户仍然可以阅读。

这样，当他们关注星级评定系统并选择一个选项时，他们会听到“您的评分：3”，“您的评分：4”等或类似的。

如果没有这个，他们就会遇到同样的问题，只听到“输入”，因为虽然我提供了标签，但其中却没有文字。

您会注意到我也应用了相同的样式，<input>以使其在视觉上不可见，但屏幕阅读器仍然可以访问。

这是大多数星级评定系统存在的最大问题，它们隐藏<input>了display: none。

这意味着您无法再集中注意力Tab，因此对于只使用键盘的人来说，它是完全无法使用的。

颜色也很重要

这里非常快——颜色对比很重要。

许多星级评定系统使用无边框的黄色星星。这会导致与背景的对比度很差，对于对比度感知能力较差的用户来说可能会造成困扰。

因此，我在星星周围设置了深灰色边框，这样即使对于对比度感知障碍的人（或试图在阳光直射下使用该网站的人......我相信你知道这在低对比度网站上是多么烦人！），它们也能脱颖而出。

我还额外做了一些调整，根据星星的当前状态，给它们设置了不同的边框大小。这样就能在不依赖颜色的情况下，实现视觉上的差异！如果你自己创建 SVG 文件，我鼓励你也做类似的调整，这样就能在不依赖颜色的情况下，提供视觉上的区分！

轻松适应您自己的需求

如果您想使用不同的图标，这非常简单。

你需要三个版本的星星作为 SVG 文件：一个填充版本、一个非填充版本和一个悬停版本。理想情况下，它们应该是正方形的，这样可以避免修改 CSS。

然后只需将 SVG 文本复制到此转换器中，按“转换”，然后复制结果。

将“background-image: ”之后的结果 CSS 粘贴到变量--unchecked-image（表示无星星）、--checked-image（表示选择星星）和--hovered-image（表示悬停状态）中。

如果您愿意，您还可以拥有十星系统，在此示例中，我将--max-starsCSS 变量更改为 10。

只需添加正确数量的单选按钮，然后更改--max-starsCSS 变量以匹配，即可获得 2 到 10 颗星。

最后要说的是，我设计了 CSS，因此它不会泄漏到您的文档中（除非您碰巧使用相同的 CSS 变量名！），所以您应该能够直接复制粘贴，而不会出现任何 Cascade 问题。

最后一个技巧

如果你检查这些元素，你会发现我有点作弊了。

我所做的是将标签堆叠在一起，但每次堆叠标签时，每个标签都会稍微变小（一颗星的宽度变小）。

然后我们让背景（星形 SVG）重复并填充标签。

因此，对于四星评级系统，我们有 4 个标签。四星的标签宽度为 100%，三星的标签宽度为 75%。这意味着，当您将鼠标悬停或点击第四颗星时，它会显示在底部标签上（因为三星标签没有覆盖它）；而当您点击第三颗星时，它会显示在它上方的标签上。

我们重复这个过程直到找到一颗恒星。

唯一令人讨厌的事情是，为了保持逻辑的 DOM 顺序（以便按下向下箭头会增加星星的数量），我们必须使用该z-index属性将最后一个选项放在后面（因为它自然希望放在前面）。

迷你奖励小提琴，帮助使用 JS 库

如果您想在 JS 中获取星级评分系统的当前值，这非常简单（您可以使用选择器/原理将其转换为您正在使用的任何 JS 框架。）

var rating = 0;

document.querySelectorAll('.star-rating input[name="rating"]').forEach(function(radio){
   radio.addEventListener('change', function(){
      rating = document.querySelector('.star-rating input[name="rating"]:checked').value;
   });
});

您可以在这里看到实际效果：

显然，整个过程不需要 JS，您只需将其用作普通表单 POST/提交的一部分，但我想我会添加它只是为了展示转换是多么容易！

总结

我认为以上内容对于可访问且具有很高的浏览器覆盖率的评级系统来说是最简单的了。

现在我正在宣传无障碍功能，如果有人发现任何错误，请叫我白痴并指出来！希望我没有犯什么错误🤞。

话虽如此，我非常有信心上述内容确实是可以访问的，并且我可以自信地说您可以在自己的项目中使用它。

请分享并传播此信息！

如果有足够多的人阅读这篇文章，那么它将成为网络上的一个组件，希望每个人都可以访问它。

为了方便起见，您只需单击下面的共享按钮即可：