# Introduction

This book will assist frontend developers in building accessible e-commerce websites and components.

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; which typically will be any CSS styling and JavaScript behaviour that is not specifically related to core functionality or accessibility.

This book is a living, work-in-progress document. 

### TL;DR?

Don't feel like reading? You can, if you wish, dive straight into the [working examples](http://ebay.github.io/mindpatterns/).

### Pattern Philosophy

Each pattern follows a [progressive enhancement](http://en.wikipedia.org/wiki/Progressive_enhancement) strategy (where applicable), aims to conform to [WCAG 2.2](https://www.w3.org/TR/WCAG22/) Level AA, and for the most part builds on from the excellent guidance set out in the [ARIA Authoring Practices Guide (APG)](https://www.w3.org/WAI/ARIA/apg/).

### Pattern Organisation

There are four main groups of component-related patterns:

1. [**M**essaging](https://ebay.gitbook.io/mindpatterns/messaging)
2. [**I**nput](https://ebay.gitbook.io/mindpatterns/input)
3. [**N**avigation](https://ebay.gitbook.io/mindpatterns/navigation)
4. [**D**isclosure](https://ebay.gitbook.io/mindpatterns/disclosure)

These groups spell out the **MIND** acronym. If you ever wonder what group does a pattern fall into - then use your MIND!

Three other important groups complement the above patterns:

* [Structure](https://ebay.gitbook.io/mindpatterns/structure)
* [Anti-Patterns](https://ebay.gitbook.io/mindpatterns/antipatterns)
* [Techniques](https://ebay.gitbook.io/mindpatterns/techniques)

We have not yet incorporated these three groups into any kind of clever or witty acronym (which is disappointing, I know).

### Pattern Contents

Every completed pattern will include:

* Introduction
* Working examples
* Terminology
* Best practices
* Interaction design
* Developer guide
* ARIA Reference

The book also contains an appendix section with a list of [ARIA Essentials](https://ebay.gitbook.io/mindpatterns/appendix/aria-essentials), [References](https://ebay.gitbook.io/mindpatterns/appendix/references), [Utilities](https://ebay.gitbook.io/mindpatterns/appendix/utils) and [FAQ](https://ebay.gitbook.io/mindpatterns/appendix/faq).

### Pattern Principles

There are 4 guiding principles of accessibility, collectively know as **POUR**:

1. **P**erceivable: People experience content in different ways (sight, hearing, and touch). Content needs to be transferable into recognizable (or perceivable) formats.
2. **O**perable: Content needs to be navigable (or operable) by multiple methods—not just a mouse
3. **U**nderstandable: Web content needs to be understandable. Language should be simple and concise; functionality should be consistent and intuitive.
4. **R**obust: Create web content that works for all (or most!) technologies. This includes operating systems, browsers, and mobile devices.

### Testing

Accessibility testing is performed with latest versions of:

* Chrome & JAWS
* Firefox & NVDA
* Safari & VoiceOver

### JavaScript Utilities

Much of the common accessibility logic in our MIND Pattern examples comes courtesy of [MakeupJS](https://github.com/makeup/makeup-js) - a suite of vanilla, headless UI JavaScript modules - tailored specifically for building accessible user interfaces in a frontend framework agnostic manner. For example, implementing a keyboard roving tab index or dialog window modality.

### License

eBay MIND Patterns is released under the [CC-BY-SA 4.0 license](https://creativecommons.org/licenses/by-sa/4.0/).