Accessibility Annotations for Wireframes and Mockups

The following are notes gathered from the Dec 3rd design crit where a Coding to Learn and Create wireframe was shown, and there was a discussion about annotating Accessibility information into design artifacts. Goal is to develop a system that the IDRC can employ to help communicate the accessibility design.


  • Some annotations look like speech bubbles that can be confused with interface elements.
    • Suggest using a different visual appearance for these. Perhaps a different stroke or colour clearly not part of the interface.
    • Perhaps use a line connector instead of the bubble's arrow.
  • How would we annotate non-visual elements on a visual wireframe? For example, work on PhET simulations in the past non-visual elements for accessibility interaction for things like alternatives to mouse interaction (such as buttons to control an object instead of a mouse drag), scene summaries, dynamic landmarks, and interaction outcomes.
    • Similarly - how would we annotate sonification or haptic feedback in a visual design?
  • Is there a way to see annotations for a specific element?
  • When is it a good time to think about accessibility design in visual design process? The concern is that as the wireframe changes, labels, descriptions, and aria markup will change as well (adding to the amount of information that needs to be maintained).
    • depends on the project. Good to think about accessibility of the core interactions early.
    • some accessibility information can be annotated later as they are rather simple to do like labels and descriptions.