WCAG 2.1 – Criterion 1.1.1 – Text Alternatives (Level A)

New year – new step! We’re starting a weekly Friday series “Understanding Digital Accessibility Based on WCAG 2.1”.

WCAG is a set of technical recommendations that influence the accessibility of digital products.
Today we’re starting with the first success criterion – 1.1.1 Text Alternatives (Level A). What’s this about? Let me give you a quick rundown:
Non-text elements such as icons and graphics should have text alternatives provided. But should all these elements have descriptions? NO! This is the most common mistake made by the development team – they, together with designers, should decide whether a particular icon or graphic contributes to the content layout or not. This is an extremely important stage of design. How can we indicate this?

•  alt=”” – an attribute used in the <img> tag indicating a decorative element that will be skipped by assistive technology.
•  alt=”small, black dog wearing glasses in a sweater” – an example of how we can describe an element that will be processed by, for example, a screen reader.

Tips for alternative texts:

• do not use the words “photo,” “graphic” – a correctly implemented element will receive this information from the tag or role, for example <img>;
  the description should be meaningful, are there any limits…? No, but remember the principle of “less is more”.
• Fun fact:

social media, MS Office automatically generate alternative descriptions if we don’t define them manually. They’re not perfect, so it’s better to check them before publishing.

WCAG reference: link to WCAG
A11y annotation kit: link to A11y annotation kit
Automatic generator: link to Automatic generator