Skip to main content

Rules catalog

Explore the checks behind a scan.

A11y Scan combines axe-core with custom heuristic checks. Its configuration chooses the WCAG version, level, and enabled rules. The page and selected modes determine which checks apply; a listed rule does not run or find a problem on every page.

73

Custom checks: 72 page, 1 site crawl

69

axe-core rules eligible at WCAG 2.2 A and AA

72

axe-core rules eligible through AAA

A rule can flag a potential issue that needs human review. Automated results alone cannot establish WCAG conformance. Criterion links open the official W3C text.

Showing 145 of 145 rules.

Custom heuristic checks (73)

  • Decorative symbols without aria-hidden

    Symbol-only spans (›, •, →, etc.) exposed to screen readers.

    heuristic-decorative-symbols4.1.2 ↗
  • Icon fonts without text alternatives

    Font Awesome / Material icons rendered without aria-label or visible text.

    heuristic-icon-font-alt1.1.1 ↗
  • CSS pseudo-element content with meaning

    ::before/::after content carrying meaningful text screen readers may miss.

    heuristic-pseudo-content1.1.1 ↗
  • Visual order vs DOM order mismatch

    CSS flexbox/grid `order` or absolute positioning that diverges from DOM/tab order.

    heuristic-visual-dom-order-mismatch1.3.2 ↗
  • Small touch targets

    Interactive elements smaller than 24×24 px.

    heuristic-small-touch-target2.5.8 ↗
  • Scroll container without keyboard access

    Element with overflow:auto/scroll but no tabindex — keyboard users can't scroll.

    heuristic-scroll-no-keyboard2.1.1 ↗
  • Missing autocomplete on common inputs

    Email/name/phone/address fields without autocomplete attributes.

    heuristic-missing-autocomplete1.3.5 ↗
  • No visible focus indicator

    :focus styles that don't produce a visible change.

    heuristic-focus-indicator2.4.7 ↗
  • !important on text styling

    font-size/line-height/letter-spacing locked with !important blocks user spacing overrides.

    heuristic-important-text-styling1.4.12 ↗
  • Non-text contrast

    UI component borders/backgrounds with insufficient contrast against the surrounding background.

    heuristic-non-text-contrast1.4.11 ↗
  • Placeholder as the only label

    <input> with placeholder but no <label>, aria-label, or aria-labelledby.

    heuristic-placeholder-only-label1.3.1 ↗3.3.2 ↗
  • Visual headings without semantic markup

    Large/bold text styled like a heading but not in <h1>–<h6>.

    heuristic-visual-heading1.3.1 ↗2.4.6 ↗
  • Heading tags used for styling only

    <h1>–<h6> used inline or with smaller fonts than surrounding text.

    heuristic-heading-for-styling1.3.1 ↗
  • Div/span used as button

    Click handler on element with no role, no tabindex, no keyboard handler.

    heuristic-div-as-button2.1.1 ↗4.1.2 ↗
  • Focus outline removed without replacement

    :focus { outline: none/0 } without an alternative focus indicator.

    heuristic-focus-outline-none2.4.7 ↗
  • aria-hidden with focusable children

    Element with aria-hidden="true" containing focusable descendants — keyboard reaches them, screen readers don't.

    heuristic-aria-hidden-focusable4.1.2 ↗
  • Broken ARIA references

    aria-labelledby / aria-describedby / aria-controls / aria-owns pointing at non-existent IDs.

    heuristic-broken-aria-ref4.1.2 ↗
  • Focus obscured by sticky elements

    Focused element behind position:fixed/sticky overlay.

    heuristic-focus-obscured2.4.11 ↗
  • Inconsistent navigation order across pages

    Site crawl

    Site-crawl-only: <nav> link order changes between pages.

    heuristic-inconsistent-nav-order3.2.3 ↗
  • Password field without show-password toggle

    <input type="password"> without an adjacent reveal control.

    heuristic-show-password-toggle3.3.8 ↗
  • Breadcrumb validation

    Breadcrumb pattern without aria-label, missing aria-current="page", or not inside <nav>.

    heuristic-breadcrumb-validation1.3.1 ↗2.4.8 ↗
  • Icon-only button (label-in-name conflict)

    Button with aria-label but no visible text — voice-control users speaking the visual label can't activate it.

    heuristic-icon-only-button2.5.3 ↗
  • Auto-playing infinite animation

    CSS animation with iteration-count: infinite and no pause control. Also <marquee>.

    heuristic-auto-play-animation2.2.2 ↗
  • New-tab links without warning

    <a target="_blank"> without visible indicator or aria-label noting the new-tab behavior.

    heuristic-new-tab-no-warning3.2.5 ↗
  • Reflow at 320px

    Horizontal scroll required at 320px viewport width (only fires when innerWidth ≤ 320).

    heuristic-reflow-320px1.4.10 ↗
  • SPA route changes without focus management

    history.pushState / hashchange without programmatic focus move.

    heuristic-spa-route-focus4.1.3 ↗
  • prefers-reduced-motion not respected

    CSS animations without `@media (prefers-reduced-motion: reduce)`.

    heuristic-prefers-reduced-motion2.3.3 ↗
  • Target size with overlap

    Small interactive element (<24px) whose virtual 24px circle overlaps a neighbor.

    heuristic-target-size-overlap2.5.8 ↗
  • Suspicious alt text

    Alt text matching filename, containing "image of/photo of", or just the file extension.

    heuristic-suspicious-alt1.1.1 ↗
  • Visible content marked aria-hidden

    Element with aria-hidden="true" but visually rendered AND >3 chars of meaningful text.

    heuristic-visible-aria-hidden4.1.2 ↗
  • Content clipped by overflow:hidden

    Container with overflow:hidden whose scrollSize exceeds clientSize — content invisible and unreachable.

    heuristic-overflow-hidden-clipped1.4.10 ↗
  • Text spacing breaks layout

    Probe-injected WCAG 1.4.12 text-spacing styles cause overflow:hidden text containers to clip.

    heuristic-text-spacing-breakage1.4.12 ↗
  • Error message not associated

    Error-styled element near a form field with no aria-describedby / aria-errormessage link.

    heuristic-error-message-assoc3.3.1 ↗
  • opacity:0 without aria-hidden

    Element with opacity:0 + meaningful text but no aria-hidden — invisible to sighted, announced by AT.

    heuristic-opacity-zero-no-aria-hidden1.3.1 ↗
  • Z-index hides focusable content

    Focusable element occluded at its center by a different element — Tab reaches it but pointer can't.

    heuristic-z-index-hidden2.4.11 ↗
  • pointer-events:none used as disabled

    Interactive element with pointer-events:none but no `disabled` / `aria-disabled="true"`.

    heuristic-pointer-events-only-disable4.1.2 ↗
  • Modal lacks focus-trap prerequisites

    role="dialog"/"alertdialog" with aria-modal="true" but no aria-label/labelledby OR no focusable descendants.

    heuristic-modal-no-focus-trap2.1.2 ↗
  • Label-in-name mismatch

    aria-label that doesn't include the visible text — voice-control activation fails.

    heuristic-label-in-name-mismatch2.5.3 ↗
  • Text over CSS gradient

    Element has linear/radial/conic-gradient background AND own text content — contrast may fail at gradient stops.

    heuristic-text-over-gradient1.4.3 ↗
  • Color with alpha < 1

    Text color uses rgba()/hsla() with alpha < 1 — effective contrast depends on backdrop blend.

    heuristic-transparency-contrast1.4.3 ↗
  • Autoplay media without controls

    <video autoplay> / <audio autoplay> without `controls` and not muted.

    heuristic-autoplay-media-no-controls1.4.2 ↗2.2.2 ↗
  • Empty semantic element

    Heading / button / link / label / <th> with no text, no aria-label, no resolvable aria-labelledby, no img[alt].

    heuristic-empty-semantic4.1.2 ↗
  • Positive tabindex

    Any element with tabindex > 0 — reorders the natural focus sequence.

    heuristic-positive-tabindex2.4.3 ↗
  • Table likely used for layout

    <table> with no <th>, no <caption>, no role=presentation/none, AND block-level cell content.

    heuristic-layout-table1.3.1 ↗
  • Possible animated GIF without pause

    <img src="*.gif"> — animation can't be detected statically; flagged for manual review.

    heuristic-animated-gif-no-controls2.2.2 ↗
  • title attribute as only accessible name

    Interactive element relies solely on title= for its accessible name — unreliable on touch.

    heuristic-title-as-only-label4.1.2 ↗
  • Draggable without keyboard alternative

    [draggable="true"] without aria-grabbed + nearby move buttons or role=button + tabindex.

    heuristic-draggable-no-keyboard2.5.7 ↗
  • Page missing main landmark

    Page has no <main> and no [role="main"].

    heuristic-missing-landmarks1.3.1 ↗2.4.1 ↗
  • Anchor link target does not exist

    <a href="#fragment"> where no element with that id (and not name) exists on the page.

    heuristic-anchor-target-missing2.4.4 ↗
  • Required field without programmatic indicator

    <label> says "*" or "required" but the input has no `required` and no aria-required="true".

    heuristic-required-no-indicator3.3.2 ↗
  • Form validation indicated only by color

    Input aria-invalid="true" with no programmatic error text and no adjacent error-worded sibling.

    heuristic-validation-color-only1.4.1 ↗3.3.1 ↗
  • Dynamic-update region without aria-live

    Container with id/class matching `(status|error|message|notification|toast|alert)` but no aria-live and no role=status/alert/log.

    heuristic-live-region-missing4.1.3 ↗
  • Inline SVG without accessible name

    Inline <svg> with shape children (rect/circle/line/polygon/polyline/path/ellipse) and no <title>, aria-label, resolvable aria-labelledby, or <figcaption>.

    heuristic-svg-no-acc-name1.1.1 ↗
  • Color-only state indicator

    Small element (≤80×80px) with semantic color (red/green/amber) AND no text or only a decorative glyph AND no aria-label.

    heuristic-color-only-state1.4.1 ↗
  • iframe without title

    <iframe> without a `title` or `aria-label`.

    heuristic-iframe-no-title4.1.2 ↗
  • Modal-named element without dialog role

    Element class matches `(modal|dialog|drawer|popup|popover|lightbox)` and is visible AND lacks role="dialog"/"alertdialog".

    heuristic-modal-class-no-role4.1.2 ↗
  • Heading hierarchy issues

    Page missing <h1>, OR heading levels skip (h1→h3), OR multiple <h1> elements.

    heuristic-heading-order1.3.1 ↗2.4.6 ↗
  • Data table without header cells

    <table> with <td> rows but no <th> and no <caption>.

    heuristic-table-missing-headers1.3.1 ↗
  • Table header without scope attribute

    <th> without scope="col"/"row"/"colgroup"/"rowgroup" AND not referenced by any `headers=` attribute.

    heuristic-th-missing-scope1.3.1 ↗
  • Element looks clickable but isn't

    div/span/li/td/p with cursor:pointer AND no role/tabindex/keyboard handler AND not nested in real interactive element.

    heuristic-clickable-non-interactive2.1.1 ↗4.1.2 ↗
  • Decorative emoji not aria-hidden

    Standalone emoji (≤4 chars) in inline element (≤100×60px) without aria-hidden="true" and without aria-label.

    heuristic-decorative-emoji1.1.1 ↗
  • Visual list not using semantic markup

    Paragraph starts with bullet glyph (•/●/✓) outside <ul>/<ol>, OR container has 3+ child <div>s with shared class outside list semantics.

    heuristic-visual-list-not-semantic1.3.1 ↗
  • Disclosure trigger without aria-expanded

    Button/link/role=button with class or id matching disclosure keyword (accordion/disclosure/toggle/collapsible/expand) AND no aria-expanded.

    heuristic-disclosure-missing-aria4.1.2 ↗
  • Form lacks accessible name

    Multiple <form>s on the page; one with ≥2 controls but no aria-label/aria-labelledby/title.

    heuristic-form-no-name1.3.1 ↗2.4.6 ↗
  • Anchor without href

    <a> without href (and without legacy `name` and without role override). Not focusable, not announced as link.

    heuristic-anchor-no-href2.1.1 ↗4.1.2 ↗
  • onclick attribute on non-interactive element

    Element with literal onclick attribute that isn't button/a[href]/input/select/textarea/role=button.

    heuristic-onclick-on-generic2.1.1 ↗4.1.2 ↗
  • Anti-pattern href values

    <a href="javascript:..."> or <a href="#"> / <a href="#!"> placeholder.

    heuristic-anti-pattern-href2.1.1 ↗4.1.2 ↗

