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 aria角色，因为我认为仅SVG不能提供任何额外的信息，因此希望删除SVG及其子元素的语义。我在这里阅读了presentation role。

我读了article的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。我认为这不适用于我的情况，对我来说，role='presentation'保留在我的SVG上会更好吗？
他们使用title和desc。我相信，作为单星SVG，它不会为用户带来任何额外的好处吗？将鼠标悬停在SVG上也会显示我不想要的标题（和desc？）。

回到我目前的例子：

有什么我可以做的事情来改善可访问性/语义设计，使其更加用户友好？
我是否已正确使用容器和SVG的aria角色？
我应该能够在整个评分图像中显示标签（作为整体）以读取aria标签吗？
我还应该使用其他aria属性吗？

以semantic-ui上的示例为例，据我所见，它们没有aria角色。

Answer 1

The MDN Web docs for img role带有指向star rating role="img" example的链接

他们使用batch_size代替aria-hidden

根据规范，role="presentation"角色应该已经children presentational

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

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

我想说的是，在评分旁边添加“注：3/5”可能是一个很好的帮助。

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

1 个答案: