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

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'咏叹调角色，因为我希望理想将此图像视为一个图像。 然后，我已经使用了role='presentation'的咏叹调角色SVG ，因为我觉得SVG的单独提供没有多余的信息，因此要删除的语义到SVG和它的孩子。 我在这里阅读了演讲角色。

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

<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上会显示我不想要的标题（和desc？）。

回到我的例子，我现在如何拥有它：

我有什么办法可以改善可访问性/语义设计，使其更加用户友好吗？
我是否正确使用了容器和SVG的正确咏叹调角色？
我是否应该能够通过我的评级图像（作为一个整体）来标记要读出的咏叹调标签？
我应该使用其他任何咏叹调属性吗？

看一下semantic-ui的例子，他们从我所看到的角色中没有咏叹调的角色。

Answer 1

用于img角色的MDN Web文档具有指向星级评分角色=“img”示例的链接

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

根据规范， img角色应该已经让它的孩子呈现出来

我想补充说，可访问意味着不仅仅是屏幕阅读器的可访问性。 例如， MDN示例中的“3个黑色星星，2个白色星星”是人们可能无法理解的东西（例如，人们自然地从右向左阅读）。

“奶奶：亲爱的，拥有5颗白色星星或5颗黑色星星会更好吗？”

我会说在评级旁边添加“Note：3/5”可能是一个很好的帮助。

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-05-07 09:53:42

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-05-07 09:53:42

解决方案1
1 已采纳 2019-05-07 09:53:42