Accessibility Basics

Accessibility is a foundational principle of the Tendoo Design System. It ensures our products are usable by everyone, including people with disabilities. This page introduces key accessibility concepts and best practices for using and building accessible components.

Why Accessibility Matters

• Improves usability for everyone
• Required for legal compliance (e.g., WCAG, ADA)
• Builds more inclusive and equitable digital products

Core Principles

We follow the WCAG (Web Content Accessibility Guidelines) and focus on these four core principles:

1. Perceivable — Content must be presented in ways users can perceive (e.g., text alternatives for images, sufficient color contrast).
2. Operable — Interface must be usable with a keyboard or assistive technologies.
3. Understandable — Content and behavior should be predictable and clearly communicated.
4. Robust — Content must work across different browsers, devices, and assistive tools.

Best Practices

For Designers

• Use sufficient color contrast (4.5:1 for text, 3:1 for large text or UI).
• Provide clear focus indicators for all interactive elements.
• Avoid relying solely on color to communicate meaning.
• Use clear, descriptive labels and instructions.

For Developers

• Use semantic HTML elements (e.g., <button>, <nav>, <label>).
• Ensure components are keyboard-navigable (Tab, Enter, Esc, etc.).
• Add ARIA roles and labels only when necessary.
• Use accessible form patterns with proper label, aria-describedby, and aria-invalid.

Testing Accessibility

• Manual Testing: Use keyboard navigation and screen readers (e.g., VoiceOver, NVDA).
• Automated Tools:
  • Axe DevTools (browser extension)
  • Lighthouse (Chrome DevTools)
  • eslint-plugin-jsx-a11y (for React)

Accessibility in Tendoo Components

All components in the Tendoo Design System are built with accessibility in mind. Still, it's your responsibility to:

• Use components in the correct context
• Provide necessary labels and alt text
• Avoid disabling accessibility features when customizing

Contributing Accessibly

When contributing new components or patterns:

• Consider accessibility from the start
• Test with a screen reader and keyboard
• Include ARIA specs if needed in the documentation
• Request an accessibility review from the system team

---

Accessibility is everyone’s responsibility. By following these practices, you help ensure Tendoo’s products are inclusive, usable, and respectful of all users’ needs.