Cor*_*buk 5 html svg accessibility semantic-markup wai-aria
I have a star rating component that currently has the following semantic. The SVG are just stars.
<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>
I have used the role='img' aria role as I want to ideal treat this image as one image. I have then used the role='presentation' aria role on the SVG as I think the SVG's alone provide no extra information so want to remove the semantic meaning to the SVG and it's children. I read about the presentation role here.
I read a article on SVG accessibility and they go with slightly difference approach. The example they give is the following:
<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>
role='img on the svg. I believe this does not apply to my situation and would be better for me to keep role='presentation' on my SVG?title and desc. I believe that as a single star SVG it would not provide any extra benefit to the user? Also hovering over the SVG would reveal the title (and desc?) which I do not want.Coming back to my example of how I currently have it:
看一下语义UI上的示例，从我所看到的来看，它们没有aria角色。
img角色的 MDN Web 文档有一个指向星级评级 role="img" 示例的链接
他们使用aria-hidden而不是role="presentation"
根据规范，该img角色应该已经使其子级具有表现力
我想补充一点，可访问性不仅仅意味着屏幕阅读器可以访问。例如， MDN 示例中的“3 个黑色星星，2 个白色星星”人们可能无法理解（例如，人们自然地从右到左阅读）。
“奶奶：亲爱的，5颗白星好还是5颗黑星好？”
我想说，在评级旁边添加“注意：3/5”可能会很有帮助。
| 归档时间： |
|
| 查看次数： |
244 次 |
| 最近记录： |