-
Notifications
You must be signed in to change notification settings - Fork 19
/
index.html
36 lines (26 loc) · 2.23 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
---
layout: page
---
<h1>Accessibility Patterns for the Web</h1>
<p>This site contains all working examples for the book <cite><a href="https://ebay.gitbooks.io/mindpatterns/content/">eBay MIND Patterns - Accessibility Patterns for the Web</a></cite>.</p>
<hr />
<h2>Disclaimer</h2>
<p>The MIND Patterns are <strong>not</strong> to be confused with a visual design system, CSS framework or JavaScript library. Our patterns are instead intended to <em>complement</em> those systems by acting as foundational accessibility guidance.</p>
<p>These examples will <em>assist</em> the frontend developer with accessibility, but the source code is <strong>not</strong> 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.</p>
<p>Each pattern follows a <a href="http://en.wikipedia.org/wiki/Progressive_enhancement">progressive enhancement</a> strategy (where applicable), aims to conform to <a href="https://www.w3.org/TR/WCAG22/">WCAG 2.2</a> Level AA, and for the most part builds on from the excellent guidance set out in the <a href="https://www.w3.org/TR/wai-aria-practices-1.1/">WCAG Authoring Practices 1.1</a>.</p>
<hr />
<h2>Testing</h2>
<p>Accessibility testing is performed with latest versions of:
<ul>
<li>Edge & Narrator</li>
<li>Chrome & JAWS</li>
<li>Safari & VoiceOver</li>
<li>Firefox & NVDA</li>
<li>Chrome & Chromevox</li>
</ul>
<hr />
<h2>JavaScript & CSS Utilities</h2>
<p>Much of the common accessibility logic in our examples comes courtesy of <a href="https://github.com/makeup/makeup-js">MakeupJS</a> - 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.</p>
<p>Base styles come courtesy of <a href="https://ebay.github.io/skin">eBay Skin</a>. 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.</p>
<hr />
<p><i>Updated: Jun 9th, 2023</i></p>