Accessibility overview

This section describes how accessibility is implemented in Flexmonster and how to use its accessibility features in your project.

High-contrast CSS theme

You can switch to a high-contrast theme by clicking on the grid and pressing Ctrl + Alt + H.

As a high-contrast theme, Flexmonster uses the CSS file from the theme/accessible/ folder. It has more contrasting colors than the default theme. Besides, this theme is compatible with high-contrast modes Live example.

You can change the high-contrast theme by setting the accessibility.highContrastTheme property in the new Flexmonster() API call:

var pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "node_modules/flexmonster/",
  accessibility: {
    // the path is relative to the componentFolder
    highContrastTheme: "theme/yourTheme/flexmonster.min.css",
  },
  report: {
    ...
  }
});

Now the theme from the accessibility.highContrastTheme will be applied when switching to a high-contrast theme.

You can also set the high-contrast theme as the main one by adding a reference to its minified CSS file:

<link rel="stylesheet" type="text/css" 
 href="https://cdn.flexmonster.com/theme/accessible/flexmonster.min.css"
/>

To create a custom high-contrast theme, see our guide on CSS themes.

Keyboard navigation

All Flexmonster’s functionality is accessible from the keyboard. Check out the keyboard navigation guide.

Compatibility with screen readers

The WAI-ARIA framework is used to ensure compatibility with screen readers. It provides HTML attributes that describe element roles, states, and relations.

These HTML attributes are applied to all Flexmonster elements. As a result, screen readers process the component’s structure better, giving users a full understanding of what they are working with.

Here is a full list of ARIA attributes used in Flexmonster:

1. Roles
   • alertdialog
   • button
   • checkbox
   • columnheader
   • combobox
   • dialog
   • grid
   • gridcell
   • menu
   • menubar
   • menuitem
   • menuitemcheckbox
   • list
   • listbox
   • option 
   • radio
   • radiogroup
   • row
   • rowheader
   • status
2. Properties
   • aria-activedescendant
   • aria-colcount
   • aria-colindex
   • aria-controls
   • aria-haspopup
   • aria-label
   • aria-labelledby
   • aria-orientation
   • aria-rowcount
   • aria-rowindex
3. States
   • aria-checked
   • aria-disabled
   • aria-expanded
   • aria-hidden
   • aria-selected

Accessibility standards conformance

Flexmonster conforms to Section 508 and WCAG 2.1 accessibility standards.

Furthermore, meeting the WCAG 2.1 requirements, Flexmonster also conforms to standards that adopt WCAG (e.g., the EN 301 549 standard).