Accessibility • Natura11y Inclusive Framework

Create 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 aditional guidance, visit this WAI guide on getting started with accessibility.

Accessible HTML

An easy way to promote accessibility is to create valid HTML. This helps provide a consistent experience across browsers and assistive technologies.

Natura11y's premade comps have been validated through the W3C Nu Html Checker. It's a good idea to periodically check your work here, too at different stages of development.

Color Contrast

Contrast ratio refers the difference in color between text and background color or image. When applying your own colors to our 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.

Learn how our color system helps you keep your accessible colors consistent throughout your layouts.

Aria

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.

<!-- Aria Role -->
<div class="alert" role="alert">
    <!-- alert content -->
</div>

<!-- Aria State -->
<button aria-expanded="false">
    Accordion Button
</button>

<!-- Aria Property -->
<div
    class="modal__content"
    aria-labelledby="modal-title">
    <!-- modal content -->
</div>

Figure 1

Focus Indication

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.

Accessibility Spotlights

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.

Accessibility Spotlight

I'm an accessibility spotlight alert. When you see me in the docs, pay attention! I'll inform you of special accessibility considerations you may not be aware of.

RTL