SlideMarks: accessible usage
Generated from source/symbols.json. Labels come from slidemarks.json (spokenLabel). See docs/accessibility.md for the reasoning.
1. Decorative: the text carries the meaning
75% complete
<span class="slidemarks sm-harvey-75" aria-hidden="true"></span> 75% complete
2. Meaningful on its own: role and name
<span class="slidemarks sm-harvey-75" role="img" aria-label="Harvey ball 75 percent"></span>
Put role="img" on the element. aria-label on a plain span without a role is ignored.
3. Tables: symbol plus visible value, real header cells
| Capability | Coverage | Supported | Trend |
|---|---|---|---|
| Offline use | 75% | Yes | |
| Font embedding | 50% | Yes | |
| Web support | 25% | No |
Coverage and Supported pair a decorative symbol with visible text. Trend has no visible text, so each symbol is named.
4. Contrast and color
Meaningful symbols need at least 3:1 contrast with their background (WCAG 1.4.11), and color must never be the only signal (WCAG 1.4.1). Use the shape (e.g. RAG ring, dot, half) or text, not red and green alone.