Authoring techniques described in this document are designed to support conformance with accessibility testing criteria included in the Compliance Sheriff accessibility checkpoint library and the OpenAjax Evaluation Library and Rulesets.

Landmarks

The following ARIA landmark roles describe page regions, for ease of page navigation and traversal by users of assistive technology. All web content should be contained in ARIA landmarks.

  • main (HTML5: <main>) [This landmark is required in all pages]
  • navigation (HTML5: <nav>) [This landmark is required in all pages]
  • banner (HTML5: <header>) [No more than one is permitted per page]
  • contentinfo (HTML5: <footer>) [No more than one is permitted per page]
  • complementary (HTML5: <aside>) [Restrictions on child regions]
  • form (HTML5: <form>) [Restrictions on child regions]
  • search (no HTML5 equivalent) [Restrictions on child regions]
  • region (HTML5: <section>) [Must have accessible name]

All landmarks must be accompanied by an descriptive accessible name. Accessible names must be unique.

Images

Images embedded in a webpage must include alternative text (ALT text) that accurately describes the content, function, or intention of the image.

Rules for Images

  • Images must NOT include file name or path as part of the ALT text
  • ALT and TITLE attributes must not be contain the same information
  • Images must NOT include descriptive information within the TITLE attribute
  • Images may include file name or path in advisory TITLE attribute, only if relevant

Images that provide content

  • Must use the ALT attribute or ARIA property to convey a text alternative
  • Must use ALT or ARIA property to convey textual information contained in the image
  • Must use appropriate instruction if the image is interactive
  • Must link or refer to a long description if ALT text requires more than 100 characters

Images that are purely decorative

  • Decorative foreground images must include role=”presentation” (preferred) or an empty ALT attribute
  • Decorative background images may be included in CSS with no further action

Headings

Headings define the outline of your document, introduce topics and regions, and facilitate navigation.

Rules for Headings

  • Headings must use HTML heading markup or ARIA role
  • Headings must be properly nested
  • Headings must contain text content
  • Headings must introduce content in a topic or region
  • Headings at the same level (sibling) must be unique
  • Headings must NOT be used only for formatting or style

Tables

These requirements apply only to the table, and not to any styles, text, graphics, or interactive content.

Data tables

  • Must include <th> header cells with applicable SCOPE attribute
  • Must include unique accessible name (CAPTION, ARIA-LABEL, ARIA-LABELLEDBY)
  • Must include unique accessible description (SUMMARY, TITLE, ARIA-DESCRIBEDBY)
  • Must include ID and HEADERS attributes (for complex tables)

Layout tables

  • Must include role=”presentation” to conceal table semantics from assistive technology
  • Must NOT include accessible name or descriptionapplies to data tables only
  • Must NOT include <th> header cells or related attributes

Links

Rules for all Links

  • All links must contain foreground text or image content, with ALT for images
  • Link text, including ALT text for image links, must describe the link when read out of context
  • Links to different resources must use different text
  • Links to the same resource must use the same or similar text
  • Links that use multiple adjacent elements should be presented in a single link container
  • All pages should include a link that includes ‘Help”, “Contact”, or “Accessibility” in the text

Media

All media must be accompanied by alternate content.

  • Video must include synchronized open or closed captions
  • Video must include audio descriptions of on-screen content that is important to understanding
  • Audio content must be accompanied by a complete transcript
  • Media players must be operable by users of assistive technology

Color Use

Contrast

  • Foreground (text) and background colors must contrast at a ratio of 4.5:1 for normal text
  • Foreground (text) and background colors must contrast at a ratio of 3:1 for large text
  • Graphics and UI components must contrast at a ratio of 3:1
  • Use a Color Contrast Tool to assess contrast between foreground and background colors

Conveying information using color

  • Color should not be the only means of conveying information; use text or other visual indicators

Frames and Iframes

  • Frames and Iframes must use the TITLE attribute to provide an accessible name