> ## Documentation Index > Fetch the complete documentation index at: https://mintlify.com/millionco/react-doctor/llms.txt > Use this file to discover all available pages before exploring further. # Accessibility Rules > jsx-a11y rules for building accessible React interfaces React Doctor includes 15 accessibility rules from the `jsx-a11y` plugin to help you build interfaces that work for everyone. ## Why Accessibility Matters * **15% of the world** has some form of disability * **Legal requirement** in many jurisdictions (ADA, Section 508, WCAG) * **Better UX** for everyone (keyboard nav, screen readers, low vision) * **SEO benefits** from semantic HTML ## Rules **Severity:** error\ **Rule ID:** `jsx-a11y/alt-text` Requires `alt` attribute on `` elements. Screen readers use alt text to describe images. **Bad:** ```tsx theme={null} ``` **Good:** ```tsx theme={null} Company logo // Decorative images should have empty alt ``` **Severity:** warn\ **Rule ID:** `jsx-a11y/anchor-is-valid` Ensures `` elements have valid `href` attributes. Links without hrefs should be buttons. **Bad:** ```tsx theme={null} Click me Click me ``` **Good:** ```tsx theme={null} Go to page ``` **Severity:** warn\ **Rule ID:** `jsx-a11y/click-events-have-key-events` Requires keyboard event handlers alongside click handlers for accessibility. **Bad:** ```tsx theme={null}
Click me
``` **Good:** ```tsx theme={null} // Use semantic button instead // Or add keyboard handler
e.key === 'Enter' && handleClick()} role="button" tabIndex={0} > Click me
``` **Severity:** warn\ **Rule ID:** `jsx-a11y/no-static-element-interactions` Prevents adding click/keyboard handlers to non-interactive elements without proper ARIA roles. **Bad:** ```tsx theme={null}
Clickable
``` **Good:** ```tsx theme={null} // Or with role
Clickable
``` **Severity:** warn\ **Rule ID:** `jsx-a11y/no-noninteractive-element-interactions` Prevents adding interactions to non-interactive elements like `
  • `, `
    `, etc. **Bad:** ```tsx theme={null}
  • Item
    • ``` **Good:** ```tsx theme={null}
    • ``` **Severity:** error\ **Rule ID:** `jsx-a11y/role-has-required-aria-props` Ensures ARIA roles have all required ARIA attributes. **Bad:** ```tsx theme={null}
    ``` **Good:** ```tsx theme={null}
    ``` **Severity:** warn\ **Rule ID:** `jsx-a11y/no-autofocus` Discourages `autoFocus` as it can be disorienting for screen reader users. **Bad:** ```tsx theme={null} ``` **Good:** ```tsx theme={null} // Let users focus naturally, or use programmatic focus const inputRef = useRef(); useEffect(() => { inputRef.current?.focus(); }, []); ``` **Severity:** warn\ **Rule ID:** `jsx-a11y/heading-has-content` Requires heading elements to have content for screen readers. **Bad:** ```tsx theme={null}

    ``` **Good:** ```tsx theme={null}

    Page Title

    {dynamicTitle}

    ```     **Severity:** warn\ **Rule ID:** `jsx-a11y/html-has-lang` Requires `` element to have `lang` attribute for screen readers. **Bad:** ```html theme={null} ``` **Good:** ```html theme={null} ``` **Severity:** warn\ **Rule ID:** `jsx-a11y/no-redundant-roles` Prevents specifying redundant ARIA roles that are implicit. **Bad:** ```tsx theme={null} ``` **Good:** ```tsx theme={null} ``` **Severity:** warn\ **Rule ID:** `jsx-a11y/scope` Ensures `scope` attribute is only used on `` elements in tables. **Bad:** ```tsx theme={null} Header ``` **Good:** ```tsx theme={null} Header ``` **Severity:** warn\ **Rule ID:** `jsx-a11y/tabindex-no-positive` Prevents positive `tabIndex` values which disrupt natural tab order. **Bad:** ```tsx theme={null}
    First
    Second
    ``` **Good:** ```tsx theme={null}
    Focusable
    Not in tab order
    ```     **Severity:** warn\ **Rule ID:** `jsx-a11y/label-has-associated-control` Requires ` **Severity:** error\ **Rule ID:** `jsx-a11y/no-distracting-elements` Prevents using distracting elements like `` and ``. **Bad:** ```tsx theme={null} Scrolling text Blinking text ``` **Good:** ```tsx theme={null}
    Scrolling text
    ``` **Severity:** warn\ **Rule ID:** `jsx-a11y/iframe-has-title` Requires `