Skip to content
Sparkle Design System

Accessibility Guidelines

The Sparkle Design System documentation is committed to providing an accessible experience for all users, including those using assistive technologies.

Our Accessibility Commitment

Section titled “Our Accessibility Commitment”

We strive to conform to the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA standards. These guidelines help ensure our documentation is accessible to people with disabilities and provides a better user experience for everyone.

Accessibility Features

Section titled “Accessibility Features”

⌨️ Keyboard Navigation

Section titled “⌨️ Keyboard Navigation”
  • Tab Navigation: All interactive elements can be accessed using the Tab key
  • Focus Indicators: Clear visual focus indicators meet WCAG contrast requirements
  • Skip Links: Skip navigation links allow users to jump to main content
  • Logical Tab Order: Focus moves through elements in a logical sequence

🎯 Screen Reader Support

Section titled “🎯 Screen Reader Support”
  • Semantic HTML: Proper use of headings, lists, and landmarks
  • ARIA Labels: Enhanced labels for complex interactive elements
  • Alt Text: Descriptive alternative text for all informative images
  • Live Regions: Dynamic content changes are announced to screen readers

🎨 Visual Design

Section titled “🎨 Visual Design”
  • Color Contrast: Text meets WCAG AA contrast ratios (4.5:1 for normal text, 3:1 for large text)
  • Color Independence: Information is not conveyed by color alone
  • Responsive Design: Content adapts to different screen sizes and zoom levels
  • Focus Styles: Clear focus indicators with 3:1 contrast ratio

📱 Mobile Accessibility

Section titled “📱 Mobile Accessibility”
  • Touch Targets: Interactive elements are at least 44×44 CSS pixels
  • Responsive Layout: Content reflows properly on all screen sizes
  • Orientation Support: Functions work in both portrait and landscape modes
  • Zoom Support: Content remains functional when zoomed to 200%

Testing Tools and Methods

Section titled “Testing Tools and Methods”

Automated Testing

Section titled “Automated Testing”

We use several automated tools to continuously monitor accessibility:

  • axe-core: Industry-standard accessibility testing engine
  • Lighthouse: Google’s built-in accessibility auditing
  • WAVE: Web accessibility evaluation tool

Manual Testing

Section titled “Manual Testing”

Our manual testing process includes:

  • Keyboard Navigation: Testing all functionality without a mouse
  • Screen Reader Testing: Verification with NVDA, VoiceOver, and ORCA
  • Color Contrast Analysis: Ensuring proper contrast ratios
  • Zoom Testing: Verifying functionality at 200% zoom

Browser and Assistive Technology Support

Section titled “Browser and Assistive Technology Support”

Supported Browsers

Section titled “Supported Browsers”
  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Edge (latest)

Supported Screen Readers

Section titled “Supported Screen Readers”
  • NVDA (Windows) - Free screen reader
  • VoiceOver (macOS/iOS) - Built-in screen reader
  • ORCA (Linux) - Built-in screen reader
  • JAWS (Windows) - Commercial screen reader

Known Issues and Limitations

Section titled “Known Issues and Limitations”

We are aware of the following accessibility considerations:

  • Dynamic Content: Some interactive examples may require additional screen reader navigation
  • Code Examples: Syntax highlighting may reduce contrast in some cases
  • Third-party Embeds: Storybook embeds inherit their own accessibility features

Feedback and Reporting

Section titled “Feedback and Reporting”

We welcome feedback about the accessibility of our documentation. If you encounter accessibility barriers, please:

  1. Open a GitHub Issue: Report accessibility issues
  2. Email us directly: git@mrbro.dev
  3. Include details: Describe the issue, your setup, and expected behavior

We aim to respond to accessibility feedback within 2 business days.

Accessibility Statement

Section titled “Accessibility Statement”

This accessibility statement applies to the Sparkle Design System documentation website at sparkle.mrbro.dev.

Compliance Status

Section titled “Compliance Status”

We believe this website is partially compliant with WCAG 2.1 Level AA standards. Some content may not be fully accessible due to:

  • Third-party embedded content (Storybook components)
  • Complex interactive examples requiring additional context
  • Dynamic content that may need enhanced announcements

Assessment Methods

Section titled “Assessment Methods”

This website has been assessed using:

  • Self-evaluation: Regular internal accessibility reviews
  • Automated testing: axe-core, Lighthouse, and WAVE tools
  • User testing: Feedback from users with disabilities
  • Expert review: Accessibility specialist evaluation

Date of Assessment

Section titled “Date of Assessment”

This statement was created on September 10, 2025, and was last reviewed on September 10, 2025.

Resources

Section titled “Resources”

Learn More About Accessibility

Section titled “Learn More About Accessibility”

Tools for Testing Accessibility

Section titled “Tools for Testing Accessibility”

This accessibility guide is continuously updated to reflect our ongoing commitment to digital accessibility.