Accessibility fix guides

Plain-English explanations and code-level fixes for 46 common WCAG failures, organized by the axe-core rule that detects each one. This is the same fix guidance BarrierScan includes in every scan report.

Images and media

• Images are missing text alternatives image-alt
• Image buttons are missing accessible names input-image-alt
• Image map areas are missing text alternatives area-alt
• SVG graphics are missing text alternatives svg-img-alt
• Embedded objects are missing text alternatives object-alt
• Videos are missing captions video-caption

Forms

• Form fields are missing labels label
• Dropdown menus are missing accessible names select-name
• Custom input controls are missing accessible names aria-input-field-name
• Form fields have invalid autocomplete attributes autocomplete-valid
• Form fields have multiple conflicting labels form-field-multiple-labels

Links and buttons

• Links have no accessible name link-name
• Buttons have no accessible name button-name
• Custom buttons, links, or menu items are missing accessible names aria-command-name

Color and display

• Text does not have enough contrast against its background color-contrast
• Zooming is disabled on mobile meta-viewport

Language and document

• The page does not declare its language html-has-lang
• The page declares an invalid language code html-lang-valid
• An element declares an invalid language code valid-lang
• The page is missing a title document-title

Structure, lists, and headings

• Lists contain elements that do not belong in a list list
• List items are used outside of a list listitem
• Definition lists are structured incorrectly definition-list
• Heading levels skip around heading-order
• Headings are empty empty-heading
• The page has no top-level heading page-has-heading-one
• Page content sits outside any landmark region region
• The page is missing a main landmark landmark-one-main
• There is no way to skip repeated navigation bypass

Frames

• Frames are missing titles frame-title
• Frames with focusable content are hidden from keyboard users inconsistently frame-focusable-content

Keyboard and focus

• Elements force a custom keyboard tab order tabindex
• Interactive controls are nested inside each other nested-interactive
• Scrollable areas cannot be reached with a keyboard scrollable-region-focusable
• Hidden elements can still receive keyboard focus aria-hidden-focus
• The entire page is hidden from assistive technology aria-hidden-body
• ARIA references point at duplicated ids duplicate-id-aria

ARIA attributes and roles

• Elements use ARIA attributes that are not allowed for their role aria-allowed-attr
• ARIA roles are missing their required attributes aria-required-attr
• ARIA composite widgets are missing required child roles aria-required-children
• ARIA roles are missing their required parent role aria-required-parent
• Elements use invalid ARIA roles aria-roles
• Elements use misspelled or nonexistent ARIA attributes aria-valid-attr
• ARIA attributes have invalid values aria-valid-attr-value

Obsolete elements

• Content uses the obsolete blink element blink
• Content uses the obsolete scrolling marquee element marquee

Want these checked on your own site? Request a free accessibility scan.