pattern158.solutions/accessibility.html at main · novakda/pattern158.solutions · GitHub

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
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="color-scheme" content="dark light">

    <!-- Theme detection: MUST run before CSS to prevent flash -->
    <script>
    (function() {
        var STORAGE_KEY = 'theme';
        var THEME_ATTR = 'data-theme';
        var prefersDarkQuery = '(prefers-color-scheme: dark)';
        var mql = window.matchMedia(prefersDarkQuery);
        var supportsColorScheme = mql.media === prefersDarkQuery;
        var savedTheme = null;
        try { savedTheme = localStorage.getItem(STORAGE_KEY); } catch (e) {}
        if (savedTheme === 'dark') {
            document.documentElement.setAttribute(THEME_ATTR, 'dark');
        } else if (savedTheme === null && supportsColorScheme && mql.matches) {
            document.documentElement.setAttribute(THEME_ATTR, 'dark');
        }
    })();
    </script>

    <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=Bebas+Neue&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/css/main.css">


    <meta name="description" content="Accessibility statement for Pattern 158 Solutions. Details WCAG 2.1 Level AA compliance, testing methodology, and how to report accessibility issues.">
    <meta property="og:title" content="Accessibility Statement | Pattern 158 - Dan Novak">
    <meta property="og:description" content="Accessibility statement for Pattern 158 Solutions. Details WCAG 2.1 Level AA compliance, testing methodology, and how to report accessibility issues.">
    <meta property="og:url" content="https://pattern158.solutions/accessibility.html">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://pattern158.solutions/assets/images/logos/pattern158_logo_3pipes_detailed.png">
    <meta property="og:site_name" content="Pattern 158 Solutions">
    <meta name="twitter:card" content="summary_large_image">
    <link rel="canonical" href="https://pattern158.solutions/accessibility.html">


    <link rel="icon" href="/assets/images/icons/pattern158_favicon_flat.png" type="image/png" sizes="32x32">
    <link rel="icon" href="/assets/images/icons/pattern158_favicon_flat.png" type="image/png" sizes="192x192">
    <link rel="apple-touch-icon" href="/assets/images/icons/pattern158_favicon_flat.png" sizes="180x180">

    <title>Accessibility Statement | Pattern 158 - Dan Novak — Pattern 158 Solutions</title>


    <script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "Pattern 158 Solutions",
  "description": "Senior Software Engineer and Systems Architect with 28+ years building and rescuing enterprise systems. Available for new opportunities.",
  "url": "https://pattern158.solutions"
}
    </script>


</head>
<body class="page-accessibility">
    <a href="#main-content" class="skip-link">Skip to main content</a>

    <header>
            <nav aria-label="Main navigation">
        <div class="container">
            <a href="/index.html" class="logo-link">
                <img src="/assets/images/logos/pattern158_logo_3pipes_detailed.png"
                     alt="Pattern 158 - Provider of Clarity"
                     class="logo-img"
                     width="88"
                     height="48">
            </a>

            <!-- Hamburger button (mobile only) -->
            <button class="hamburger"
                    type="button"
                    aria-expanded="false"
                    aria-controls="nav-menu"
                    aria-label="Toggle navigation menu">
                <span class="hamburger-box">
                    <span class="hamburger-inner"></span>
                </span>
            </button>

            <!-- Navigation menu -->
            <ul id="nav-menu" class="nav-menu">
                <li><a href="/index.html">Home</a></li>
                <li><a href="/philosophy.html">Philosophy</a></li>
                <li><a href="/faq.html">FAQ</a></li>
                <li><a href="/technologies.html">Technologies</a></li>
                <li><a href="/portfolio.html">Portfolio</a></li>
                <li><a href="/contact.html">Contact</a></li>
                <li><a href="/testimonials.html">Field Reports</a></li>
                <li>
                    <button id="theme-toggle" class="theme-toggle" type="button"
                            aria-label="Toggle dark mode" aria-pressed="false">
                        <svg class="icon-sun" aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
                        </svg>
                        <svg class="icon-moon" aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
                        </svg>
                        <span class="sr-only">Toggle dark mode</span>
                    </button>
                </li>
            </ul>
        </div>
    </nav>

    </header>

    <main id="main-content" aria-label="Main content">
        <!-- Hero -->
<section class="hero hero-minimal">
    <div class="container">
        <h1>Accessibility Statement</h1>
        <p class="lead">Pattern 158 Solutions is committed to ensuring digital accessibility for all users.</p>
    </div>
</section>
<!-- Accessibility Content -->
<section class="section">
    <div class="container">
