Build on semantics
Accessibility means people with disabilities can perceive and operate your interface. The foundation is semantic HTML, which gives elements built in roles and behavior.
- Use a real button for actions and an anchor for navigation.
- Use headings in order to convey structure.
- Associate every form input with a label.
Names and roles
Assistive technology announces an element by its accessible name and role. Provide alt text for meaningful images and use aria attributes only when native semantics fall short.
Keyboard and contrast
- Every interactive control must be reachable and operable by keyboard.
- Keep a visible focus indicator so people can see where they are.
- Ensure sufficient color contrast for text against its background.
- Do not convey meaning by color alone, since some users cannot distinguish it.
- Test with a screen reader and by unplugging your mouse to catch real gaps.
Key idea
Start with semantic HTML, give elements clear names, and make everything keyboard operable before reaching for aria.