Search code examples
htmlimageaccessibilitywai-aria

How to add images in HTML while satisfying web accessibility guidelines

I am currently studying the web accessibility guidelines that concern HTML5.

Concerning images, I am currently adding images in HTML as follows:

<!-- Normal Images -->
<img src="https://placeholder.pics/svg/300x300" title="Image Placeholder" alt="Image Placeholder" aria-labelledby="Image Placeholder" width="300" height="300">

<!-- Decorative images -->
<img src="https://placeholder.pics/svg/100x100" role="presentation" aria-hidden="true" alt="" width="100" height="100">
  1. Is it recommended by WAI-ARIA to add both aria-labelledby and alt tags together for normal images? or is there something else that I should adopt?
  2. Do I need to add role="presentation", aria-hidden="true", and alt="" to every decorative image? All three of them should go together? or only one of them? (if only one or two of them then which ones?)
Solution

  • Is it a good practice to add both aria-labelledby and alt tags together for normal images? or is there a better practice that I should adopt.

    aria-labelledby

    No, in fact adding aria-labelledby and alt together will result in some screen readers reading the name twice. Just use an alt attribute, that is what it is there for, it has the widest support (100%) and will do the job just fine.

    Also aria-labelledby requires at least one element in the DOM that contains text, you reference it by ID. You can have more than one label too just for reference. It is designed to be used on other elements that can't be labelled using semantic HTML, not really for images (there are always exceptions but they are rare and this is general guidance).

    e.g.

    <span id="ID1">Read First</span>
<span id="ID2">You can add a second label that will be read second</span>
<div aria-labelledby="ID1 ID2"></div>

    title attribute

    Also don't use a title attribute unless you are planning on making it the same as the alt attribute. Otherwise mouse users get a different experience to screen reader users as the title attribute is not accessible to most screen readers. See this in-depth answer I gave about the title attribute and how to roll an accessible version if you want to use it.

    accessible image example

    So your final, accessible image would look like this:-

    <img src="https://placeholder.pics/svg/300x300" alt="Image Placeholder" width="300" height="300">

    Perfectly accessible and easy to maintain.

     

    Do I need to add role="presentation", aria-hidden="true", and alt="" to every decorative image? All three of them should go together? or only one of them? (if only one or two of them then which ones?)

    alt attribute

    All you need to do is add an empty alt attribute. Notice how I said empty and not null. e.g. alt="" NOT just alt. Using alt as a null attribute will result in it being ignored by some screen readers so the file name will get read out.

    role="presentation"

    For completeness you can add role="presentation" but it will not add any extra support as far as I am aware.

    With that being said I personally add role="presentation" to decorative images as our unit testing will flag any empty alt attributes unless this is added. This was a deliberate decision so when we run tests we don't keep checking the same empty alt attributes are correct.

    As support for empty alt attributes is also at 99/100% it is also perfectly valid and accessible to just use alt="".

    aria-hidden

    The only place (well the main time, there are always exceptions) where you would want to use aria-hidden on an external image is if you are going to dynamically hide and show it. Some screen readers monitor WAI-ARIA changes better than DOM changes.

    aria-hidden and inline SVGs

    I would recommend adding aria-hidden="true", role="presentation" and focusable="false" on inline SVGs that are purely decorative though as Internet Explorer can sometimes allow them to be focused.

    Note that you don't use alt attributes on inline SVGs anyway.

    decorative images examples

    So your final decorative image would be:-

    <!--all image types loaded externally using `img` including SVGs-->
<img src="https://placeholder.pics/svg/100x100" alt="" width="100" height="100">
<!--exception for inline SVGs due to focus bug in IE-->
<svg aria-hidden="true" role="presentation" focusable="false">...</svg>

    final note on WAI-ARIA

    WAI-ARIA is there to provide information when there is no semantic way to do so.

    Adding extra WAI-ARIA all over actually makes accessibility worse. You should always start with 'is there a native way to give the information to a screen reader', if there is, WAI-ARIA is not needed or in fact recommended.

    After Thought

    I mentioned inline SVGs not using the alt attribute, instead you want to use <title> as part of the SVG. Read this quick article on accessible SVGs for a quick overview.