-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathaccessibility.html
247 lines (201 loc) · 10.5 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
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
<!doctype html>
<title>Accessibility Statement</title>
<meta charset=utf-8><!-- Must appear first! https://code.google.com/archive/p/doctype-mirror/wikis/ArticleUtf7.wiki -->
<meta name='color-scheme' content='dark light'>
<!-- https://developer.chrome.com/blog/300ms-tap-delay-gone-away -->
<!-- https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts -->
<!-- https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag -->
<meta name=viewport content='width=device-width,height=device-height,user-scalable=yes,initial-scale=1.0,minimum-scale=1.0,maximum-scale=2.0,target-densitydpi=device-dpi'>
<link crossorigin rel=preconnect href=https://fonts.gstatic.com>
<link crossorigin rel=preconnect href=https://fonts.googleapis.com>
<link crossorigin rel=preconnect href=https://code.cdn.mozilla.net>
<link rel=stylesheet href=index.css>
<body role=application lang=en tabIndex=0 >
<!-- Skip Nav Links - https://a11yproject.com/posts/skip-nav-links -->
<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Skip_links -->
<a title=Skip href=#main>Skip to main content</a>
<header role=banner>This is the Header</header>
<nav>
<header>Navigation Menu</header>
<details open>
<summary>Menu</summary>
<a rel=external target=external
href=https://adrianroselli.com/accessibility-statement>Example Statement</a>
<a rel=external target=external
title='WAI Accessibility Statement Generator Tool'
href=https://w3.org/WAI/planning/statements><abbr title='Web Accessibility Initiative'>WAI</abbr>
Accessibility Statement Generator Tool</a>
</details>
</nav>
<h1>Accessibility Statement</h1>
<details open id=report>
<summary>Evaluation Report</summary>
<p>
An evaluation report for <strong>devPunks<span>.studio</span></strong><sup>™</sup> is available at:
<a rel=external target=external title='WebAIM Report'
href=https://webaim.org/projects/million/lookup?domain=github.com/devpunks>
https://webaim.org/projects/million/lookup?domain=github.com/devpunks
</a>
<a rel=external target=external title='WAVE Report'
href=https://wave.webaim.org/report#/github.com/devpunks>
https://wave.webaim.org/report#/github.com/devpunks
</a>
<p>
<em>(the single issue listed is a confirmed false positive)</em>.
</details>
<main id=main>
<h2>Accessibility Statement for
<strong>devPunks<span>.studio</span></strong><sup>™</sup>
</h2>
<p>This is an accessibility statement from <strong>devPunks <abbr title='Limited Liability Corporation'>L.L.C.</abbr></strong>
<h2>Measures to Support Accessibility</h2>
<p>
<strong>devPunks <abbr title='Limited Liability Corporation'>L.L.C.</abbr></strong>
takes the following measures to ensure accessibility of
<strong>devPunks<span>.studio</span></strong><sup>™</sup>
<ol>
<li>Include accessibility as part of our mission statement.
<li>Include accessibility throughout our internal policies.
<li>Integrate accessibility into our procurement practices.
<li>Appoint an accessibility officer and/or ombudsperson.
<!-- https://en.wikipedia.org/wiki/Ombudsman -->
<li>Provide continual accessibility training for our staff.
<li>Assign clear accessibility goals and responsibilities.
<li>Employ formal accessibility quality assurance methods.
</ol>
<h2>Conformance Status</h2>
<p> The
<a rel=external target=external title='WCAG Guidelines'
href=https://w3.org/WAI/standards-guidelines/wcag
>Web Content Accessibility Guidelines <abbr title='Web Content Accessibility Guidelines'>(WCAG)</abbr>
</a>
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.
<strong>devPunks<span>.studio</span></strong><sup>™</sup>
is <em>fully conformant</em>
with <abbr title='Web Content Accessibility Guidelines'>(WCAG)</abbr> 2.1 level AA.
<p>
<em>Fully conformant</em> means that
the content fully conforms to the accessibility standard without any exceptions.
<h2>Additional Accessibility Considerations</h2>
<p>Partial or full implementation of the following Level AAA Success Criteria:
<ul>
<li>1.3.6 Identify Purpose <abbr title='Web Content Accessibility Guidelines'>WCAG</abbr> 2.1
<li>1.4.8 Visual Presentation
<li>2.1.3 Keyboard (No Exception)
<li>2.3.2 Three Flashes
<li>2.3.3 Animation from Interactions <abbr title='Web Content Accessibility Guidelines'>WCAG</abbr> 2.1
<li>2.4.8 Location
<li>2.4.9 Link Purpose (Link Only)
<li>2.4.10 Section Headings
<li>2.5.5 Target Size <abbr title='Web Content Accessibility Guidelines'>WCAG</abbr> 2.1
<li>2.5.6 Concurrent Input Mechanisms <abbr title='Web Content Accessibility Guidelines'>WCAG</abbr> 2.1
</ul>
<h2>Additional Requirements</h2>
<h3>Access Keys</h3>
<p>
The following access keys are in use on this site. I use the (formerly) recommended
<a rel=external title='UK Government accesskeys standard'
href=https://web.archive.org/web/20100216073506/http://archive.cabinetoffice.gov.uk/e-government/resources/handbook/html/2-4.asp#2.4.4>
<abbr title='United Kingdom'>U.K.</abbr> Government accesskeys standard
</a>
to determine the access keys. If your browser supports it <em>(most do)</em>,
you can jump to a specific page or section of a page by pressing
<kbd title='ALT (Alternate)'>alt</kbd> + the access key listed <strong><em>(Windows)</em></strong> or
<kbd title='CTRL (Control)'>ctrl</kbd> + the access key listed <strong><em>(Macintosh)</em></strong>.
Later versions of <strong>Firefox</strong> require the
<kbd title='shift + alt(ernate)'><kbd title='shift'>shift</kbd> + <kbd title='alt(ernate)'>alt</kbd></kbd> combination.
<strong>Firefox</strong> will activate the link, but Internet Explorer will only move focus to the link,
and you may need to press the <kbd title='Enter'>enter</kbd> key to activate the link.
<dl><!-- https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface -->
<dt>Accesskey <kbd>S</kbd>
<dd>Skip navigation
<dt>Accesskey <kbd>1</kbd>
<dd>Home page
<dt>Accesskey <kbd>3</kbd>
<dd>Site map
<dt>Accesskey <kbd>4</kbd>
<dd>Search
<dt>Accesskey <kbd>8</kbd>
<dd>Terms and Conditions
<dt>Accesskey <kbd>9</kbd>
<dd>Feedback Form
<dt>Accesskey <kbd>0</kbd>
<dd>Accessibility Statement
</dl>
<h2>Compatibility With Browsers and Assistive Technology</h2>
<p>
<strong>devPunks<span>.studio</span></strong><sup>™</sup>
is designed to be compatible with the following assistive technologies:
<ul role=list>
<li>JAWS, NVDA, VoiceOver, Narrator, Orca screen readers;
<li>Windows, macOS, iOS, Android voice control plus Dragon;
<li>Firefox, Chrome, Edge, Safari, Chromium browsers <em>(mobile and desktop)</em>.
</ul>
<p>
<strong>devPunks<span>.studio</span></strong><sup>™</sup> is <strong>NOT</strong> compatible with:
<ul role=list>
<li>Internet Explorer 11 may have issues with some of the structure;
<li>Safari with VoiceOver <em>(macOS and iOS)</em> has issues related to list exposure <em>(a known Safari bug/feature)</em>;
<li>Chrome, Firefox, Safari have assorted issues with tables <em>(known browser bugs)</em>.
</ul>
<h2>Technical Specifications</h2>
<p>
Accessibility of <strong>devPunks<span>.studio</span></strong><sup>™</sup>
relies on the following technologies to work with the particular combination of web browser
and any assistive technologies or plugins installed on your computer:
<p><em>These technologies are relied upon for conformance with the accessibility standards used.</em>
<ul>
<li>
<a rel=mdn target=mdn
href=https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics
><abbr title='Web Accessibility Initiative'>WAI</abbr>-<abbr title='Accessible Rich Internet Applications'>ARIA</abbr></a>
<li>
<a rel=mdn target=mdn
href=https://developer.mozilla.org/en-US/docs/Web/HTML
><abbr title='HyperText Markup Language'>HTML</abbr></a>
<li>
<a rel=mdn target=mdn
href=https://developer.mozilla.org/en-US/docs/Web/CSS
><abbr title='Cascading Style Sheets'>CSS</abbr></a>
</ul>
</main>
<hr noshade>
<aside>
<h2>Additional Notes</h2>
<p>
This site uses print <abbr title='Cascading Style Sheets'>CSS</abbr> to make it more page-friendly when printed. Navigation elements are removed,
but the breadcrumb and footer are left in place for context.
Colors are reduced to black and white. The addresses of links are printed on the page,
and many abbreviations and acronyms are extended in parentheses on the printed page as well.
<p>
The highlight color<em>(s)</em> used on this site conform to the draft
<a rel=external target=external title='WCAG3 Color Contrast Calculation'
href=https://w3.org/TR/wcag-3.0/#visual-contrast-of-text
><abbr title='Web Content Accessibility Guidelines'>WCAG3</abbr> color contrast calculation</a>.
This is an effort to address known issues with high-contrast pairings that pass
<abbr title='Web Content Accessibility Guidelines'>WCAG2</abbr>’s
contrast check but which create halation or other other problematic effects for some users.
<h2>Feedback</h2>
<p>
We welcome your feedback on the accessibility of
<strong>devPunks<span>.studio</span></strong><sup>™</sup>
Please let us know if you encounter accessibility barriers on
<strong>devPunks<span>.studio</span></strong><sup>™</sup>
<ul>
<li>Phone: <a title='Phone' href=tel:555-1212>555-1212</a>
<li>Social Media: <a rel=github target=github
title='@devPunks on Github.com' href=https://github.com/devpunks>@devPunks</a>
<li>E-mail: <a title='Email' href=mailto:[email protected]>[email protected]</a>
<li>Street Address: <address>1111 Mockingbird Lane</address>
<li>Postal Address: <address>1111 Mockingbird Lane</address>
</ul>
<p><em>We try to respond to feedback within 1 Business Day</em>.
</aside>
<footer>
<p>This statement was created on <time datetime=2023-03-15>2023 March 15th</time> using the
<a rel=external target=external
title='W3C Accessibility Statement Generator Tool'
href=https://w3.org/WAI/planning/statements>
<abbr title='World Wide Web Consortium'>W3C</abbr> Accessibility Statement Generator Tool</a>
</footer>