Design and build for people with all abilities
Everyone deserves equal opportunities to use the web. Natura11y makes it easier for you to implement accessibility best practices into your everyday workflow. Web accessibility is not only the right thing to do—it is now becoming the law.
On this page, learn about the high-level accessibility features built into Natura11y. For additional information and guidance, visit the WAI guide on getting started with accessibility.
An easy way to promote accessibility is to create valid HTML. This helps provide a consistent experience across browsers and assistive technologies.
Contrast ratio refers the difference in color between text and background color or image. When applying your own colors using Natura11y's color system, check the color-contrast ratio to ensure readability. To be compliant with WCAG Level AA, aim for a contrast ratio of 4.5:1 or higher.
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.
Accessible Rich Internet Applications (WAI-ARIA) roles, states, and properties are present throughout Natura11y's components. Some are added with javacript, while others are present within the example markup. Still others you will need to add yourself, as needed.
Clearly indicating focus is critical for those who navigate with tabbing. Natura11y provides consistent and noticable focus indicators for all actionable element in the DOM.
The graphic below depicts two buttons within Natura11y. The first button has focus. In addition to the focus ring, text is underlined.
Throughout Natura11y's documentation Accessibility Spotlight alerts appear on certian pages. They inform readers of important accessibility information specific to that page's component or feature.