Misused aria attribute on a visible focusable element

Description

Rule ID: misused-aria-on-focusable-element

This rule determines if a given focusable element has defined aria-hidden="true" or role="presentation".

Purpose

Using aria-hidden="true" or role="presentation" on a visible, focusable element will result in some users focusing on nothing.

How to fix it

Ensure attributes aria-hidden="true" or role="presentation" aren’t defined on focusable element. The following elements are considered focusable (CSS selectors):

  '[tabindex]',
  '[contenteditable=""]',
  '[contenteditable="true"]',
  'a[href]',
  'area[href]',
  'audio',
  'button',
  'embed',
  'form',
  'iframe',
  'input:not([type="hidden"])',
  'label',
  'link',
  'object',
  'select',
  'summary',
  'textarea',
  'video'

Standard

Accessibility, Best Practice