Overview of Alt Text

Keep in mind the following points. Credit for the following list goes to https://webaim.org/techniques/alttext/

• Adding alternative text to images is one of the easiest accessibility principles to learn and one of the hardest to master.
• Alternative text may be provided in the alt attribute or in the surrounding context of the image.
• Every image must have an alt attribute.
• Alternative text should:
  • present the CONTENT and FUNCTION of the image.
  • be succinct.
• Alternative text should not:
  • be redundant (be the same as adjacent or body text).
  • use the phrases "image of…" or "graphic of…".
• Appropriate alternative text depends heavily on the image's context.
• Alt text of a functional image (for example, an image within a link) should describe the function as well as the content.
• Decorative images still need an alt attribute, but it should be null (alt="").

Adding Alt Text in the Insert Image Dialog Box

Confluence supports adding alternative text in the Image Properties dialog box.

1. In the page you want to change, click Edit. 
2. Select the image. The image properties panel appears. 
   Image Added
3. Click Properties. The Image Properties dialog box appears. 
   Image Added

4. In the Alt text field, enter alt text. Until CONFSERVER-34728 has been fixed, avoid using the following special characters in alt text:

   • forward slash (/)
   • colon (:)
   • question mark (?)
   • double quote (")
   • semi colon (;)

   Do not add text in the Title text field.

Adding Alt Text in the Source Editor 

To enter alt text in the Source Editor (XHTML)

{scrollbar:icons=false}

...

To display alternative text for an image, enter the ac:alt attribute in the ac:image element as follows..Keep the alt text fairly short, as Confluence truncates long alt text entries.

<ac:image ac:alt="caDSR logo">

...

An image inserted this way has alt text, as would be evident with the following image to one using which is evident to the user of a screen reader for the following image. 

You can also add alt text by inserting the image using wiki markup. Refer to inserting an image on a page and changing the size.

Checking Alt Text

To view the alt text, you can display the image properties in your browser. To view alt text inline with the images, consider using a checker such as the WAVE Web Accessibility Evaluation Tool, available at the following site:

https://wave.webaim.org/