Overview of alt text
Credit for the following 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=""
).
Add alt text in the Insert Image dialog
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.
Add alt text in the XHTML
To enter alt text in the 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 check a wiki page for accessibility problems and view alt-text inline with the images, consider using a checker such as the WAVE Web Accessibility Evaluation Tool, available at the following site: