Saturday, May 30, 2020

Authoring techniques described in this document are designed to support conformance with University of Iowa accessibility testing criteria, including criteria found in the Compliance Sheriff accessibility checkpoint library and the OpenAjax Evaluation Library and Rulesets. While these techniques do not guarantee full accessibility, each addresses a potential barrier to access for all users, including users with disabilities.

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]

Where any landmark appears more than once in a page, each instance must be distinguishable by an accessible name. Providing an accessible name for all instances of all landmarks is a best practice.

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
  • 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

  • Must include role=”presentation” or an empty ALT attribute

Headings

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

Rules for Headings

  • 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

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

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