Community Meeting (September 26, 2018): Documenting Accessibility in Wireframes


Presenter: Rob Carr

The session will engage you in a conversation about what sort of accessibility attributes we can document in this early design phase. We will work with sample wireframes and develop a common language to use to pass along to developers so that accessibility remains at the forefront of design and implementation.


Video Recording

  • Need to integrate accessibility from the start
  • The annotation language used to describe the a11y in the wireframes should fit your community
    • provide a glossary in a separate document to define the terms in the notes
      • e.g., "skip nav" is noted in the wireframe; the glossary defines what a "skip nav" is and its function.
  • Examples of things to describe
    • tab order
    • controls for interactive widgets (e.g. carousels require play/pause and etc, and individual panels may have links and other interactive elements within that need to be accessible)
    • labels
    • skip links
  • Can incorporate some of the information in a style guide. For example that headings are actually marked up in proper heading tags.
  • When using keyboard shortcuts (e.g. modifier keys) keep in consideration the keys used by ATs
    • also make sure that the keys used are discoverable by users (e.g. provide instructions)