|
33 | 33 | }, |
34 | 34 | { |
35 | 35 | "speaker": "ALEX", |
36 | | - "text": "WCAG, ARIA, and What They Mean for Your Contributions: This appendix gives you a working understanding of the accessibility standards that govern the web, GitHub's interface, and the projects you will contribute to. The next useful detail is concrete: You do not need to memorize these - use this as a lookup when a PR review mentions a specific standard or success criterion." |
| 36 | + "text": "WCAG, ARIA, and What They Mean for Your Contributions: This appendix gives you a working understanding of the accessibility standards that govern the web, GitHub's interface, and the projects you will contribute to. You do not need to memorize these - use this as a lookup when a PR review mentions a specific standard or success criterion." |
37 | 37 | }, |
38 | 38 | { |
39 | 39 | "speaker": "ALEX", |
40 | | - "text": "The next layer is this. Here is the learner-facing version. WCAG (Web Content Accessibility Guidelines) is organized around four principles, often abbreviated POUR. Put another way, every WCAG success criterion belongs to one of these four principles. A good GitHub workflow is like a well-run meeting: everyone knows the topic, the next action, and who has the floor." |
| 40 | + "text": "WCAG (Web Content Accessibility Guidelines) is organized around four principles, often abbreviated POUR. Every WCAG success criterion belongs to one of these four principles." |
41 | 41 | }, |
42 | 42 | { |
43 | 43 | "speaker": "ALEX", |
44 | 44 | "text": "A solid pull request habit is to separate three questions: what changed, why it changed, and what still needs review. That keeps the conversation useful instead of noisy." |
45 | 45 | }, |
46 | | - { |
47 | | - "speaker": "JAMIE", |
48 | | - "text": "What is the one idea that makes the next few steps less mysterious?" |
49 | | - }, |
50 | 46 | { |
51 | 47 | "speaker": "ALEX", |
52 | | - "text": "Learning Cards: WCAG Overview has three jobs: name the idea, give the learner a move, and show what counts as evidence." |
| 48 | + "text": "Learning Cards: WCAG Overview." |
53 | 49 | }, |
54 | 50 | { |
55 | 51 | "speaker": "ALEX", |
56 | | - "text": "That shows up in the workshop in a few specific ways. WCAG is organized around four principles: Perceivable, Operable, Understandable, Robust (POUR) -- use this mnemonic when reviewing any PR. Most projects target WCAG 2.2 AA -- when a reviewer cites a criterion number like 1.4.3, search the tables in Section 3 of this appendix. The WCAG Quick Reference (Section 10) is a filterable web page -- use your screen reader's find command to jump to any criterion number. The tables in this appendix use pipe-delimited Markdown -- increase your editor font size or use a Markdown preview for cleaner column alignment. WCAG 1.4.3 (contrast) and 1.4.11 (non-text contrast) are the criteria most relevant to your daily experience -- bookmark them. When checking contrast ratios, use the WebAIM Contrast Checker link in Section 10 with your browser zoom set to your preferred level." |
57 | | - }, |
58 | | - { |
59 | | - "speaker": "JAMIE", |
60 | | - "text": "That feels much more doable when you say it as one move." |
| 52 | + "text": "WCAG is organized around four principles: Perceivable, Operable, Understandable, Robust (POUR) -- use this mnemonic when reviewing any PR. Most projects target WCAG 2.2 AA -- when a reviewer cites a criterion number like 1.4.3, search the tables in Section 3 of this appendix. The WCAG Quick Reference (Section 10) is a filterable web page -- use your screen reader's find command to jump to any criterion number. The tables in this appendix use pipe-delimited Markdown -- increase your editor font size or use a Markdown preview for cleaner column alignment. WCAG 1.4.3 (contrast) and 1.4.11 (non-text contrast) are the criteria most relevant to your daily experience -- bookmark them. When checking contrast ratios, use the WebAIM Contrast Checker link in Section 10 with your browser zoom set to your preferred level." |
61 | 53 | }, |
62 | 54 | { |
63 | 55 | "speaker": "ALEX", |
64 | | - "text": "Right. The magic is not speed. The magic is knowing what changed and why it matters." |
| 56 | + "text": "Right." |
65 | 57 | }, |
66 | 58 | { |
67 | 59 | "speaker": "PAUSE", |
68 | 60 | "text": "" |
69 | 61 | }, |
70 | 62 | { |
71 | 63 | "speaker": "ALEX", |
72 | | - "text": "Now bring the learner back to the room. Anchor this part on 2. Conformance Levels: A, AA, AAA. Most open source projects, and GitHub itself, target WCAG 2.2 AA compliance. This is the part to say slowly: When you file an accessibility bug or review a PR, AA is the standard to reference." |
| 64 | + "text": "Conformance Levels: A, AA, AAA. Most open source projects, and GitHub itself, target WCAG 2.2 AA compliance. This is the part to say slowly: When you file an accessibility bug or review a PR, AA is the standard to reference." |
73 | 65 | }, |
74 | 66 | { |
75 | 67 | "speaker": "JAMIE", |
76 | 68 | "text": "What would you say to someone who is already bracing for this to be too much?" |
77 | 69 | }, |
78 | 70 | { |
79 | 71 | "speaker": "ALEX", |
80 | | - "text": "The reason this matters is simple: these are the criteria you will most commonly encounter when contributing to web projects or reviewing GitHub interface changes." |
| 72 | + "text": "These are the criteria you will most commonly encounter when contributing to web projects or reviewing GitHub interface changes." |
81 | 73 | }, |
82 | 74 | { |
83 | 75 | "speaker": "ALEX", |
84 | | - "text": "The useful habit is simple: orient, act, verify, then continue. That pause between action and trust is part of the work." |
| 76 | + "text": "That pause between action and trust is part of the work." |
85 | 77 | }, |
86 | 78 | { |
87 | 79 | "speaker": "ALEX", |
88 | | - "text": "That matters because of the next idea. Do not treat 4. ARIA - Roles, States, and Properties as decoration. WAI-ARIA (Accessible Rich Internet Applications) fills the gap between what HTML natively expresses and what complex interactive widgets require. The workshop is closer to rehearsal than lecture. You hear the move, try the move, and then check what changed." |
| 80 | + "text": "That matters because of the next idea. Do not treat 4. ARIA - Roles, States, and Properties as decoration. WAI-ARIA (Accessible Rich Internet Applications) fills the gap between what HTML natively expresses and what complex interactive widgets require." |
89 | 81 | }, |
90 | 82 | { |
91 | 83 | "speaker": "PAUSE", |
|
97 | 89 | }, |
98 | 90 | { |
99 | 91 | "speaker": "ALEX", |
100 | | - "text": "Important rules has three jobs: name the idea, give the learner a move, and show what counts as evidence." |
| 92 | + "text": "Important rules." |
101 | 93 | }, |
102 | 94 | { |
103 | 95 | "speaker": "ALEX", |
104 | 96 | "text": "Start here: Don't use ARIA if native HTML suffices. A is already a button - adding role=\"button\" to a is only needed when HTML semantics cannot be used. Then: All interactive ARIA widgets must be keyboard operable. Adding role=\"button\" means you must also handle Enter and Space keypresses in JavaScript. Next: ARIA only affects the accessibility tree. It does not add visual styling or behavior - it only changes what assistive technologies announce. The sequence works because every action has a confirmation." |
105 | 97 | }, |
106 | 98 | { |
107 | 99 | "speaker": "ALEX", |
108 | | - "text": "This is where the talk moves from concept to action. Put 5. ARIA Landmark Roles into plain language. Landmarks let screen reader users jump directly to major sections of a page. The useful version is: GitHub uses these extensively; screen reader users navigate between them with D (NVDA/JAWS) or the Rotor (VoiceOver)." |
109 | | - }, |
110 | | - { |
111 | | - "speaker": "JAMIE", |
112 | | - "text": "Now it sounds like a workflow instead of a wall of instructions." |
113 | | - }, |
114 | | - { |
115 | | - "speaker": "ALEX", |
116 | | - "text": "That is where confidence comes from: not from never getting lost, but from knowing how to recover." |
| 100 | + "text": "Put 5. ARIA Landmark Roles into plain language. Landmarks let screen reader users jump directly to major sections of a page. The useful version is: GitHub uses these extensively; screen reader users navigate between them with D (NVDA/JAWS) or the Rotor (VoiceOver)." |
117 | 101 | }, |
118 | 102 | { |
119 | 103 | "speaker": "ALEX", |
|
125 | 109 | }, |
126 | 110 | { |
127 | 111 | "speaker": "ALEX", |
128 | | - "text": "The teaching point here is not the label; it is the move. Use aria-live=\"assertive\" only for urgent interruptions (errors). That is the difference between guessing and knowing: Use \"polite\" for non-urgent status updates." |
| 112 | + "text": "Use aria-live=\"assertive\" only for urgent interruptions (errors). Use \"polite\" for non-urgent status updates." |
129 | 113 | }, |
130 | 114 | { |
131 | 115 | "speaker": "PAUSE", |
132 | 116 | "text": "" |
133 | 117 | }, |
134 | 118 | { |
135 | 119 | "speaker": "ALEX", |
136 | | - "text": "Before the learner moves on. This part earns its place because when expanded: set aria-expanded=\"true\" and remove the hidden attribute. That is the difference between following directions and owning the workflow." |
| 120 | + "text": "Before the learner moves on. When expanded: set aria-expanded=\"true\" and remove the hidden attribute." |
137 | 121 | }, |
138 | 122 | { |
139 | 123 | "speaker": "JAMIE", |
|
145 | 129 | }, |
146 | 130 | { |
147 | 131 | "speaker": "ALEX", |
148 | | - "text": "Now slow down for the part people usually miss. Here is the learner-facing version. Reference the specific WCAG criterion. Put another way, bad: \"The button isn't accessible.\" Good: \"The 'Subscribe' button has no visible focus indicator, failing WCAG 2.4.7 Focus Visible (Level AA)." |
| 132 | + "text": "Reference the specific WCAG criterion. Bad: \"The button isn't accessible.\" Good: \"The 'Subscribe' button has no visible focus indicator, failing WCAG 2.4.7 Focus Visible (Level AA)." |
149 | 133 | }, |
150 | 134 | { |
151 | 135 | "speaker": "PAUSE", |
|
157 | 141 | }, |
158 | 142 | { |
159 | 143 | "speaker": "ALEX", |
160 | | - "text": "This is the move inside Reviewing a PR for Accessibility: checklist for any PR that touches HTML or UI." |
| 144 | + "text": "checklist for any PR that touches HTML or UI." |
161 | 145 | }, |
162 | 146 | { |
163 | 147 | "speaker": "ALEX", |
|
173 | 157 | }, |
174 | 158 | { |
175 | 159 | "speaker": "ALEX", |
176 | | - "text": "Here is the moment where the page starts to make sense. Anchor this part on Writing Accessible Documentation. Documentation in Markdown is converted to HTML. The durable skill is not memorizing one screen. It is knowing how to find your footing when the screen changes." |
| 160 | + "text": "Documentation in Markdown is converted to HTML. The durable skill is not memorizing one screen. It is knowing how to find your footing when the screen changes." |
177 | 161 | }, |
178 | 162 | { |
179 | 163 | "speaker": "ALEX", |
180 | 164 | "text": "Listen for the small confirmations in this list. Use heading levels in order (don't skip from H1 to H3). Write descriptive link text (not \"click here\"). Add alt text to images. Use actual lists (- or 1.) rather than faking them with symbols." |
181 | 165 | }, |
182 | | - { |
183 | | - "speaker": "JAMIE", |
184 | | - "text": "What is the ordered workflow?" |
185 | | - }, |
186 | 166 | { |
187 | 167 | "speaker": "ALEX", |
188 | | - "text": "Manual Testing (catches the rest) has three jobs: name the idea, give the learner a move, and show what counts as evidence." |
| 168 | + "text": "Manual Testing (catches the rest)." |
189 | 169 | }, |
190 | 170 | { |
191 | 171 | "speaker": "ALEX", |
192 | | - "text": "The path is straightforward once it is named. Step one is keyboard-only navigation - unplug your mouse; can you do everything? Step two is screen reader walkthrough - navigate the feature with NVDA, JAWS, or VoiceOver. Step three is 200% zoom - does content reflow without horizontal scrolling? Step four is high contrast mode - Windows High Contrast or macOS Increase Contrast; are all elements still visible? The sequence works because every action has a confirmation." |
193 | | - }, |
194 | | - { |
195 | | - "speaker": "JAMIE", |
196 | | - "text": "Give me the sequence, because order matters here." |
| 172 | + "text": "Step one is keyboard-only navigation - unplug your mouse; can you do everything? Step two is screen reader walkthrough - navigate the feature with NVDA, JAWS, or VoiceOver. Step three is 200% zoom - does content reflow without horizontal scrolling? Step four is high contrast mode - Windows High Contrast or macOS Increase Contrast; are all elements still visible? The sequence works because every action has a confirmation." |
197 | 173 | }, |
198 | 174 | { |
199 | 175 | "speaker": "ALEX", |
|
205 | 181 | }, |
206 | 182 | { |
207 | 183 | "speaker": "ALEX", |
208 | | - "text": "The next point gives the learner a handle. Learning Cards: Testing Against Standards has three jobs: name the idea, give the learner a move, and show what counts as evidence." |
| 184 | + "text": "The next point gives the learner a handle. Learning Cards: Testing Against Standards." |
209 | 185 | }, |
210 | 186 | { |
211 | 187 | "speaker": "ALEX", |
|
217 | 193 | }, |
218 | 194 | { |
219 | 195 | "speaker": "ALEX", |
220 | | - "text": "If the interface shifts, 10. Official References is still useful because next: Appendix N: Advanced Search Back: Appendix L: Agents Reference Teaching chapter: Chapter 08: Open Source Culture." |
| 196 | + "text": "next: Appendix N: Advanced Search Back: Appendix L: Agents Reference Teaching chapter: Chapter 08: Open Source Culture." |
221 | 197 | }, |
222 | 198 | { |
223 | 199 | "speaker": "PAUSE", |
|
0 commit comments