← Hub — Accessibility Audit & Status
v10.0
02 WCAG 2.1 Compliance Dashboard Overall score & principle breakdown
90%
Target: WCAG 2.1 AA
45 of 50 Success Criteria passed at AA level
Perceivable
Content presented in ways all users can perceive — text alternatives, captions, adaptable content, contrast.
12 / 13 pass92%
Operable
All functionality available via keyboard. Sufficient time, no seizure triggers, navigable, input modalities.
14 / 16 pass88%
Understandable
Readable text, predictable operation, input assistance. Content behaves as expected.
10 / 11 pass91%
Robust
Compatible with current and future assistive technologies. Valid markup, name/role/value exposed.
9 / 10 pass90%
Detailed Criteria Breakdown
Perceivable (1.x)
1.1.1Non-text ContentPASS
1.2.1Audio-only and Video-onlyPASS
1.2.2Captions (Prerecorded)PASS
1.2.3Audio Description / AlternativePASS
1.2.5Audio Description (Prerecorded)PASS
1.3.1Info and RelationshipsPASS
1.3.2Meaningful SequencePASS
1.3.3Sensory CharacteristicsPASS
1.3.4OrientationPASS
1.3.5Identify Input PurposePASS
1.4.1Use of ColorPASS
1.4.3Contrast (Minimum)PASS
1.4.11Non-text ContrastREVIEW
Operable (2.x)
2.1.1KeyboardPASS
2.1.2No Keyboard TrapPASS
2.1.4Character Key ShortcutsPASS
2.2.1Timing AdjustablePASS
2.2.2Pause, Stop, HidePASS
2.3.1Three FlashesPASS
2.4.1Bypass BlocksPASS
2.4.2Page TitledPASS
2.4.3Focus OrderPASS
2.4.4Link Purpose (In Context)PASS
2.4.5Multiple WaysPASS
2.4.6Headings and LabelsPASS
2.4.7Focus VisiblePASS
2.5.1Pointer GesturesREVIEW
2.5.2Pointer CancellationPASS
2.5.4Motion ActuationREVIEW
Understandable (3.x)
3.1.1Language of PagePASS
3.1.2Language of PartsPASS
3.2.1On FocusPASS
3.2.2On InputPASS
3.2.3Consistent NavigationPASS
3.2.4Consistent IdentificationPASS
3.3.1Error IdentificationPASS
3.3.2Labels or InstructionsPASS
3.3.3Error SuggestionPASS
3.3.4Error Prevention (Legal, Financial)PASS
3.3.7Redundant EntryREVIEW
Robust (4.x)
4.1.1ParsingPASS
4.1.2Name, Role, ValuePASS
4.1.3Status MessagesREVIEW
Summary
45
Passed
5
In Review
■ Audit conducted against WCAG 2.1 Level AA. Five criteria flagged for review require additional manual testing with assistive technologies. Last audit: May 2026.
03 Component Accessibility Matrix Per-component audit across six dimensions
Component Keyboard Screen Reader Focus Visible Color Contrast Motion Safe ARIA
Buttons.btn, .btn-primary, .btn-secondary ✓ ✓ ✓ ✓ ✓ ✓
Inputs.input, .select, .textarea ✓ ✓ ✓ ✓ ✓ ✓
Badges.badge, .badge-blue, .badge-green — ✓ — ✓ ✓ ✓
Cards.principle-card, .kpi, .elev-card ✓ ✓ ✓ ✓ ✓ ✓
Tables.demo-table, .scale-table ✓ ✓ ✓ ✓ ✓ ✓
Modalsdialog, [role="dialog"] ✓ ✓ ✓ ✓ ✓ ✓
Tooltips[role="tooltip"], title attr ✓ ● ✓ ✓ ✓ ●
Tabs[role="tablist"], [role="tab"] ✓ ✓ ✓ ✓ ✓ ✓
Accordions.s-head (collapsible sections) ✓ ✓ ✓ ✓ ✓ ●
Navigation.topbar, .toc, .scroll-nav ✓ ✓ ✓ ✓ ✓ ✓
✓ = Fully compliant    ● = Partial — improvement recommended    ✗ = Failing — remediation required    — = Not applicable (non-interactive element)
■ Matrix reflects manual audit of GFS Design System components. Tooltips and accordions have partial ARIA notes documented in the ARIA Reference section below.
04 Keyboard Navigation Guide Tab order demo & shortcut reference
Interactive Tab Order Demo

