-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
101 lines (101 loc) · 10.3 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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing Accessibility Workshop Resources</title>
<link rel="stylesheet" type="text/css" href="index-styles.css">
</head>
<body id="resources">
<header>
<h1>Testing Accessibility</h1>
<h2>Workshop Resources List</h2>
</header>
<main>
<h3 id="workshop-design-people-skills">Design & People Skills</h3>
<ul class="exercise-list">
<li><a href="https://www.w3.org/TR/WCAG21/">Web Content Accessibility Guidelines 2.1</a></li>
<li><a href="https://www.w3.org/WAI/standards-guidelines/wcag/">All WCAG standards from the W3C</a></li>
<li><a href="https://www.boia.org/blog/is-there-a-legal-requirement-to-implement-wcag">Is There a Legal Requirement to Implement WCAG?</a></li>
<li><a href="https://www.lflegal.com/category/accessibility-laws-and-regulations/legal-updates/">Legal Updates from Lainey Feingold</a></li>
<li><a href="https://www.cdc.gov/ncbddd/disabilityandhealth/infographic-disability-impacts-all.html">CDC: Disability Impacts All of Us</a></li>
<li><a href="https://www.americanprogress.org/article/covid-19-likely-resulted-in-1-2-million-more-disabled-people-by-the-end-of-2021-workplaces-and-policy-will-need-to-adapt/">COVID-19 Likely Resulted in 1.2 Million More Disabled People by the End of 2021—Workplaces and Policy Will Need to Adapt</a></li>
<li><a href="https://feather.ca/shift-left/">The ongoing evolution of 'Shift left'</a></li>
<li><a href="https://makeitfable.com/">Fable Tech Labs</a></li>
<li><a href="https://access-works.com/">Access Works</li>
<li><a href="https://www.interaction-design.org/literature/topics/affordances">Affordances in Interaction Design</a></li>
<li><a href="https://source.opennews.org/articles/motion-sick/">Your Interactive Makes Me Sick</a></li>
<li><a href="https://web.dev/prefers-reduced-motion/">prefers-reduced-motion: Sometimes less movement is more</a></li>
<li><a href="https://hiddedevries.nl/en/blog/2021-12-03-meeting-2-22-pause-stop-hide-with-prefers-reduced-motion">Meeting “2.2.2 Pause, Stop, Hide” with prefers-reduced-motion</a></li>
<li><a href="https://medium.com/the-disabled-list/the-against-list-64676cb2acc4">The Against List</a></li>
</ul>
<h3 id="workshops-testing">Manual and Automated Testing</h3>
<ul class="exercise-list" role="list">
<li><a href="https://www.w3.org/TR/WCAG21/">Web Content Accessibility Guidelines 2.1</a> including Levels for prioritization</li>
<li><a href="https://webaim.org/projects/million/">The WebAIM Million</a></li>
<li><a href="https://developer.chrome.com/docs/devtools/accessibility/reference/">Chrome Accessibility Inspector</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector">Firefox Accessibility Inspector</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter">Axe Linter for VS Code</a></li>
<li><a href="https://www.npmjs.com/package/eslint-plugin-jsx-a11y">ESLint-Plugin-JSX-A11y for React projects</a></li>
<li><a href="https://www.deque.com/axe/browser-extensions/">Axe extension</a></li>
<li><a href="https://accessibilityinsights.io">Accessibility Insights</a></li>
<li><a href="https://chrispederick.com/work/web-developer/">Web Developer Toolbar</a></li>
<li><a href="https://www.tpgi.com/color-contrast-checker/">Color Contrast Analyzer</a></li>
<li><a href="https://webaim.org/resources/contrastchecker/">WebAIM Contrasc Checker</a></li>
<li><a href="https://www.w3.org/WAI/tutorials/images/decision-tree/">Alt Decision Tree</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/reflow.html">Understanding WCAG 1.4.10: Reflow for Page Zoom</a></li>
<li><a href="https://www.smashingmagazine.com/2019/02/accessibility-webinar/">How a Screen Reader User Accesses the Web</a></li>
<li><a href="https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts">VoiceOver Keyboard Shortcuts</a></li>
<li><a href="https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts">NVDA Keyboard Shortcuts</a></li>
<li><a href="https://dequeuniversity.com/screenreaders/voiceover-ios-shortcuts">VoiceOver for iOS Shortcuts</a></li>
<li><a href="https://tink.uk/understanding-screen-reader-interaction-modes/">Understanding screen reader interaction modes</a></li>
<li><a href="https://assistivlabs.com/">AssistivLabs Cloud-based screen reader testing</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaCurrent">ARIA-Current (state)</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-expanded">ARIA-Expanded (state)</a></li>
<li><a href="https://heydonworks.com/article/aria-controls-is-poop/">ARIA-Controls is poop</a></li>
<li><a href="https://www.levelaccess.com/challenges-mega-menus-standard-menus-make-accessible/">Making Megamenus accessible</a></li>
<li><a href="https://testing-library.com/docs/react-testing-library/api/#render">Testing Library/React: `render`</a></li>
<li><a href="https://testing-library.com/docs/queries/about#screen">Testing Library/React: `screen`</a></li>
<li><a href="https://testing-library.com/docs/user-event/intro">Testing Library: `user-event`</a></li>
<li><a href="https://testing-library.com/docs/queries/byrole">Testing Library: `getByRole`</a></li>
<li><a href="https://testing-library.com/docs/queries/bylabeltext">Testing Library: `getByLabelText`</a></li>
<li><a href="https://github.com/testing-library/jest-dom">Jest-DOM matchers</a></li>
<li><a href="https://testing-library.com/docs/cypress-testing-library/intro/">Testing Library/Cypress</a></li>
<li><a href="https://docs.cypress.io/guides/component-testing/introduction">Cypress Component Testing</a></li>
<li><a href="https://playwright.dev/docs/api/class-accessibility">Playwright Accessibility Tree Snapshots</a></li>
</ul>
<h3 id="workshop-semantic-html-aria">Semantic HTML & ARIA</h3>
<ul class="exercise-list">
<li><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA specification</a></li>
<li><a href="https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/">Accessibility APIs: A Key to Web Accessibility</a></li>
<li><a href="https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/the-accessibility-tree">The Accessibility Tree: Chrome Developers</a></li>
<li><a href="https://a11ysupport.io/">A11ySupport.io</a></li>
<li><a href="https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html">"Fixing Lists" by Scott O'Hara</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/datepicker-dialog.html">WAI-ARIA Practices: Date Picker dialog example</a></li>
<li><a href="https://www.w3.org/TR/accname-1.2/">Accessible Name and Description Computation</a></li>
<li><a href="https://github.com/WICG/aom/">Accessibility Object Model</a></li>
</ul>
<h3 id="workshop-interactions-mechanics">Coding Interactions & Mechanics</h3>
<ul class="exercise-list">
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent">MDN docs: KeyboardEvent</a></li>
<li><a href="https://www.a11yproject.com/posts/no-mouse-days/">No Mouse Days</a></li>
<li><a href="https://github.com/ten1seven/what-input">What Input</a></li>
<li><a href="https://css-tricks.com/almanac/selectors/f/focus-visible/">:focus-visible</a></li>
<li><a href="https://reactjs.org/docs/refs-and-the-dom.html">React Refs and the DOM</a></li>
<li><a href="https://developers.google.com/web/fundamentals/accessibility/focus/using-tabindex">Using tabindex</a></li>
<li><a href="https://dequeuniversity.com/mac/windows-screen-readers">Using Windows Screen Readers on a Mac</a></li>
<li><a href="https://jerryjones.dev/2020/08/06/setting-up-nvda-on-parallels-with-macos/">Setting up NVDA on Parallels with macOS</a></li>
<li><a href="https://tink.uk/understanding-screen-reader-interaction-modes/">Understanding screen reader interaction modes</a></li>
<li><a href="https://github.com/nvaccess/nvda/issues/8395">[Issue/Discussion] Focus on element in gridcell: Using arrow keys makes NVDA switch to browse mode</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions">MDN docs: ARIA Live Regions</a></li>
<li><a href="https://www.w3.org/TR/WCAG20-TECHS/ARIA19.html">Using ARIA role=alert or Live Regions to Identify Errors</a></li>
<li><a href="https://www.gatsbyjs.com/blog/2019-07-11-user-testing-accessible-client-routing/">What we learned from user testing of accessible client-side routing techniques with Fable Tech Labs</a></li>
<li><a href="https://www.w3.org/WAI/ARIA/apg/">ARIA Authoring Practices Guide</a></li>
<li><a href="https://moderncss.dev/pure-css-custom-checkbox-style/">Pure CSS Custom Checkbox Style</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-1.1/#application">WAI-ARIA 1.1: application (role)</a></li>
<li><a href="https://www.marcozehe.de/if-you-use-the-wai-aria-role-application-please-do-so-wisely/">If you use the WAI-ARIA role "application", please do so wisely!</a></li>
</ul>
</main>
<footer>
© 2022 Marcy Sutton | <a href="https://github.com/testing-accessibility/resources">Find project on GitHub</a>
</footer>
</body>
</html>