Introduction

This repository empowers Designers, Auditors and Developers to collaborate within Figma and streamline the process of creating born accessible interactives, webpages and components. Designers can reference this repository for accessibility guidance during their design process. Auditors may use this repository to help identify potential accessibility issues in the design phase and prepare annotations based on accessibility requirements, specifications, and best practices for a seamless developer hand-off. Developers may use the repository to use the auditor annotations text and instructions to understand and convey requirements to developers.

The repository is a comprehensive resource of applicable WCAG requirements and examples. The repository also offers an interactive checklist for Designers, Auditors and Developers to use during thier individual processes. Resources are listed throughout the repository as well as in the resources section to assist in further exploration of concepts.

This repository references WCAG 2.1 AA success criteria requirements.

Navigating the Accessibility Annotation Repository

The Accessibility Annotation Repository is a dedicated space designed to enhance web accessibility through structured and focused auditing. The repository is organized into specific sections that align with key aspects of the Web Content Accessibility Guidelines (WCAG).

The repository is divided into the following sections:

General

Includes key accessibility topics such as:

  • Structure
  • Color
  • Non-text Content
  • Interactives
  • Screen Magnification

Components Section

Our Components section features an alphabetical list of components familiar to the HHMI development process, often requiring extra accessibility considerations. Each component page includes:

  • WCAG Success Criteria Requirements and Example(s)
  • Role, Property, State, and Tabindex Attribute Tables
  • Accessibility Considerations for Designers
  • How to Test and Annotate Section for Auditors
  • Accessibility Considerations for Developers
  • Component Specific Resources

Resources Section

Resources Area for additional support and exploration

  • General Accessibility
  • Components
  • Designer
  • Developer
  • Auditor & Testing

This structure makes the repository an indispensable resource for designers and developers, bridging the gap between accessible design intention and practical implementation.

Roles and Responsibilities

Designer

  • Design Accessibility Reference & Checklist

    Regularly check the repository and streamline your design with our accessibility checklist.

  • Apply Feedback & Guidelines

    Use feedback and best practices to address accessibility issues.

  • Collaborate & Refine

    Engage with auditors and continuously refine designs based on insights.

  • Early Accessibility Focus

    Integrate accessibility considerations from the start of your design process.

  • Smooth Hand-off

    Prepare for a seamless developer hand-off by embedding accessibility throughout.

Auditor

  • Understand Accessibility Requirements

    Gain a comprehensive understanding of WCAG guidelines to effectively communicate with designers and developers.

  • Access Accessibility Checklist

    Utilize the checklist to streamline your auditing process and ensure designs meet WCAG 2.1 AA requirements.

  • Identify and Flag Accessibility Failures

    Review Figma design boards to spot accessibility issues, flagging them for designer attention.

  • Collaborate with Designers & Validate Fixes

    Work closely with designers to address and fix issues during the design phase. Validate that all accessibility concerns are resolved before handoff.

  • Prepare for Developer Handoff

    Ensure designs are annotated with clear, comprehensive instructions for development, including component-specific requirements.

  • Create Handoff Document

    Draft a comprehensive handoff document detailing user flow, structure, functionality, and accessibility requirements for smooth developer integration.

Developer

  • Access Annotated Designs

    Use the repository to understand design annotations that have been audited for accessibility compliance.

  • Understand Accessibility Requirements

    Familiarize yourself with accessibility annotations highlighting specific WCAG requirements and recommendations.

  • Implement Accessible Features

    Develop features and functionalities in line with audited designs and accessibility guidelines.

  • Access Accessibility Checklist

    Utilize the Accessibility Checklist to guide your accessible development process.

  • Review Handoff Documents

    Ensure you review the content lead's and auditor's handoff documents for comprehensive guidance.

  • Collaborate & Validate

    Collaborate with designers and auditors for clarification on accessibility annotations. Perform your own accessibility tests and iterate based on feedback.

Disclaimer

All original content and assets in this repository are developed under the ownership of the Howard Hughes Medical Institute (HHMI) and are provided in accordance with the applicable project agreements. Usage of these assets must comply with the following terms:

  • BioInteractive Resources: Some resources within this repository may be licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International license. No rights are granted to use HHMI’s or BioInteractive’s names, logos, or trademarks independent from this content or in any derivative works. Any use of this content must be in accordance with the terms of this license. For more details, please refer to the Instructions and Facts document.
  • Third-Party Assets: Wherever possible, third-party assets used in this repository should be sourced from the public domain or must be compatible with Creative Commons licenses, such as CC BY-NC-SA. All third-party assets must be appropriately cited and attributed. Any third-party code, libraries, or assets must be vetted with HHMI and comply with accessibility standards.
  • Repository Use: Any GitHub or other version control repositories related to this project must remain private unless HHMI gives explicit written approval to make them public. Any public-facing repository must include the appropriate copyright ownership information, affix the open-source license selected by HHMI, and remove all HHMI-owned assets and references.
  • Accessibility and Open Source Libraries: Developers are encouraged to use open-source and accessible code libraries (e.g., Bootstrap, Deque University) in line with the project's accessibility goals. All libraries used must meet accessibility compliance standards and align with the terms of the project agreement.

If you wish to use these resources for purposes beyond those permitted by the terms of use, please consult the HHMI Terms of Use. For further inquiries or to request permissions, contact us.