Accessibility
When you're designing or implementing a page, make sure to address the questions below. This ensures that every page is navigable by users of assistive technology.Does the page have a clear structure?
- Use heading tags
h1 - h6to create page structure. - Clear structure helps to navigate page faster and understand its contents.
- Each page should have only one
h1tag. - Don't skip heading levels.
Do all lists use appropriate component?
- This is necessary for screen readers to recognize it as a list and communicate it appropriately.
- This allows somebody using a screen reader to easily skip long lists.
- Use
olfor lists where order of item matters andulwhere it doesn't.
Do all images have alt tags?
- Alt tag should contain a short description of an image.
- Alt tag for decorative images can be left blank (you still need to include an alt tag, like this:
alt=""). - Don't include "image of" or a similar prefix inside the alt text. For example, write
alt="white cat"instead ofalt="image of a white cat".
Are links descriptive?
- Links should describe their exact action (for example, "Learn more about pricing" instead of "Learn more").
- For icon links (or if there's not enough space to write a descriptive label), include an
aria-label.
Can you navigate the page using a keyboard?
- All clickable elements (link, button, form element, navigation) should have a visible and consistent focus state.
- If there's a modal, the focus should shift to the modal when it's opened.
Tools
- WAVE — Extension for quick page scans.
- Web Accessibility Initiative — strategies, standards, and resources to make the Web accessible to people with disabilities.
- Contrast — Figma plugin for checking color contrast.
- A Complete Guide to Accessible Front-End Components — article by Smashing Magazine.
For a deeper dive, visit Accessible Design at Appfire in Confluence.