If you are using non-text content in your Applications, Websites,… it is essential to provide text alternatives for this content. What are examples for non-text content:
- Images
- Icon Buttons
- Diagrams
- Emoticons
There are some reasons where it is not necessary to provide text alternatives:
- Content is just decorative
- Other alternatives are provided (for example another option to solve a captcha)
Examples to do it
To provide alternatives for images you should use the alt attribute whenever possible. The use of aria-hidden should be done for other elements than html img.
<img decoding="async" src="data:image/svg+xml,%3Csvg%20width%3D%224%22%20height%3D%223%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%204%203%22%3E%3C/svg%3E" alt="Bowl with Chips filled and a tasty cheese sauce" class="fy-content-image fy-lazy js-lazy" data-src="/chips.png"><div class="fy-image-loading fy-image-loading--spinner" aria-hidden="true"></div>
<img decoding="async" src="data:image/svg+xml,%3Csvg%20width%3D%224%22%20height%3D%223%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%204%203%22%3E%3C/svg%3E" alt class="fy-content-image fy-lazy js-lazy" data-src="/background.png"><div class="fy-image-loading fy-image-loading--spinner" aria-hidden="true"></div> <!-- Picture just for decoration -->
<div style="background-imgage: url('test.png')" aria-hidden="true"></div>
<img decoding="async" src="data:image/svg+xml,%3Csvg%20width%3D%224%22%20height%3D%223%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%204%203%22%3E%3C/svg%3E" alt="Overview of smokers by age" longdesc="smokers.html" class="fy-content-image fy-lazy js-lazy" data-src="/statistics.png"><div class="fy-image-loading fy-image-loading--spinner" aria-hidden="true"></div> <!-- smokers.html is a detailed description of the graphic to provide it -->
<div role="button" class="icon-button-school" aria-label="Open building informations"></div>
Angular hints
In Angular you can add attributes conditionally. In addition you can find an accessibility description for nearly all Material components to improve your accessibility. Therefore you can find there descriptions for non text-contents, like mat-icon buttons.
<div [ngClass]="{'icon-button1': step === 'step1', 'icon-button2': step === 'step2'}" [attr.aria-label]="getAriaLabelForButton(step)"></div>
No Comments