7 ms·

> Alternative text: High All <img> have an alternative text which describe the image visually. Please don't do that. Don't put an alt on ALL images. Screen rea

> Alternative text: High All <img> have an alternative text which describe the image visually. Please don't do that. Don't put an alt on ALL images. Screen readers will read all of them. Skin and flavour images don't deserve to be read outloud. Nobody wants to hear "bottom left corner of logo" or "rounded corner".

robin_reala 9y ago
Typically you’d use background images for something like that. Regardless, if you do have an image that doesn’t add anything to the information on the page give it an empty alt attribute to indicate to the screen reader that it shouldn’t try to read out the file name or something.
- Teichopsia 9y ago
  <img src=".." alt=""> Do you mean like that? Empty quotes and it would not be read?
  - robin_reala 9y ago
    Exactly. Every img element should have an alt attribute; those with visual content should have explanatory text in it.
    - Teichopsia 9y ago
      :D I knew that. I'm not that noobish. Let's see. If we use an image that doesn't add anything to the content, one would normally use background-attachment to add an image to say, the hero section. (It seems you edited your comment?) Good to know that the screen reader would try to read the file name if there isn't any alt text in it, I didn't know that. So, in the cases we do need to place an img in the document, then we simple place an empty alt text as in my above comment to tell the screen reader not to read the file name since it is only used for decorative purposes...? Edit: I confused your comment with another one.
    - drusepth 9y ago
      What is the value of having an alt attribute if its value is blank? Just to tell someone poking at the source code that, "yeah, I know I'm supposed to have this, and it's intentionally left blank"?
      - fold_left 9y ago
        No, the reason given was > give it an empty alt attribute to indicate to the screen reader that it shouldn’t try to read out the file name or something
  - twhb 9y ago
    FYI, in HTML5 <img src=".." alt=""> is equactly equivalent to <img src=".." alt>. Value-less attributes become attributes with empty string values at the tokenizer level.
- epmatsw 9y ago
  Hmm. Why not aria-hidden=true?
rimliu 9y ago
This recommendation would be fine 20 years ago. You should not have any decorative images in your markup, they belong to CSS.
- seanwilson 9y ago
  Why? It shouldn't make any difference if you add alt="" to the img tag.
  - jinglebells 9y ago
    Because you shouldn't be using <img> tags for layout. Nobody does.
    - seanwilson 9y ago
      What's the reasoning behind such a rule?
      - ozaark 9y ago
        Style is separate from content. ie. Screen readers/robots don't care about gradients etc.
        seanwilson 9y ago
        I'm not seeing any practical benefits mentioned so this sounds like dogmatism to me. Using an img tag can sometimes just be more practical (e.g. if you're using a CMS or for use with a JS plugin). Google Image search definitely cares about images as well. I agree separating style from content has benefits but doing this at all costs isn't worth the time in my opinion and a few img tags seem harmless to me. It reminds me of how people are against JSX on principle that code and HTML should never be mixed without attempting to consider any of the benefits.
        ozaark 9y ago
FilterSweep 9y ago
> Nobody wants to hear "bottom left corner of logo" or "rounded corner". I would assume front-end guys care more about passing a Web Accessibility[0] audit than inconveniencing some users, thus good taste and wise discretion is spared for avoidance of litigation. [0] https://www.w3.org/TR/WCAG20-TECHS/H37.html https://www.w3.org/TR/WCAG20-TECHS/H37.html
- mrlase 9y ago
  While that link is part of WCAG 2.0, there are other items within the standard to follow such as: https://www.w3.org/TR/WCAG20-TECHS/H67.html https://www.w3.org/TR/WCAG20-TECHS/H67.html. Decorative images are not supposed to be read by the screen reader. https://www.w3.org/WAI/tutorials/images/decorative/ https://www.w3.org/WAI/tutorials/images/decorative/
leepowers 9y ago
Seconding this. It very much depends on the purpose of the image. If an image or any other tag is extraneous in a screen reader context use the `aria-hidden`[1] attribute to exclude it. A good example is an image used as an icon next to a text label. Imagine a link/button that contains the words "Save" and a floppy disk icon. There's no need to have an alt of "Save" on the icon as the text "Save" is already present. So it would look something like this: <a href="#"><img src="save-icon.png" aria-hidden="true">Save</a> Though in this case you'd probably be using an icon font like FontAwesome. [1] https://stackoverflow.com/questions/31107040/whats-the-difference-between-html-hidden-and-aria-hidden-attributes https://stackoverflow.com/questions/31107040/whats-the-diffe...
- extra88 9y ago
  The first rule of ARIA is don't use it if you don't have to. An img element with an empty alt attribute will tell the screen reader not to read it and is more widely supported than the aria-hidden attribute. 'aria-hidden' is for HTML elements that don't have their own way of hiding themselves from assistive technologies and for cases where you'll use JavaScript to change the element's hidden state. I can't think of a situation where you'd want to conditionally show and hide only an image only from screen readers but if you had that situation, toggling aria-hidden would be better than adding and removing the alt attribute's value.

