-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathiveta.html
293 lines (280 loc) · 12.6 KB
/
iveta.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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Inclusive Components</title>
<meta
name="description"
content="A blog trying to be a pattern library. All about designing inclusive web interfaces, piece by piece."
/>
<meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="/favicon.ico" />
<link
href="https://fonts.googleapis.com/css?family=Atkinson+Hyperlegible&display=swap"
rel="stylesheet"
media="all"
onload="if(media!='all')media='all'"
/>
<link rel="canonical" href="http://inclusive-components.design/" />
<meta name="referrer" content="no-referrer-when-downgrade" />
<meta property="og:site_name" content="Inclusive Components" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Inclusive Components" />
<meta
property="og:description"
content="A blog trying to be a pattern library. All about designing inclusive web interfaces, piece by piece."
/>
<meta property="og:url" content="http://inclusive-components.design/" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Inclusive Components" />
<meta
name="twitter:description"
content="A blog trying to be a pattern library. All about designing inclusive web interfaces, piece by piece."
/>
<meta name="twitter:url" content="http://inclusive-components.design/" />
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Website",
"publisher": {
"@type": "Organization",
"name": "Inclusive Components",
"logo": "http://inclusive-components.design/ghost/img/ghosticon.jpg"
},
"url": "https://inclusive-components.design/",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "http://inclusive-components.design"
},
"description": "A blog trying to be a pattern library. All about designing inclusive web interfaces, piece by piece."
}
</script>
<meta name="generator" content="Ghost 0.11" />
<link
rel="alternate"
type="application/rss+xml"
title="Inclusive Components"
href="https://inclusive-components.design/rss/"
/>
<!-- Import the webpage's stylesheet -->
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<a href="#main">Přeskočit na obsah</a>
<header role="banner" class="reversed">
<nav aria-label="site">
<ul>
<li>
<a href="/"
>Schopnost empatie <span class="vh">Přejít domů</span></a
>
</li>
</ul>
</nav>
<div class="central center pad-top">
<h1>Iveta</h1>
<p class="perex">
22 let, nezaměstnaná, ztráta sluchu, ČZJ je její hlavní jazyk, čeština
je druhotná, má vždy zapnuté titulky.
</p>
<svg
class="plug"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
id="Layer_1"
x="0px"
y="0px"
viewbox="0 0 464.001 464.001"
style="enable-background: new 0 0 464.001 464.001"
xml:space="preserve"
>
<g>
<g>
<path
style="fill: #734a3e"
d="M418,357.5c-7.5-16-1.059-19.938-5.667-36.833c-3-11-9.703-15.446-12-24.667 c-2.182-8.755,1.63-24.004-0.667-31.333c-4.148-13.24-9.351-16.738-12-27.667c-2.667-11,4.333-19.333,2-31 c-2.923-14.618-8.177-20.607-10.333-28.333c-4-14.333-2.774-17.918-2.333-29.667c1-26.667-9.17-59.4-17-76 c-8.864-18.792-20.498-29.281-34.314-35H232v395c110,1,200-32,200-32C431.667,371.333,426.703,376.066,418,357.5z"
/>
<path
style="fill: #623f33"
d="M138.314,37c-13.817,5.719-25.45,16.208-34.314,35c-7.83,16.6-18,49.333-17,76 c0.44,11.748,1.667,15.333-2.333,29.667c-2.156,7.726-7.41,13.716-10.333,28.333c-2.333,11.667,4.667,20,2,31 c-2.649,10.929-7.852,14.427-12,27.667c-2.297,7.33,1.515,22.578-0.667,31.333c-2.297,9.221-9,13.667-12,24.667 C47.059,337.562,53.5,341.5,46,357.5c-8.703,18.565-13.667,13.833-14,42.5c0,0,90,33,200,32V37H138.314z"
/>
</g>
<g>
<path
style="fill: #fdc88e"
d="M380.378,436.829l-2.984-22.383l-6.542-49.067c-1.779-13.344-10.151-24.897-22.277-30.744 l-30.861-14.879c-3.003-1.448-6.501-0.135-7.99,2.803l-18.782-6.911c-6.533-2.178-10.94-8.292-10.94-15.179v-25.802l34.461-14.359 C332.349,252.855,344,235.378,344,216v-8c13.255,0,24-10.745,24-24s-10.745-24-24-24v-0.067c0.013,0.013,0.027,0.025,0.04,0.038 c-28.76-28.7-110.502-24.041-112.005-62.884C230.532,135.943,148.733,131.267,120,160l0,0c-13.255,0-24,10.745-24,24 s10.745,24,24,24v8c0,19.377,11.651,36.854,29.538,44.308L184,274.667v25.801c0,6.887-4.407,13.001-10.94,15.179l-18.782,6.911 c-1.489-2.938-4.987-4.251-7.99-2.803l-30.861,14.879c-12.126,5.847-20.498,17.4-22.277,30.744l-6.542,49.067l-2.984,22.383 C81.705,451.216,92.897,464,107.412,464l0,0h249.175l0,0C371.103,464,382.296,451.216,380.378,436.829z"
/>
<path
style="fill: #f5b97a"
d="M184,274v26.468c0,5.693-3.017,10.852-7.752,13.701C243.171,325.732,279.998,274.003,280,274H184z"
/>
</g>
<g>
<path
style="fill: #00bea4"
d="M380.378,436.829l-9.526-71.451c-1.779-13.344-10.151-24.897-22.277-30.744l-30.861-14.879 c-3.107-1.498-6.75-0.046-8.143,3.109C289.335,368.69,254.667,390,232,400.003c-22.667-10.002-57.335-31.313-77.569-77.14 c-1.393-3.155-5.036-4.606-8.143-3.109l-30.861,14.879c-12.126,5.847-20.498,17.4-22.277,30.744l-9.526,71.451 C81.706,451.215,92.898,464,107.414,464h249.175C371.103,464.001,382.296,451.216,380.378,436.829z"
/>
</g>
<g>
<circle style="fill: #fdc88e" cx="120" cy="184" r="24" />
</g>
<path
style="fill: #ffd7a3"
d="M344,160v-16c0-22.091-17.909-40-40-40H160c-22.092,0-40,17.909-40,40v16c-13.255,0-24,10.745-24,24 s10.745,24,24,24v8c0,19.377,11.651,36.854,29.538,44.308l51.691,21.538c9.75,4.063,20.208,6.154,30.77,6.154l0,0 c10.562,0,21.019-2.092,30.769-6.154l51.694-21.539C332.349,252.855,344,235.378,344,216v-8c13.255,0,24-10.745,24-24 S357.255,160,344,160z"
/>
<g>
<path
style="fill: #fdc88e"
d="M239.899,99L228,92c0,0-20.648,26.536-76,40c-27.75,6.75-32,28-32,28h-0.001 C106.745,160.001,96,170.746,96,184c0,13.255,10.745,24,24,24v8c0,19.378,11.651,36.855,29.538,44.308l51.69,21.538 c2.53,1.054,5.112,1.962,7.727,2.749c-22.844-16.711-38.05-31.32-46.96-40.872c-6.482-6.95-9.995-16.121-9.995-25.625V159 C174,142.667,229,144.667,239.899,99z"
/>
</g>
<g>
<path
style="fill: #623f33"
d="M176,192L176,192c-4.4,0-8-3.6-8-8v-8c0-4.4,3.6-8,8-8l0,0c4.4,0,8,3.6,8,8v8 C184,188.4,180.4,192,176,192z"
/>
</g>
<g>
<path
style="fill: #623f33"
d="M288,192L288,192c-4.4,0-8-3.6-8-8v-8c0-4.4,3.6-8,8-8l0,0c4.4,0,8,3.6,8,8v8 C296,188.4,292.4,192,288,192z"
/>
</g>
<g>
<g>
<path
style="fill: #e4b07b"
d="M232,248.219c-14.223,0-27.527-3.5-36.5-9.605c-3.652-2.484-4.602-7.461-2.113-11.113 c2.48-3.648,7.461-4.598,11.113-2.113c6.289,4.277,16.57,6.832,27.5,6.832s21.211-2.555,27.5-6.832 c3.66-2.492,8.629-1.539,11.113,2.113c2.488,3.652,1.539,8.629-2.113,11.113C259.529,244.719,246.223,248.219,232,248.219z"
/>
</g>
</g>
<g>
<path
style="fill: #00ab9a"
d="M237.106,410.864c38.651-18.172,68.226-48.756,86.091-88.465l-5.484-2.644 c-3.107-1.498-6.75-0.046-8.143,3.109C289.335,368.69,254.667,390,232,400.003c-22.667-10.002-57.335-31.313-77.569-77.14 c-1.393-3.155-5.036-4.606-8.143-3.109l-5.483,2.644c17.865,39.709,47.439,70.293,86.09,88.465l5.105,2.402L237.106,410.864z"
/>
</g>
<g>
<path
style="fill: #00ab9a"
d="M144,429.725c0-8.895-2.965-17.536-8.426-24.558l-39.339-50.579 c-1.497,3.403-2.582,7.011-3.086,10.79l-9.526,71.451c-1.918,14.387,9.274,27.172,23.79,27.172H144V429.725z"
/>
</g>
<g>
<path
style="fill: #00ab9a"
d="M320,429.725c0-8.895,2.965-17.536,8.426-24.558l39.339-50.579 c1.497,3.403,2.582,7.011,3.086,10.79l9.526,71.451c1.918,14.387-9.274,27.172-23.79,27.172H320V429.725z"
/>
</g>
<path
style="fill: #734a3e"
d="M256.072,0c-16.242,0-23.667,7.577-24.036,7.963C231.667,7.577,224.243,0,208,0 C163.75,0,65.5,61,104,152l16,8c28.733-28.733,110.532-24.057,112.036-62.914c1.504,38.857,83.302,34.181,112.036,62.914l16-8 C398.572,61,300.322,0,256.072,0z"
/>
<g>
<path
style="fill: #623f33"
d="M208,0C163.75,0,65.5,61,104,152v8h16c6.312-6.312,15.188-11.01,25.21-14.913 C150.5,50.5,201.691,0.667,232,8l0.023-0.046C231.777,7.691,224.385,0,208,0z"
/>
</g>
</g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
</svg>
</div>
</header>
<main id="main" class="central">
<section>
<h2>Vyzkoušejte si, jak Iveta prožívá web</h2>
<ul>
<li>
Nainstalujte si do Google Chrome
<a
href="https://chrome.google.com/webstore/detail/clever-mute/eadinjjkfelcokdlmoechclnmmmjnpdh"
rel="noopener"
>rozšíření Clever Mute</a
>
</li>
<li>
Příklad
<a href="/iveta-hlucha.html"
>jak někteří se ztrátou sluchu mohou vnímat web</a
>
</li>
</ul>
</section>
<section>
<h2>Jak pro Ivetu udělat věci lepšími</h2>
<ul>
<li>
Nechte lidi, aby si zvolili způsob, jak vás budou kontaktovat – a
těm, kteří to potřebují, nabídněte službu v ČZJ.
</li>
<li>
Pokud nabízíte osobní schůzky, poskytněte komunikační podporu,
například tlumočníky do jazyka ČZJ. Vždy se lidí ptejte, co jim
nejvíce vyhovuje.
</li>
<li>
Pro důležité výrazy můžete ukázat video s překladem na znakového
jazyka. Například na stránce
<a href="https://www.borger.dk">Borger.dk</a> (v patičce přepnutí do
znakového jazyka).
</li>
<li>
Ujistěte se, že video obsah je opatřen titulky a že titulky byly
zkontrolovány z hlediska srozumitelnosti a správnosti. Mějte k
dispozici přepisy zvukového obsahu. Uvažujte o verzi ve znakovém
jazyce pro osoby s omezenou schopností odezírání.
</li>
<li>
Používejte přístup "obrácené pyramidy" s nejdůležitějšími
informacemi nahoře.
</li>
<li>
Dělejte uživatelský výzkum a testujte s lidmi, kteří mají ztrátu
sluchu nebo jsou nedoslýchaví.
</li>
</ul>
</section>
<section>
<h2>Statistiky</h2>
<p>Podle ČSÚ ...</p>
<p>
<a
href="https://www.czso.cz/documents/10180/90600407/26000619.pdf/b1d5a2b3-a309-4412-a962-03d847d3d1a0?version=1.5"
>Zobrazit celou zprávu ČSÚ z roku 2018 (PDF)</a
>
.
</p>
</section>
</main>
<footer class="central">
<div class="site-meta">
<p>
<a href="/"
><span aria-hidden="true">← </span>Zpět na domovskou stránku</a
>
</p>
</div>
<div class="site-meta">
<p>Navrhl <a href="https://github.com/hlavsa">hlavsa</a> / 2022.</p>
</div>
</footer>
</body>
</html>