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.
Permalink
Failed to load latest commit information.
LICENSE
README.md

README.md

ui-accessibility

license Build Status Dependency Status

notes on interface accessibility.

Design Accessibility Guidelines

Design

  • 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

Annotations

  • 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