Digital Accessibility Learning Path: Developers – Part 3

Accessibility resources for Web and App Development teams and individuals

Accessible Web Development: Part 3 – Media Alternatives

Table of Contents

Alternatives for Visual Information

Use appropriate alternatives for images

  • Ensure all images offer a programmatic, text based description that conveys the intended meaning or purpose of the image.
  • A text based, visible image caption or long description, can provide an alternative for a graphic and may be helpful for multiple user types. If possible use image alt text to direct users to the caption, which should be directly adjacent to the graphic or provided through a clearly identifiable hyperlink.
  • Implement the alt attribute for every <img> element. Decorative <img> images should use alt=””. Alt text is displayed visually by web browsers when images cannot be rendered which can be helpful for sighted users as well. Accurate alt text can also benefit Search Engine Optimization (SEO).
    Note: Effective alt text is used only to identify an image and not to provide detailed information.
  • SVG and graphic icons can use CSS to provide non-visible text descriptions (e.g. class=”sr-only”). ARIA can be used to apply a description (e.g. aria-label) or to hide decorative images (e.g. aria-hidden=”true”).
  • Do not use images of text unless the visual presentation is essential.
  • If an image must be used as an interactive component, ensure the function of the component is easy to identify and described appropriately and uniquely. For example, if an image serves as a link, then the link purpose is essential within the description. the visual information is secondary and often unnecessary.
  • Multiple links to the same resource may be good for target size, but can be bad for redundancy in navigation. Consolidate links whenever possible. Sometimes, this means hiding image links by treating them as decorative or using code such as aria-hidden=”true”
  • The “title” attribute should never be relied on as a description or label for an image.
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

Provide Captions or Transcriptions and Audio Descriptions

  • Video and Audio files should present Captions or a full language Transcription and should include audio that is meaningful such as laughter. Audio Description, or Described Audio should be available as an alternative audio track or separate video that presents information visually and audibly at the same time.
  • If closed Captions are preferred, ensure the player you are using supports it
  • Ensure all captions are accurate. Transcriptions and captions should always be checked by a human to ensure accuracy, especially for auto-generated content. Accuracy checks must include the appropriate use of grammar, and may also apply to the identification of speakers in dialogue.
  • Audio Descriptions can often be included as a user selectable audio track, but this feature must also be supported by the video player.
  • If an alternative presentation of the media must be used to provide an equally effective alternative, then ensure the “accessible” version is:
    • Easy to navigate to
    • Clearly labeled as the”Accessible” version (of the video or audio file).
    • Directly adjacent to the non-accessible version, or is linked and uses the preceding criteria.

Closed Captioning
Closed Captions

Audio Description
Audio Description

The following is an example video, containing a single audio track which includes Audio Description. Closed Captions can be enabled by the user (Note: Closed Captions include Audio Description narration).

Frozen Trailer (with Audio Descriptions) – Video Example

The following is an example of the same video, without Audio Description. Closed Captions can be enabled by the user.

Frozen Trailer – Video Example
< Part 2

Resources

Related Resources: Part 3 – Media Alternatives

Use Appropriate Alternatives for Images

Provide Captions or Transcriptions and Audio Descriptions

Additional Resources

Accessibility Guidance for Developers

The General Services Administration (GSA) provides accessibility guidance for developers. Multiple resources can be found on the 18F Accessibility Guide Homepage, including the Accessibility Checklist which helps identify important behaviors and component presentations integral to an accessible web experience.
Developing for Web Accessibility (W3C)

Web Content Accessibility Guidelines (WCAG)

Northeastern policy identifies WCAG 2.0 as the Minimum Web Accessibility Standards (MWAS) for which development should strive to conform. the creators of WCAG, The World Wide Web Consortium (W3C) offer a How to Meet WCAG (Quick Reference) guide providing insight into understanding the guidelines as well as techniques and code based examples.

Accessible Rich Internet Application (ARIA)

In addition to WCAG techniques W3C provides additional semantic specifications for creating accessible web experiences found on the ARIA Authoring Best Practices Guide (APG). The guide provides pattern examples for specific components, including:

Your Feedback is Welcome

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.