Skip to content

Basic A11y Checklist

Jump to bottom
Mike Mai edited this page Jul 17, 2020 · 9 revisions

The following are based on the fact that we do not support Internet Explorer 11 and lower.

Content Authors

  • Add alt text for all images.
  • Add href for all visual links (link component and button component that navigate somewhere).
  • Check color contrast between text and background color. 4.5:1 for regular text and 3:1 for larger text. (tool)
  • Make sure the the headings are in the correct order (do not skip levels) and they make sense as a list. A screen reader is able to navigate a page by listing all headings (<h1> ~ <h6>). If the hierarchy and wording do not make sense, the user will be confused.

Example of a screen reader listing all headings of a page if heading levels are used correctly

1. Intelligent Automation
   2. Intelligent Automation: Digital Transformation achieved
      3. Get to know Pega Intelligent Automation
      3. Achieve quick wins with Pega Robotic Desktop Automation
      3. Bridge the last mile of integration with Pega Robotic Process Automation
      3. Orchestrate work from end to end with case management
      3. Deliver consistent experiences across channels
      3. Evolve your automations with Pega AI for operational intelligence
   2. Related Resources
      3. Analyst Reports
      3. Intelligent automation that's built for change
      3. The transformative power of AI & robotics
   2. Applications designed for your industry
   2. Customer Case Studies
   2. See how Pega can help your business
   2. About Pegasystems

Front-end Devs

Images

  • All <img>s have the alt attribute defined, it cannot be empty.

Links and Buttons

  • Let links be links. All <a>s have the href attribute defined, it cannot be empty. Links must navigate somewhere, either to a different page or another section of the same page. Links should not perform functions.
  • Let buttons be buttons. All <button>s have type attribute defined, it can be submit, reset, or button depending on the scenario. Buttons must perform functions, it can never be used for navigation.

⚠️ Button Link Combo?

I hope you never have to do this but if you do...

  • If an <a> performs a function in addition to navigating somewhere, it must include the role="button" attribute, and additional work must be done to make such custom button work with both the space and enter on the keyboard.

Title Attribute

  • There is no title attribute on any element. (source)

Skip Link

  • The page has a skip link that would navigate the user to the main content of the page. This is usually visually hidden until the user focuses on it using the keyboard. The href must be set to the same id as the main content container. For example: <a href="#main-content">.
  • The skip link is the immediate child of the <body> and first-of-type.
  • Main content container has an id that corresponds with the skip link. For example: <main id="main-content">.

Landmarks

  • The page has a <header>.
  • The page has a <main>.
  • The page has a <footer>.
  • The page has a <nav>.
  • Landmarks do not have role attributes. Do not do this <main role="main"> or this <footer role="contentinfo">.
  • The page has a <article> if the content is an article.
  • The page has <section>s if the article content is divided into sections.
  • The page has <aside>s if the article content has complimentary info.

Headings

  • The page has only one <h1>.
  • The headings do not skip. For example, an <h3> cannot appear in between an <h1> and <h2>.

Gitlab Tool

Accessibility Merge Request widget

In-browser A11y Checking Tools

Popular Pages

Clone this wiki locally