Accessibility — roles “presentation”, “img” and “document”

1. When using an image as presentation / style, that will only be used for example as background, create an empty alt=’’ and role=’presentation’, then screen reader won’t read it

<img src="assets/background-img-2.svg" alt="" role="presentation">

2. If you have used an icon font in an span tag, by default it will not say anything in screen reader. Even aria-label won’t work. An workaround is

<span aria-label="This application is incomplete" class="fa-minus" role="img"></span>

3. If you have a <p> or <span> or <div> that is so important that the screen reader should read it in reading mode, then it needs to be tabbable with tabIndex=0 and role=”document”

<div tabIndex=”0” role=”document”>This is an important text that should be read in an screen reader.</div>