improve accessibility, label all inputs
This commit is contained in:
Koen Lageveen
parent
5a72acad33
commit
179ea424dd
12
index.css
12
index.css
|
|
@ -36,6 +36,14 @@ a:active {
|
|||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
.screenreader-only {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
top: -999px;
|
||||
left: -999px;
|
||||
overflow:hidden
|
||||
}
|
||||
.no-smooth {
|
||||
-webkit-font-smoothing: none;
|
||||
}
|
||||
|
|
@ -313,10 +321,6 @@ form {
|
|||
label + .nav-button {
|
||||
margin-left: .5ex;
|
||||
}
|
||||
label[for='select-language'],
|
||||
label[for='select-theme'] {
|
||||
display: none;
|
||||
}
|
||||
.CodeMirror {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
|
|
|
|||
11
index.html
11
index.html
|
|
@ -1,5 +1,5 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Programming Fonts - Test Drive</title>
|
||||
<meta name="description" content="Try out the best and newest monospace fonts for code">
|
||||
|
|
@ -193,7 +193,7 @@
|
|||
<p class="select">
|
||||
<button class="nav-button" id="theme-previous">↑</button>
|
||||
<button class="nav-button" id="theme-next">↓</button>
|
||||
<label for="select-theme">Theme</label>
|
||||
<label for="select-theme" class="screenreader-only">Theme</label>
|
||||
<select onchange="selectTheme()" id="select-theme">
|
||||
<option>3024-day</option>
|
||||
<option>3024-night</option>
|
||||
|
|
@ -244,7 +244,7 @@
|
|||
</select>
|
||||
</p>
|
||||
<p class="select">
|
||||
<label for="select-language">Language</label>
|
||||
<label for="select-language" class="screenreader-only">Language</label>
|
||||
<select onchange="selectLanguage()" id="select-language">
|
||||
<option>None</option>
|
||||
<option selected="">JavaScript</option>
|
||||
|
|
@ -274,23 +274,24 @@
|
|||
<svg alt="tumblr logo" width="9px" height="15px" viewBox="0 0 9 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<path d="M6.16676166,14 L5.95411471,14 C2.45979282,14 1.69024243,11.4348475 1.70117563,10 L1.70117563,6.52631579 L0.265808692,6.52631579 C0.119006605,6.52631579 -8.8817842e-16,6.40180889 -8.8817842e-16,6.24235454 L-8.8817842e-16,4.21052632 C-8.8817842e-16,4.05367375 0.132891436,3.86896458 0.425293908,3.78947368 C2.15160506,3.16783805 2.72233881,1.60568509 2.7644104,0.421052632 C2.77170098,0.215767854 2.76748611,0.268658642 2.76748611,0.268658642 C2.76578744,0.120282571 2.88319366,0 3.03957914,0 L5.25365206,0 C5.40562356,0 5.5288208,0.119077984 5.5288208,0.280833997 L5.5288208,3.57894737 L8.23113995,3.57894737 C8.38287367,3.57894737 8.50587815,3.70559211 8.50587815,3.85094572 L8.50587815,6.25431743 C8.50587815,6.40453798 8.38221964,6.52631579 8.22828381,6.52631579 L5.25,6.52631579 L5.25,9.57894737 C5.64320148,10.5739331 6.29010788,10.8411532 6.59205557,10.8421053 C7.07296368,10.8320778 7.45037861,10.7172508 7.65529034,10.6315789 C7.77989081,10.587074 7.93265029,10.5783691 8.08058425,10.6315789 C8.2285182,10.6847888 8.27180297,10.7924676 8.2932312,10.8421053 L8.93117206,12.7368421 C9.0447897,13.0325221 8.99818233,13.1033871 8.93117206,13.1578947 C8.35626878,13.6192174 7.17773158,13.9818652 6.16676166,14 Z" id="logo"></path>
|
||||
</svg>
|
||||
<span class="screenreader-only">Tumblr blog</span>
|
||||
</a>
|
||||
|
||||
<a class="logo" href="https://github.com/braver/programmingfonts">
|
||||
<svg alt="github logo" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="16" height="16">
|
||||
<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
|
||||
</svg>
|
||||
<span class="screenreader-only">Github repo</span>
|
||||
</a>
|
||||
</h1>
|
||||
<p class="subtitle">Test drive all the programming fonts!</p>
|
||||
|
||||
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<form>
|
||||
<label for="code" class="screenreader-only">Code area</label>
|
||||
<textarea id="code" name="code">
|
||||
// Type some code ->
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue