-
Notifications
You must be signed in to change notification settings - Fork 0
/
accessibility.html
152 lines (138 loc) · 7.35 KB
/
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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="I handcrafted this portfolio using semantic HTML and CSS with the intent of being usable before flashy (a.k.a probably inaccessible).">
<meta name="author" content="Josh Kim">
<title>Accessibility Statement | Josh Kim is a humanity centered accessibility strategist, educator, and design researcher</title>
<!-- Stylesheets -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/jk.css" rel="stylesheet">
<!-- Fonts from Google -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Libre Baskerville:wght@400&display=swap" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<!-- Skip link for keyboard users -->
<a class="skip-main" href="#main">Skip to main content</a>
<!--Navigation -->
<header class="header">
<div class="container">
<nav class="jnav" aria-label="main">
<a href="index.html">Josh 内藤</a>
<span class="divider"></span>
<ul>
<li><a href="work.html">Work</a></li>
<li><a href="speaking.html">Speaking</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</div>
<!--end of container -->
</header>
<!-- Banner -->
<main role="main" id="main" tabindex="-1">
<article>
<div class="container">
<div class="heading">
<div class="row">
<div class="col-lg-12 col-xl-9">
<h1>Accessibility Statement</h1>
<p>I handcrafted this portfolio to ensure more folk can use it without barriers. It's not perfect, but it's getting there.</p>
</div>
</div><!--End of row-->
</div>
</div>
<div class="content">
<div class="container">
<div class="row ">
<div class="col-lg-9 col-xl-8">
<h2 id="conformance-status">Conformance status</h2>
<p>The Web Content Accessibility Guidelines (WCAG) defines requirements for designers and developers to improve accessibility for people with disabilities. It defines three levels of conformance: Level A, Level AA, and Level AAA. </p>
<p>My portfolio is conformant with WCAG 2.2 level AA success criteria. It strives to surpass AAA criteria whenever possible.
<h3>Accessibility features</h3>
<ul>
<li>Semantic HTML landmarks and elements </li>
<li>Logical heading structures</li>
<li>Links with target and purpose </li>
<li>Alternative text for images (including all of my curated memes)</li>
<li>Responsive design which works on any screen size</li>
<li>Large type that respects zooming and font resizing</li>
<li>Reduced motion preferences are respected by default</li>
<li>Light and dark mode preferences are respected by default</li>
</ul>
<h3>Future improvements</h3>
<ul>
<li>Noting external links</li>
<li>Adding transcripts for my talks</li>
<li>Hiring disabled testers, so I can be more certain this is usable and not strictly based off of the bare minimum standards (coughs, WCAG, coughs)</li>
<li>And honestly, a ton more that I may be unaware about-- if you got some advice, please let me know</li>
</ul>
<h2 id="testing">Testing approach</h2>
<p>I self-evaluated all unarchived pages in my portfolio using:</p>
<ul>
<li>Accessibility testing tools (axe and Wave) to catch up to 30% of errors</li>
<li>Keyboard testing</li>
<li>Manual screen reader testing with VoiceOver on Safari and iOS and NVDA on Chrome</li>
</ul>
<p>I’m planning to include more manual screen reader testing on:</p>
<ul>
<li>TalkBack (Android)</li>
<li>JAWs on Internet Explorer</li>
</ul>
<h2 id="feedback">Give me feedback</h2>
<p>I am confident that I am nowhere near 100% in terms of accessibility compliance (or my goal for accessibility beyond compliance) and am committed to doing better.</p>
<p>If you experience any issues on this website, please <a href="mailto:[email protected]">email me feedback</a> at [email protected]. </p>
</div> <!-- column -->
</div> <!-- row -->
</div>
<!--Container-->
</div>
</main>
<!-- Footer -->
<footer class="footer">
<div class="container">
<h2 class="sr-only">Footer</h2>
<div class="row">
<div class="col-4 col-md-2">
<h3>SITEMAP</h3>
<ul role="list">
<li><a href="work.html">Work</a></li>
<li><a href="speaking.html">Speaking</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
<div class="col-4 col-md-2">
<h3>CONTACT</h3>
<ul role="list">
<li><a href="resume.html">Resume</a></li>
<li><a href="mailto:[email protected]">Email</a></li>
<li><a href="https://www.linkedin.com/in/joshkimux/">LinkedIn</a></li>
</ul>
</div>
<div class="col-4 col-md-2">
<h3>A11Y</h3>
<ul role="list">
<li><a href="accessibility.html">Statement</a></li>
<li><a rel="external" href="https://www.a11yproject.com/spotlight/josh-kim/">Spotlight</a></li>
<li><a rel="external" referrerpolicy="strict-origin" href="https://a11y-webring.club/next">Webring</a></li>
</ul>
</div>
<div class="offset-0 col-sm-6 offset-md-1 col-md-5 offset-lg-2 col-lg-4">
<h3>HAIKU</h3>
<ul>
<li class="espresso">Need more espresso</li>
<li class="depresso">This site gives me depresso</li>
<li><a href="portfolio.html">Despite progresso</a></li>
</ul>
</div>
</div>
</div>
</footer>
<!-- js -->
<script src="js/jk.js"></script>
</body>
</html>