Skip to content

Basic A11y Checklist

Jump to bottom
Mike Mai edited this page Aug 2, 2021 · 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. Unless it's a decoration, in that case, enter an empty value (e.g. alt="").
  • 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. Pass an empty value if it is a decoration: alt="".

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

  • Avoid using 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 need 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>.

Dev Tools

In-browser A11y Checking Tools

Popular Pages

Clone this wiki locally