Fixes by subject · 63 techniques
How to Fix ARIA and Custom Widgets
ARIA changes what gets announced and adds no behavior of its own. Used well it makes a custom widget work. Used badly it lies with total confidence.
The first rule of ARIA is not to use it. Where a native HTML element already gives you the semantics and the behavior, use that instead. A real button brings role, focus, keyboard activation and state for free, and none of those can drift out of step with each other. Home pages that use ARIA average more detected errors than home pages that do not, 59 against 42. That says as much about the kind of page that reaches for ARIA as it does about ARIA, and it is still worth knowing before you start. Automated testing will not catch you here either. The rules behind 4.1.2 test that a control has a name rather than that the name is right, so a button called button passes every one of them. Where HTML genuinely has no element for what you are building, the techniques below are the documented ways to do it. They cover roles, accessible names, widget state, page regions, and announcing changes through live regions.
All 63 techniques
They run in technique order, and each one carries a tag. Sufficient techniques satisfy a rule. Advisory ones help without being required. Failures document a specific way of getting it wrong. None of them is mandatory, because W3C publishes techniques as documented ways of meeting a criterion rather than the only ways, so your own approach conforms as long as it meets the criterion.
- H44Sufficient1.1.1, 1.3.1, 3.3.2, 4.1.2Attach a real label to every form field
- H91Sufficient4.1.2, 2.1.1Use native HTML controls instead of rebuilt ones
- ARIA6Sufficient1.1.1Name icon-only controls with aria-label
- ARIA16Sufficient4.1.2, 1.3.1Name controls from visible text with aria-labelledby
- F59Failure4.1.2Do not build interactive controls from bare divs
- ARIA22Sufficient4.1.3Announce status messages with role=status
- H64Sufficient4.1.2, 2.4.1Give every iframe a descriptive title
- H65Sufficient1.1.1, 1.3.1, 4.1.2Label form fields when a visible label will not fit
- H88Sufficient4.1.2Use HTML the way the spec intends
- ARIA1Sufficient1.3.1, 3.3.2Attach help text to inputs with aria-describedby
- ARIA2Advisory1.3.1, 3.3.1, 3.3.2Tell screen readers a field is required
- ARIA4Sufficient4.1.2Give custom widgets a real ARIA role
- ARIA5Sufficient4.1.2Expose widget state with ARIA attributes
- ARIA7Sufficient2.4.4Build clear link names from nearby headings
- ARIA8Sufficient2.4.4, 2.4.9Fix vague link text with aria-label
- ARIA9Sufficient1.1.1, 3.3.2Assemble one label from several text pieces
- ARIA10Sufficient1.1.1Name images and charts with aria-labelledby
- ARIA11Sufficient1.3.1, 1.3.6, 2.4.1Add landmarks so users can skip around
- ARIA12Sufficient1.3.1Use role=heading when h1-h6 is impossible
- ARIA13Sufficient1.3.1Name repeated landmarks so they are distinguishable
- ARIA14Sufficient4.1.2Label icon-only controls with aria-label
- ARIA15Sufficient1.1.1Link complex images to longer descriptions
- ARIA17Sufficient1.3.1, 3.3.2Group related form fields with ARIA roles
- ARIA18Sufficient3.3.1, 3.3.3, 4.1.3Raise blocking errors in an alert dialog
- ARIA19Sufficient3.3.1, 4.1.3Announce form errors with role=alert
- ARIA20Sufficient1.3.1Mark leftover page areas with role=region
- ARIA21Sufficient3.3.1Flag invalid fields with aria-invalid
- ARIA23Sufficient4.1.3Announce chat and feed updates with role=log
- ARIA24Sufficient1.3.1Give meaningful font icons role=img
- ARIA25Sufficient4.1.3Announce progress bar updates with a live region
- ARIA26Sufficient1.3.1, 2.4.8Mark the current page with aria-current
- ARIA27Sufficient4.1.3Announce progress with the ariaNotify API
- C7Sufficient2.4.4, 2.4.9Add hidden text to clarify short links
- SCR14Sufficient2.2.4, 4.1.3Let users switch nonessential alerts off
- SCR38AdvisoryKeep a conforming fallback for a scripted page
- SVR1Sufficient3.2.5Redirect on the server, not with a timed refresh
- SVR2AdvisoryUse .htaccess to route to the conforming version
- SVR3AdvisoryGate non-conforming content by HTTP referer
- F15Failure4.1.2Do not build controls outside the accessibility API
- F20Failure1.1.1, 4.1.2Do not let text alternatives fall out of date
- F42Failure1.3.1, 2.1.1, 4.1.2Do not emulate links with scripted spans
- F68Failure4.1.2Do not ship form controls without accessible names
- F79Failure4.1.2Do not simulate focus without moving real focus
- F86Failure4.1.2Do not leave parts of a split field nameless
- F89Failure2.4.4, 2.4.9, 4.1.2Do not leave image-only links without a name
- F96Failure2.5.3Do not let accessible names contradict visible labels
- F103Failure4.1.3Do not post status messages without a role
- F111Failure1.3.1, 2.5.3, 4.1.2Do not leave labeled controls without a name
- G10Sufficient4.1.2Build custom components on accessibility-supported tech
- G83Sufficient3.3.1, 3.3.2, 4.1.3Tell users which required fields they missed
- G84Sufficient3.3.1, 3.3.3, 4.1.3Explain when input is not an allowed value
- G85Sufficient3.3.1, 3.3.3, 4.1.3Explain format errors and show the fix
- G108Sufficient4.1.2Expose name, role, and changes through markup
- G135Sufficient4.1.2Expose controls through the platform accessibility API
- G162Sufficient1.3.1, 2.5.3, 3.3.2Position labels where users expect them
- G177Sufficient3.3.3, 4.1.3Suggest corrections when input fails validation
- G193Sufficient3.3.5, 4.1.3Provide an accessible help assistant on the page
- G194Sufficient3.3.5, 4.1.3Spell-check text input and offer fixes
- G199Sufficient3.3.1, 3.3.3, 3.3.4, 4.1.3Confirm success when a submission works
- G208Sufficient2.5.3Include the visible label in the accessible name
- G211Sufficient2.5.3Match accessible names to visible labels exactly
- PDF10Sufficient1.3.1, 3.3.2, 4.1.2Label every field in your PDF forms
- PDF12Sufficient1.3.1, 4.1.2Give PDF form fields a name, role, and value
More on ARIA and custom widgets
The other 13 subjects
Knowing the technique is not the same as knowing you need it.
The free scan checks 10 pages in a real browser and maps every machine-checkable failure to the exact fix guide that clears it.