supplementscore/accessibility.html at main · Code-Yves/supplementscore · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <title>Accessibility statement — SupplementScore</title>
  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='6' fill='%231F7A6B'/%3E%3Cpath d='M5 19C5 11 11 5 19 5C19 13 13 19 5 19Z' fill='%23F8F4ED'/%3E%3Cpath d='M5 19C9 15 13 11 19 5' stroke='%231F7A6B' stroke-width='1.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E">
  <meta name="description" content="SupplementScore is committed to WCAG 2.1 AA accessibility. Statement of conformance, known issues, and how to report a barrier.">
  <meta property="og:url" content="https://supplementscore.org/accessibility.html">
  <meta property="og:site_name" content="SupplementScore">
  <meta name="twitter:title" content="Accessibility statement — SupplementScore">
  <meta name="twitter:description" content="WCAG 2.1 AA conformance statement and how to report an accessibility issue.">
  <link rel="canonical" href="https://supplementscore.org/accessibility.html">
  <meta property="og:title" content="Accessibility statement — SupplementScore">
  <meta property="og:description" content="WCAG 2.1 AA conformance statement and how to report an accessibility issue.">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary_large_image">
  <script>document.documentElement.setAttribute('data-theme','light');</script>
  <style>html{color-scheme:light}</style>
  <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=Mona+Sans:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/styles.css?v=20260527-bottomline">
  <link rel="manifest" href="/manifest.webmanifest">
  <link rel="apple-touch-icon" sizes="180x180" href="/icons/icon-180-apple.svg">
  <meta name="theme-color" content="#1F7A6B">
  <meta name="apple-mobile-web-app-title" content="SuppScore">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://unpkg.com https://plausible.io; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com data:; img-src 'self' data: https:; connect-src 'self' https://formspree.io https://plausible.io; frame-ancestors 'none'; base-uri 'self'; form-action 'self' https://formspree.io;">
  <style>
    body { background: var(--color-background-primary); color: var(--color-text-primary); }
    .pg-wrap { max-width: 760px; margin: 0 auto; padding: 32px 24px 64px; line-height: 1.65; }
    .pg-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text-secondary); text-decoration: none; padding: 6px 12px; border: 1px solid var(--color-border-secondary); border-radius: 8px; margin-bottom: 24px; transition: all .15s; }
    .pg-back:hover { background: rgba(31,122,107,.05); color: var(--color-brand); }
    .pg-wrap h1 { font-size: 2rem; font-weight: 800; margin: 0 0 8px; line-height: 1.2; }
    .pg-sub { color: var(--color-text-secondary); font-size: 14.5px; margin-bottom: 28px; }
    .pg-wrap h2 { font-size: 1.3rem; font-weight: 700; margin: 36px 0 10px; padding-top: 14px; border-top: 1px solid var(--color-border-tertiary); }
    .pg-wrap h2:first-of-type { padding-top: 0; border-top: none; }
    .pg-wrap p { margin-bottom: 14px; }
    .pg-wrap ul { margin: 0 0 16px 22px; }
    .pg-wrap li { margin-bottom: 6px; }
    .pg-callout { background: rgba(13,148,136,.06); border-left: 3px solid #0D9488; padding: 14px 16px; border-radius: 4px; margin: 16px 0; font-size: 13px; color: #065F56; }
    .pg-close-fab{position:fixed;top:16px;right:16px;width:40px;height:40px;border-radius:50%;background:var(--color-background-primary);border:1px solid var(--color-border-secondary);box-shadow:0 2px 12px rgba(0,0,0,.14);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:50;color:var(--color-text-secondary);transition:transform .15s,color .15s;padding:0;text-decoration:none}
    .pg-close-fab:hover{transform:scale(1.08);color:var(--color-text-primary)}
    .pg-close-fab:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}
    @media(max-width:760px){.pg-close-fab{top:12px;right:12px;width:36px;height:36px}}
  </style>
  <script src="_site-ux.js?v=20260527-rel-path-fix" defer></script>

  <!-- SEO-BREADCRUMB:start -->
  <script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://supplementscore.org/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Accessibility statement",
      "item": "https://supplementscore.org/accessibility.html"
    }
  ]
}
  </script>
  <!-- SEO-BREADCRUMB:end -->
