Digital Accessibility Learning Path:
Web & Content Contributors

Accessibility resources for anyone who creates provides or manages digital content

Accessible Web Content and Design – Part 1

Table of Contents

Alternatives for Visual Information

Text alternatives for graphics and alt text for images must be available for non-visual users. Captions and descriptions can be offered as image alternatives.
Image descriptions should convey the intended meaning or purpose of the graphic component or describe an interactive function. Text descriptions should be concise and only include relevant information.

Text descriptions, or alt text should be available for the following:

  • Images and icons, including logos that contain text
    Note: Images of text should be avoided whenever possible. If they are required, ensure text descriptions match the visual text.
  • Graphs, charts, complex tables, informational graphics (infographics), maps and diagrams. Complex Images may require a long description.
  • Informational media containing video or animations.
  • Buttons, switches and items that identify form fields or other components.

The following is an example of a photograph, and a caption used as a detailed description of the photo. The alt text which is not visible reads “Isabela Castillo works on a 3-D printed prosthetic.” Effective alt text is used only to identify an image and not for detailed information.

Isabela Castillo works on a 3-D printed prosthetic

Isabela Castillo works on a 3-D printed prosthetic hand in the EXP Makerspace on the Boston campus. Castillo is a third year Northeastern bioengineering student who heads up Give A Hand, a club developing low-cost prosthetic hands with 3-D printing. Photo by Alyssa Stone/Northeastern University

Captioning, Transcriptions and Alternative Descriptions

Videos and media that has audio and visual content must have an alternative for people that may not be able to see or hear the content.
Often the alternatives are used by many different types of people. For example, captioning is beneficial for a hearing person watching a voice narrated video in a noisy environment. Accessible media may include any of the following:

  • Captions or a text Transcript for spoken audio or other informational audio content. including all audio that is meaningful such as laughter.
  • Visual information, such as instruction in a video, should be narrated or described in text or whenever possible.
  • Audio Description, or Described Audio should be available for video that presents information visually and audibly at the same time.
Closed Captioning
Closed Captions symbol
Audio Description
Audio Description symbol

The following video contains a descriptive audio track, which is intended for individuals who are blind or have low vision. Note: the video includes closed captions which can be turned on and off by the viewer. The captions include the text of the audio description, which is not required.

Frozen Trailer (with Audio Descriptions) – Video Example

The following is an example of the same video without audio description. Note: This example has minimal captions.

Frozen Trailer – Video Example

Logical Content Structure

Everyone should be able to understand the way documents and webpages are meaningfully structured and presented.

  • Use Headings appropriately so they may serve as a document outline.
    • Include a single Heading level 1 (h1) which describes the webpage or identifies contents.
    • Headings must be logically presented visually, and for people using assistive technology such as a screen reader.
    • Follow a hierarchical order. Heading levels should not be skipped.
    • Do not use heading designation for stylization alone.
  • Use a clear and descriptive page title, this can be similar to, or match the h1.
  • Make content easy to find. Use a table of Contents, Bookmarks/In-Page Links, Headings and Content Groupings/Landmarks.
  • Make sure that the sequence of your content is meaningful and maintains a logical reading order.
Example headings levels 1,2 and 3
Example of Heading Structure

Resources

Alternatives for Visual information

Captioning, Transcriptions and Alternative Descriptions

Logical Content Structure

Part 2 >

Additional Resources:

Images and Infographics

Use the resources provided on this page to understand how to best present images and informational graphics so that they are conveyed appropriately to all people including those who perceive them non-visually

Accessible Social Media

Use resources to understand how to best present Social Media so that it is available and accessible to the widest audience possible, within the Northeastern University community.

Web Accessibility

There are a range of principals to consider, when creating and sharing content on the web. The World Wide Web Consortium (W3C) provides tips for Writing for Web Accessibility, and WCAG 2.1 at a Glance, which provides a simplified presentation of the Web Content Accessibility Guidelines (WCAG).

Design

Designing for Web Accessibility (W3C) and Microsoft Inclusive Design

Images (W3C)

  • Informative images: Images that graphically represent concepts and information, typically pictures, photos, and illustrations. The text alternative should be at least a short description conveying the essential information presented by the image.
  • Decorative images: Provide a null text alternative (alt="") when the only purpose of an image is to add visual decoration to the page, rather than to convey information that is important to understanding the page.
  • Functional images: The text alternative of an image used as a link or as a button should describe the functionality of the link or button rather than the visual image. Examples of such images are a printer icon to represent the print function or a button to submit a form.
  • Images of text: Readable text is sometimes presented within an image. If the image is not a logo, avoid text in images. However, if images of text are used, the text alternative should contain the same words as in the image.
  • Complex images such as graphs and diagrams: To convey data or detailed information, provide a complete text equivalent of the data or information provided in the image as the text alternative.
  • Groups of images: If multiple images convey a single piece of information, the text alternative for one image should convey the information for the entire group.
  • Image maps: The text alternative for an image that contains multiple clickable areas should provide an overall context for the set of links. Also, each individually clickable area should have alternative text that describes the purpose or destination of the link.
  • Functional Images: Functional images are used to initiate actions rather than to convey information. They are used in buttons, links, and other interactive elements. The text alternative for the image should convey the action that will be initiated (the purpose of the image), rather than a description of the image.

We would love to hear your thoughts on this learning content. Please let us know if you have completed any of the modules, have any feedback or just want to say hello. Email us at digital-accessibility@northeastern.edu.