Get Free Trial
Get Free Trial
All documentation
    1. Accessibility overview
    2. Keyboard navigation

    • 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 selecting the grid and pressing Ctrl + Alt + H (Command + Option + H on macOS).

    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.

    Setting a custom high-contrast theme

    You can set a custom high-contrast theme using the accessibility.highContrastTheme property in the new Flexmonster() API call:

    const pivot = new Flexmonster({
      container: "pivotContainer",
      componentFolder: "flexmonster/",
      accessibility: {
        // 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="flexmonster/theme/yourTheme/flexmonster.min.css"
    />

    See our guide on creating a custom theme for further details.

    Keyboard navigation

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

    Compatibility with screen readers

    Flexmonster implements WAI-ARIA (Web Accessibility Initiative — Accessible Rich Internet Applications) to ensure compatibility with screen readers. WAI-ARIA requires adding specific HTML attributes to interface elements to define their roles, states, and relationships.

    Information specified in these attributes helps screen readers interpret the structure of the UI more accurately, giving users a complete understanding of what they are working with.

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

    1. Roles
    2. Properties
    3. States

    Accessibility standards conformance

    Flexmonster follows accessibility guidelines based on WCAG 2.1 and Section 508 standards.

    Since WCAG 2.1 serves as the foundation for several international standards, Flexmonster is also generally compatible with such standards (e.g., EN 301 549).

    See also

    Frequently asked questions

    Can't find your answer here?
    Visit the FAQ page

    Flexmonster Pivot Table & Charts is a JavaScript pivot table component for adding interactive reporting and data analysis to web applications. Users can summarize, filter, sort, and explore data in pivot tables and charts, drill into results, and export reports.