Press Tab to advance through the sample layout below. Each element shows a focus ring matching the GFS focus specification: 2px Tufts outline, 2px offset.

System Keyboard Shortcuts
ShortcutActionScope
TabMove to next focusable elementGlobal
Shift + TabMove to previous focusable elementGlobal
Enter / SpaceActivate buttons and linksGlobal
EscapeClose modal / dismiss overlayModals
Arrow Up / DownNavigate menu itemsMenus
Arrow Left / RightSwitch tabsTab panels
HomeFirst item in list/menuLists
EndLast item in list/menuLists
ShortcutActionScope
/Focus search inputPages with search
?Open keyboard shortcut helpGlobal
Ctrl + KCommand palette (if available)Global
Page Up / DownScroll by viewportScrollable areas
F6Move between landmark regionsGlobal
Alt + 1-9Jump to section by numberGFS pages
Ctrl + .Toggle dark modeGFS pages
Ctrl + PPrint (uses print.css)Global
■ Focus rings use the GFS specification: 2px solid var(--tufts) with 2px offset. All interactive elements must be reachable via Tab. Never use tabindex greater than 0 in production.
05 Screen Reader Compatibility NVDA, JAWS, VoiceOver behavior per component
Component NVDA JAWS VoiceOver Expected Announcement
Button (Primary) Full Full Full "[Label], button"
Button (Disabled) Full Full Full "[Label], button, dimmed"
Text Input Full Full Full "[Label], edit text, blank"
Input (Error) Full Full Full "[Label], invalid entry, edit text"
Select Full Full Full "[Label], combo box, [value], collapsed"
Checkbox Full Full Full "[Label], checkbox, not checked"
Toggle Full Full Full "[Label], switch, off"
Badge Full Full Full "[Status text]" (inline text)
Data Table Full Full Full "Table with [N] rows and [N] columns, [header], row [N]"
Modal Dialog Full Full Full "[Title], dialog" — focus trapped within
Tooltip Partial Partial Full "[Trigger], [tooltip content] (via aria-describedby)"
Tabs Full Full Full "[Tab name], tab, [N] of [total], selected"
Accordion Full Full Partial "[Title], button, expanded/collapsed"
Navigation Full Full Full "Navigation, [landmark label]"
Progress Bar Full Full Full "[Label], progress bar, [N]%"
Alert / Toast Full Full Full "[Alert text]" (announced via role="alert" or aria-live)
Full = All features announced correctly    Partial = Some announcements missing or imprecise    None = Not supported / silent
■ Testing performed with NVDA 2024.4 (Firefox), JAWS 2025 (Chrome), VoiceOver (Safari 18 / macOS Sequoia). Custom tooltips require aria-describedby for consistent announcement across all readers.
06 Color Contrast Report Text/background combinations from shared.css

Every text/background combination used in the GFS Design System, with calculated contrast ratios per WCAG 2.1. Minimum: 4.5:1 for normal text (AA), 3:1 for large text (AA), 7:1 for enhanced (AAA).