axe-core rules (72)

  • Active <area> elements must have alternative text

    Ensure <area> elements of image maps have alternative text

  • Elements must only use supported ARIA attributes

    Ensure an element's role supports its ARIA attributes

  • aria-braille attributes must have a non-braille equivalent

    Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent

    aria-braille-equivalent4.1.2 ↗Deque guidance ↗
  • ARIA commands must have an accessible name

    Ensure every ARIA button, link and menuitem has an accessible name

  • ARIA attributes must be used as specified for the element's role

    Ensure ARIA attributes are used as described in the specification of the element's role

    aria-conditional-attr4.1.2 ↗Deque guidance ↗
  • Deprecated ARIA roles must not be used

    Ensure elements do not use deprecated roles

    aria-deprecated-role4.1.2 ↗Deque guidance ↗
  • aria-hidden="true" must not be present on the document body

    Ensure aria-hidden="true" is not present on the document body.

  • ARIA hidden element must not be focusable or contain focusable elements

    Ensure aria-hidden elements are not focusable nor contain focusable elements

  • ARIA input fields must have an accessible name

    Ensure every ARIA input field has an accessible name

    aria-input-field-name4.1.2 ↗Deque guidance ↗
  • ARIA meter nodes must have an accessible name

    Ensure every ARIA meter node has an accessible name

  • ARIA progressbar nodes must have an accessible name

    Ensure every ARIA progressbar node has an accessible name

    aria-progressbar-name1.1.1 ↗Deque guidance ↗
  • Elements must only use permitted ARIA attributes

    Ensure ARIA attributes are not prohibited for an element's role

    aria-prohibited-attr4.1.2 ↗Deque guidance ↗
  • Required ARIA attributes must be provided

    Ensure elements with ARIA roles have all required ARIA attributes

    aria-required-attr4.1.2 ↗Deque guidance ↗
  • Certain ARIA roles must contain particular children

    Ensure elements with an ARIA role that require child roles contain them

    aria-required-children1.3.1 ↗Deque guidance ↗
  • Certain ARIA roles must be contained by particular parents

    Ensure elements with an ARIA role that require parent roles are contained by them

    aria-required-parent1.3.1 ↗Deque guidance ↗
  • aria-roledescription must be on elements with a semantic role

    Ensure aria-roledescription is only used on elements with an implicit or explicit role

    aria-roledescription4.1.2 ↗Deque guidance ↗
  • ARIA roles used must conform to valid values

    Ensure all elements with a role attribute use a valid value

  • ARIA toggle fields must have an accessible name

    Ensure every ARIA toggle field has an accessible name

    aria-toggle-field-name4.1.2 ↗Deque guidance ↗
  • ARIA tooltip nodes must have an accessible name

    Ensure every ARIA tooltip node has an accessible name

  • ARIA attributes must conform to valid values

    Ensure all ARIA attributes have valid values

    aria-valid-attr-value4.1.2 ↗Deque guidance ↗
  • ARIA attributes must conform to valid names

    Ensure attributes that begin with aria- are valid ARIA attributes

  • <audio> elements must have a captions track

    Ensure <audio> elements have captions

  • autocomplete attribute must be used correctly

    Ensure the autocomplete attribute is correct and suitable for the form field

    autocomplete-valid1.3.5 ↗Deque guidance ↗
  • Inline text spacing must be adjustable with custom stylesheets

    Ensure that text spacing set through style attributes can be adjusted with custom stylesheets

    avoid-inline-spacing1.4.12 ↗Deque guidance ↗
  • Buttons must have discernible text

    Ensure buttons have discernible text

  • Page must have 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

  • Elements must meet enhanced color contrast ratio thresholds

    Ensure the contrast between foreground and background colors meets WCAG 2 AAA enhanced contrast ratio thresholds

    color-contrast-enhanced1.4.6 ↗Deque guidance ↗
  • Elements must meet minimum color contrast ratio thresholds

    Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds

  • CSS Media queries must not lock display orientation

    Ensure content is not locked to any specific display orientation, and the content is operable in all display orientations

    css-orientation-lock1.3.4 ↗Deque guidance ↗
  • <dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements

    Ensure <dl> elements are structured correctly

  • <dt> and <dd> elements must be contained by a <dl>

    Ensure <dt> and <dd> elements are contained by a <dl>

  • Documents must have <title> element to aid in navigation

    Ensure each HTML document contains a non-empty <title> element

  • IDs used in ARIA and labels must be unique

    Ensure every id attribute value used in ARIA and in labels is unique

  • Form field must not have multiple label elements

    Ensure form field does not have multiple label elements

    form-field-multiple-labels3.3.2 ↗Deque guidance ↗
  • Frames with focusable content must not have tabindex=-1

    Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1

    frame-focusable-content2.1.1 ↗Deque guidance ↗
  • Frames must have a unique title attribute

    Ensure <iframe> and <frame> elements contain a unique title attribute

    frame-title-unique4.1.2 ↗Deque guidance ↗
  • Frames must have an accessible name

    Ensure <iframe> and <frame> elements have an accessible name

  • <html> element must have a lang attribute

    Ensure every HTML document has a lang attribute

  • <html> element must have a valid value for the lang attribute

    Ensure the lang attribute of the <html> element has a valid value

  • HTML elements with lang and xml:lang must have the same base language

    Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page

    html-xml-lang-mismatch3.1.1 ↗Deque guidance ↗
  • Images must have alternative text

    Ensure <img> elements have alternative text or a role of none or presentation

  • Input buttons must have discernible text

    Ensure input buttons have discernible text

  • Image buttons must have alternative text

    Ensure <input type="image"> elements have alternative text

  • Elements must have their visible text as part of their accessible name

    Ensure that elements labelled through their content must have their visible text as part of their accessible name

    label-content-name-mismatch2.5.3 ↗Deque guidance ↗
  • Form elements must have labels

    Ensure every form element has a label

  • <ul> and <ol> must only directly contain <li>, <script> or <template> elements

    Ensure that lists are structured correctly

  • <li> elements must be contained in a <ul> or <ol>

    Ensure <li> elements are used semantically

  • <marquee> elements are deprecated and must not be used

    Ensure <marquee> elements are not used

  • Delayed refresh must not be used

    Ensure <meta http-equiv="refresh"> is not used for delayed refresh

    meta-refresh-no-exceptions2.2.4 ↗3.2.5 ↗Deque guidance ↗
  • Delayed refresh under 20 hours must not be used

    Ensure <meta http-equiv="refresh"> is not used for delayed refresh

  • Zooming and scaling must not be disabled

    Ensure <meta name="viewport"> does not disable text scaling and zooming

  • 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

    nested-interactive4.1.2 ↗Deque guidance ↗
  • <video> or <audio> elements must not play automatically

    Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio

  • <object> elements must have alternative text

    Ensure <object> elements have alternative text

  • Styled <p> elements must not be used as headings

    Ensure bold, italic text and font-size is not used to style <p> elements as a heading

  • [role="img"] elements must have alternative text

    Ensure [role="img"] elements have alternative text

  • Scrollable region must have keyboard access

    Ensure elements that have scrollable content are accessible by keyboard in Safari

    scrollable-region-focusable2.1.1 ↗2.1.3 ↗Deque guidance ↗
  • Select element must have an accessible name

    Ensure select element has an accessible name

  • Server-side image maps must not be used

    Ensure that server-side image maps are not used

    server-side-image-map2.1.1 ↗Deque guidance ↗
  • Summary elements must have discernible text

    Ensure summary elements have discernible text

  • <svg> elements with an img role must have alternative text

    Ensure <svg> elements with an img, graphics-document or graphics-symbol role have accessible text

  • Data or header cells must not be used to give caption to a data table.

    Ensure that tables with a caption use the <caption> element.

    table-fake-caption1.3.1 ↗Deque guidance ↗
  • All touch targets must be 24px large, or leave sufficient space

    Ensure touch targets have sufficient size and space

  • Non-empty <td> elements in larger <table> must have an associated table header

    Ensure that each non-empty data cell in a <table> larger than 3 by 3 has one or more table headers

  • Table cell headers attributes must refer to other <th> elements in the same table

    Ensure that each cell in a table that uses the headers attribute refers only to other <th> elements in that table

  • Table headers in a data table must refer to data cells

    Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe

  • lang attribute must have a valid value

    Ensure lang attributes have valid values

  • <video> elements must have captions

    Ensure <video> elements have captions