Accessibility audits
Can all users access content and navigate your site effectively?
Overview
These checks highlight opportunities
to improve the accessibility of your web app.
Only a subset of accessibility issues can be automatically detected
so manual testing is also encouraged.
What you'll learn
Audit scoring
Navigation
ARIA
-
[aria-*]attributes do not match their roles -
[aria-hidden="true"]is present on the document<body> -
[aria-hidden="true"]elements contain focusable descendants - ARIA input fields do not have accessible names
-
[role]s do not have all required[aria-*]attributes -
Elements with an ARIA
[role]that require children to contain a specific[role]are missing some or all of those required children -
[role]s are not contained by their required parent element -
[role]values are not valid - ARIA toggle fields do not have accessible names
-
[aria-*]attributes do not have valid values -
[aria-*]attributes are not valid or misspelled - ARIA IDs are not unique
Names and labels
- Buttons do not have an accessible name
-
Document doesn't have a
<title>element - Form fields have multiple labels
-
<frame>or<iframe>elements do not have a title -
Image elements do not have
[alt]attributes -
<input type="image">elements do not have[alt]text - Form elements do not have associated labels
- Links do not have a discernible name
-
<object>elements do not have[alt]text
Tables and lists
-
<dl>s do not contain only properly ordered<dt>and<dd>groups,<script>, or<template>elements -
Definition list items are not wrapped in
<dl>elements -
Lists do not contain only
<li>elements and script supporting elements (<script>and<template>) -
List items (
<li>) are not contained within<ul>or<ol>parent elements -
Presentational
<table>elements do not avoid using<th>,<caption>, or the[summary]attribute -
Cells in a
<table>element that use the[headers]attribute refer to an element ID not found within the same table -
<th>elements and elements with[role="columnheader"/"rowheader"]do not have data cells they describe
Best practices
Audio and video
Internationalization and localization
Additional items to manually check
- The page has a logical tab order
- Interactive controls are keyboard focusable
- Interactive elements indicate their purpose and state
- The user's focus is directed to new content added to the page
- User focus is not accidentally trapped in a region
- Custom controls have associated labels
- Custom controls have ARIA roles
- Visual order on the page follows DOM order
- Offscreen content is hidden from assistive technology
- HTML5 landmark elements are used to improve navigation