Skip to content

Commit 953f515

Browse files
sz3sz3
committed
we attempt some screenreader-friendliness
Need more testing
1 parent a863f1e commit 953f515

2 files changed

Lines changed: 132 additions & 90 deletions

File tree

‎web/index.html‎

Lines changed: 118 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -121,18 +121,28 @@
121121
display: block;
122122
}
123123

124+
.bracket-both::before,
125+
.bracket-left::before {
126+
content: "⌜ ";
127+
}
128+
129+
.bracket-both::after,
130+
.bracket-right::after {
131+
content: " ⌟";
132+
}
133+
124134
/* options */
125-
#nav-container a.mode-b,
126-
#nav-container a.mode-bm,
127-
#nav-container a.mode-bu,
128-
#nav-container a.mode-4c {
135+
#nav-container label.mode-b,
136+
#nav-container label.mode-bm,
137+
#nav-container label.mode-bu,
138+
#nav-container label.mode-4c {
129139
color: #555;
130140
}
131141

132-
#nav-container.mode-b a.mode-b,
133-
#nav-container.mode-bm a.mode-bm,
134-
#nav-container.mode-bu a.mode-bu,
135-
#nav-container.mode-4c a.mode-4c {
142+
#nav-container.mode-b label.mode-b,
143+
#nav-container.mode-bm label.mode-bm,
144+
#nav-container.mode-bu label.mode-bu,
145+
#nav-container.mode-4c label.mode-4c {
136146
color: #9fa6b2;
137147
}
138148

@@ -298,35 +308,93 @@
298308
border: 1px solid #444;
299309
}
300310

301-
#nav-content li a {
311+
/* resets */
312+
.mode-fieldset {
313+
border: none;
314+
padding: 0;
315+
margin: 0;
316+
}
317+
318+
.nav-action {
319+
background: none;
320+
border: none;
321+
font-family: inherit;
322+
cursor: pointer;
323+
width: 100%;
324+
text-align: inherit;
325+
color: inherit;
326+
}
327+
328+
.sr-only {
329+
position: absolute;
330+
width: 1px;
331+
height: 1px;
332+
padding: 0;
333+
margin: -1px;
334+
overflow: hidden;
335+
clip: rect(0, 0, 0, 0);
336+
border: 0;
337+
}
338+
339+
.nav-heading {
340+
display: block;
341+
width: 100%;
342+
text-align: center;
343+
margin: 0 auto;
344+
font-weight: bold;
345+
font-size: 1.1em;
346+
color: inherit;
347+
}
348+
349+
/* nav pt 2 */
350+
#nav-content li a,
351+
#nav-content li .nav-action {
302352
display: block;
303353
padding: 10px 5px;
304354
color: #9fa6b2;
305355
text-decoration: none;
306356
transition: color .1s;
307357
}
308358

309-
#nav-content li a.attention {
359+
#nav-content li:hover,
360+
#nav-content li a:hover,
361+
#nav-content li .nav-action:hover {
362+
background-color: #2c323c;
363+
}
364+
365+
#nav-content li a:focus,
366+
#nav-content li .nav-action:focus,
367+
.mode-radios input[type="radio"]:focus+label {
310368
animation: glowing 1.5s infinite alternate;
369+
background-color: #2c323c;
370+
outline: 0px;
311371
}
312372

313-
#nav-content li a {
373+
#fps-slider:focus {
374+
background-color: #2c323c;
375+
outline: 2px solid #00ffff;
376+
outline-offset: 4px;
377+
}
378+
379+
#nav-content li a,
380+
#nav-content li .nav-action,
381+
#nav-content li.modesel label {
314382
font-variant: small-caps;
315383
font-size: 2em;
316384
}
317385

318-
#nav-content h4 {
386+
#nav-content h4,
387+
#nav-content .nav-heading {
319388
font-variant: small-caps;
320389
padding-top: 1em;
321390
}
322391

323-
#nav-content li.modesel a {
392+
#nav-content li.modesel a,
393+
#nav-content li.modesel label {
324394
display: inline-block;
325395
width: 2em;
326-
}
327-
328-
#nav-content li:hover {
329-
background-color: #2c323c;
396+
cursor: pointer;
397+
padding: 10px 5px;
330398
}
331399

332400
#nav-content li:not(.small)+.small {
@@ -338,7 +406,8 @@
338406
align-self: center;
339407
}
340408