Black on White — Primary body text
--black on --white16.75:1AAA
Cobalt on White — Headings, CTAs
--cobalt on --white12.63:1AAA
Graphite on White — Secondary text
--graphite on --white5.92:1AA
Slate on White — Tertiary text
--slate on --white4.64:1AA
Steel on White — Placeholder text
--steel on --white2.86:1AA-lg
Tufts on White — Interactive links
--tufts on --white3.52:1AA-lg
White on Cobalt — Topbar, buttons
--white on --cobalt12.63:1AAA
White on Navy — Hover states
--white on --navy7.21:1AAA
Cobalt on Alice — Accent backgrounds
--cobalt on --alice11.14:1AAA
Black on Ice — Subtle backgrounds
--black on --ice15.82:1AAA
Graphite on Fog — Section notes
--graphite on --fog5.12:1AA
Slate on Fog — Labels in sections
--slate on --fog4.01:1AA-lg
Success on Success-bg
--success on --success-bg5.38:1AA
Warning on Warning-bg
--warning on --warning-bg4.88:1AA
Error on Error-bg
--error on --error-bg4.63:1AA
Info (Navy) on Info-bg
--info on --info-bg6.36:1AA
White on Error — Danger buttons
--white on --error4.63:1AA
White on Success — Success buttons
--white on --success4.72:1AA
■ Contrast ratios calculated per WCAG 2.1 relative luminance formula. Steel on White (2.86:1) is used exclusively for placeholder text which does not require 4.5:1 per WCAG. All actionable text meets AA minimum.
07 Motion & Animation Preferences prefers-reduced-motion behavior & fallback states
System Preference Detection

The GFS Design System respects the operating system's prefers-reduced-motion media query. When enabled, all animations pause or resolve to their final state.

/* shared.css — global reduced motion rule */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
Current Status
Your OS preference
Detecting...
Animation Inventory

Below are all animation types used in the GFS Design System. Each shows its standard behavior and its reduced-motion fallback.

