星级评定组件 - 要使用的正确可访问性和语义是什么

Question

我有一个当前具有以下语义的星级评分组件。 SVG 只是星星。

<div role='img' aria-label="6 out of 6 ratings">
  <svg role="presentation"></svg>
  <svg role="presentation"></svg>
  <svg role="presentation"></svg>
  <svg role="presentation"></svg>
  <svg role="presentation"></svg>
  <svg role="presentation"></svg>
</div>

我使用了 role='img' aria 角色，因为我想理想地将此图像视为一个图像。然后我在 SVG 上使用了 role='presentation' aria 角色，因为我认为 SVG 本身没有提供额外的信息，所以想删除 SVG 的语义，它是 children。我在这里读到了 presentation role。

我阅读了一篇关于 SVG 可访问性的 article，它们采用的方法略有不同。他们给出的例子如下：

<body>
...
<svg xmlns=http://www.w3.org/2000/svg role="img" aria-labelledby="title  desc">
   <title id="title">Circle</title>
   <desc id="desc">Large red circle with a black border</desc>
   <circle role="presentation" cy="60" r="55" stroke="black" stroke-width="2" 
   fill="red" />
</svg>
…
</body>

他们在 svg 上使用 role='img。我认为这不适用于我的情况，我最好在我的 SVG 上保留 role='presentation'?
他们使用 title 和 desc。我相信作为一个单星 SVG，它不会为用户提供任何额外的好处吗？将鼠标悬停在 SVG 上也会显示我不想要的标题（和描述？）。

回到我目前的例子：

我能做些什么来改进可访问性/语义设计以使其更加用户友好吗？
我是否为容器和 SVG 正确使用了正确的 aria 角色？
我是否可以在我的评分图像（作为一个整体）中切换，以便读出 aria-label？
我应该使用其他任何 aria 属性吗？

查看 semantic-ui 上的示例，据我所知，他们没有 aria 角色。

Answer 1

The MDN Web docs for img role has a link to a star rating role="img" example

他们使用 aria-hidden 而不是 role="presentation"

根据规范，img 角色应该已经 children presentational

我要补充一点，可访问性不仅仅意味着屏幕阅读器可以访问。例如 MDN 示例中的 “3 个黑人星星，2 个白色星星” 是人们可能不理解的东西（例如，人们自然地从 right-to-left 阅读）。

"Grandma: Honey, Is it better to have 5 white stars, or 5 black stars?"

我想说在评分旁边添加 "Note: 3/5" 可能会有很大帮助。

星级评定组件 - 要使用的正确可访问性和语义是什么

Star rating component - What are the correct accessibility and semantics to be used

html

svg

accessibility

semantic-markup

wai-aria