Accessibility Patterns for the Web

This site contains all working examples for the book eBay MIND Patterns - Accessibility Patterns for the Web.


Disclaimer

The MIND Patterns are not to be confused with a visual design system, CSS framework or JavaScript library. Our patterns are instead intended to complement those systems by acting as foundational accessibility guidance.

These examples will assist the frontend developer with accessibility, but the source code is not considered to be final, production-ready code. Most examples leave additional steps to complete; typically any CSS styling and JavaScript behaviour that is not specifically related to core functionality or accessibility.

Each pattern follows a progressive enhancement strategy (where applicable), aims to conform to WCAG 2.2 Level AA, and for the most part builds on from the excellent guidance set out in the WCAG Authoring Practices 1.1.


Testing

Accessibility testing is performed with latest versions of:


JavaScript & CSS Utilities

Much of the common accessibility logic in our examples comes courtesy of MakeupJS - a suite of vanilla, headless UI JavaScript modules which have been created specifically for building accessible user interfaces. For example, implementing a keyboard roving tab index or dialog window modality.

Base styles come courtesy of eBay Skin. Skin is decoupled from the JavaScript layer, meaning the CSS is agnostic of the frontend framework. Our examples leverage Skin's custom property API, allowing a custom "theme" for our site.


Updated: Jun 9th, 2023