NIH | National Cancer Institute | NCI Wiki  

Error rendering macro 'rw-search'

null

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 63 Next »

Overview of alt text

Credit for the following goes to https://webaim.org/techniques/alttext/ Exit Disclaimer logo .

  • 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 (e.g., 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.

  1. Open the page on which you want to see the image.
  2. Select  Plus sign indicating Insert menu in Confluence> Files and Images.
  3. Select the image to insert.
  4. Click the image to display the image properties menu.
    Image properties menu
    • Adding a border and reducing the size of the image can give it a more professional look.
  5. Click the Properties button.
  6. The Image Properties dialog box appears.
    Image Properties dialog box
  7. Enter Alt text in the Alt text field. 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">

Positioning alt text

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 the image properties in the browser to view the alt text.

caDSR logo

  • No labels