Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
aria-hidden removes it from the accessibility tree entirely, role="presentation" purely removes roles from an item to give it no semantic meaning.
To be fair here it probably doesn't matter as either way and support is pretty similar for both attributes so this is one of those very rare "personal preference" instances I suppose, both would be accessible.
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
It is semantically incorrect to use role="presentation" here.
The icon has meaning, it isn't accompanied by a visible label.
role="presentation" is not really designed for this scenario, it is designed for either:
removing semantic meaning from an element (back in the days when tables were used for layout for example)
marking a graphic or image as decorative (background images).
Neither of the above are true.
Where role="presentation" is applicable is if you have a button with text and an icon, the icon adds nothing of value so it is presentational. That is not the case here as the icon is the label.
The most semantically correct way of creating this control would be to use the <title> and or <description> on the SVG as the label information (and using aria-labelledby etc. to ensure it is as robust as possible.
When the icon is the sole source of information you either have to give it alt attributes (or <title> which is the equivalent in SVG) or hide it entirely and replace it with a label for screen readers that makes sense.
At the end of the day, both options will work, but if we really want to be semantically correct the following is the proper way of doing it:
<label><inputtype="checkbox"name="reaction-heart"value="75"style="--c:75"/><svgrole="image"aria-labelledby="unicorn-title"viewBox="0 0 24 24"><titleid="unicorn-title">React with a unicorn to this article? 75 others have given it a unicorn</title>
[...]
</svg><spanaria-hidden="true">75</span></label><label>
That is the best option from a semantics perspective.
Now in the scenario I suggested we instead decided to create a label just for screen readers. In that scenario it is entirely correct to use aria-hidden as we want to remove the item we are replacing from the accessibility tree.
As I said, both options work so we are splitting hairs here, but it certainly isn't semantically correct to mark an item as presentational if it is the source of information.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Instead of
aria-hidden, I would preferrole="presentation", which is for that exact use case.aria-hiddenremoves it from the accessibility tree entirely,role="presentation"purely removes roles from an item to give it no semantic meaning.To be fair here it probably doesn't matter as either way and support is pretty similar for both attributes so this is one of those very rare "personal preference" instances I suppose, both would be accessible.
I prefer
role="presentation", because it conveys more semantic meaning than "hide it from assistive technology".It is semantically incorrect to use
role="presentation"here.The icon has meaning, it isn't accompanied by a visible label.
role="presentation"is not really designed for this scenario, it is designed for either:Neither of the above are true.
Where
role="presentation"is applicable is if you have a button with text and an icon, the icon adds nothing of value so it is presentational. That is not the case here as the icon is the label.The most semantically correct way of creating this control would be to use the
<title>and or<description>on the SVG as the label information (and usingaria-labelledbyetc. to ensure it is as robust as possible.When the icon is the sole source of information you either have to give it
altattributes (or<title>which is the equivalent in SVG) or hide it entirely and replace it with a label for screen readers that makes sense.At the end of the day, both options will work, but if we really want to be semantically correct the following is the proper way of doing it:
That is the best option from a semantics perspective.
Now in the scenario I suggested we instead decided to create a label just for screen readers. In that scenario it is entirely correct to use
aria-hiddenas we want to remove the item we are replacing from the accessibility tree.As I said, both options work so we are splitting hairs here, but it certainly isn't semantically correct to mark an item as presentational if it is the source of information.