Key errors reported by the Accessibility Inspector
Accessibility Inspector helps you discover accessibility issues in your application. By learning about common errors and ways to address them, you can ensure that your application provides the same level of access to users with all levels of ability.
Content errors
Issues related to missing content:- 'At screen load' setting is recommended when using Menu action
- A menu on the page loads dynamically, which means that the menu does not exist at page load, and cannot support a screen reader. As a best practice, use the At screen load setting, which causes the menu and the page to load at the same time.
- Label is not associated with an input
- A label control is not associated with a field. If you want to add a label
to a control, adding text during control configuration is considered best
practice. If you want to display standalone text, you can use a text field
instead of a label.
For more information, see and .
- May be missing a descriptive summary
- The Grid summary field that contains a short
description of the table contents is empty. Screen reader users rely on the
grid summary for a quick overview of a table.
For more information, see .
- May be missing a header
- A section is missing a heading tag, which makes page navigation more
difficult.
For more information, see .
- Provide a descriptive error message
- Validation errors do not include a written error message, and cannot be read
by a screen reader.
For more information, see .
- Provide a header for each column
- A column in a table does not include a header for the screen reader. You can
hide table headers by using the
grid-column-header-hidden
CSS class. - Provide a helper text
- An element, most commonly an icon, does not include a helper text. You can
add the text while configuring the control.
For more information, see .
- Provide a helper text or label
- A button control does not have button text or helper text.
For more information on adding text to buttons, see .
- Provide an associated label
- An input field does not have an associated label. If you want to hide the
label, you can use the CSS
hide-label
helper class, which hides the text, but makes it available to screen readers.For more information, see and .
Structural errors
Issues related to the navigational structure of the page:
- Heading levels hierarchy is out of order
- Heading levels (
<H1>
to<H6>
tags) are not in the order that ensures proper keyboard navigation of the page.For more information, see .
- Main role should only appear once in the DOM
- The page has more than one Main area, which makes
keyboard navigation more difficult. This error might be caused by a
layout with a Landmark role set to
Main.
For more information, see .
- Primary portal navigation may be missing a navigation role
- The DOM does not include a Navigation landmark.
The layout surrounding the main navigation of your page must have a role
type set to Landmark with the value set to
Navigation. You can ignore this warning if
your application does not have primary navigation.
For more information, see .
- Navigation menus should not be in the right sidebar of a screen layout
- The primary navigation of your layout is located in the right sidebar. Because the right sidebar of a screen layout loads after the main region of the layout, the screen reader cannot get to the navigation quickly. A screen layout header or a menu in the left sidebar is the best practice.
- Navigation menus should not be in the sidebar of a column layout
- A navigation component is located in a column layout sidebar. Because the sidebar of a column layout renders after the main region of your column layout, the screen reader cannot get to the navigation quickly. The main area of the column layout is the best location for a navigation component.
Interactivity errors
Issues related to keyboard navigation:
- Also provide a comparable keyboard interaction
- A click event does not have a corresponding keyboard event. You can add the
keyboard event from the property panel of the control.
For more information, see .
- Search role should be used if the portal has a custom search gadget
- The DOM does not include a Search landmark. The layout that surrounds your search gadget must have a Landmark role with the value set to Search. You can ignore this warning if your application does not have a search gadget.
For more information, see .
Compatibility errors
Issues related to deprecated navigational layouts:
- Table-based layouts are deprecated, use Dynamic Layouts instead
- For more information, see .
- Tab Group layouts are deprecated, use Layout Groups instead
- For more information, see .
- Repeat Horizontal layouts are deprecated, use a Table layout or Repeating Dynamic Layout instead
- For more information, see and .
Previous topic Checklist for logging accessibility issues Next topic Custom configuration options for accessibility