3 ms·

Creator here! I've heard of some ways to visualize this with SVG filters - so this will be coming soon. Still thinking of creative ways to find and label the

Creator here! I've heard of some ways to visualize this with SVG filters - so this will be coming soon. Still thinking of creative ways to find and label the errors, rather than just showing the user how the page will look under a certain type of color-blindess.

Someone1234 11y ago
Can I ask you something... So it is complaining that we have a link (A tag) with an image within it. The image has an alt tag. But the addon is claiming the A tag is "empty" and that I should add "screen reader text." Some googling around suggests that adding "screen reader text" is unreliable since many unrendered texts aren't rendered by screen readers either, and on top of that it can cause element positioning issues. So why is the alt text unacceptable "text" for within an A tag for when the image isn't rendered? Isn't that the entire point of the alt tag, to provide text for a non-rendered image?
- 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 ago
    Thanks 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 ago
    aria-label is well-supported enough that it's probably better to use that, rather than offscreen text, for most purposes.

Someone1234 11y ago

Can I ask you something... So it is complaining that we have a link (A tag) with an image within it. The image has an alt tag. But the addon is claiming the A tag is "empty" and that I should add "screen reader text." Some googling around suggests that adding "screen reader text" is unreliable since many unrendered texts aren't rendered by screen readers either, and on top of that it can cause element positioning issues. So why is the alt text unacceptable "text" for within an A tag for when the image isn't rendered? Isn't that the entire point of the alt tag, to provide text for a non-rendered image?

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 ago
  Thanks 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 ago
  aria-label is well-supported enough that it's probably better to use that, rather than offscreen text, for most purposes.