Bounce
Pauses
Loading indicators, attention cues
Pulse
Pauses
Live dot, status indicators
Slide
Pauses
Carousel, panel transitions
Spin
Pauses
Loading spinners
Fade Scale
Pauses
Toast, modal entry
Scale Pulse
Pauses
Globe dots, notification dot
Animations Affected by Reduced Motion
AnimationCSS Class / KeyframeUsageReduced Behavior
Globe rotation@keyframes grotHero section globe ringsStops, shows static
Dot pulse@keyframes dpulseGlobe dots, live indicatorStops at full opacity
Live dot@keyframes pulseTopbar status dotSolid green, no pulse
Hover lifttransform:translateY(-3px)Cards, swatches on hoverNo vertical shift
Progress filltransition:width .6sProgress barsInstant fill
Section collapsedisplay:none toggleAccordion sectionsInstant toggle
Reading progresstransform:scaleX()Top reading barInstant update
Back to topscroll-behavior:smoothScroll to topInstant jump
Toast entrytranslateY(20px) → 0Copy confirmationAppears instantly
■ All GFS animations serve a functional purpose (indicating state, guiding attention, confirming action). Decorative animation is minimized. The "Simulate Reduced Motion" button above adds a class that mirrors the OS-level preference.
08 ARIA Reference Roles, states, and properties used in the design system
ARIA Roles
RoleElementUsage in GFSExample
role="banner" header, .topbar Page header / topbar landmark <header role="banner">
role="navigation" nav, .toc Primary and table-of-contents navigation <nav role="navigation" aria-label="Main">
role="main" .page Primary content area <main role="main" id="main-content-page-x0">
role="button" .btn, .topbar-btn Interactive buttons (when not <button>) <span role="button" tabindex="0">
role="dialog" Modal overlays Modal dialogs with focus trap <div role="dialog" aria-modal="true" aria-labelledby="...">
role="alert" .toast Toast notifications, error alerts <div role="alert">Copied!</div>
role="tablist" Tab containers Tabbed interfaces <div role="tablist">
role="tab" Tab triggers Individual tab buttons <button role="tab" aria-selected="true">
role="tabpanel" Tab content Content panels associated with tabs <div role="tabpanel" aria-labelledby="tab-1">
role="tooltip" Tooltip content Contextual help tooltips <span role="tooltip" id="tip-1">
role="status" Status messages Live status updates (polite) <div role="status">3 items selected</div>
role="progressbar" .progress Progress indicators <div role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
ARIA States & Properties
AttributeTypeUsage in GFSExample
aria-label Property Accessible name for icon-only buttons, search inputs, landmark regions <button aria-label="Close">
aria-labelledby Property Links element to its visible label (dialogs, tabpanels) <div role="dialog" aria-labelledby="dlg-title">
aria-describedby Property Links element to tooltip or help text <input aria-describedby="hint-email">
aria-expanded State Accordion sections, dropdown menus <button aria-expanded="false">
aria-selected State Tab selection state <button role="tab" aria-selected="true">
aria-hidden State Decorative elements (icons, brackets, dot-matrix) <span aria-hidden="true">■</span>
aria-live Property Dynamic content regions (search results, toast) <div aria-live="polite">
aria-modal Property Modal dialogs (prevents AT from reading behind) <div role="dialog" aria-modal="true">
aria-invalid State Form inputs with validation errors <input aria-invalid="true">
aria-required Property Required form fields <input aria-required="true">
aria-current State Current page in navigation, current step <a aria-current="page" href="...">
aria-valuenow Property Current value of progress bars, sliders <div role="progressbar" aria-valuenow="42">
aria-controls Property Links a tab to its panel, button to its target <button aria-controls="panel-1">
aria-disabled State Disabled-looking but still focusable elements <button aria-disabled="true">
■ Use semantic HTML first (button, nav, main, dialog). Apply ARIA only when native semantics are insufficient. First rule of ARIA: if you can use a native element, do so.
09 Accessibility Checklist 30 items grouped by WCAG principle — localStorage persistence
Progress
0 / 30
  • All images have descriptive alt text (or alt="" for decorative images)Perceivable
  • All form inputs have associated visible labels or aria-labelPerceivable
  • Color is never the sole indicator of meaning (icons, text, or patterns supplement color)Perceivable
  • Text has at least 4.5:1 contrast ratio against background (AA)Perceivable
  • Large text (18px+ or 14px+ bold) has at least 3:1 contrast ratioPerceivable
  • Page can be zoomed to 200% without loss of content or functionalityPerceivable
  • Content reflows properly on narrow viewports (no horizontal scroll at 320px)Perceivable
  • Non-text UI components (icons, borders) have at least 3:1 contrastPerceivable
  • All interactive elements are reachable and operable via keyboard aloneOperable
  • No keyboard traps — Tab and Shift+Tab always move focus forward/backwardOperable
  • Focus indicator is visible on all focusable elements (2px tufts ring)Operable
  • Focus order follows logical reading sequence (top-to-bottom, left-to-right)Operable
  • Skip-to-content link is present and functional on every pageOperable
  • No content flashes more than three times per secondOperable
  • Touch targets are at least 44x44 CSS pixelsOperable
  • Page has a descriptive, unique title elementOperable
  • Multiple ways to find content (search, navigation, site map)Operable
  • Page language is specified with lang attribute on <html>Understandable
  • Navigation is consistent across all pages (topbar, footer)Understandable
  • Components are identified consistently (same icon = same function)Understandable
  • Form errors are clearly identified and described in textUnderstandable
  • Form fields provide labels, instructions, or placeholder guidanceUnderstandable
  • No unexpected context changes on focus or inputUnderstandable
  • Error suggestions are provided when input format is knownUnderstandable
  • HTML validates without errors that affect assistive technology parsingRobust
  • All interactive elements expose correct name, role, and value to ATRobust
  • ARIA roles, states, and properties are used correctly per WAI-ARIA specRobust
  • Status messages use role="status" or aria-live for dynamic announcementsRobust
  • prefers-reduced-motion is respected — all animations pause/stopRobust
  • Page tested with at least one screen reader (NVDA, JAWS, or VoiceOver)Robust