robin_reala 9y ago

Typically you’d use background images for something like that. Regardless, if you do have an image that doesn’t add anything to the information on the page give it an empty alt attribute to indicate to the screen reader that it shouldn’t try to read out the file name or something.

Teichopsia 9y ago
<img src=".." alt=""> Do you mean like that? Empty quotes and it would not be read?
- robin_reala 9y ago
  Exactly. Every img element should have an alt attribute; those with visual content should have explanatory text in it.
  - Teichopsia 9y ago
    :D I knew that. I'm not that noobish. Let's see. If we use an image that doesn't add anything to the content, one would normally use background-attachment to add an image to say, the hero section. (It seems you edited your comment?) Good to know that the screen reader would try to read the file name if there isn't any alt text in it, I didn't know that. So, in the cases we do need to place an img in the document, then we simple place an empty alt text as in my above comment to tell the screen reader not to read the file name since it is only used for decorative purposes...? Edit: I confused your comment with another one.
  - drusepth 9y ago
    What is the value of having an alt attribute if its value is blank? Just to tell someone poking at the source code that, "yeah, I know I'm supposed to have this, and it's intentionally left blank"?
    - fold_left 9y ago
      No, the reason given was > give it an empty alt attribute to indicate to the screen reader that it shouldn’t try to read out the file name or something
- twhb 9y ago
  FYI, in HTML5 <img src=".." alt=""> is equactly equivalent to <img src=".." alt>. Value-less attributes become attributes with empty string values at the tokenizer level.
epmatsw 9y ago
Hmm. Why not aria-hidden=true?

rimliu 9y ago

This recommendation would be fine 20 years ago. You should not have any decorative images in your markup, they belong to CSS.

seanwilson 9y ago
Why? It shouldn't make any difference if you add alt="" to the img tag.
- jinglebells 9y ago
  Because you shouldn't be using <img> tags for layout. Nobody does.
  - seanwilson 9y ago
    What's the reasoning behind such a rule?
    - ozaark 9y ago
      Style is separate from content. ie. Screen readers/robots don't care about gradients etc.
      - seanwilson 9y ago
        I'm not seeing any practical benefits mentioned so this sounds like dogmatism to me. Using an img tag can sometimes just be more practical (e.g. if you're using a CMS or for use with a JS plugin). Google Image search definitely cares about images as well. I agree separating style from content has benefits but doing this at all costs isn't worth the time in my opinion and a few img tags seem harmless to me. It reminds me of how people are against JSX on principle that code and HTML should never be mixed without attempting to consider any of the benefits.
        ozaark 9y ago

FilterSweep 9y ago

> Nobody wants to hear "bottom left corner of logo" or "rounded corner". I would assume front-end guys care more about passing a Web Accessibility[0] audit than inconveniencing some users, thus good taste and wise discretion is spared for avoidance of litigation. [0] https://www.w3.org/TR/WCAG20-TECHS/H37.html https://www.w3.org/TR/WCAG20-TECHS/H37.html

mrlase 9y ago
While that link is part of WCAG 2.0, there are other items within the standard to follow such as: https://www.w3.org/TR/WCAG20-TECHS/H67.html https://www.w3.org/TR/WCAG20-TECHS/H67.html. Decorative images are not supposed to be read by the screen reader. https://www.w3.org/WAI/tutorials/images/decorative/ https://www.w3.org/WAI/tutorials/images/decorative/

leepowers 9y ago

Seconding this. It very much depends on the purpose of the image. If an image or any other tag is extraneous in a screen reader context use the `aria-hidden`[1] attribute to exclude it. A good example is an image used as an icon next to a text label. Imagine a link/button that contains the words "Save" and a floppy disk icon. There's no need to have an alt of "Save" on the icon as the text "Save" is already present. So it would look something like this: <a href="#"><img src="save-icon.png" aria-hidden="true">Save</a> Though in this case you'd probably be using an icon font like FontAwesome. [1] https://stackoverflow.com/questions/31107040/whats-the-difference-between-html-hidden-and-aria-hidden-attributes https://stackoverflow.com/questions/31107040/whats-the-diffe...

extra88 9y ago
The first rule of ARIA is don't use it if you don't have to. An img element with an empty alt attribute will tell the screen reader not to read it and is more widely supported than the aria-hidden attribute. 'aria-hidden' is for HTML elements that don't have their own way of hiding themselves from assistive technologies and for cases where you'll use JavaScript to change the element's hidden state. I can't think of a situation where you'd want to conditionally show and hide only an image only from screen readers but if you had that situation, toggling aria-hidden would be better than adding and removing the alt attribute's value.