Skip to content

Accessibility Wiki

Web accessibilityWeb Document accessibilityDocuments

/

Overview WCAG cross-reference

Images & non-text content7

Images must have alternative textimg-alt Image buttons must have alternative textinput-image-alt Image-map areas must have alternative textarea-alt Meaningful SVGs must have an accessible namesvg-img-name Embedded objects must have a text alternativeobject-alt Elements with role="img" must have a namerole-img-name Alt text should not be a file name or duplicate adjacent textimg-redundant-alt

Forms16

Form inputs must have a labellabel-control Select elements must have a labelselect-name Buttons must have discernible textbutton-name Custom interactive widgets must have an accessible namewidget-name A form field should not have multiple label elementsform-field-multiple-labels Radio and checkbox groups need a fieldset and legendfieldset-legend autocomplete attributes must use valid tokensautocomplete-valid Accessible name must contain the visible label textlabel-content-name-mismatch Option groups must have a labeloptgroup-label Input buttons must have discernible textinput-button-name Changing a control must not auto-submit or navigateon-input-context-change Receiving focus must not trigger a change of contexton-focus-context-change Invalid fields must expose their error messageform-error-association Failed form validation must surface a visible or programmatic errorform-error-visible Don’t rely on title or placeholder as the only labellabel-title-only Authentication must not depend on a cognitive-function testaccessible-authentication

Structure & semantics11

Heading levels must not skipheading-order Headings must not be emptyempty-heading Page should contain a level-one headingpage-has-heading-one Page should have exactly one main landmarklandmark-one-main Landmarks of the same role must be distinguishablelandmark-unique Banner and contentinfo must be top-level landmarkslandmark-toplevel Lists must be structured correctlylist-structure Definition lists must be structured correctlydl-structure Data tables must have header cellstable-headers scope attributes must be valid and on header cellstable-scope-valid Long content should be organized with section headingssection-headings

ARIA13

role must be a valid, non-abstract ARIA rolearia-valid-role aria-* attributes must be valid names with valid valuesaria-valid-attr aria-* attributes must be allowed for the element’s rolearia-allowed-attr Roles must declare their required statesaria-required-attr Container roles must own the required child rolesaria-required-children Roles must be contained by their required context rolearia-required-parent aria-hidden elements must not contain focusable contentaria-hidden-focusable aria-hidden must not be on the document bodyaria-hidden-body role="presentation" must not be on focusable or labelled elementspresentation-role-conflict ARIA ID references must resolve unambiguouslyaria-idref-integrity Named-required elements should not be left without a nameorphan-aria-reference Live regions must be able to announce status messagesstatus-messages Interactive controls must not be nestednested-interactive

Document, language & navigation21

The page must declare its languagehtml-lang The page language must be a valid BCP-47 taghtml-lang-valid lang on inline content must be a valid tagvalid-lang The page must have a non-empty titledocument-title id attributes must be uniqueduplicate-id The viewport must allow zoomingmeta-viewport Page must offer a way to skip to contentbypass-blocks Avoid positive tabindex valuestabindex-positive accesskey values must be uniqueaccesskeys-unique Frames must have a descriptive titleframe-title Content must not lock the display orientationorientation-lock Audio-only content needs a transcriptaudio-transcript Scripted timers must not impose an unannounced time limitscripted-timeout Don’t auto-refresh or redirect the page on a timermeta-refresh Don’t use <blink> or <marquee>no-blink-marquee Don’t autoplay sound the user can’t stopno-autoplay-audio Prerecorded video should provide captionsmedia-captions Prerecorded video should provide an audio descriptionmedia-audio-description Prerecorded video needs an audio description or media alternativemedia-alternative Blocks of text should be easy to read (spacing, line length, justification)visual-presentation Body text should not require post-secondary reading abilityreading-level

Links & buttons5

