Accessibility Checklist: ARIA
Bobby Bailey
How to Use ARIA for Better Accessibility
Accessible Rich Internet Applications (ARIA) help improve the usability of web content for people using assistive technologies. However, improper use can create accessibility barriers. Use this checklist to ensure ARIA is implemented correctly.
10-Point ARIA Accessibility Checklist
Number one: Use ARIA only when necessary
ARIA should supplement HTML, not replace it. Use native HTML elements first before adding ARIA attributes.
Number two: Ensure ARIA roles match the element’s purpose
Use roles like button, dialog, or alert correctly. Avoid assigning roles that change the element’s native behavior.
Number three: Labels and descriptions are correctly assigned
Use aria-label or aria-labelledby for clear labels. Ensure descriptions provide meaningful context.
Number four: ARIA live regions provide useful updates
Use aria-live to announce important changes. Ensure updates do not disrupt the user experience.
Number five: Keyboard focus remains logical
Maintain predictable focus order. Ensure ARIA components are fully navigable by keyboard.
Number six: Custom components support keyboard interaction
Elements with role="button", role="menu", or similar must support keyboard actions. Implement Enter, Space, and Arrow key interactions where needed.
Number seven: ARIA states and properties update dynamically
Attributes like aria-expanded, aria-hidden, and aria-disabled must change in real time. Ensure updates reflect the element's actual state.
Number eight: Avoid using ARIA on non-interactive elements
Roles such as button, checkbox, or menu should not be applied to <div> or <span> unless JavaScript makes them interactive.
Number nine: Do not override native semantics
Avoid unnecessary roles like role="textbox" on an <input type="text">. Use semantic HTML whenever possible.
Number ten: Test with a screen reader
Use NVDA, JAWS, VoiceOver, or TalkBack. Verify that ARIA attributes improve, not hinder, the experience.