Non-Text Content

Non-Text Content a primary element. It is mandatory to include in your digital product if applicable.

┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈

Content needs a text alternative. Without an alt text, people who are visually impaired will not know what is present within the content. There are several coding tags related to this, as seen below in the examples.

Summary Points:

  • Text alternatives are typically seen in a website

  • Keep alt text limited in its description. A paragraph is too long and confusing

  • Excludes decorative imagery and superfluous graphics

  • Excludes captcha for security purposes

  • Screen reader devices will only identify non-text content with alt text

  • Include text alternatives for infographics such as charts, graphs, and maps

  • Try to avoid embedded text in a .jpg, .png etc

  • CSS images should be decorative

  • Improves SEO

Alt Text Code Example:

Alt Text Language Example:

Good Qualified Example of Alt Text: “A calm dog sitting on a deck in the day.”

<img src="dog.png" alt="A calm dog sitting on a deck in the day."> 

Poor but Qualified Example of Alt Text: “A dog.”

<img src="dog.png" alt="A dog"> 

× Non-Qualified Example of Alt Text: “A tri-color dog sitting next to a removable fence on a grey deck with a pink collar and a pink harness. It is not barking. It is docile and staring. It is daytime. There is a tennis ball and other humans are sitting on the deck. There are sandals. The dog looks very content and possibly observing it’s owener.”

× Alt Text Null:

<img src="dog.png" alt=""> 

Further On This Topic:

https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html