NIH | National Cancer Institute | NCI Wiki  

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Panel
borderColorblue
borderStylesolid
titleContents of this page

Table of Contents


Overview of Alt Text

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

Multiexcerpt include
MultiExcerptNameExitDisclaimer
nopaneltrue
PageWithExcerptwikicontent:Exit Disclaimer to Include
.

  • 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

Note

Alternative text must be included for every image posted on the wiki. Keep the alt text short; browsers truncate excessively long alt text. In addition, describe the important aspects of the image in the text.

...

Confluence supports adding alternative text in the Insert Image windowProperties dialog box.

  1. Open In the page on which you want to see the image.
  2. Select  Plus sign indicating Insert menu in ConfluenceImage Removed> Files and Images.
  3. change, click Edit
  4. Select the image to insert.Click the image to display the image properties menu. The image properties panel appears. 
    Image properties menu
  5. Click Properties.
    The Image Properties dialog box appears. 
    Image Properties dialog boxImage AddedEnter Alt text in the Alt text field. The Title is not required.
    Image Properties dialog boxImage Removed

...

  1. 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.

Code Block
<ac:image ac:alt="caDSR logo">
Info
titlePositioning alt textSpecial 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 (;)
Confluence deletes the alt text if you spell or punctuate it incorrectly. For best results, you should also insert it as shown in the preceding example, after ac:image.

An image inserted this way has alt text, which is evident to the user of a screen reader for the following image. Display  

caDSR logoImage Added

Checking Alt Text

To view the alt text, you can display the image properties in the your browser to . To view the 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/

Multiexcerpt include
MultiExcerptNameExitDisclaimer
nopaneltrue
PageWithExcerptwikicontent:Exit Disclaimer to Include
caDSR logoImage Removed