Accessibility

A brief overview of Athena's features and limitations for the creation of accessible content.

The Athena Framework provides a rich suite of tools for building accessible websites and applications--but it's important that developers and content editors understand how to implement these tools to meet Section 508 compliance and WCAG 2.0 AA requirements.

Accessibility Basics

The Athena Framework provides utilities and pre-styled components that are designed to be accessible, but it is the responsibility of the developers and content editors using the framework to implement them appropriately.

Please see our Additional Resources section for further reading on accessibility requirements.

Contents

Overview and limitations

The overall accessibility of any project built with Athena depends in large part on the author's markup, additional styling, and scripting they've included. However, provided that these have been implemented correctly, websites and applications using Athena should be able to fulfill WCAG 2.0 AA and Section 508 accessibility requirements.

Structural markup

Athena's styling and layout can be applied to a wide range of markup structures. Athena's documentation aims to provide developers with best practice examples to demonstrate the use of Athena itself and illustrate appropriate semantic markup, including ways in which potential accessibility concerns can be addressed.

Interactive components

Athena's interactive components—such as modal dialogs, dropdown menus and custom tooltips—are designed to work for touch, mouse and keyboard users. Through the use of relevant WAI ARIA roles and attributes, these components should also be understandable and operable using assistive technologies (such as screen readers).

Because Athena's components are purposely designed to be fairly generic, authors may need to include further ARIA roles and attributes, as well as JavaScript behavior, to more accurately convey the precise nature and functionality of their component. This is usually noted in the documentation.

Color contrast

Colors in Athena have been modified from Bootstrap's defaults to ensure they meet WCAG 2.0 AA color contrast requirements (color contrast ratio of at least 4.5 to 1). In addition, most components include overrides unique to Athena that apply accessible text colors out-of-the-box. However, projects that apply custom color overrides should be tested on a per-case basis to ensure they still meet color contrast requirements.

Visually hidden content

Content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, can be styled using the .sr-only class. This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of color) need to also be conveyed to non-visual users.


<p class="text-danger">
  <span class="sr-only">Danger: </span>
  This action is not reversible
</p>

For visually hidden interactive controls, such as traditional "skip" links, .sr-only can be combined with the .sr-only-focusable class. This will ensure that the control becomes visible once focused (for sighted keyboard users).


<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

Additional resources

Further reading

Accessibility validation tools