-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathaccessibility.html
More file actions
255 lines (236 loc) · 10.8 KB
/
Copy pathaccessibility.html
File metadata and controls
255 lines (236 loc) · 10.8 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
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
<!DOCTYPE html>
<html lang="en" prefix="og: https://ogp.me/ns#">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessibility Statement - Gary Innerarity</title>
<meta name="description" content="Accessibility statement for garyinnerarity.com — commitment to WCAG 2.1 AA, known limitations, and how to report issues.">
<meta name="author" content="Gary Innerarity">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://garyinnerarity.com/accessibility">
<meta property="og:type" content="website">
<meta property="og:title" content="Accessibility Statement - Gary Innerarity">
<meta property="og:description" content="Accessibility commitment, known limitations, and contact information for garyinnerarity.com.">
<meta property="og:url" content="https://garyinnerarity.com/accessibility">
<meta property="og:site_name" content="Gary Innerarity">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,600;12..96,700&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/styles.css">
<style>
.a11y-page {
max-width: 720px;
margin-inline: auto;
padding: var(--section-py) var(--gap);
}
.a11y-page h1 {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 700;
line-height: 1.1;
margin-bottom: 1rem;
}
.a11y-page .meta {
font-size: 0.875rem;
color: var(--text-muted);
margin-bottom: 2.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--border);
}
.a11y-page h2 {
font-size: 1.25rem;
font-weight: 600;
margin-top: 2.5rem;
margin-bottom: 0.75rem;
color: var(--text);
}
.a11y-page p,
.a11y-page li {
font-size: 1rem;
line-height: 1.75;
color: var(--text-muted);
margin-bottom: 0.75rem;
}
.a11y-page ul {
padding-left: 1.5rem;
margin-bottom: 1rem;
}
.a11y-page a {
color: var(--accent);
text-decoration: underline;
}
.a11y-page a:hover {
color: var(--accent-dark);
}
.a11y-page .status-badge {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 999px;
font-size: 0.8125rem;
font-weight: 600;
background: var(--tag-bg);
color: var(--tag-text);
margin-bottom: 1.5rem;
}
.a11y-page .contact-card {
margin-top: 1rem;
padding: 1.25rem 1.5rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-subtle);
}
.a11y-page .contact-card p {
margin-bottom: 0.25rem;
}
.a11y-page .back-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--text-muted);
text-decoration: none;
margin-bottom: 2rem;
}
.a11y-page .back-link:hover {
color: var(--accent);
}
</style>
</head>
<body>
<!-- Skip to main content (accessibility) -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- ── Site Navigation ──────────────────────────────────────── -->
<nav id="site-nav" aria-label="Site navigation">
<a href="/" class="nav-name">Gary Innerarity, MBA</a>
<ul class="nav-links" id="nav-links-list" role="list">
<li><a href="/#work">Work</a></li>
<li><a href="/#stack">Stack</a></li>
<li><a href="/#skills">Skills</a></li>
<li><a href="/#credentials">Credentials</a></li>
<li><a href="/#timeline">Timeline</a></li>
<li><a href="/blog/">Builders blog</a></li>
</ul>
</nav>
<!-- ── Main Content ─────────────────────────────────────────── -->
<main id="main-content">
<div class="a11y-page container">
<a href="/" class="back-link" aria-label="Back to home page">← Back to home</a>
<h1>Accessibility Statement</h1>
<p class="meta">Last reviewed: July 2026 · garyinnerarity.com</p>
<span class="status-badge">Partially Conformant — WCAG 2.1 AA</span>
<h2>Commitment</h2>
<p>
I am committed to ensuring that <strong>garyinnerarity.com</strong> is accessible to the
widest possible audience, regardless of technology or ability. I actively work toward
conformance with the
<a href="https://www.w3.org/TR/WCAG21/" target="_blank" rel="noopener noreferrer">
Web Content Accessibility Guidelines (WCAG) 2.1<span class="sr-only"> (opens in new tab)</span>
</a>
at Level AA.
</p>
<h2>Measures Taken</h2>
<p>The following accessibility features are in place on this site:</p>
<ul>
<li>Semantic HTML5 landmarks (<code>main</code>, <code>nav</code>, <code>header</code>, <code>footer</code>, <code>section</code>, <code>article</code>, <code>aside</code>) for screen-reader navigation.</li>
<li>Skip-to-main-content link at the top of every page for keyboard users.</li>
<li>Descriptive <code>alt</code> text on all meaningful images; decorative images are marked with <code>aria-hidden="true"</code>.</li>
<li>Colour contrast ratios meeting WCAG AA (minimum 4.5:1 for body text, 3:1 for large text and UI components).</li>
<li>Visible focus indicators (<code>:focus-visible</code>) on all interactive elements using a 2 px outline.</li>
<li>All interactive controls are keyboard-operable and have accessible names via <code>aria-label</code> or <code>aria-labelledby</code>.</li>
<li>Dynamic content regions use <code>aria-live="polite"</code> to announce updates to screen readers.</li>
<li>The <code>lang</code> attribute is set to <code>en</code> on every page.</li>
<li>Tab-panel interfaces use <code>role="tablist"</code>, <code>role="tab"</code>, and <code>aria-selected</code> to convey state.</li>
<li>Responsive layout adapts from 320 px wide to large desktop viewports without loss of content.</li>
</ul>
<h2>Known Limitations</h2>
<p>
While I strive for full AA conformance, the following known limitations exist. I am actively
working to resolve them:
</p>
<ul>
<li>
<strong>3D brain visualisation (<a href="/index-brain.html">index-brain.html</a>):</strong>
The interactive Three.js canvas is not fully accessible to screen reader or keyboard-only
users. This page is a supplementary visual and all content represented within it is also
available in text form on the main portfolio page.
</li>
<li>
<strong>Particle background animation:</strong> The animated particle canvas is decorative
and is marked <code>aria-hidden="true"</code>, but users who prefer reduced motion will
still see animation. A <code>prefers-reduced-motion</code> media query is present in the
CSS to disable most transitions; particle animation will be disabled in a future update.
</li>
<li>
<strong>Audio content:</strong> Podcast-style audio episodes in the notes viewer do not
currently have full transcripts. Transcripts are planned for a future update.
</li>
</ul>
<h2>Technical Specification</h2>
<p>
This site is built with plain HTML5, CSS, and vanilla JavaScript. It relies on the following
assistive-technology-compatible technologies:
</p>
<ul>
<li>HTML5 semantic elements and WAI-ARIA 1.2 attributes.</li>
<li>CSS custom properties with sufficient colour contrast across light and dark themes.</li>
<li>
<a href="https://marked.js.org/" target="_blank" rel="noopener noreferrer">
marked.js<span class="sr-only"> (opens in new tab)</span>
</a>
for client-side Markdown rendering (notes and skills viewer).
</li>
</ul>
<h2>Conformance Status</h2>
<p>
<em>Partially conformant</em> means that some parts of the content do not fully conform to the
accessibility standard. The non-conformances are listed under Known Limitations above.
The main portfolio content on the home page is intended to fully conform to WCAG 2.1 AA.
</p>
<h2>Feedback and Contact</h2>
<p>
If you experience any barriers while using this site, or would like to request accessible
alternatives for content you cannot access, please get in touch. I take accessibility
feedback seriously and will respond within 5 business days.
</p>
<div class="contact-card" role="complementary" aria-label="Contact information">
<p><strong>Gary Innerarity</strong></p>
<p>
LinkedIn:
<a href="https://www.linkedin.com/in/garyinnerarity/" target="_blank" rel="noopener noreferrer">
linkedin.com/in/garyinnerarity<span class="sr-only"> (opens in new tab)</span>
</a>
</p>
<p>
GitHub:
<a href="https://github.com/ospf2fullstack" target="_blank" rel="noopener noreferrer">
github.com/ospf2fullstack<span class="sr-only"> (opens in new tab)</span>
</a>
</p>
</div>
<h2>Formal Complaints</h2>
<p>
If you are not satisfied with the response you receive, you may contact the
<a href="https://www.equalityhumanrights.com/en" target="_blank" rel="noopener noreferrer">
Equality and Human Rights Commission<span class="sr-only"> (opens in new tab)</span>
</a>
(UK) or the relevant regulatory body in your jurisdiction.
</p>
</div>
</main>
<!-- ── Footer ───────────────────────────────────────────────── -->
<footer id="site-footer">
<div class="container">
<nav class="footer-links" aria-label="Social and contact links">
<a href="https://www.linkedin.com/in/garyinnerarity/" target="_blank" rel="noopener noreferrer">
LinkedIn<span class="sr-only"> (opens in new tab)</span>
</a>
<a href="https://github.com/ospf2fullstack" target="_blank" rel="noopener noreferrer">
GitHub<span class="sr-only"> (opens in new tab)</span>
</a>
</nav>
<p class="footer-meta">Gary Innerarity · MBA · Solutions Engineer</p>
<p class="footer-meta">The views expressed here are my own and do not represent those of my employer.</p>
</div>
</footer>
</body>
</html>