Links must have discernible textlink-name Link text should describe its destinationlink-generic-text Anchors used as buttons need button semantics and keyboard supportanchor-is-button Buttons in forms should declare a typebutton-type Links with the same name should go to the same placeidentical-links-same-purpose

Color & contrast4

Text must meet minimum contrast (4.5:1)text-contrast Text should meet enhanced contrast (7:1)text-contrast-enhanced UI components and graphics need 3:1 contrastnon-text-contrast Don’t distinguish links by color aloneuse-of-color

Deeper checks14

Interactive elements need a high-quality accessible nameaccessible-name-quality Visual order should match DOM (focus) orderreading-order Pointer targets must be large enoughtarget-size Content must reflow without horizontal scrollingreflow Content must survive increased text spacingtext-spacing Links that open a new tab or window must warn userslink-opens-new-tab Scrollable regions must be keyboard-accessiblescrollable-region-focusable Table header cells must not be emptyempty-table-header Personal-data inputs should declare an autocomplete tokenmissing-autocomplete Abbreviations should have a title with their expanded formabbr-no-title Auto-playing animation must be pausableinfinite-animation Content must not flash more than 3 times per secondflash-rate Motion must respect prefers-reduced-motionrespects-reduced-motion Link text alone should describe the link’s purposelink-purpose-link-only

Component patterns (best practice)44

A tablist must have exactly one selected tabtab-selected-state A tab should point to its tabpaneltab-controls-panel A tabpanel should be labelled by its tabtabpanel-labelled Tabs should use roving tabindextablist-roving-tabindex Menus should expose one focusable item (roving tabindex)menu-roving-tabindex A submenu trigger must expose aria-expandedmenuitem-haspopup-expanded A dialog must have an accessible namedialog-name A modal dialog should declare aria-modaldialog-modal An open dialog must contain focusable contentdialog-focusable-content A disclosure trigger must be keyboard operabledisclosure-trigger-operable aria-expanded must match the controlled regiondisclosure-state-match A combobox must declare its popupcombobox-popup aria-activedescendant must resolve when a combobox is opencombobox-activedescendant A single-select listbox must not have multiple selected optionslistbox-single-select A tree should expose exactly one focusable itemtree-roving-tabindex A parent treeitem must expose aria-expandedtreeitem-expanded A range widget value must be within its min and maxrange-value-in-bounds A switch must have a valid aria-checkedswitch-state-valid Only one element should be the current pagesingle-current-page Groups of links should use list semanticslink-group-semantics A breadcrumb should be a list that marks the current pagebreadcrumb-structure A carousel needs controlscarousel-controls A tooltip must be referenced by the element it describestooltip-referenced A toolbar should use roving tabindextoolbar-roving-tabindex A radiogroup must have at most one checked radioradiogroup-single-selected A grid should use roving tabindexgrid-roving-tabindex A same-page link must point at a real targetskip-link-target-valid An element with an interactive role must be keyboard focusableinteractive-role-focusable role="application" should wrap a widget, not browse-mode contentrole-application-misuse A data table should have an accessible namedata-table-caption A slider/spinbutton must expose a coherent value rangeslider-spinbutton-range-complete aria-autocomplete on a combobox must be a valid tokencombobox-aria-autocomplete Accordion headers should sit inside a headingaccordion-heading-structure A feed must contain articles with position informationfeed-structure Keyboard focus must not be trappedkeyboard-trap Interactive elements must be reachable by keyboardkeyboard-reachable Tab order should follow the visual orderfocus-order Focused elements must show a visible focus indicatorfocus-visible-live The focus indicator must be large enough (2.4.13)focus-appearance Receiving focus must not trigger a page navigationon-focus-navigation A composite widget must respond to arrow-key navigationwidget-keyboard-operable A focused control must not be hidden by a sticky or fixed overlayfocus-not-obscured Closing a dialog must return focus to its openerdialog-focus-return Hover-revealed content must be hoverable and dismissablecontent-on-hover

No rules match.

Select elements must have a label

Rule select-name · Forms · impact critical · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters

A