4 ms·
You are absolutely correct in assuming that having alt-text on the image inside the link is accessible. This is a known bug (https://github.com/Khan/tota11y/is
by prezjordan 11y ago
You are absolutely correct in assuming that having alt-text on the image inside the link is accessible.
This is a known bug (https://github.com/Khan/tota11y/issues/1 https://github.com/Khan/tota11y/issues/1) that comes from upstream (https://github.com/GoogleChrome/accessibility-developer-tools/issues/156 https://github.com/GoogleChrome/accessibility-developer-tool...) and will hopefully be fixed soon.
As for your notes on screen-reader text: you can "hide" it by not actually hiding it, but placing it off the side of the page. This will be picked up by screen-readers and will not cause any positioning issues.
We use the following snippet all over Khan Academy. Bootstrap 3 uses it as well.
.sr-only {
border: 0;
clip: rect(0,0,0,0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
So I'd like to assure you that your image link is good to go (assuming the alt-text is good!). Sorry for the troubles.
- Someone1234 11y agoThanks for the reply. I'll add that to our CSS in case we need it elsewhere and ignore the warning about an empty A tag for now.
- mkozlows 11y agoaria-label is well-supported enough that it's probably better to use that, rather than offscreen text, for most purposes.