Menu
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:
Looking at the example on semantic-ui, they have no aria roles from what I can see.
765
The MDN Web docs for img role has a link to a star rating role="img" example
They use aria-hidden instead of role="presentation"
According to the specs, the img role should already make its children presentational
I would add that being accessible implies more than just being accessible for screenreaders. For instance "3 blacks stars, 2 white stars" in the MDN example is something people may not understand (eg. people naturally reading from right-to-left).
"Grandma: Honey, Is it better to have 5 white stars, or 5 black stars?"
I would say that adding "Note: 3/5" next to the ratings, might be a good help.
58
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