<h2>Commitment to Accessibility</h2>
<p>Pattern 158 Solutions is dedicated to making this website accessible to the widest possible audience, including individuals with disabilities. We strive to conform to the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA standard.</p>
<h2>Standards and Conformance</h2>
<p>This website has been designed and tested to meet the following accessibility standards:</p>
<ul>
<li><strong>WCAG 2.1 Level AA</strong> — Web Content Accessibility Guidelines version 2.1, conformance level AA</li>
<li><strong>Semantic HTML5</strong> — Proper use of landmark elements, heading hierarchy, and ARIA attributes</li>
<li><strong>Keyboard Navigation</strong> — All functionality accessible via keyboard without mouse</li>
<li><strong>Screen Reader Compatibility</strong> — Tested for compatibility with common assistive technologies</li>
</ul>
<h2>Accessibility Testing</h2>
<p>We employ multiple testing methodologies to ensure accessibility compliance:</p>
<dl class="definition-list">
<dt>Tool-Assisted Review</dt>
<dd>Manual verification using browser DevTools Accessibility panel, keyboard navigation testing, and visual inspection across representative pages in both light and dark themes.</dd>
<dt>Manual Testing</dt>
<dd>Keyboard navigation testing of all interactive elements. Visual inspection of color contrast, heading hierarchy, and semantic structure.</dd>
<dt>Cross-Browser Validation</dt>
<dd>Functional testing on Chromium-based browsers (Chrome, Edge) and Firefox to ensure consistent experience across browsers.</dd>
<dt>Viewport Testing</dt>
<dd>Responsive design validated at desktop (1200px) and mobile (375px) viewports with full screenshot evidence.</dd>
</dl>
<h2>Current Status</h2>
<p><strong>Last Verified:</strong> March 15, 2026</p>
<p><strong>Test Results:</strong></p>
<ul>
<li>Dark mode: 21/21 pages pass manual WCAG 2.1 AA review (100% compliant)</li>
<li>Light mode: Substantially compliant with minor cosmetic exceptions</li>
<li>Semantic structure: 100% compliant across all pages</li>
<li>Keyboard navigation: 100% compliant across all pages</li>
<li>Cross-browser: Validated on Chromium and Firefox</li>
</ul>
<h2>Browsers and Assistive Technologies</h2>
<p>This website has been tested with the following browsers:</p>
<ul>
<li>Chrome (latest version)</li>
<li>Microsoft Edge (latest version)</li>
<li>Firefox (latest version)</li>
</ul>
<p>The site is designed to work with assistive technologies including:</p>
<ul>
<li>Screen readers (NVDA, JAWS, VoiceOver)</li>
<li>Keyboard-only navigation</li>
<li>Voice control software</li>
<li>Browser zoom and text resizing up to 200%</li>
</ul>
<h2>Accessibility Features</h2>
<p>This website includes the following accessibility features:</p>
<ul>
<li><strong>Skip to main content</strong> link at the top of every page for keyboard users</li>
<li><strong>Semantic HTML landmarks</strong> (header, nav, main, footer) for screen reader navigation</li>
<li><strong>Proper heading hierarchy</strong> (h1 → h2 → h3) with no skipped levels</li>
<li><strong>Alternative text</strong> for all meaningful images</li>
<li><strong>High contrast ratios</strong> between text and background (minimum 4.5:1 for normal text)</li>
<li><strong>Visible focus indicators</strong> for keyboard navigation (4.5:1 contrast ratio)</li>
<li><strong>Dark mode support</strong> respecting system preferences and manual toggle</li>
<li><strong>Responsive design</strong> that works on mobile devices and tablets</li>
<li><strong>Clear link purpose</strong> with descriptive link text (no &quot;click here&quot;)</li>
<li><strong>Consistent navigation</strong> across all pages</li>
</ul>
<h2>Known Issues</h2>
<p>We continuously work to improve accessibility. Currently identified issues include:</p>
<ul>
<li>Some decorative badge elements on the Technologies page and select exhibits have color contrast slightly below 4.5:1 in light mode. These are cosmetic elements that do not impact access to core content.</li>
</ul>
<p>These issues are documented and scheduled for remediation.</p>
<h2>Feedback and Contact</h2>
<p>We welcome feedback on the accessibility of Pattern 158 Solutions. If you encounter accessibility barriers on this website, please contact us:</p>
<ul>
<li><strong>Email:</strong> <a href="mailto:dan@pattern158.solutions">dan@pattern158.solutions</a></li>
<li><strong>Contact Page:</strong> <a href="/contact.html">Contact Dan Novak</a></li>
</ul>
<p>We aim to respond to accessibility feedback within 5 business days.</p>
<h2>Technical Specifications</h2>
<p>This website's accessibility relies on the following technologies:</p>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript (for theme toggle and navigation; core content accessible without JavaScript)</li>
<li>ARIA (Accessible Rich Internet Applications) attributes for enhanced semantics</li>
</ul>
</div>
</section>

    </main>

        <footer>
        <div class="container">
            <p><strong>Dan Novak</strong> | Senior Software Engineer | Systems Architect</p>
            <p>Portland, OR | <a href="mailto:dan@pattern158.solutions">dan@pattern158.solutions</a> | <a href="https://linkedin.com/in/dan-novak-5692197">LinkedIn</a> | <a href="/accessibility.html">Accessibility</a></p>
            <p class="footer-tagline">Pattern 158: I cheat, but I cheat fair.</p>
        </div>
    </footer>

        <!-- Navigation toggle -->
    <script>
    (function() {
        var hamburger = document.querySelector('.hamburger');
        var navMenu = document.querySelector('.nav-menu');

        if (!hamburger || !navMenu) return;

        function toggleMenu() {
            var isOpen = hamburger.getAttribute('aria-expanded') === 'true';
            var newState = !isOpen;

            hamburger.setAttribute('aria-expanded', String(newState));
            hamburger.classList.toggle('is-active', newState);
            navMenu.classList.toggle('is-open', newState);

            // Prevent body scroll when menu is open
            document.body.style.overflow = newState ? 'hidden' : '';
        }

        function closeMenu() {
            hamburger.setAttribute('aria-expanded', 'false');
            hamburger.classList.remove('is-active');
            navMenu.classList.remove('is-open');
            document.body.style.overflow = '';
        }

        // Click handler
        hamburger.addEventListener('click', toggleMenu);

        // Keyboard: Enter or Space activates button
        hamburger.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                toggleMenu();
            }
        });

        // Escape closes menu, returns focus to hamburger
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                var isOpen = hamburger.getAttribute('aria-expanded') === 'true';
                if (isOpen) {
                    closeMenu();
                    hamburger.focus();
                }
            }
        });

        // Close menu when clicking outside
        document.addEventListener('click', function(e) {
            var isOpen = hamburger.getAttribute('aria-expanded') === 'true';
            if (isOpen && !navMenu.contains(e.target) && !hamburger.contains(e.target)) {
                closeMenu();
            }
        });

        // Close menu when a nav link is clicked (for same-page navigation)
        navMenu.addEventListener('click', function(e) {
            if (e.target.tagName === 'A') {
                closeMenu();
            }
        });

        // Close menu on window resize to desktop (cleanup stale mobile state)
        window.addEventListener('resize', function() {
            if (window.innerWidth > 768) {
                closeMenu();
            }
        });
    })();
    </script>

    <script>
    (function() {
        var STORAGE_KEY = 'theme';
        var THEME_ATTR = 'data-theme';
        var toggle = document.getElementById('theme-toggle');
        if (!toggle) return;

        // Set initial ARIA state based on current theme
        var isDark = document.documentElement.getAttribute(THEME_ATTR) === 'dark';
        toggle.setAttribute('aria-pressed', isDark ? 'true' : 'false');

        // Toggle handler
        toggle.addEventListener('click', function() {
            var html = document.documentElement;
            var currentlyDark = html.getAttribute(THEME_ATTR) === 'dark';
            var newTheme = currentlyDark ? 'light' : 'dark';

            if (newTheme === 'dark') {
                html.setAttribute(THEME_ATTR, 'dark');
            } else {
                html.removeAttribute(THEME_ATTR);
            }

            toggle.setAttribute('aria-pressed', newTheme === 'dark' ? 'true' : 'false');

            try { localStorage.setItem(STORAGE_KEY, newTheme); } catch (e) {}
        });

        // Cross-tab synchronization
        window.addEventListener('storage', function(e) {
            if (e.key === STORAGE_KEY) {
                var html = document.documentElement;
                if (e.newValue === 'dark') {
                    html.setAttribute(THEME_ATTR, 'dark');
                    toggle.setAttribute('aria-pressed', 'true');
                } else {
                    html.removeAttribute(THEME_ATTR);
                    toggle.setAttribute('aria-pressed', 'false');
                }
            }
        });

        // System preference change listener (respects manual override)
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
            try {
                if (localStorage.getItem(STORAGE_KEY) !== null) return;
            } catch (err) {}
            var html = document.documentElement;
            if (e.matches) {
                html.setAttribute(THEME_ATTR, 'dark');
                toggle.setAttribute('aria-pressed', 'true');
            } else {
                html.removeAttribute(THEME_ATTR);
                toggle.setAttribute('aria-pressed', 'false');
            }
        });
    })();
    </script>

</body>
</html>