3 ms·
The title attribute is not a good way to give elements an accessible name for screen readers (except iframes, title attribute is the right choice for them). Bet
by extra88 6y ago
The title attribute is not a good way to give elements an accessible name for screen readers (except iframes, title attribute is the right choice for them). Better would be to put the text inside the existing div and use CSS to visually hide it (which does take ~11 properties to cover older and different browsers):
<div class="votearrow" title="upvote">Upvote</div>
Alternately, instead of having the grayarrow.gif as a background image on a div, they could use an img element so the alt attribute becomes the accessible name of the link. Editing it in my browser's inspector, it looks exactly the same:
<img src="grayarrow.gif" alt="upvote" title="upvote">
An advantage of this approach is if the GIF doesn't load, the alt text is displayed instead (in some browsers, not all).
If you want to leave the title attribute to show on hover, that's fine but it's only going to help a sighted mouse user who needs more than triangles to understand that clicking them will upvote or downvote.
Since there are many upvote buttons on a page, a standard accessibility recommendation would be for each to have unique names to differentiate them out of context, something like "upvote ratww message 23326798." If user testing was done with people who use screen readers, I suspect they'd say that's too wordy and these controls should not be used out of context therefore, "upvote" and "downvote" are fine.
- ratww 6y agoGreat post, thanks for the correction.