■ Checklist progress saved to browser localStorage (key: gfs-checklist-a11y). Use this checklist for every new page or component before publishing. Covers WCAG 2.1 AA requirements applicable to the GFS Design System.
10 Testing Tools & Resources Automated scanners, screen readers, methodology
Automated Testing
Browser Extension
axe DevTools
Industry-standard automated accessibility testing. Scans DOM for WCAG violations with zero false positives. Integrates with CI/CD pipelines via axe-core.
deque.com/axe
Browser Built-in
Lighthouse
Chrome DevTools audit. Scores accessibility on a 0-100 scale. Covers contrast, ARIA, labels, focus management. Part of every GFS deploy check.
Chrome Lighthouse Docs
Web Service
WAVE
WebAIM's Web Accessibility Evaluation Tool. Visual overlay showing errors, alerts, features, and structural elements directly on the page.
wave.webaim.org
Color Tool
WebAIM Contrast Checker
Enter foreground/background hex values to get instant AA/AAA pass/fail results. Essential for verifying custom color combinations.
webaim.org/resources/contrastchecker
CLI Tool
pa11y
Command-line accessibility testing. Run automated audits against any URL. Supports WCAG2AA/WCAG2AAA rulesets and CI integration.
pa11y.org
Browser Extension
Accessibility Insights
Microsoft's tool for web accessibility. Includes FastPass automated checks and guided Assessment for complete WCAG evaluation.
accessibilityinsights.io
Screen Readers
Windows (Free)
NVDA
NonVisual Desktop Access. Free, open-source screen reader for Windows. Primary testing tool for GFS. Best paired with Firefox.
nvaccess.org
Windows (Commercial)
JAWS
Job Access With Speech. Most widely used commercial screen reader. Best paired with Chrome. 40-minute demo mode available for testing.
freedomscientific.com
macOS / iOS (Built-in)
VoiceOver
Apple's built-in screen reader. Activate with Cmd+F5 (macOS) or triple-click Home (iOS). Best paired with Safari. No installation required.
Apple VoiceOver Guide
GFS Testing Methodology
Keyboard Testing Protocol
1. Unplug or disable mouse/trackpad
2. Load page, verify skip-to-content link appears on first Tab
3. Tab through all interactive elements — confirm visible focus ring
4. Verify focus order matches visual reading order
5. Test Enter/Space activation on all buttons and links
6. Test Escape to dismiss modals and overlays
7. Test arrow keys within tab groups and menus
8. Confirm no keyboard traps (Tab always moves forward)
9. Test with both Tab and Shift+Tab direction
10. Document any elements that cannot be reached or operated
Screen Reader Testing Protocol
1. Enable screen reader (NVDA: Ctrl+Alt+N / VO: Cmd+F5)
2. Navigate by headings (H key) — verify hierarchy is logical
3. Navigate by landmarks (D key in NVDA) — verify regions
4. Read through all form fields — verify labels are announced
5. Activate buttons — verify state changes are announced
6. Open/close modals — verify focus management
7. Check data tables — verify row/column headers
8. Trigger error states — verify errors announced
9. Check dynamic content — verify aria-live regions
10. Test on at least two screen readers before sign-off
Reference Standards
StandardVersionURLRelevance
WCAG2.1 (AA target)w3.org/TR/WCAG21Primary compliance target
WAI-ARIA1.2w3.org/TR/wai-aria-1.2ARIA roles, states, properties
ARIA Authoring Practices1.2w3.org/WAI/ARIA/apgPattern implementation guidance
Section 508Revised (2018)section508.govU.S. federal compliance
ADA Title IIICurrentada.govU.S. public accommodation law
EN 301 549v3.2.1etsi.orgEU accessibility standard
■ Every GFS page must pass both automated (axe-core + Lighthouse 90+) and manual (keyboard + screen reader) testing before publication. File accessibility issues in the design system tracker with WCAG criterion reference.
← Back to Hub · GFS Design System v10.0 · Global Food Solutions, Inc. · Edgewood, NY