No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


license Build Status Dependency Status

notes on interface accessibility.

Design Accessibility Guidelines


  • Color is not used as the sole method of conveying meaning or distinguishing visual elements.
  • Do not rely on visuals or sound to indicate important instructions for operating content.
    • Incorrect: Only uses sound to indicate success or only uses color to indicate success.
    • Correct: Uses both a sound or color as well as a label to indicate success.
  • Text meets AA (4.5:1) color contrast requirements.
  • Every call to action (such as buttons, form elements, etc.) must be meaningfully named.
    • Design as much as possible with visible labels.
    • If you must include a meaningful graphical interface element without a label, alt text is required to describe the function of this element.
  • Alternative text (alt text) is provided for meaningful content images and graphical interface elements.
    • Meaningful graphical interface elements can be things that aren't actually images, such as font icons, image-like unicode (e.g. emoji), or stylized CSS.
    • Meaningful content images require alt text.
    • Decorative images do not need alt text.
    • Alt Text Basics
    • Accessibility: Image Alt text best practices


  • Documentation Reference - Reference the ARIA Authoring Practices for known design patterns. These guidelines includes descriptive annotations for keyboard interaction, roles, and states.
    • Confirm that keyboard, touch, and mouse are supported to provide users multiple ways to interact with the interface.
    • E.g. In a list of accordions, the user can open an accordion with by touch, click, or keypress of enter. User can navigate to other accordions by pressing arrow up / down.
  • Aria-live- Annotate screen reader interactions for live content such as expected data values, instructions, or required fields. Examples available here: MDN - ARIA Live Regions
  • Focus Indication - Design Focus States to help users navigate and understand where they are.
    • Is "Skip to Content" available and first in the tab order?
    • Tab order is identified and properly managed on the page and in modal windows.
    • Video: a11ycasts Focus Ring!
  • Annotate using the appropriate HTML semantic elements
    • Buttons perform an action such as "Save" or “Apply.”
    • Links cause change of focus: Opens a page in a new tab or takes you to an anchor elsewhere on the page.
  • Indicate LandmarksGeneral Principles of Landmark Design
    • Always define the main content container if it exists.
    • Define other landmark regions in your wireframes wherever possible.
      • main landmark should have an h1 (can be placed in banner)
      • navigation landmarks should have an h2 (can be offscreen)
      • footer should have an h2 (can be offscreen)
      • Each aside landmark should have an h2 (can be offscreen)
      • Each region landmark should have an h2h6 (can be offscreen)

🎓 Information

📚 Reading & Documentation

Good reference for annotating specific components in your design.

📹 Videos

🛠 Tools

🎨 Color

🖥 Extensions

🤓 Command Line

  • aXe cli Command Line accessibility check