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.
- In the page you want to change, click Edit.
- Select the image. The image properties panel appears.
- Click Properties. The Image Properties dialog box appears.
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), enter the ac:alt attribute in the ac:image element as follows.
<ac:image ac:alt="caDSR logo">
Special characters
Until CONFSERVER-34728 has been fixed, avoid using the following special characters in alt-text:
- forward slash (/)
- colon (:)
- question mark (?)
- double quote (")
- semi colon (;)
An image inserted this way has alt text, which is evident to the user of a screen reader for the following image.
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: