Accessibility

Go Beyond Compliance

Natura11y takes the stress out of accessibility compliance by providing components that help you meet and surpass WCAG requirements. Our ready-to-use components make building accessible websites simple and straightforward, no matter your experience level.

This page provides a bird's-eye view of Natura11y's accessibility features. Need more detailed guidance? Visit the WAI guide on accessibility basics.

Semantic HTML

Semantic HTML forms the bedrock of web accessibility by using the correct HTML elements for their intended purpose. Natura11y components are built with proper semantic markup—headings, lists, buttons, and form controls—that assistive technologies can easily interpret and navigate.

This approach provides built-in keyboard accessibility, better performance, and improved SEO while making your code easier to maintain. Natura11y's utility classes complement this semantic foundation, ensuring you can style accessible HTML without compromising its meaning.

Color Contrast

Natura11y's dynamic color system takes the complexity out of maintaining proper contrast ratios by grouping colors into cohesive themes. Each theme provides coordinated colors for backgrounds, text, borders, and links, eliminating the guesswork of color combinations.

When you apply a theme like [theme-dark] to a page, section, or card, all elements inside automatically get appropriate colors that maintain proper contrast. This includes form validation messages and complex layouts, preventing common problems like links that disappear on dark backgrounds or error messages that become unreadable when themes change.

In the examples above, the dark text on green passes readability with a color contrast ratio of 5.84, while the white text on green fails with a color contrast ratio of 1.91.

ARIA

Accessible Rich Internet Applications (WAI-ARIA) roles, states, and properties are present throughout Natura11y's components. Some are added with JavaScript, while others are present within the example markup. You'll need to add ARIA attributes yourself when creating custom interactions or when semantic HTML alone doesn't fully convey your component's purpose to assistive technologies.

Focus Indication

Natura11y ensures focus indicators are always visible and properly positioned. Focus rings automatically adapt to theme colors—preventing common problems like blue focus rings disappearing on blue backgrounds. Focus rings are also positioned to avoid clipping from parent containers with overflow: hidden, a frequent issue in other frameworks.

Beyond visual indicators, Natura11y components include proper focus management. When you close a modal or accordion, focus returns to the triggering element. Navigation components support arrow key movement, and interactive elements maintain logical tab order throughout.

Built-in Accessible Components

Most frameworks leave you searching for accessible third-party plugins that break your design system's consistency. Natura11y includes a complete library of accessible components out of the box—from complex interactions like modals and carousels to essential form controls and navigation patterns.

Every component follows WCAG guidelines and integrates seamlessly with Natura11y's theme system, giving you consistent accessibility across your entire interface.

• Carousel

  Natura11y's Track component is an accessible carousel slideshow with pagination and screen reader announcements.

• Mega Menu

  Complex dropdown? menus with proper keyboard navigation and screen reader support via Mega Menu Navigation.

• Lightbox

  Includes focus trapping, keyboard controls, and seamless gallery support for accessible image viewing with Lightbox.

• Forms

  Complete form system with proper labeling, semantic fieldsets, accessible file uploads, and error handling.