I got some kind of accessibility test (for blind, deaf users, etc.) of a customer website and there are also hints how to improve the accesibility.
One of the hints is for image buttons:
Additionally, the buttons should get a short and meaningful description, e.g. with an invisible text. The invisible text should not be marked with the attributes display:none and visibility:hidden. Instead the text should be moved out of the viewport:
<a href=”...”>[Font-Icon] <span class=“invisible“>Delete</span></a>
.invisible { position:absolute; left:-10000px; overflow:hidden;}
I'd like to ask if this is still reccomended solution. It seems outdated to me. Should I use some kind of aria tag instead of invisible element, or is the suggested solution OK?
the buttons should get a short and meaningful description, e.g. with an invisible text.
It seems outdated to me.
You're right, this is not a solution.
When talking about accessibility we do not have to only focus on blind people using a screenreader but on all kind of disabilities. Moving a text out of viewport is a total nonsense. This used to be a (bad) solution for a small part of the population using screenreaders when ARIA was not supported, but this is no longer a real solution.
The best solution is still obviously to write the full text :
<a href="...">[Font-Icon] Delete</a>
Yes, obvious, but it deserves to be said.
The second solution is to use the title attribute. Why using it if it's not supported by screenreaders? Because 99% of the population do not use a screenreader. And the "[Font-Icon]" deserves to have an alternative. (For better accessibility support, this title attribute should have a way to be visible on keyboard focus.)
<a href="..." title="Delete">[Font-Icon]</a>
The final solution is to add the aria-label for screenreader users leaving the title attributes for other people.
<a href="..." title="Delete" aria-label="Delete">[Font-Icon]</a>