</head>
<body>
<main class="pg-wrap">
  <a href="index.html" class="pg-close-fab" onclick="event.preventDefault();if(document.referrer&&document.referrer.indexOf(location.origin)===0&&history.length>1){history.back();}else{location.href='index.html';}" aria-label="Close and return">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
  </a>
  <h1>Accessibility statement</h1>
  <p class="pg-sub">Last updated: 2026-05-01 · Conformance target: WCAG 2.1 Level AA</p>

  <div class="pg-callout">
    <strong>Our commitment.</strong> Health information should be available to everyone. SupplementScore aims to meet <a href="https://www.w3.org/TR/WCAG21/" target="_blank" rel="noopener">Web Content Accessibility Guidelines (WCAG) 2.1 Level AA</a> across the entire site. We re-test against this standard before every major release and after any structural change.
  </div>

  <h2>What works well</h2>
  <ul>
    <li><strong>Semantic HTML</strong> — every page uses proper landmark elements (<code>main</code>, <code>nav</code>, <code>article</code>, <code>aside</code>) so screen readers can navigate by section.</li>
    <li><strong>Keyboard navigable</strong> — all interactive elements (buttons, links, form fields, modals) are reachable with Tab and operable with Enter / Space.</li>
    <li><strong>Visible focus rings</strong> — all focusable elements show a visible focus indicator that meets WCAG 2.4.7.</li>
    <li><strong>Decorative SVGs hidden from screen readers</strong> — all 462 inline icons carry <code>aria-hidden="true"</code> so screen readers don't announce phantom "image" elements.</li>
    <li><strong>Modals announce correctly</strong> — every modal carries <code>role="dialog"</code> + <code>aria-modal="true"</code> so screen readers trap focus and announce the dialog.</li>
    <li><strong>Form inputs have associated labels</strong> — either via <code>&lt;label for&gt;</code> or <code>aria-label</code>.</li>
    <li><strong>Color is never the sole signifier</strong> — tier badges (T1 teal, T2 blue, T3 amber, T4 red) always carry text labels too.</li>
    <li><strong>Mobile touch targets meet Apple HIG</strong> — minimum 36×36px on the smallest viewport, 44×44pt on standard mobile.</li>
    <li><strong>Reduced motion respected</strong> — animations honour <code>prefers-reduced-motion: reduce</code>.</li>
    <li><strong>Light theme forced</strong> — no flash of dark content during page load.</li>
    <li><strong>Language declared</strong> — <code>&lt;html lang="en"&gt;</code> on every page.</li>
    <li><strong>Page titles are unique and descriptive</strong> — every page has its own <code>&lt;title&gt;</code>.</li>
  </ul>

  <h2>Known issues</h2>
  <p>We're transparent about where we still fall short. Currently tracked:</p>
  <ul>
    <li><strong>Heading hierarchy on a few pages</strong> — index.html and a handful of other pages have multiple <code>&lt;h1&gt;</code> tags inherited from earlier templates. We're working through these in the next content pass.</li>
    <li><strong>Some chip/badge text uses 9–10px fonts</strong> — meets contrast minimums but smaller than WCAG-AAA recommends. We're auditing where we can bump these without breaking layout.</li>
    <li><strong>Long-form articles inlined into <code>index.html</code></strong> — for assistive-tech users on slow connections, the initial page weight is high. Per-article static pages under <code>/s/</code> mitigate this for direct linking, but the in-page article reader still loads everything.</li>
  </ul>

  <h2>Browser & assistive technology compatibility</h2>
  <p>SupplementScore is tested against the latest two stable releases of:</p>
  <ul>
    <li>Chrome (desktop + Android)</li>
    <li>Safari (macOS + iOS)</li>
    <li>Firefox (desktop)</li>
    <li>Edge (desktop)</li>
  </ul>
  <p>Common screen readers we test against:</p>
  <ul>
    <li>VoiceOver (macOS, iOS)</li>
    <li>NVDA (Windows)</li>
    <li>TalkBack (Android)</li>
  </ul>

  <h2>Reporting an accessibility barrier</h2>
  <p>If you encounter any accessibility issue — anything that prevents you from using a feature on the site — please report it via:</p>
  <ul>
    <li>The <a href="https://github.com/supplementscore/supplementscore/issues/new?template=accessibility-issue.md" target="_blank" rel="noopener">Accessibility issue template</a> on GitHub</li>
    <li>Or by email to the contact in the <a href="about.html">About page</a> footer with subject "Accessibility"</li>
  </ul>
  <p>We aim to acknowledge accessibility reports within 3 business days and to resolve confirmed issues within 30 days. If a fix needs more time, we'll explain why and provide an alternative way for you to access the information.</p>

  <h2>Standards used</h2>
  <ul>
    <li><a href="https://www.w3.org/TR/WCAG21/" target="_blank" rel="noopener">Web Content Accessibility Guidelines (WCAG) 2.1</a> Level AA</li>
    <li><a href="https://www.w3.org/TR/wai-aria-1.2/" target="_blank" rel="noopener">WAI-ARIA 1.2</a> for ARIA roles, states, and properties</li>
    <li><a href="https://html.spec.whatwg.org/" target="_blank" rel="noopener">HTML Living Standard</a> for semantic markup</li>
  </ul>

  <h2>Testing approach</h2>
  <ul>
    <li>Automated: <code>axe-core</code> via Playwright in CI on every push (see <code>.github/workflows/lighthouse.yml</code>)</li>
    <li>Manual: keyboard-only navigation pass on the top 10 pages before each release</li>
    <li>Manual: VoiceOver + Safari pass on the top 5 pages before each release</li>
    <li>Real-device check at 375 / 390 / 414 px viewports for touch-target sizing</li>
  </ul>

  <h2>Contact</h2>
  <p>Accessibility questions, suggestions, or barrier reports: see the contact email in the <a href="about.html">About page</a>.</p>

  <h2>Related pages</h2>
  <ul>
    <li><a href="about.html">About</a> — editorial process, funding, COI policy</li>
    <li><a href="privacy.html">Privacy policy</a></li>
    <li><a href="terms.html">Terms of use</a></li>
    </ul>

