Alt Text

Learn more about ‘Alt Text’

Alt Text Summary

These improvements help Users understand why alt text is required and what it is. Alt text needs to:
● Have a straightforward Help option when adding a picture,
● Include an example of good alt text within that Help option,
● Be mandatory when dragging and dropping an image and using the Upload File tool.
● Include a ‘Decorative Image’ checkbox for logos or images that do not add anything to the content

Improvements

On image upload:

• When the image file has been added/selected
• Display image
• File Textbox – Name
  • Auto fills using File name/can edit
• Choose an option – Dropdown
  • Alt text
    • ALT TEXT HELP (new) link to page in
    • Add alt text* Textbox (revised field name)
    • Tooltip Text Textbox
  • Add decorative image
    • Set image flag for Screen Reader to skip over/ignore items marked as Decorative Image
    • DECORATIVE IMAGE HELP (New) Link to page in
    • Tooltip Textbox

ALT TEXT HELP

Alternative text, or alt text, is read out by screen readers or displayed if an image does not
load or if images have been switched off.

All images, except decorative images, must have alt text that tells people what information
the image provides, and describes the content and function of the image.

Alt text

Here are some simple rules to follow when considering alt text.

● Keep it concise, don’t use “picture of” “Image of” (Screen readers automatically
announce an image as an image. So an alternative text “Image of an apple” would be
read aloud by a screen reader as “image, Image of an apple”).
● Do not exceed 125 characters (Some screen readers do not read past this so the
meaning can be lost)
● Use the correct grammar (this will enhance the experience for some screen reader
users)
● Give context if it relates to the content
● Do not go off topic or describe anything outside of what is in the image.

Example picture and good Alt Text

Text: “Alt text: Aerial view of a field of sunflowers.”

Decorative Images

Some images do not need descriptions

Check the decorative image checkbox of the image;

• Adds no meaning or impact on understanding the content
• Is an icon that has a text label that the alt text would repeat

If the decorative image checkbox is selected a screenreader will completely skip over the image

If the box is not checked and there is no alt text added, the screen reader will read the file
name for the image instead, which can be a major distraction to those using screen-reading
technology. (for example, Icon_search_136290.jpg

Example of a Decorative Image (Icon)

Text: “Mark as Decorative Image”

For further guidance on how to mark your image in the correct way, An alt decision Tree on the W3C website

Where to find Alt text

1. 1. Upload an image via the ‘Insert -> Image‘ option or the ‘Featured image -> Choose file‘ option
   2. Once an image has been selected you will be redirected to an ‘Add image‘ screen
      

      Add image screen

   3. Or
   4. An ‘Add file‘ screen
      

      Add file screen

   5. Select the ‘Alt text‘ box to input the information
   6. In the ‘Add file‘ screen select the ‘Alt Text Help‘ button for any guidance
   7. Select Save

View Full Video Demo