Accessibility in Flexmonster 2.9

Mariia Zakala posted on June 2nd, 2021

Version 2.9 has brought many notable features. Among them, there is one we are incredibly proud of — accessibility.

We started working on it long before the major release, and it’s been quite a journey to make Flexmonster accessible. Why did we invest so much into accessibility? Let us share our motivation with you:

1. We put users’ convenience first. Being convenient implies being accessible.
2. We realize the business value of accessibility. Flexmonster is intended to be a part of larger projects; therefore, their accessibility relies on how accessible our component is. Since this feature is a must today, we do our best to design Flexmonster according to the standards. Our clients can be assured of using a product that meets all the modern requirements for high-quality software.
3. Everyone can benefit from accessibility. Imagine having a broken mouse or googling something on your phone under the sunshine. Sounds familiar? An accessible tool would be easy to use even in such untypical situations.
4. In some countries, accessibility is a law. The USA and its Section 508 standard are a case in point.

Another question likely to arise is how we achieve accessibility. No secrets: we follow guidelines from the WCAG 2.1 and Section 508 accessibility standards.

More specifically, we developed Flexmoster’s accessibility in several directions. Let’s elaborate further on them.

Keyboard navigation mode

There is no accessibility without keyboard navigation. That’s why we’ve taken care of making our component adapted for keyboard users. 

Keyboard mode gets enabled once pressing the Shift key three times. All the functionality is at your service: feel free to sort, filter, drag, and use all available UI features.

Interested? Visit our guides and explore the full potential of the keyboard navigation mode.

High-contrast theme

Feel like adding more contrast to the Flexmonster user interface? Use the Ctrl + Alt + H shortcut and swiftly switch to the high-contrast CSS skin.

You can also get creative and pick your own theme to be a high-contrast one.

Find all the details in our documentation.

Compatibility with screen readers

This update is hard to notice because you can’t enable or configure it. Nevertheless, it is essential for Flexmonster’s accessibility.

To advance compatibility with screen readers, we resorted to the WAI-ARIA framework, which offers a set of attributes for HTML elements. When used, they help assistive technologies determine element roles, states, and relations.

We applied these attributes to Flexmonster so that screen readers could process its structure more effectively, hence improving user experience.

Compatibility with screen readers is described more comprehensively in our accessibility section. Check it out!

How did you like accessibility in Flexmonster?

There are even more handy updates in version 2.9

Discover them in our blog post. Let’s dive in!