ARIA Review
A practical checklist for reviewing when ARIA labels help and when plain visible text is better. Founder and private tester use only.
This is not a professional accessibility audit
- ▸This is not a WCAG compliance audit
- ▸This is not a legal compliance approval
- ▸This is not a professional accessibility audit
- ▸This is a practical private-preview ARIA self-review only
The plain-language ARIA principle
- Use native HTML first — <button>, <a>, <input>, <label> already provide meaning
- Use visible text where possible — if a user can read it, a screen reader can too
- Use aria-label only when a control has no visible label
- Do not add ARIA just to look advanced — unnecessary ARIA can cause confusion
What to Review
Icon-only buttons need aria-label
- Buttons that show only an icon must have an aria-label that describes the action
- The mobile menu toggle button has aria-label='Toggle menu'
- Close buttons on panels have a clear aria-label or visible label text
- Any icon-only control that keyboard users can reach must have an accessible name
Buttons with visible text usually do not need aria-label
- Print buttons that say 'Print' do not need a redundant aria-label='Print'
- Copy buttons that say 'Copy' do not need an additional hidden label
- Navigation links with visible text do not need aria-label unless context is unclear
- Adding aria-label to an already-labeled button can confuse screen readers
Links should make sense from their text
- No link says only 'click here' or 'read more' without surrounding context
- Navigation links say where they go (e.g., 'Checklist Library' not just 'Library')
- Footer links are descriptive enough to understand without reading surrounding text
- Related links on review pages use the full page name as the link text
Expand/collapse buttons identify what opens
- Accordion buttons on Keyboard Navigation Review and Screen Reader Review show the card title
- Expand/collapse state is communicated visually with ChevronDown/ChevronUp icons
- Buttons do not just say 'expand' without naming what is being expanded
- Checklist expand buttons show the checklist title before opening
Warning and safety boxes use real text
- SafetyNotice boxes always contain full readable text — not aria-hidden content only
- Emergency warning panels include complete plain-text instructions
- No critical safety instruction is conveyed only through an aria-hidden element
- ARIA hidden is only used on purely decorative elements that carry no meaning
Avoid redundant noisy ARIA on semantic HTML
- Semantic HTML elements like <header>, <main>, <footer>, <nav> do not need role= attributes added
- Button elements do not need role='button' added — they are already buttons
- List items in <ul> or <ol> do not need role='listitem' added
- Adding redundant ARIA where native HTML already works can create confusion
Form fields use visible labels first
- Visible text labels are preferred over aria-label for form inputs
- When a visible label exists, aria-label should not duplicate or conflict with it
- Placeholder text alone is not a substitute for a visible label
- aria-label is a fallback — visible text is always the first choice
Priority Components and Routes to Test
Open each page and check icon-only button labels, link text, and whether ARIA is used appropriately.
Header — mobile menu button aria-label
/
Accessibility Display button — label
/accessibility-display-settings
Checklist Library — Copy/Print button labels
/checklists
Public Share Kit — copy buttons
/public-share-kit
Screen Reader Review — expandable cards
/screen-reader-review
Focus Order Review — links
/focus-order-review
Landmark Review — expandable cards
/landmark-review
Form Label Review — expandable cards
/form-label-review
Icon Button Review — full review
/icon-button-review
Help Finder — Find and copy buttons
/help-finder
Safety First — warning panels and buttons
/safety-first
"Stop and Fix" Signs
If any of these occur during testing, note the component for follow-up.
An icon-only button has no accessible name (no visible text and no aria-label)
Button meaning depends entirely on the icon — no text or label explains it
A link says only 'click here' with no surrounding context
A warning uses only color or icon with no text to explain it
ARIA is added redundantly to semantic HTML (e.g., role='button' on a <button>)
A hidden aria-label conflicts with or contradicts the visible text
What this page does not claim
- ✗No accessibility certification is granted
- ✗No legal compliance approval is given
- ✗No professional accessibility audit is performed
- ✗No screen reader certification is granted
ARIA Review Checklist
0/17Next Readiness Steps