-
Notifications
You must be signed in to change notification settings - Fork 1
/
xero-series1-engineers-session2.html
279 lines (227 loc) · 13.9 KB
/
xero-series1-engineers-session2.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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>XERO Series 1 - Engineering Session 2</title>
<link rel="shortcut icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/intopia.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'dist/theme/pdf.css' : 'dist/theme/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<div class="menu">
<a href="index.html#session01">Home<span class="hidden"> - list of all slide decks</span></a> | <a href="#/">Start<span class="hidden"> of slide deck</span></a>
</div>
<section data-background="#EDEBEB">
<img class="intopia-logo" src="assets/img/logo-intopia.png" alt="Intopia">
<h1>Low vision and keyboard users, focus order and management</h1>
<div class="subtitle">XERO Series 1 - Engineering Session 2</div>
</section>
<!-- –––––––––––––––––––––––––
****** SECTION ******
–––––––––––––––––––––––––– -->
<section id="slide-introduction">
<section data-background="#EDEBEB">
<h3>What will we cover?</h3>
</section>
<section data-background="#EDEBEB">
<p>Is everyone ok if we <b>record this session</b>?</p>
</section>
<section data-background="#EDEBEB">
<h5>Session 2:</h5>
<ul class="icon-list font-sm">
<li><span aria-hidden="true" class="icon icon-check"></span>Part 1: Low vision users</li>
<li><span aria-hidden="true" class="icon icon-check"></span>Part 2: Keyboard use</li>
<li><span aria-hidden="true" class="icon icon-check"></span>Part 3: Focus order</li>
<li><span aria-hidden="true" class="icon icon-check"></span>Part 4: Focus management</li>
</ul>
</section>
<!--
<section data-background="#EDEBEB">
<h5>Session 3:</h5>
<ul class="icon-list font-sm">
<li><span aria-hidden="true" class="icon icon-check"></span>Part 1: ARIA live</li>
<li><span aria-hidden="true" class="icon icon-check"></span>Part 2: Screen reader demo/discussion</li>
</ul>
</section>
-->
</section>
<!-- –––––––––––––––––––––––––
****** SECTION ******
–––––––––––––––––––––––––– -->
<section id="slide-low-vision-users">
<section data-background="#C03C0C">
<h2>Part 1: Reduced vision users</h2>
</section>
<section data-background="#EDEBEB">
<h5>May use:</h5>
<ul class="icon-list font-sm">
<li><span aria-hidden="true" class="icon icon-hand"></span>System settings <span class="font-xs success">(e.g. magnification, font size, spacing, colour)</span></li>
<li><span aria-hidden="true" class="icon icon-hand"></span>Browser-based page zoom <span class="font-xs success">(e.g. increase to 400%)</span></li>
<li><span aria-hidden="true" class="icon icon-hand"></span>Increase text-size only <span class="font-xs success">(e.g. increase text to 200%)</span></li>
<li><span aria-hidden="true" class="icon icon-hand"></span>Screen magnifier software <span class="font-xs success">(e.g. ZoomText)</span></li>
<li><span aria-hidden="true" class="icon icon-hand"></span>Screen reader software <span class="font-xs success">(e.g. JAWS, NVDA, VoiceOver, Narrator)</span></li>
</ul>
</section>
<section data-background="#EDEBEB">
<p>Let’s meet <a href="https://www.youtube.com/watch?v=EEN79RRvKqE&ab_channel=LevelAccess" target="blank">Cammie</a>, a ZoomText user - who <b>sometimes inverts the screen colours</b> to make information easier to see.</p>
</section>
<section data-background="#EDEBEB">
<h5>Frustrations:</h5>
<ul class="icon-list font-sm">
<li><span aria-hidden="true" class="icon icon-circle-xmark"></span>Lack of colour contrast</li>
<li><span aria-hidden="true" class="icon icon-circle-xmark"></span>Pop-ups that appear off-screen</li>
<li><span aria-hidden="true" class="icon icon-circle-xmark"></span>Right-aligned content - especially interactive elements</li>
<li><span aria-hidden="true" class="icon icon-circle-xmark"></span>Layouts or components that break when resized</li>
</ul>
</section>
<section data-background="#EDEBEB">
<h5>Some quick tests:</h5>
<ul class="icon-list font-sm">
<li><span aria-hidden="true" class="icon icon-check"></span>Page zoom to 400%</li>
<li><span aria-hidden="true" class="icon icon-check"></span><a href="https://chrome.google.com/webstore/detail/zoom-text-only/jamhfhbppcmkgghlkeieococonlbppjg" target="_blank">Text-only zoom to 200%</a> <span class="font-xs success">(Chrome)</span></li>
<li><span aria-hidden="true" class="icon icon-check"></span><a href="https://chrome.google.com/webstore/detail/colorblindly/floniaahmccleoclneebhhmnjgdfijgg" target="_blank">ColourBlindly</a> <span class="font-xs success">(Chrome)</span></li>
<li><span aria-hidden="true" class="icon icon-check"></span><a href="https://chrome.google.com/webstore/detail/colour-contrast-checker/nmmjeclfkgjdomacpcflgdkgpphpmnfe?hl=en-GB" target="_blank">Colour Contrast Checker</a> <span class="font-xs success">(Chrome)</span></li>
</ul>
</section>
</section>
<!-- –––––––––––––––––––––––––
****** SECTION ******
–––––––––––––––––––––––––– -->
<section id="slide-keyboard-use">
<section data-background="#C03C0C">
<h2>Part 2: Keyboard use</h2>
</section>
<section data-background="#EDEBEB">
<h5>May use:</h5>
<ul class="icon-list font-sm">
<li><span aria-hidden="true" class="icon icon-hand"></span><a href="https://www.youtube.com/watch?v=kJKQmTumFP0&t=55s" target="_blank">Voice recognition software</a> <span class="font-xs success">(e.g. Dragon NaturallySpeaking)</span></li>
<li><span aria-hidden="true" class="icon icon-hand"></span><a href="https://www.youtube.com/watch?v=04Rhnt4J2b4&t=30s" target="_blank">Eye or head tracking software</a> <span class="font-xs success">(e.g. Dynavox, Apple iOS)</span></li>
<li><span aria-hidden="true" class="icon icon-hand"></span><a href="https://www.youtube.com/watch?v=bWI1oI_f_rg" target="_blank">Head pointer</a></li>
<li><span aria-hidden="true" class="icon icon-hand"></span><a href="https://www.youtube.com/watch?v=ZMvikz2cA-8&t=102s" target="_blank">Sip and puff</a></li>
<li><span aria-hidden="true" class="icon icon-hand"></span><a href="https://youtu.be/XB4cjbYywqg?t=12" target="_blank">Head switch</a></li>
<li><span aria-hidden="true" class="icon icon-hand"></span><a href="https://youtu.be/aoyBLeQ7HCY" target="_blank">Mouth stick</a></li>
</ul>
</section>
<section data-background="#EDEBEB">
<h5>Frustrations:</h5>
<ul class="icon-list font-sm">
<li><span aria-hidden="true" class="icon icon-circle-xmark"></span>The inability to navigate using the keyboard only</li>
<li><span aria-hidden="true" class="icon icon-circle-xmark"></span>Poor methods of navigating content</li>
<li><span aria-hidden="true" class="icon icon-circle-xmark"></span>Not enough time to complete tasks</li>
<li><span aria-hidden="true" class="icon icon-circle-xmark"></span>Poor or non-visible focus states</li>
<li><span aria-hidden="true" class="icon icon-circle-xmark"></span>Confusing focus order</li>
<li><span aria-hidden="true" class="icon icon-circle-xmark"></span>Poor focus management</li>
</ul>
</section>
<section data-background="#EDEBEB">
<h5>Some quick tests:</h5>
<ul class="icon-list font-sm">
<li><span aria-hidden="true" class="icon icon-check"></span><a href="https://go.xero.com/AccountsReceivable/Search.aspx" target="_blank">Access all functionality via keyboard only</a></li>
<li><span aria-hidden="true" class="icon icon-check"></span>Ability to bypass blocks</li>
<li><span aria-hidden="true" class="icon icon-check"></span>Ability to bypass infinite scrolling</li>
</ul>
</section>
</section>
<!-- –––––––––––––––––––––––––
****** SECTION ******
–––––––––––––––––––––––––– -->
<section id="slide-focus-order">
<section data-background="#C03C0C">
<h2>Part 3: Focus order</h2>
</section>
<section data-background="#EDEBEB">
<h5>To discuss:</h5>
<ul class="icon-list font-sm">
<li><span aria-hidden="true" class="icon icon-check"></span>Why is focus order important</li>
<li><span aria-hidden="true" class="icon icon-check"></span>TAB order vs reading order (linearisation)</li>
</ul>
</section>
<section data-background="#EDEBEB">
<h5>Some quick tests:</h5>
<ul class="icon-list font-sm">
<li><span aria-hidden="true" class="icon icon-check"></span>Is focus order intuitive across pages/processes?</li>
<li><span aria-hidden="true" class="icon icon-check"></span>Is focus order intuitive within components?</li>
</ul>
</section>
<section data-background="#EDEBEB">
<h5>Example to review:</h5>
<ul class="icon-list font-sm">
<li><span aria-hidden="true" class="icon icon-check"></span><a href="https://go.xero.com/app/!TcLgd/bills/legacy-search-redirect" target="_blank">Table rows within "Bills to pay" page</a></li>
</ul>
</section>
</section>
<!-- –––––––––––––––––––––––––
****** SECTION ******
–––––––––––––––––––––––––– -->
<section id="slide-focus-management">
<section data-background="#C03C0C">
<h2>Part 4: Focus management</h2>
</section>
<section data-background="#EDEBEB">
<h5>To discuss:</h5>
<ul class="icon-list font-sm">
<li><span aria-hidden="true" class="icon icon-check"></span>Why is focus management important</li>
</ul>
</section>
<section data-background="#EDEBEB">
<h5>Some quick tests:</h5>
<ul class="icon-list font-sm">
<li><span aria-hidden="true" class="icon icon-check"></span>Is focus management intuitive across pages/processes?</li>
<li><span aria-hidden="true" class="icon icon-check"></span>Is focus manage intuitive within components?</li>
</ul>
</section>
<section data-background="#EDEBEB">
<h5>Example to review:</h5>
<ul class="icon-list font-sm">
<li><span aria-hidden="true" class="icon icon-check"></span>SPA “page” navigation.</li>
</ul>
</section>
<section data-background="#EDEBEB">
<h5>Discussion:</h5>
<ul class="icon-list font-sm">
<li><span aria-hidden="true" class="icon icon-circle-question"></span>Best place to send focus into and out of modals?</li>
<li><span aria-hidden="true" class="icon icon-circle-question"></span>Best place to send focus when the user attempts to submit a form with errors?</li>
<li><span aria-hidden="true" class="icon icon-circle-question"></span>Best place to send focus when the user has selected a date from a date picker?</li>
<li><span aria-hidden="true" class="icon icon-circle-question"></span>Should you send focus to a confirmation toast popup?</li>
</ul>
</section>
</section>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/headjs/1.0.3/head.min.js"></script>
<script src="dist/reveal.js"></script>
<script src="plugin/notes/notes.js"></script>
<script>
// More info about initialization & config:
// - https://revealjs.com/initialization/
// - https://revealjs.com/config/
Reveal.initialize({
hash: true,
controls: true,
progress: true,
history: true,
center: true,
transition: 'none',
// Learn about plugins: https://revealjs.com/plugins/
plugins: [ RevealNotes ]
});
</script>
</body>
</html>