-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
40 lines (39 loc) · 6.69 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
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<title>Accessabilly download link</title>
</head>
<body>
<!-- some svg icons in a sprite -->
<!-- SVG design by Jozef Krajčovič -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="hide">
<defs>
<symbol id="doc" viewBox="0 0 30 30"><path d="M28.692 7.584l-5.459-6.33L22.154 0H9.257a3.131 3.131 0 0 0-3.132 3.134v3.984h1.942l-.001-3.221a1.76 1.76 0 0 1 1.757-1.762l11.03-.01V7.35a3.52 3.52 0 0 0 3.521 3.522h3.818l-.188 15.074a1.766 1.766 0 0 1-1.758 1.759l-16.561-.007c-.886 0-1.6-.871-1.604-1.942v-1.274H6.135v1.901c0 1.914 1.281 3.467 2.854 3.467l17.824-.006a3.14 3.14 0 0 0 3.135-3.135V9.043l-1.256-1.459" fill="#434440"/><path d="M20.213 25.451H0V6.147h20.213v19.304M1.942 23.509h16.326V8.09H1.942" fill="#2372ba"/><path fill="#2372ba" d="M17.052 11.922l-2.954 8.973h-2.452l-1.688-5.201-1.77 5.201H5.744l-2.759-8.973h2.513l1.607 5.799 1.958-5.799h1.911l1.822 5.799 1.747-5.799h2.509"/></symbol>
<symbol id="img" viewBox="0 0 30 30"><path opacity=".898" fill="#5b2d8d" d="M2.954 20.331l2.913-2.186 1.485 1.084 5.884-4.354 2.186 1.625 1.483-1.083v4.914H2.954M5.547 10.939c1.085 0 1.967.822 1.967 1.833 0 1.014-.882 1.833-1.967 1.833-1.088 0-1.968-.819-1.968-1.833 0-1.011.88-1.833 1.968-1.833"/><path d="M28.676 7.58l-5.454-6.327L22.14 0H9.253a3.13 3.13 0 0 0-3.132 3.132v3.981h1.941l-.001-3.218a1.76 1.76 0 0 1 1.757-1.761l11.024-.01v5.222a3.518 3.518 0 0 0 3.518 3.52h3.816l-.186 15.065a1.77 1.77 0 0 1-1.759 1.759l-16.552-.008c-.886 0-1.598-.87-1.604-1.939v-1.277H6.131v1.901c0 1.914 1.28 3.465 2.853 3.465l17.812-.005a3.135 3.135 0 0 0 3.134-3.134V9.038L28.676 7.58" fill="#434440"/><path d="M20.201 25.437H0V6.143h20.201v19.294M1.94 23.494h16.319V8.085H1.94" fill="#5b2d8d"/></symbol>
<symbol id="pdf" viewBox="0 0 30 30"><path d="M28.595 7.559L23.157 1.25 22.079 0H9.228a3.122 3.122 0 0 0-3.124 3.124v3.971H8.04l-.001-3.21a1.756 1.756 0 0 1 1.752-1.756l10.994-.01v5.208a3.507 3.507 0 0 0 3.507 3.51h3.807l-.189 15.02a1.76 1.76 0 0 1-1.752 1.754l-16.506-.008c-.883 0-1.594-.866-1.6-1.935v-1.271H6.114v1.896c0 1.907 1.277 3.455 2.845 3.455l17.763-.005a3.127 3.127 0 0 0 3.124-3.126V9.013l-1.251-1.454" fill="#434440"/><path d="M20.145 25.365H0V6.126h20.145v19.239M1.934 23.429h16.274V8.062H1.934" fill="#ea4c3a"/><path d="M10.314 9.066c.305.141.242.328.148 1.201-.097.905-.414 2.554-1.032 4.173-.616 1.622-1.529 3.21-2.325 4.39-.797 1.178-1.478 1.943-1.998 2.386-.519.441-.882.559-1.115.599-.233.04-.339 0-.405-.117-.063-.118-.084-.315-.031-.551.053-.234.181-.51.542-.863.36-.354.956-.785 1.785-1.188.829-.402 1.891-.775 2.762-1.031a19.429 19.429 0 0 1 2.146-.5 15.856 15.856 0 0 1 1.604-.226 8.981 8.981 0 0 1 2.815.216c.406.097.745.217 1.042.402.299.187.552.441.681.726.127.286.127.6.021.825-.105.227-.318.364-.563.441-.246.08-.522.099-.851 0-.33-.098-.712-.314-1.115-.599-.404-.284-.829-.638-1.381-1.187a24.627 24.627 0 0 1-1.807-2.023c-.573-.727-1.041-1.434-1.358-2.033a7.476 7.476 0 0 1-.627-1.582 8.414 8.414 0 0 1-.287-1.422 5.019 5.019 0 0 1 .021-1.149c.042-.315.106-.55.213-.708a.747.747 0 0 1 .362-.275c.106-.04.169-.04.234-.049.063-.009.126-.029.222 0 .094.03.216.104.34.18" stroke-miterlimit="10" fill="none" stroke="#ea4c3a" stroke-width=".75" stroke-linejoin="round"/></symbol>
<symbol id="ppt" viewBox="0 0 30 30"><path d="M28.515 7.538L23.09 1.247 22.017 0H9.2a3.112 3.112 0 0 0-3.112 3.115v3.959h1.93l-.001-3.201a1.748 1.748 0 0 1 1.746-1.751l10.962-.01v5.193a3.498 3.498 0 0 0 3.499 3.5h3.795l-.187 14.98a1.756 1.756 0 0 1-1.747 1.749l-16.46-.008c-.881 0-1.59-.864-1.594-1.929v-1.269H6.097v1.891c0 1.901 1.273 3.445 2.837 3.445l17.712-.005a3.12 3.12 0 0 0 3.116-3.117V8.987l-1.247-1.449" fill="#434440"/><path d="M20.088 25.294H0V6.108h20.088v19.186M1.93 23.362h16.225V8.04H1.93" fill="#dd5b26"/><path d="M11.587 14.76c0-.359-.109-.646-.33-.86-.222-.215-.598-.322-1.129-.322h-.885v2.396h.879c.572 0 .962-.119 1.175-.354.194-.211.29-.499.29-.86m2.345-.026c0 .792-.198 1.445-.596 1.964-.517.669-1.373 1.005-2.571 1.005H9.243v3.061H6.899v-8.915h3.824c1.088 0 1.914.301 2.478.904.487.517.731 1.178.731 1.981z" fill="#dd5b26"/></symbol>
<symbol id="txt" viewBox="0 0 30 30"><path d="M28.65 7.574l-5.449-6.322L22.122 0H9.246c-1.73 0-3.13 1.4-3.13 3.13v3.979h1.939l-.001-3.217a1.76 1.76 0 0 1 1.756-1.76l11.017-.01V7.34a3.512 3.512 0 0 0 3.513 3.517h3.814l-.188 15.051a1.762 1.762 0 0 1-1.755 1.757l-16.54-.009c-.885 0-1.597-.866-1.603-1.938v-1.273H6.126v1.899c0 1.909 1.279 3.462 2.85 3.462l17.798-.005a3.135 3.135 0 0 0 3.131-3.134V9.031L28.65 7.574" fill="#434440"/><path d="M20.185 25.416H0V6.138h20.185v19.278M1.938 23.475h16.306V8.079H1.938" fill="#6b533b"/><path fill="#6b533b" d="M3.077 10.93h13.909v1.987H3.077V10.93M3.078 14.905h13.91v1.987H3.078v-1.987M3.078 18.879h7.948v1.988H3.078v-1.988"/></symbol>
<symbol id="xls" viewBox="0 0 30 30"><path d="M28.705 7.587l-5.461-6.333L22.164 0H9.262a3.133 3.133 0 0 0-3.133 3.136v3.985h1.942L8.07 3.899a1.761 1.761 0 0 1 1.758-1.764l11.034-.01v5.228a3.522 3.522 0 0 0 3.524 3.523h3.819l-.188 15.081a1.77 1.77 0 0 1-1.759 1.761l-16.57-.008c-.887 0-1.601-.87-1.605-1.942v-1.277H6.138v1.904c0 1.912 1.282 3.468 2.856 3.468l17.831-.004a3.141 3.141 0 0 0 3.137-3.139V9.047l-1.257-1.46" clip-rule="evenodd" fill="#434440" fill-rule="evenodd"/><path d="M20.223 25.463H0V6.149h20.223v19.314m-18.28-1.944h16.333V8.093H1.943" fill="#08743b"/><path fill="#08743b" d="M15.73 20.903h-3.405l-2.324-3.284-2.44 3.284H4.14l4.244-5.336-3.427-4.669h3.455l1.604 2.538 1.71-2.538h3.516l-3.593 4.669 4.081 5.336"/></symbol>
</defs>
</svg>
<main>
<h1>Proposal for a more accessible Download Link</h1>
<figure class="download">
<a href="https://accessabilly.com/wp-content/uploads/2018/03/wcag20-guidelines-20081211-a4.pdf" download="wcag20.pdf" type="application/pdf" class="download__link" aria-describedby="caption">
<svg aria-hidden="true" focusable="false" class="download__icon">
<use xlink:href="#pdf"></use>
</svg>
<span class="download__title">Web Accessibility Guidelines 2.0</span>
</a>
<figcaption class="download__additional-info" id="caption">
<span class="download__filetype"><abbr tabindex="0" title="Portable Document Format">PDF</abbr>,</span>
<span class="download__filesize">471 <abbr tabindex="0" title="Kilobyte">KB</abbr>,</span>
<time datetime="2008-12-11" class="download__filedate">December 11th, 2008</time>
<small>© <abbr tabindex="0" title="World Wide Web Consortium">W3C</abbr></small>
</figcaption>
</figure>
</main>
</body>
</html>