4 ms·

> Try not to use a purely visual representation of information, such as an icon: these should always be paired with text. Curious and purely technical question

> Try not to use a purely visual representation of information, such as an icon: these should always be paired with text. Curious and purely technical question: are screen readers not using the alt text of an <img ... /> tag? Does something like this not cause the "foo bar baz" text to be read out twice in a row? <div><img src=... alt="Foo bar baz" />Foo bar baz</div>

ratww 6y ago
They do! If you need to label an image for both screen-readers and screen you can use the aria-labelledby attribute. [1] [2] <img src="sunflowers.jpg" aria-labelledby="my_txt"> <span id="my_txt">Foo bar baz</span> However some UX copywriters prefer to have extra information in the alt attribute. [1] https://www.w3.org/WAI/GL/wiki/Using_aria-labelledby_to_provide_a_text_alternative_for_non-text_content https://www.w3.org/WAI/GL/wiki/Using_aria-labelledby_to_prov... [2] https://fae.disability.illinois.edu/rulesets/IMAGE_1/ https://fae.disability.illinois.edu/rulesets/IMAGE_1/
extra88 6y ago
Icons are often included using different methods that don't support the alt attribute. Icon font systems like Font Awesome use CSS like this: .fa-trash::before { content: "\f1f8"; } Screen readers these days have good support of the ::before and ::after pseudo-elements and most can the values of content properties but if the icon font is using the Unicode private use area, a screen reader can't read it. There's a new standard for content properties that allow for inclusion a text alternative within the value but it's not broadly supported and in browsers that don't support it, the visual content is not rendered. Icons are also sometimes included using a background-image (maybe one that's part of a sprite sheet) so a text alternative needs to be added somewhere. aria-label and aria-labelledby attributes can provide text alternatives but generally including the text in an adjacent element that's visually hidden is more robust.

ratww 6y ago

They do! If you need to label an image for both screen-readers and screen you can use the aria-labelledby attribute. [1] [2] <img src="sunflowers.jpg" aria-labelledby="my_txt"> <span id="my_txt">Foo bar baz</span> However some UX copywriters prefer to have extra information in the alt attribute. [1] https://www.w3.org/WAI/GL/wiki/Using_aria-labelledby_to_provide_a_text_alternative_for_non-text_content https://www.w3.org/WAI/GL/wiki/Using_aria-labelledby_to_prov... [2] https://fae.disability.illinois.edu/rulesets/IMAGE_1/ https://fae.disability.illinois.edu/rulesets/IMAGE_1/

extra88 6y ago

Icons are often included using different methods that don't support the alt attribute. Icon font systems like Font Awesome use CSS like this: .fa-trash::before { content: "\f1f8"; } Screen readers these days have good support of the ::before and ::after pseudo-elements and most can the values of content properties but if the icon font is using the Unicode private use area, a screen reader can't read it. There's a new standard for content properties that allow for inclusion a text alternative within the value but it's not broadly supported and in browsers that don't support it, the visual content is not rendered. Icons are also sometimes included using a background-image (maybe one that's part of a sprite sheet) so a text alternative needs to be added somewhere. aria-label and aria-labelledby attributes can provide text alternatives but generally including the text in an adjacent element that's visually hidden is more robust.