-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwhat-is-web-accessibility.html
69 lines (65 loc) · 5 KB
/
what-is-web-accessibility.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
<!DOCTYPE html>
<html lang="en-GB" xml:lang="en-GB" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>What Is Web Accessibility and Why Is It Important? | GTx HDM1.2aX</title>
<link rel="stylesheet" type="text/css" media="screen" href="./css/gtx_hdm12ax.css" title="Default style" id="rel-css-default" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="./css/black-on-white.css" title="Black on white (high contrast)" id="rel-css-black-on-white" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="./css/white-on-black.css" title="White on black (high contrast)" id="rel-css-white-on-black" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="./css/yellow-on-black.css" title="Yellow on black (high contrast)" id="rel-css-yellow-on-black" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="./css/lime-on-black.css" title="Lime on black (high contrast)" id="rel-css-lime-on-black" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="./css/brown-on-buff.css" title="Brown on buff (low contrast)" id="rel-css-brown-on-buff" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="./css/systemcolours.css" title="System colours" id="rel-css-system-colours" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="./css/nocolours.css" title="‘No colours’" id="rel-css-no-colours" />
<link rel="stylesheet" type="text/css" href="./js/plyr-2.0.13/plyr.css" />
<meta name="robots" content="noindex, nofollow" />
<meta name="googlebot" content="noindex, nofollow" />
<meta name="author" content="Christophe Strobbe" />
</head>
<body>
<header>
<h1><span class="h1txt">What Is Web Accessibility and Why Is It Important?</span></h1>
<p class="skiplink"><a class="skiplink" href="#main">Skip to main content</a></p>
</header>
<nav>
<h2>Site Navigation</h2>
<ul>
<li><a href="index.html" rel="home">Home</a></li>
<li><a href="accessibility-usability.html">Accessibility and Usability</a></li>
<li class="active"><a aria-current="page" href="what-is-web-accessibility.html" title="What Is Web Accessibility and Why Is It Important?">Web Accessibility</a></li>
<li><a href="browser-features.html">Browser Features</a></li>
<li><a href="gpii-common-terms.html"><abbr>GPII</abbr> Common Terms</a></li>
<li><a href="glossary.html" rel="glossary"><abbr>ICT</abbr> Accessibility Glossary</a></li>
<li><a href="links.html">Links</a></li>
</ul>
</nav>
<main id="main">
<p>In the video below, André Meixner, Head of User Centered Test (Accessibility & Usability) at T-Systems Multimedia Solutions <abbr lang="de" title="Gesellschaft mit beschränkter Haftung">GmbH</abbr>,
explains how web accessibility is evaluated at his company.
</p>
<p>Below is the video embedded using the video player <a href="https://github.com/sampotts/plyr">plyr</a>.</p>
<div data-type="youtube" data-video-id="ipKNMMeKhmI" data-plyr='{ title: "What Is Web Accessibility and Why Is It Important?", controls: ["captions"], captions: true }' class="a11y-video-moocap"></div>
<p>Below is the same video embedded YouTube's standard embed code.</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ipKNMMeKhmI" allowfullscreen="allowfullscreen"></iframe>
<p>Direct link to the video
<a href="https://www.youtube.com/watch?v=ipKNMMeKhmI">What Is Web Accessibility and Why Is It Important?</a> on YouTube.
</p>
</main>
<footer>
<p id="licence">
<a rel="license" href="https://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="./img/cc_by_4.0_88x31.png" /></a><br />
<strong>Example Site for GTx HDM1.2aX</strong> by <a href="https://github.com/REMEXLabs"><abbr>HdM</abbr> REMEXLabs</a> is licensed under a
<a rel="license" href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
<br />Copyright © <span lang="de">Hochschule der Medien</span> (<abbr>HdM</abbr>) / Stuttgart Media University, 2017.
</p>
<p><a href="contact-form.html">Contact form</a> | <a href="publisherinfo.html">Publisher information / <span lang="de">Impressum</span></a> | <a href="https://github.com/REMEXLabs/GTx_HDM1.2aX">GitHub repository</a></p>
</footer>
<script src="js/plyr-2.0.13/plyr.js" type="text/javascript"></script>
<!-- Rangetouch to fix <input type="range"> on touch devices (see https://rangetouch.com) -->
<script src="js/rangetouch-1.0.5/rangetouch.js" type="text/javascript"></script>
<script type="text/javascript">
plyr.setup('.a11y-video-moocap', { captions: { defaultActive: true }, controls: ['play', 'progress', 'currrent-time', 'volume', 'mute', 'captions', 'fullscreen'], tooltips: { controls: true, seek: true}, displayDuration: true });
console.log("plyr.supported: " + plyr.supported("video"));
</script>
</body>
</html>