Accessibility

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

Overview and limitations #

Halfmoon provides an easy-to-use framework of ready-made styles, layout tools, and interactive components, allowing developers to create websites and applications that are visually appealing, functionally rich, and accessible out of the box.

The overall accessibility of any project built with Halfmoon depends in large part on the author's markup, additional styling, and scripting they've included. However, provided that these have been implemented correctly, it should be perfectly possible to create websites and applications with Halfmoon that fulfill all three levels (A/AA/AAA) of WCAG 2.1 (opens in new tab), Section 508 (opens in new tab), and similar accessibility standards and requirements. For example, every page on this website (built entirely using Halfmoon) gets a 98-100 accessibility rating using the EXPERTE.com Accessibility Check (opens in new tab).

Overview and limitations Structural markup #

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

Overview and limitations Interactive components #

Halfmoon'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 (opens in new tab) roles and attributes, these components should also be understandable and operable using assistive technologies (such as screen readers).

Because Halfmoon'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.

Overview and limitations Color contrast #

Some combinations of colors that currently make up Halfmoon's default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—may lead to insufficient color contrast, that is, below the recommended WCAG 2.1 text color contrast ratio of 4.5:1 (opens in new tab) and the WCAG 2.1 non-text color contrast ratio of 3:1 (opens in new tab), particularly when used against a light background. Authors are encouraged to test their specific uses of color and, where necessary, manually modify/extend these default colors to ensure adequate color contrast ratios.

Content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, can be styled using the .visually-hidden 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.

HTML

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

For visually hidden interactive controls, such as traditional "skip" links, use the .visually-hidden-focusable class. This will ensure that the control becomes visible once focused (for sighted keyboard users). Please note, .visually-hidden-focusable is a standalone class, and must not be used in combination with the .visually-hidden class.

HTML

<a class="visually-hidden-focusable" href="#content">
  Skip to main content
</a>

Overview and limitations Reduced motion #

Halfmoon includes support for the prefers-reduced-motion media feature (opens in new tab). In browsers/environments that allow the user to specify their preference for reduced motion, most CSS transition effects in Halfmoon (for instance, when a modal dialog is opened or closed, or the sliding animation in carousels) will be disabled, and meaningful animations (such as spinners) will be slowed down.

Additional resources #

The following are links to additional resources that you can use (each link will open in a new tab):

Up next

RTL

Help us grow

Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.

You can email us directly if you have any queries. We are always happy to answer.