为所有人评分的可访问属性答案

【问题标题】：accessible attribute for rating for all people为所有人评分的可访问属性
【发布时间】：2014-07-18 19:36:37
【问题描述】：

我正在尝试为我的OverallRating 星级添加可访问性属性... 你能告诉我我应该添加什么属性... 我添加了带有赋予该属性的值的 arial 标签... 但它不工作...... 你能告诉我我需要补充什么吗？在下面提供我的代码...

这是我生成的代码

<div class="OverallRating" aria-label="0"><i class="OverallRating__star small-star"></i>
    <div class="OverallRating__filled" style="width: 0%;"><i class="OverallRating__star small-star"></i>
    </div>
</div>

【问题讨论】：

您应该显示相关的 HTML 代码，而不是生成它的代码。您应该解释星星是如何呈现的（大概是使用 CSS）。代码应该包含你尝试过的属性，你应该解释你期望它做什么以及它是如何失败的。 “不工作”不是问题描述。
@JukkaK.Korpela：感谢您的回复..我添加了我生成的 html...我无法听到评级值

标签： javascript css html attr-accessible

【解决方案1】：

当然你会想要保留aria-label 属性，但也可能添加一个简单的title 属性：

{ 'title': 'Your hover text' }

不同的浏览器和无障碍软件读取不同的属性（或者读取的顺序不同）。

【讨论】：

感谢您的回复，但是添加标题属性的原因是什么...它会告诉您收视率是多少

【解决方案2】：

aria-label 属性本身是正确的，假设您希望使用字符串“0”标记元素。但浏览器和辅助技术对它的支持各不相同。

如果您另外使用属性title="0"，可能会有更多支持，因为title 属性较旧并且可能有更好的支持。但是，许多辅助技术只是选择性地说明其价值，具体取决于默认情况下通常关闭的用户设置。

为了使代码可访问，它需要重新设计。它现在完全依赖于样式表。禁用样式表后，内容完全为空。更好的方法是使用图像。最容易理解的是，你会创建，比如说，六个图像，代表 0 tp 5 星，具有足够的alt 属性，例如<img src="stars0.png" alt="no stars">.

【讨论】：