Accessibility • Natura11y
Jump to main contentJump to website footer

There is a newer version of Naturally.

A giraffe reaching for a leaf

Photo by Zdeněk Macháček

Accessibility

Introduction

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.

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 examples 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 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.

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.

RTL