341-
#nav-content li.small a {
409+
#nav-content li.small a,
410+
#nav-content li.small .nav-action {
342411
font-size: 1em;
343412
}
344413

@@ -361,11 +430,11 @@
361430
<div id="status"></div>
362431
<div id="dragdrop" class="dragdrop" title="Drag and drop a file" onclick="Main.clickNav()">
363432
<div class="drop-message">
364-
<p class="msg-default">⌜ Tap to start! ⌟</p>
365-
<p class="msg-error">⌜ Error! WebGL is not enabled :( ⌟</p>
366-
<p class="msg-default msg-bottom">⌜ PHOTOSENSITIVITY WARNING!</p>
433+
<p class="msg-default bracket-both">Tap to start!</p>
434+
<p class="msg-error bracket-both">Error! WebGL is not enabled :(</p>
435+
<p class="msg-default msg-bottom bracket-left">PHOTOSENSITIVITY WARNING!</p>
367436
<p class="msg-default msg-long">Photosensitive epilepsy + flickering lights = seizures!</p>
368-
<p class="msg-default msg-long">Be safe! Have fun! ⌟</p>
437+
<p class="msg-default msg-long bracket-right">Be safe! Have fun!</p>
369438
</div>
370439
<canvas id="canvas" class="canvas"></canvas>
371440
</div>
@@ -374,7 +443,7 @@
374443

375444
<div id="nav-container" class="mode-b">
376445
<div class="bg" onpointerdown="Main.blurNav(); event.preventDefault();"></div>
377-
<button id="nav-button" tabindex="0" onclick="Main.clickNav();">
446+
<button id="nav-button" tabindex="0" onclick="Main.clickNav();" aria-label="Open Menu">
378447
<span class="icon-bar"></span>
379448
<span class="icon-bar"></span>
380449
<span class="icon-bar"></span>
@@ -383,22 +452,37 @@
383452
<div id="nav-content" tabindex="-1">
384453
<span id="current-file">No file selected</span>
385454
<ul>
386-
<li><a class="attention" id="nav-find-file-link" href="javascript:void(0)" onclick="Main.clickFileInput()">Find
387-
File</a></li>
455+
<li>
456+
<button type="button" class="nav-action" id="nav-find-file-link" onclick="Main.clickFileInput()">Find
457+
File</button>
458+
</li>
388459
<hr>
389460
<li class="modesel">
390-
<h4>Mode</h4>
391-
<a class="mode-b" href="javascript:void(0)" onclick="Main.setMode('B')">B</a>
392-
<a class="mode-bm" href="javascript:void(0)" onclick="Main.setMode('Bm')">Bm</a>
393-
<a class="mode-bu" href="javascript:void(0)" onclick="Main.setMode('Bu')">Bu</a>
394-
<a class="mode-4c" href="javascript:void(0)" onclick="Main.setMode('4C')">4C</a>
461+
<fieldset class="mode-fieldset">
462+
<legend class="nav-heading">Mode</legend>
463+
<div class="mode-radios">
464+
<input type="radio" class="sr-only" name="mode" id="mode-b" value="B" onclick="Main.setMode('B')" checked>
465+
<label for="mode-b" class="mode-b">B</label>
466+
467+
<input type="radio" class="sr-only" name="mode" id="mode-bm" value="Bm" onclick="Main.setMode('Bm')">
468+
<label for="mode-bm" class="mode-bm">Bm</label>
469+
470+
<input type="radio" class="sr-only" name="mode" id="mode-bu" value="Bu" onclick="Main.setMode('Bu')">
471+
<label for="mode-bu" class="mode-bu">Bu</label>
472+
473+
<input type="radio" class="sr-only" name="mode" id="mode-4c" value="4C" onclick="Main.setMode('4C')">
474+
<label for="mode-4c" class="mode-4c">4C</label>
475+
</div>
476+
</fieldset>
395477
</li>
396478
<li>
397-
<h4>Framerate</h4>
398-
<input type="range" class="range" min="5" max="20" step="5" value="15" oninput="Main.setFPS(this.value)"
399-
onchange="Main.setFPS(this.value)" />
479+
<label for="fps-slider" class="nav-heading">Framerate</label>
480+
<input type="range" id="fps-slider" class="range" min="5" max="20" step="5" value="15"
481+
oninput="Main.setFPS(this.value)" onchange="Main.setFPS(this.value)" />
482+
</li>
483+
<li class="small">
484+
<button type="button" class="nav-action" onclick="Main.toggleFullscreen()">Fullscreen</button>
400485
</li>
401-
<li class="small"><a href="javascript:void(0)" onclick="Main.toggleFullscreen()">Fullscreen</a></li>
402486
<li class="small"><a href="https://github.com/sz3/libcimbar">github</a></li>
403487
<li class="small"><a href="https://github.com/sz3/cfc/releases/latest">android app</a></li>
404488
</ul>

‎web/main.js‎

Lines changed: 14 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -222,7 +222,7 @@ var Main = function () {
222222
},
223223

224224
clickNav: function () {
225-
document.getElementById("nav-button").focus();
225+
document.getElementById("nav-find-file-link").focus();
226226
},
227227

228228
blurNav: function (pause) {
@@ -333,11 +333,11 @@ var Main = function () {
333333

334334
window.addEventListener('keydown', function (e) {
335335
e = e || event;
336-
if (e.target instanceof HTMLBodyElement) {
336+
337+
if (e.target instanceof HTMLBodyElement || e.target.id === 'canvas') {
337338
if (e.key == 'Enter' || e.keyCode == 13 ||
338-
e.key == 'Tab' || e.keyCode == 9 ||
339-
e.key == 'Space' || e.keyCode == 32
340-
) {
339+
e.key == 'Space' || e.keyCode == 32 ||
340+
e.key == 'Tab' || e.keyCode == 9) {
341341
Main.clickNav();
342342
e.preventDefault();
343343
}
@@ -347,65 +347,23 @@ window.addEventListener('keydown', function (e) {
347347
}
348348
}
349349
else {
350+
// inside nav menu
350351
if (e.key == 'Escape' || e.keyCode == 27 ||
351352
e.key == 'Backspace' || e.keyCode == 8 ||
352353
e.key == 'End' || e.keyCode == 35 ||
353354
e.key == 'Home' || e.keyCode == 36
354355
) {
355356
Main.blurNav();
357+
// when in menu, don't accidentally go back a page
358+
if (e.key == 'Backspace' || e.keyCode == 8) e.preventDefault();
356359
}
357-
else if (e.key == 'Tab' || e.keyCode == 9 ||
358-
e.key == 'ArrowDown' || e.keyCode == 40
359-
) {
360-
var nav = document.getElementById('nav-button');
361-
var links = document.getElementById('nav-content').getElementsByTagName('a');
362-
if (nav.classList.contains('attention')) {
363-
nav.classList.remove('attention');
364-
links[0].classList.add('attention');
365-
return;
366-
}
367-
for (var i = 0; i < links.length; i++) {
368-
if (links[i].classList.contains('attention')) {
369-
var next = i + 1 == links.length ? nav : links[i + 1];
370-
links[i].classList.remove('attention');
371-
next.classList.add('attention');
372-
break;
373-
}
374-
}
375-
}
376-
else if (e.key == 'ArrowUp' || e.keyCode == 38) {
377-
var nav = document.getElementById('nav-button');
378-
var links = document.getElementById('nav-content').getElementsByTagName('a');
379-
if (nav.classList.contains('attention')) {
380-
nav.classList.remove('attention');
381-
links[links.length - 1].classList.add('attention');
382-
return;
383-
}
384360

385-
for (var i = 0; i < links.length; i++) {
386-
if (links[i].classList.contains('attention')) {
387-
var next = i == 0 ? nav : links[i - 1];
388-
links[i].classList.remove('attention');
389-
next.classList.add('attention');
390-
break;
391-
}
392-
}
393-
}
394-
else if (e.key == 'Enter' || e.keyCode == 13 ||
395-
e.key == ' ' || e.keyCode == 32
396-
) {
397-
var nav = document.getElementById('nav-button');
398-
if (nav.classList.contains('attention')) {
399-
Main.blurNav();
400-
return;
401-
}
402-
var links = document.getElementById('nav-content').getElementsByTagName('a');
403-
for (var i = 0; i < links.length; i++) {
404-
if (links[i].classList.contains('attention')) {
405-
links[i].click();
406-
}
407-
}
408-
}
361+
// hack
362+
// prevent emscripten/wasm from handling e.g. tab events
363+
Object.defineProperty(e, 'preventDefault', {
364+
value: function () { },
365+
configurable: true
366+
});
409367
}
410368
}, true);
411369

0 commit comments

Comments
 (0)