</main>
<!-- SS_FOOTER_BEGIN -->
<!-- 2026-05-23 — Footer rewritten in centered-column layout (Direction B from
     the mockup review). Single vertical axis: brand → tagline → inline link
     row (hairlines top/bottom) → centered contributor CTA → legal at bottom.
     The previous brand+3-column grid is gone; .site-footer-grid and
     .site-footer-col classes are no longer emitted. Old CSS rules for those
     remain in place harmlessly (no markup references them). -->
<footer class="site-footer" role="contentinfo">
  <div class="site-footer-inner">
    <div class="site-footer-brand-row">
      <span class="site-footer-leaf" aria-hidden="true">
        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 19C5 11 11 5 19 5C19 13 13 19 5 19Z"/></svg>
      </span>
      <span class="site-footer-brand">SupplementScore<span class="site-footer-brand-tld">.org</span></span>
    </div>
    <nav class="site-footer-links" aria-label="Footer navigation">
      <a href="/">Home</a>
      <a href="/compare/index.html">Compare</a>
      <a href="/#research" onclick="window._tabSwitchByUser=true">Research</a>
      <a href="/#profile" onclick="window._tabSwitchByUser=true">Profile <span class="site-footer-beta" aria-label="Beta">(Beta)</span></a>
      <a href="/about.html">About</a>
    </nav>
    <div class="site-footer-contrib">
      <div class="site-footer-contrib-eyebrow">Non-profit · volunteer-run</div>
      <div class="site-footer-contrib-title">Help build the database</div>
      <div class="site-footer-contrib-desc">Clinicians, researchers, developers, help us improve this site.</div>
      <form class="site-footer-contrib-form" onsubmit="return ssFooterContrib(event)" novalidate>
        <input type="email" placeholder="your@email.com" aria-label="Your email address" required>
        <button type="submit" aria-label="Send" title="Send"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></button>
        <div class="site-footer-contrib-success" role="status" aria-live="polite">✓ Thanks! We'll be in touch.</div>
      </form>
    </div>
    <div class="site-footer-bottom">© 2026 SupplementScore · CC-BY 4.0 · <a href="/privacy.html">Terms &amp; Privacy</a> · <a href="mailto:hello@supplementscore.org">hello@supplementscore.org</a> · Educational reference, not medical advice. Always consult a clinician before changing your supplement regimen.</div>
  </div>
<script>
/* Footer contributor form — small handler shared by every page that ships the
   shared site-footer. Defined once on window so re-loads on subsequent pages
   are no-ops. Posts to the same Formspree endpoint as the about-page form,
   tagged with source='contributor-footer' so leads from here are attributable. */
window.ssFooterContrib = window.ssFooterContrib || function(e){
  e.preventDefault();
  var form = e.target;
  var input = form.querySelector('input[type=email]');
  var btn = form.querySelector('button');
  var email = (input.value || '').trim();
  if (!email || email.indexOf('@') < 0 || email.length < 5) {
    input.classList.add('is-invalid');
    setTimeout(function(){ input.classList.remove('is-invalid'); }, 2000);
    return false;
  }
  btn.disabled = true; btn.textContent = 'Sending…';
  fetch('https://formspree.io/f/mnjoylkz', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
    body: JSON.stringify({ email: email, source: 'contributor-footer', date: new Date().toISOString() })
  }).then(function(r){
    if (r.ok) { form.classList.add('is-success'); }
    else { btn.disabled = false; btn.textContent = 'Try again'; }
  }).catch(function(){ btn.disabled = false; btn.textContent = 'Try again'; });
  return false;
};
</script>
</footer>
<!-- SS_FOOTER_END -->
</body>
</html>