-
-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathaccessibility.html
More file actions
207 lines (176 loc) · 9.36 KB
/
accessibility.html
File metadata and controls
207 lines (176 loc) · 9.36 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
<!DOCTYPE html>
<html lang="en-US">
<!-- Head -->
<head>
<!-- Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- File Links -->
<link rel="shortcut icon" href="/assets/icon.ico" type="image/x-icon">
<link rel="stylesheet" href="/assets/style.css">
<link rel="stylesheet" href="/assets/print.css" media="print">
<link rel="alternate" type="application/rss+xml" title="Zachary Kai" href="/assets/rss.xml">
<link rel="webmention" href="https://webmention.io/zacharykai.net/webmention" />
<link rel="canonical" href="https://zacharykai.net/accessibility">
<!-- Page Info -->
<title>Accessibility | Zachary Kai</title>
<meta name="date" content="2025-04-15">
<meta name="last-modified" content="2025-12-11">
<meta name="description" content="Herein you'll find my accessibility statement: what useful features this website has, what I'm yet to implement, and how you can give me feedback/suggestions.">
</head>
<!-- Body -->
<body>
<!-- Skip Link -->
<p><a href="#top" class="essentials">Begin reading...</a></p>
<!-- Site Header -->
<header>
<nav>
<a href="/">Zachary Kai</a>
</nav>
</header>
<!-- Main Content -->
<main class="h-entry e-content">
<!-- Page Header -->
<header>
<!-- Breadcrumbs -->
<p class="essentials"><a href="/">Homepage</a> • <a href="/sitemap#pages">Pages</a> ↴</p>
<!-- Page Title -->
<h1 class="p-name">Accessibility</h1>
<!-- Necessary Metadata -->
<p class="essentials">
<strong>Written By</strong>: <a href="/about">Zachary Kai</a> »
<strong>Published</strong>: <time class="dt-published" datetime="2025-04-15">15 Apr 2025</time> |
<strong>Updated</strong>: <time class="dt-modified" datetime="2025-12-11">11 Dec 2025</time>
</p>
<!-- Other Metadata -->
<details class="essentials">
<summary>Expand For Other (Hopefully Useful) Metadata</summary>
<ul>
<li>Reading Time: ~1 min (at 238 WPM)
<li>Word Count: 181</li>
</ul>
</details>
</header>
<!-- Page Body -->
<section class="e-content">
<!-- Introduction -->
<p id="top" class="p-summary">Here you'll find my accessibility statement: what useful features this website has, what I'm yet to implement, and how you can give me feedback/suggestions.</p>
<!-- Table Of Contents -->
<details>
<summary><strong>Table Of Contents</strong></summary>
<ul>
<li><a href="#implemented">Implemented Features</a></li>
<li><a href="#planned">Planned Features</a></li>
<li><a href="#suggestions">Suggestions</a></li>
</ul>
</details>
<hr>
<!-- Implemented Features -->
<section>
<h2 id="implemented">Implemented Features</h2>
<ul>
<li>Alt text for images</li>
<li>Appropriate color contrast and minimal color palette</li>
<li>Back to the top and skip to content links</li>
<li>CSS sizing using <code>em</code> instead of <code>pixels</code></li>
<li>Each link's text being specific, not general like 'click here'</li>
<li>Labels for forms: code-side and browser-side</li>
<li>Language attributes for each page within the html</li>
<li>Lazy loading images</li>
<li>No Javascript, only css, html, and some php</li>
<li>Providing multiple file formats of each image to speed up loading times</li>
<li>Section breaks announced with a <code>hr</code></li>
<li>Semantic html: a <code>header</code>, <code>nav</code>, <code>main</code>, various <code>sections</code> for each subheading, and <code>footer</code></li>
<li>System fonts so no loading remote fonts</li>
<li>Tables of contents on each page and post</li>
</ul>
</section>
<hr>
<!-- Planned Features -->
<section>
<h2 id="planned">Planned Features</h2>
<ul>
<li>Aria labels</li>
<li>High-contrast mode</li>
<li>Focus styles</li>
<li>Reduced motion options</li>
<li>WCAG level</li>
</ul>
</section>
<hr>
<!-- Suggestions -->
<section>
<h2 id="suggestions">Suggestions</h2>
<p>Always open to hearing from folks on how I could improve! Please <a href="/contact">contact me</a> with feedback or questions! You'll be credited here, of course.</p>
</section>
<!-- Closing -->
<p>•--♡--•</p>
</section>
<section>
<!-- Closing Metadata -->
<section>
<!-- Tags -->
<p class="essentials"><strong>Tags</strong>: <a href="/tags?tag=indieweb">indieweb</a> · <a href="/tags?tag=resources">resources</a></p>
</section>
<section>
<!-- Copy + Share -->
<p><strong>Copy + Share</strong>: <a href="/accessibility">zacharykai.net/accessibility</a></p>
</section>
</section>
</main>
<!-- Back To Top Link -->
<p><a href="#top" class="essentials">Read again...</a></p>
<!-- H-Card -->
<section class="h-card vcard">
<section id="h-card-image">
<picture>
<source srcset="/assets/icon.webp" type="image/webp">
<img class="u-photo" loading="lazy" src="/assets/icon.png" alt="Zachary Kai's digital drawing: 5 stacked books (blue/teal/green/purple, black spine designs), green plant behind top book, purple heart on either side.">
</picture>
</section>
<section id="h-card-content">
<p><strong><a class="u-url u-id p-name" href="https://zacharykai.net" rel="me"><span class="fn">Zachary Kai</span></a></strong> — <span class="p-pronouns">he/him</span> | <a class="u-email email" href="mailto:hi@zacharykai.net" rel="me">hi@zacharykai.net</a></p>
<p class="p-note">Zachary Kai is a space fantasy writer, offbeat queer, traveler, zinester, and avowed generalist. The internet is his livelihood and lifeline.</p>
</section>
</section>
<!-- Footer -->
<footer>
<!-- Acknowledgement Of Country -->
<p style="margin-top: 0.25em;"><strong>Acknowledgement Of Country</strong>: I owe my existence to the <a href="https://kht.org.au/" rel="noopener">Koori people's</a> lands: tended for millennia by the traditional owners and storytellers. What a legacy. May it prevail.</p>
<!-- Reply Via -->
<p>
<strong>Reply Via</strong>:
<a href="/contact">Email</a> |
<a href="/guestbook">Guestbook</a> |
<a href="/unoffice-hours">UnOffice Hours</a> |
<a href="/webmention" rel="noopener">Webmention</a>
</p>
<!-- Footer Menu -->
<p>
<strong>Est. 2024</strong> ||
<a href="/about">About</a> |
<a href="/art">Art</a> |
<a href="/colophon">Accessibility & Colophon</a> |
<a href="/changelog">Changelog</a> |
<a href="/jots">Jots</a> |
<a href="/now">Now</a> |
<a href="/random">Random</a> |
<a href="/assets/rss.xml">RSS</a> |
<a href="/sitemap">Sitemap</a> |
<a href="/uses">Uses</a>
</p>
<!-- Elsewhere Links -->
<p style="margin-bottom: 0;">
<strong>Elsewhere</strong>:
<a href="https://roadlessread.com" rel="noopener">Blog</a> |
<a href="https://lunaseeker.com/catalog/" rel="noopener">Books</a> |
<a href="https://lunaseeker.com/cv" rel="noopener">CV</a> |
<a href="/github" rel="noopener">Github</a> |
<a href="/linkedin" rel="noopener">Linkedin</a> |
<a href="https://lunaseeker.com/newsletter/" rel="noopener">Newsletter</a> |
<a href="https://lunaseeker.com/offerings" rel="noopener">Offerings</a> |
<a href="https://lunaseeker.com" rel="noopener">Portfolio</a>
</p>
</footer>
</body>
</html>