-
Notifications
You must be signed in to change notification settings - Fork 45
Basic A11y Checklist
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.
- 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
- All
<img>
s have thealt
attribute. Pass an empty value if it is a decoration:alt=""
.
- Let links be links. All
<a>
s have thehref
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 havetype
attribute defined, it can besubmit
,reset
, orbutton
depending on the scenario. Buttons must perform functions, it can never be used for navigation.
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 therole="button"
attribute, and additional work must be done to make such custom button work with both thespace
andenter
on the keyboard.
- Avoid using
title
attribute on any element. (source)
- 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">
.
- 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.
- The page has only one
<h1>
. - The headings do not skip. For example, an
<h3>
cannot appear in between an<h1>
and<h2>
.
- Basic A11y Checklist
- Get started with Bolt locally
- Bolt Specific Standards and Conventions
- How to save SVG graphics and SVG icons
- Upgrade to minor release
- Upgrade to 4.x
- Upgrade to 5.x
- Release Workflow
- VS Code Configuration
- Bolt Doc Writing Guide
- Prefixing Custom Attributes
- Standard Props for Passing Content in Twig
- Building Websites with Bolt in Drupal
- From Design Mockup to Code
- Override with Utility Classes