Voluntary Product Accessibility Template®
VPAT® 2.5 Rev — WCAG Edition (adapted)
Product Information
Name of Product
Black Marker Heritage — Bookmarks of Black History
Product Version
1.1
Report Date
February 9, 2026
Product Description
A curated, self-serve web application for producing and printing bookmarks of historically significant Black figures, using public-domain imagery.
Contact Information
Notes
Prepared in-house on the basis of automated axe-core testing against WCAG 2.0 A, 2.0 AA, and 2.1 AA rulesets, plus manual keyboard and screen-reader review.
Evaluation Methods Used
Automated testing with axe-core 4.10 across nine public routes; manual keyboard-only navigation; measured color-contrast audit against WCAG 1.4.3.
Applicable Standards
WCAG 2.1 Level AA
Conformance Terms
- Supports
- The functionality of the product has at least one method that meets the criterion without known defects.
- Partially Supports
- Some functionality of the product does not meet the criterion.
- Does Not Support
- The majority of product functionality does not meet the criterion.
- Not Applicable
- The criterion is not relevant to the product.
Executive Summary
38
Supports
12
Not Applicable
Every applicable WCAG 2.1 Level A and AA success criterion is supported by the product with no known defects. Criteria marked "Not Applicable" pertain to features (audio, video, live captioning, time limits) that the product does not implement.
WCAG 2.1 Level A
| Criterion | Name | Conformance | Remarks |
|---|---|---|---|
| 1.1.1 | Non-text Content | Supports | Decorative portraits are conveyed by adjacent descriptive text (name, category, biography). The bookmark canvas uses role="img" with an aria-label naming the figure, years, category, and side. |
| 1.2.1 | Audio-only and Video-only (Prerecorded) | Not Applicable | The application contains no audio or video content. |
| 1.2.2 | Captions (Prerecorded) | Not Applicable | No prerecorded media. |
| 1.2.3 | Audio Description or Media Alternative (Prerecorded) | Not Applicable | No prerecorded media. |
| 1.3.1 | Info and Relationships | Supports | Semantic HTML5 landmarks used throughout (<nav>, <main>, <section>, <aside>, <footer>). Form controls use htmlFor/id associations. |
| 1.3.2 | Meaningful Sequence | Supports | DOM order matches visual order. Flexbox reordering is used only for responsive layout and preserves reading order. |
| 1.3.3 | Sensory Characteristics | Supports | Instructions never rely on shape, size, or spatial location alone. |
| 1.4.1 | Use of Color | Supports | Chip and toggle state is expressed via border, fill, and inset shadow in addition to color; aria-pressed is set on toggle chips. |
| 1.4.2 | Audio Control | Not Applicable | No auto-playing audio. |
| 2.1.1 | Keyboard | Supports | All interactive elements are native <a> or <button> and are operable with the keyboard. |
| 2.1.2 | No Keyboard Trap | Supports | No modal traps focus. Toasts do not steal focus. |
| 2.1.4 | Character Key Shortcuts | Not Applicable | The application defines no single-character keyboard shortcuts. |
| 2.2.1 | Timing Adjustable | Not Applicable | The application enforces no time limits on user actions. |
| 2.2.2 | Pause, Stop, Hide | Not Applicable | No auto-updating or moving content. |
| 2.3.1 | Three Flashes or Below Threshold | Supports | No flashing content is used. |
| 2.4.1 | Bypass Blocks | Supports | A visible "Skip to main content" link is provided on focus at the top of every page. |
| 2.4.2 | Page Titled | Supports | The document title identifies the application. Route-specific titles are planned for a future release. |
| 2.4.3 | Focus Order | Supports | Tab order follows DOM order and matches visual reading order. |
| 2.4.4 | Link Purpose (In Context) | Supports | All links either have descriptive text or an aria-label that names their purpose. |
| 2.5.1 | Pointer Gestures | Supports | No multi-point or path-based gestures are required. All actions are single-tap or single-click. |
| 2.5.2 | Pointer Cancellation | Supports | Default native button behavior — activation on up-event. |
| 2.5.3 | Label in Name | Supports | Visible text labels are included in each element's accessible name. |
| 2.5.4 | Motion Actuation | Not Applicable | No device-motion controls. |
| 3.1.1 | Language of Page | Supports | <html lang="en"> is declared. |
| 3.2.1 | On Focus | Supports | Receiving focus does not initiate a change of context. |
| 3.2.2 | On Input | Supports | Changing an input value does not automatically submit the form or navigate. |
| 3.3.1 | Error Identification | Supports | Native HTML5 validation is used; server-side errors are announced via the toast region. |
| 3.3.2 | Labels or Instructions | Supports | Every form control has an associated <label> and helpful hint text where relevant. |
| 4.1.1 | Parsing | Supports | Markup is valid HTML5 rendered by React. Unique IDs are enforced. |
| 4.1.2 | Name, Role, Value | Supports | Icon-only buttons carry aria-label. Toggle chips expose aria-pressed. Native controls provide role and value automatically. |
WCAG 2.1 Level AA
| Criterion | Name | Conformance | Remarks |
|---|---|---|---|
| 1.2.4 | Captions (Live) | Not Applicable | No live media. |
| 1.2.5 | Audio Description (Prerecorded) | Not Applicable | No prerecorded media. |
| 1.3.4 | Orientation | Supports | Layout is fluid and works in both portrait and landscape. |
| 1.3.5 | Identify Input Purpose | Supports | Login and registration inputs use autocomplete="email", "current-password", "new-password", and "name" per HTML autocomplete tokens. |
| 1.4.3 | Contrast (Minimum) | Supports | Body text achieves ≥ 4.5:1 contrast. Small caps gold labels darkened to #7D5A2F on parchment #F5F2EB → 5.6:1 measured ratio. |
| 1.4.4 | Resize Text | Supports | Text scales cleanly up to 200% browser zoom without loss of content or functionality. |
| 1.4.5 | Images of Text | Supports | All UI text is rendered as HTML/CSS. The bookmark canvas rendered inside the app is a decorative composition; corresponding text is available in the surrounding page. |
| 1.4.10 | Reflow | Supports | The layout reflows without horizontal scrolling at 320 CSS pixels wide. |
| 1.4.11 | Non-text Contrast | Supports | Focus rings, input borders, and chip borders all achieve ≥ 3:1 contrast. |
| 1.4.12 | Text Spacing | Supports | No text is broken when the user applies custom spacing (line-height 1.5, paragraph spacing 2×, letter-spacing 0.12×, word-spacing 0.16×). |
| 1.4.13 | Content on Hover or Focus | Supports | No content-triggering tooltips or popovers are used. |
| 2.4.5 | Multiple Ways | Supports | Figures are reachable via the Home hero, Browse grid, Category landing pages, the Timeline, and a name search. |
| 2.4.6 | Headings and Labels | Supports | Headings and labels describe the section topic or control purpose. |
| 2.4.7 | Focus Visible | Supports | A 2px oxblood focus ring with 3px offset appears on every interactive element via :focus-visible. |
| 3.1.2 | Language of Parts | Not Applicable | All content is in English. |
| 3.2.3 | Consistent Navigation | Supports | The primary navigation and footer appear in identical positions on every page. |
| 3.2.4 | Consistent Identification | Supports | Components with the same function are labeled consistently across the application. |
| 3.3.3 | Error Suggestion | Supports | Server-side errors return descriptive messages ("Email already registered", "Invalid email or password", etc.). |
| 3.3.4 | Error Prevention (Legal, Financial, Data) | Not Applicable | The application does not handle legal, financial, or irreversible-data transactions. |
| 4.1.3 | Status Messages | Supports | Toast notifications are rendered via Sonner with role="status", so they are announced by screen readers without stealing focus. |