Accessibility

EBRAINS is committed to delivering products that are accessible to everyone. All components in the Design System are built to meet WCAG 2.1 Level AA standards, ensuring a seamless and inclusive experience for all users.

WCAG Principles

The Web Content Accessibility Guidelines (WCAG) define four core principles:

• Perceivable — Content must be presented in ways users can perceive, including text alternatives for images, sufficient color contrast, and resizable text.
• Operable — All functionality must be accessible via keyboard. Users are given enough time to interact, and content that could trigger seizures is avoided.
• Understandable — The interface must be readable and predictable. Help users avoid and correct mistakes with clear labels and error messages.
• Robust — Content must work reliably across browsers, devices, and assistive technologies.

What We Provide

Keyboard Navigation

All interactive components support full keyboard navigation:

• Tab / Shift+Tab to move between elements
• Enter / Space to activate buttons and links
• Arrow keys for menus, tabs, and dropdowns
• Escape to close modals and popovers

ARIA Attributes

Components include proper ARIA roles, labels, and states:

• role="button", role="tab", role="dialog" where appropriate
• aria-label and aria-labelledby for screen reader context
• aria-expanded, aria-selected, aria-disabled for state communication
• aria-live regions for dynamic content updates

Color Contrast

All text and interactive elements meet the minimum contrast ratios:

Focus Management

• Visible focus indicators on all interactive elements
• Focus trapping in modals and dialogs
• Focus restoration when dialogs close
• Custom focus styles using the brand green (#00FF9D) outline

Best Practices

When building with EBRAINS components, follow these guidelines:

• Always provide meaningful alt text for images
• Use semantic HTML (h1–h6, nav, main, aside) for document structure
• Don’t rely on color alone to convey information
• Ensure forms have associated labels and clear error messages
• Test with keyboard-only navigation
• Test with a screen reader (VoiceOver, NVDA, or JAWS)

Resources

• WCAG 2.1 Guidelines
• WAI-ARIA Authoring Practices
• axe DevTools — Browser extension for automated accessibility testing
• Lighthouse — Built-in Chrome accessibility auditing