About MagentaA11y

MagentaA11y is a tool built to simplify the process of accessibility testing.

We wanted to build an intuitive way for product teams to define “done” in a way that ensures accessible experiences work for everyone.

It uses Jekyll with a custom theme as a CMS and relies on markdown for entry creation.

Disclaimer

  • This is not a comprehensive list of all of the WCAG success criteria or techniques required to become WCAG compliant and should not be used as such.
  • Adherence to this list also does not guarantee that a digital asset will be free from accessibility issues or complaints.

Using MagentaA11y

Product owners, designers, developers or testers can use the checklist builder to collect testing instructions for web or native app components.

These testing criteria are displayed in markdown format for easy copying/pasting into project management tools like Jira.

Testing instructions includes:

  • How to test with keyboard
  • How to test with screen reader
  • How to test with a screen reader on a mobile device
  • Link to the full entry

Each entry contains:

  • Video demos with recommended screen reader browser pairings
  • Code examples
  • Developer notes
  • Links to official WCAG and WAI-ARIA documentation

Contribute

MagentaA11y is built and maintained by the T-Mobile Accessibility Resource Center.

Here are some ways to contribute:

  • Add a concise demo video using a screen reader that’s not yet covered.
  • Add an entry for a component that is not included.
  • Fix a typo or edit for consistent language.

JSON Integration

You can integrate MagentaA11y acceptance criteria into your own tools using these JSON feeds:

MagentaA11y.com accessibility

MagentaA11y holds itself accountable to following a layered testing strategy.

CI process

Lighthouse CI triggers warnings for performance and SEO and errors for accessibility on key pages and rendered templates.

{
  "ci": {
    "collect": {
      "url": [
        "https://www.magentaa11y.com/",
        "https://www.magentaa11y.com/web/",
        "https://www.magentaa11y.com/native/",
        "https://www.magentaa11y.com/checklist-web/button/",
        "https://www.magentaa11y.com/demos/button/",
        "https://www.magentaa11y.com/checklist-web/radio/",
        "https://www.magentaa11y.com/demos/radio/",
        "https://www.magentaa11y.com/checklist-native/button/",
        "https://www.magentaa11y.com/demos/nav/",
        "https://www.magentaa11y.com/how-to-test/",
        "https://www.magentaa11y.com/demos/basic-accessible-webpage/"
      ],
      "numberOfRuns": 1
    },
    "assert": {
      "assertions": {
        "categories:seo": ["warn", {"minScore": 0.9}],
        "categories:performance": ["warn", {"minScore": 0.8}],
        "categories:accessibility": ["error", {"minScore": 1}]
      }
    }
  }
}

Results tracking

Results are uploaded to a Heroku based LHCI server for tracking

  • Installation note: to deploy, use git push heroku HEAD:main

Local installation instructions

A11yEngineer is a Jekyll based site hosted by Github Pages. Follow Github’s instructions for installing locally.

License

MagentaA11y is open sourced by T-Mobile and released under the Apache 2.0 License.