-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
101 lines (97 loc) · 7.25 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
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
<!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>Example Site for 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" />
<meta name="robots" content="noindex, nofollow" />
<meta name="googlebot" content="noindex, nofollow" />
<meta name="author" content="Christophe Strobbe" />
</head>
<body id="home">
<header>
<h1><span class="h1txt"><abbr>GTx</abbr> <abbr>HDM</abbr>1.2aX</span></h1>
<p class="skiplink"><a class="skiplink" href="#main">Skip to main content</a></p>
</header>
<nav>
<h2>Site Navigation</h2>
<ul>
<li class="active"><a aria-current="page" href="index.html" rel="home">Home</a></li>
<li><a href="accessibility-usability.html">Accessibility and Usability</a></li>
<li><a 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">
<section>
<h2>User Interface Personalization</h2>
<p>The course “User Interface Personalization” focuses on adaptations that web developers can implement
in web pages and web applications to suit various needs of users. Most of us are probably already aware of
various types of adaptation and personalization on the web. For example, many websites show
personalized advertisements, based on things that “they” know about us. This type of personalization
is based on data that we have provided, for example, by visiting certain websites,
by “liking” certain types of content, or by mentioning certain topics in e-mails or other content that we create.
</p>
<p>Another type of adaptation is the phenomenon that a webpage may look differently depending on
whether you are viewing it on a desktop computer, a laptop, a tablet or a smartphone.
The deciding factor is, of course, the size of the screen on the device.
</p>
<p>This is very useful, but some people need, or would at least benefit from, adaptations that go further than this.
There can be several reasons for this, which can be summarized by saying that the website or application is not <em>accessible</em>
to them.
In this context <strong>inaccessible</strong> does not mean that the website or application cannot be reached
due to downtime or a slow internet connection or security reasons.
<dfn>Inaccessible</dfn> here means that there is a mismatch between your skills and abilities and the features of the website.
</p>
<p>The goal of the course “User Interface Personalization” is to teach
how to create a better match between these skills and abilities on the one hand and the website on the other.
</p>
<figure>
<img src="./img/gummi-bears-8551_bears-cropped-25pct.png" alt="a row of six gummy bears in different colours: translucent, yellow, orange, bright red, dark red and green" />
<figcaption>There are gummy bears for every preference</figcaption>
</figure>
</section>
<section>
<h2>Features of This Website</h2>
<p>This website contains pages with a variety of <abbr>HTML</abbr> features:</p>
<ul>
<li>structural elements such as <code>header</code>, <code>main</code>, <code>nav</code>, <code>section</code>
and heading elements (<code>h1</code>, <code>h2</code>, etcetera),
</li>
<li>an <code>iframe</code> that embeds a video (see <a href="accessibility-usability.html">Accessibility and Usability</a>),</li>
<li>images and the elements <code>figure</code> and <code>figcaption</code> (see <a href="browser-features.html">Browser Features</a>),</li>
<li>a large table with <code>caption</code>, <code>thead</code>, <code>tbody</code> and <code>tfoot</code> (see <a href="gpii-common-terms.html"><abbr>GPII</abbr> Common Terms</a>),</li>
<li>a definition list using <code>dl</code>, <code>dt</code> and <code>dd</code> (see <a href="glossary.html"><abbr>ICT</abbr> Accessibility Glossary</a>),</li>
<li>lists (on several pages, but especially on the <a href="links.html">Links</a> page),</li>
<li>a form (see <a href="contact-form.html">Contact Form</a>),</li>
<li><code>class</code>, <code>id</code> and
<a href="https://www.w3.org/TR/wai-aria/roles#role_definitions_header"><code>role</code></a>
attributes that can be used in <abbr>CSS</abbr> selectors and JavaScript (in addition to the elements themselves);
</li>
<li>links to “alternate stylesheets”—especially for high contrast—in the <code>head</code> of each page;</li>
<li>valid <abbr>HTML</abbr> and <abbr>CSS</abbr> code, except where a specific feature prevents this (Vimeo's <code>iframe</code> code).</li>
</ul>
</section>
</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><a href="https://remexlabs.github.io/GTx_HDM1.2aX/">Example Site for GTx HDM1.2aX</a></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>
<!-- Online at https://remexlabs.github.io/GTx_HDM1.2aX/index.html -->
</body>
</html>