Accessibility
Dan Sharp
Posted 12 November, 2024 by Dan Sharp in
Accessibility
The Accessibility tab shows data related to running the open-source AXE accessibility rule set for automated accessibility validation from Deque University. This helps websites become more inclusive, user friendly and accessible for people with disabilities.
This is the same accessibility engine that powers the accessibility best practices seen in Lighthouse and PageSpeed Insights.
Accessibility can be enabled via ‘Config > Spider > Extraction’ (under ‘Page Details’) and also requires JavaScript rendering mode to be enabled via ‘Config > Spider > Rendering’ to populate the Accessibility tab, filters and issues.
Optionally, to populate the ‘Overview’ filters for the accessibiltiy score and the accessibility score column, then PSI must be enabled via ‘Config > API Acccess > PSI’ and the ‘Accessibility Score’ metric selected in the Metrics tab.
Columns
This tab includes the following columns.
- Address – The URL crawled.
- Content Type – The content type of the URL.
- Status Code – HTTP response code.
- Status – The HTTP header response.
- Indexability – Whether the URL is indexable or Non-Indexable.
- Indexability Status – The reason why a URL is Non-Indexable. For example, if it’s canonicalised to another URL.
- All Violations – The total number of accessibility violations for the URL.
- Best Practice Violations – The number of best practice accessibility violations for the URL.
- WCAG 2.0 A Violations – The number of WCAG 2.0 A accessibility violations for the URL.
- WCAG 2.0 AA Violations – The number of WCAG 2.0 AA accessibility violations for the URL.
- WCAG 2.0 AAA Violations – The number of WCAG 2.0 AAA accessibility violations for the URL.
- WCAG 2.1 AA Violations – The number of WCAG 2.1 AA accessibility violations for the URL.
- WCAG 2.2 AA Violations – The number of WCAG 2.2 AA accessibility violations for the URL.
- PSI Status – Either a ‘success’ retrieving data, or an ‘error’.
- PSI Error – If there is an error, the error response.
- Accessibility Score – The accessibility score of the URL from 0-100 from the Lighthouse audit.
Filters
This tab includes the following filters as an Overview.
- Accessibility Score Poor – The accessibility score of the page is between 0-49. To provide a good user experience, sites should strive to have a good score (90-100).
- Accessibility Score Needs Improvement – The accessibility score of the page is between 50-89. To provide a good user experience, sites should strive to have a good score (90-100).
- Accessibility Score Good – The accessibility score of the page is between 90-100. To provide a good user experience, sites should strive to have a good score (90-100).
This tab includes the following filters for Best Practice Rules Violations.
- Accesskey Attribute Value Must Be Unique – Ensure every accesskey attribute value is unique.
- Ensure Elements Marked Presentational Are Ignored – Elements marked as presentational should not have global ARIA or tabindex to ensure all screen readers ignore them.
- Elements Must Not Have Tabindex Greater Than Zero – Ensure tabindex attribute values are not greater than 0.
- Skip-link Target Should Exist & Be Focusable – Ensure all skip links have a focusable target.
- Role=text Should Have No Focusable Descendants – Ensure role=”text” is used on elements with no focusable descendants.
- ARIA Dialog & Alertdialog Require Accessible Name – Ensure every ARIA dialog and alertdialog node has an accessible name.
- ARIA Role Should Be Appropriate For Element – Ensure role attribute has an appropriate value for the element.
- ARIA Treeitem Nodes Require Accessible Name – Ensure every ARIA treeitem node has an accessible name.
- All Page Content Must Be Contained By Landmarks – Ensure all page content is contained by landmarks.
- Page Requires One Main Landmark – Ensure the document has a main landmark.
- Page Must Not Have More Than One Banner Landmark – Ensure the document has at most one banner landmark.
- Banner Landmark Must Not Be In Another Landmark – Ensure the banner landmark is at top level.
- Page Must Not Have Multiple Contentinfo Landmarks – Ensure the document has at most one contentinfo landmark.
- Page Requires At Most One Main Landmark – Ensure the document has at most one main landmark.
- Complementary Landmarks & Asides Must Be Top Level – Ensure the complementary landmark or aside is at top level.
- Contentinfo Landmark Must Be Top Level Landmark – Ensure the contentinfo landmark is at top level.
- Main Landmark Must Not Be In Another Landmark – Ensure the main landmark is at top level.
- Landmarks Require Unique Role Or Accessible Name – Ensure landmarks are unique.
- Form Elements Should Have Visible Label – Ensure that every form element has a visible label and is not solely labeled using hidden labels, or the title or aria-describedby attributes.
- Frames Should Be Tested With axe-core – Ensure <iframe> and <frame> elements contain the axe-core script.
- Page Must Contain <h1> – Ensure that the page, or at least one of its frames contains a level-one heading.
- Heading Levels Should Only Increase By One – Ensure the order of headings is semantically correct.
- Headings Should Not Be Empty – Ensure headings have discernible text.
- Meta Viewport Should Allow Zoom & Scale Up to 500% – Ensure <meta name=”viewport”> can scale a significant amount.
- Alt Text Should Not Be Repeated As Text – Ensure image alternative is not repeated as text.
- Table Headers Require Discernible Text – Ensure table headers have discernible text.
- Table With Identical Summary & Caption Text – Ensure the <caption> element does not contain the same text as the summary attribute.
- Scope Attribute Should Be Used Correctly On Tables – Ensure the scope attribute is used correctly on tables.
This tab includes the following filters for WCAG 2.0 A Rules Violations.
- Scrollable Region Requires Keyboard Access – Ensure elements that have scrollable content are accessible by keyboard.
- Required ARIA Attributes Must Be Provided – Ensure elements with ARIA roles have all required ARIA attributes.
- ARIA Attribute Must Be Used As Specified For Role – Ensure ARIA attributes are used as described in the specification of the element’s role.
- ARIA Attributes Require Valid Values – Ensure all ARIA attributes have valid values.
- ARIA Attributes Require Valid Names – Ensure attributes that begin with aria- are valid ARIA attributes.
- ARIA Commands Require Accessible Name – Ensure every ARIA button, link and menuitem has an accessible name.
- ARIA Input Fields Require Accessible Name – Ensure every ARIA input field has an accessible name.
- ARIA Meter Nodes Require Accessible Name – Ensure every ARIA meter node has an accessible name.
- ARIA Progressbar Nodes Require Accessible Name – Ensure every ARIA progressbar node has an accessible name.
- ARIA Roles Must Be Contained By Required Parent – Ensure elements with an ARIA role that require parent roles are contained by them.
- ARIA Roles Require Valid Values – Ensure all elements with a role attribute use a valid value.
- ARIA Toggle Fields Require Accessible Name – Ensure every ARIA toggle field has an accessible name.
- ARIA Tooltip Nodes Require Accessible Name – Ensure every ARIA tooltip node has an accessible name.
- Certain ARIA Roles Must Contain Specific Children – Ensure elements with an ARIA role that require child roles contain them.
- Deprecated ARIA Roles Must Not Be Used – Ensure elements do not use deprecated roles.
- Aria-braille Require Non-braille Equivalent – Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent.
- Aria-hidden Elements Contains Focusable Elements – Ensure aria-hidden elements are not focusable nor contain focusable elements.
- Aria-hidden=true Must Not Be Used In <body> – Ensure aria-hidden=”true” is not present on the document body.
- Elements Must Only Use Permitted ARIA Attributes – Ensure ARIA attributes are not prohibited for an element’s role.
- Elements Must Use Allowed ARIA Attributes – Ensure an element’s role supports its ARIA attributes.
- IDs Used In ARIA & Labels Must Be Unique – Ensure every id attribute value used in ARIA and in labels is unique.
- Page Requires Means To Bypass Repeated Blocks – Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content.
- Form <input> Elements Require Labels – Ensure every form element has a label.
- Form Field Must Not Have Multiple Label Elements – Ensure form field does not have multiple label elements.
- Frames Require Title Attribute – Ensure <iframe> and <frame> elements have an accessible name.
- Frames Require Unique Title Attribute – Ensure <iframe> and <frame> elements contain a unique title attribute.
- Frames With Focusable Content Must Not Use tabindex=-1 – Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1
- Page Must Contain <title> – Ensure each HTML document contains a non-empty <title> element.
- HTML Element Lang Attribute Value Must Be Valid – Ensure the lang attribute of the <html> element has a valid value.
- HTML Element Requires Lang Attribute – Ensure every HTML document has a lang attribute.
- HTML Lang & XML Lang Value Should Match – Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page.
- Timed Meta Refresh Must Not Exist – Ensure <meta http-equiv=”refresh”> is not used for delayed refresh.
- Image Button Requires Alternate Text – Ensure <input type=”image”> elements have alternate text.
- Images Require Alternate Text – Ensure <img> elements have alternate text or a role of none or presentation.
- <object> Elements Require Alternate Text – Ensure <object> elements have alternate text.
- Active <area> Elements Require Alternate Text – Ensure <area> elements of image maps have alternate text.
- Elements Marked role=img Require Alternate Text – Ensure [role=”img”] elements have alternate text.
- SVG Images & Graphics Require Accessible Text – Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text.
- Server-Side Image Maps Must Not Be Used – Ensure that server-side image maps are not used.
- <video> Elements Require <track> For Captions – Ensure <video> elements have captions.
- <video> or <audio> Elements Must Not Auto-play – Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio.
- Buttons Require Discernible Text – Ensure buttons have discernible text.
- Input Buttons Require Discernible Text – Ensure input buttons have discernible text.
- Links Must Be Distinguishable – Ensure links are distinguished from surrounding text in a way that does not rely on color.
- Links Require Discernible Text – Ensure links have discernible text.
- Select Element Requires Accessible Name – Ensure select element has an accessible name.
- Summary Elements Require Discernible Text – Ensure summary elements have discernible text.
- Deprecated <marquee> Element Must Not Be Used – Ensure <marquee> elements are not used.
- <blink> Elements Deprecated & Must Not Be Used – Ensure <blink> elements are not used.
- Interactive Controls Must Not Be Nested – Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies.
- List Items Must Be Contained In List Elements – Ensure <li> elements are used semantically.
- Lists Must Only Contain <li> Content Elements – Ensure that lists are structured correctly.
- <dl> Must Only Have Ordered <dt> & <dd> Groups – Ensure <dl> elements are structured correctly.
- <dt> & <dd> Elements Must Be Contained by <dl> – Ensure <dt> and <dd> elements are contained by a <dl>.
- <th> Element Requires Associated Data Cells – Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe.
- Table Header Attr Must Refer To Cell In Same Table – Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table.
This tab includes the following filters for WCAG 2.0 AA Rules Violations.
- Meta Viewport Zoom & Scaling Disabled – Ensure <meta name=”viewport”> does not disable text scaling and zooming.
- Lang Attribute Requires Valid Value – Ensure lang attributes have valid values.
- Text Requires Higher Color Contrast to Background – Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds.
This tab includes the following filters for WCAG 2.0 AAA Rules Violations.
- Delayed Meta Refresh Must Not Be Used – Ensure <meta http-equiv=”refresh”> is not used for delayed refresh.
- Links With Same Accessible Name – Ensure that links with the same accessible name serve a similar purpose.
- Text Requires Higher Color Contrast Ratio – Ensure the contrast between foreground and background colors meets WCAG 2 AAA enhanced contrast ratio thresholds.
This tab includes the following filters for WCAG 2.1 AA Rules Violations.
- Autocomplete Attribute Must Be Used Correctly – Ensure the autocomplete attribute is correct and suitable for the form field.
- Inline Text Spacing Must Be Adjustable – Ensure that text spacing set through style attributes can be adjusted with custom stylesheets.
This tab includes the following filters for WCAG 2.2 AA Rules Violations.
- Touch Targets Require Sufficient Size & Spacing – Ensure touch targets have sufficient size and space.
Bulk exports of accessibility issues including granular details of the location are available under ‘Bulk Export > Accessibility’.
Please read our tutorial on ‘How To Perform A Web Accessibility Audit‘.