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 - h6 to create page structure.
  • Clear structure helps to navigate page faster and understand its contents.
  • Each page should have only one h1 tag.
  • Don't skip heading levels.
    • Learn more about heading structure.

    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 ol for lists where order of item matters and ul where it doesn't.
    • Learn more about lists.

    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 of alt="image of a white cat".
    • Learn more about writing alt text.

    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.
    • Learn more about writing links.

    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.
    • Learn more about keyboard accessibility.
For a deeper dive, visit Accessible Design at Appfire in Confluence.