-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
68 lines (60 loc) · 4.26 KB
/
Copy pathindex.html
File metadata and controls
68 lines (60 loc) · 4.26 KB
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
---
layout: default
title: The Access Lab
---
<div class="dx-content">
<!-- Intro -->
<span class="eyebrow">UC San Diego Library · Digital Experience Team</span>
<h1 class="page-title">The Access Lab</h1>
<p class="lead">Access Lab is an experiential introduction to digital accessibility. Each experiment provides a hands-on introduction to the many ways people access and interact with digital information.</p>
<!-- ── Experience cards ──────────────────────────────────
Stretched-link pattern: only the <h2> title is an <a>.
A CSS ::after on the link covers the full card, making
the entire card clickable without wrapping non-interactive
content in an anchor (WCAG-correct pattern).
──────────────────────────────────────────────────────────── -->
<div class="al-exp-grid" role="list">
<article class="al-exp-card" role="listitem">
<h2 class="al-exp-card__title">
<a class="al-exp-card__link" href="seeing-hearing.html">Seeing and Hearing Information</a>
</h2>
<p class="al-exp-card__desc">Explore how the same digital content can become accessible or inaccessible depending on how the information is formatted and presented.</p>
<div class="al-exp-card__tags" aria-label="Concepts covered">
<span class="badge">Color contrast</span>
<span class="badge">Screen readers</span>
<span class="badge">Images of text</span>
</div>
</article>
<article class="al-exp-card" role="listitem">
<h2 class="al-exp-card__title">
<a class="al-exp-card__link" href="keyboard-navigation.html">Keyboard Navigation</a>
</h2>
<p class="al-exp-card__desc">Navigate the web using only <key>Tab</key> and <key>Enter</key> on your keyboard. Even user interface elements that look the same may provide different levels of access.</p>
<div class="al-exp-card__tags" aria-label="Concepts covered">
<span class="badge">Keyboard access</span>
<span class="badge">Semantic HTML</span>
</div>
</article>
</div><!-- /al-exp-grid -->
<!-- Reframe -->
<div class="panel al-reframe-panel">
<h2>Reframing our conversations about accessibility</h2>
<p>All of our digital work already involves thinking about accessibility. When we choose a font size, a color combination, or a file format, we’re making decisions that shape who can access that information.</p>
<p>Those decisions are often shaped by how we personally interact with the world. </p>
<p>The next stage of accessibility work builds on what we’re already doing. You can take the next step by asking:</p>
<blockquote>How can I make this information accessible for people who experience and interact with information in different ways than I do?</blockquote>
</div>
<!-- For library workers
<div class="panel panel--featured al-insight-panel" role="note">
<div class="panel__header">
<div class="panel__icon">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
</div>
<h2 class="panel__title">For library workers specifically</h2>
</div>
<div class="panel__body">
A library’s mission is information access. When we choose whether to include alt text, use real text over a scan, or mark up a button correctly, we’re deciding which of our users can engage with our mission.
</div>
</div>
-->
</div><!-- /dx-content -->