Skip to main content

Accessibility support

Accessibility is one of the key concepts in present-day web development. It presupposes equal access to web resources for people with diverse abilities.

Web Conformance Guidelines​

Even if you are not mandated to conform to any particular accessibility standard, it can be helpful to understand the guidelines outlined as they are generally good practices worth incorporating into your web based applications.

Currently the most commonly encountered conformance guidelines and standards are:

  • ADA - US Department of Justice
  • Section 508 - US federal agencies
  • WCAG 2.0 - globally accepted standard. WCAG 2.0 has 3 levels of conformance; A, AA and AAA (in order of conformance)
  • ARIA - a standard that defines ways to make web content and web applications more accessible to people with disabilities
  • WAI - web accessibility standard

The DHTMLX Suite library meets the main requirements of the WCAG 2.0 standards and provides support for the following accessibility components:

WAI-ARIA Attributes​

There are special attributes used in the markup of DHTMLX Suite widgets that make it possible for screen readers to recognize and interpret them to the user, namely:

Grid​

There are roles and attributes for elements of grid, sorting, filters, editable cells to enable screen readers to interpret and navigate the columns and rows of the grid (enabled by default). Custom content should be marked manually.

You can find the following roles and attributes in the DOM:

  • role: grid, rowgroup, row, columnheader, gridcell, button
  • aria attributes: label, rowcount, colcount, rowindex, colindex, aria-sort.

Role presentation and aria-hidden are used to hide redundant content from the accessibility tree.

Chart​

There are aria attributes for axes, lines, points, legends and general description of the chart (enabled by default). Points on charts like line, spline, area, spline area have aria attributes only when the pointType property is set. Information for attributes is taken from the chart config and property names. Currently, the ability to specify this information by yourself is not provided.

You can find the following roles and attributes in the DOM:

  • role: graphics-document, graphics-object, graphics-symbol, button
  • aria attributes: label, roledescription.

Role presentation and aria-hidden are used to hide redundant content from the accessibility tree.

List and DataView​

There are general description of the component, items and their states. All the roles and attributes are enabled by default You can find the following roles and attributes in the DOM:

  • role: listbox, option
  • aria attributes: label, roledescription, grabbed, selected, multiselectable, readonly.

Role presentation and aria-hidden are used to hide redundant markup from the accessibility tree.

Toolbar​

There are general description of the component, items and their states. All the roles and attributes are enabled by default You can find the following roles and attributes in the DOM:

  • role: toolbar, button, combobox, menu, menuitem
  • aria attributes: label, labeledby, orientation, haspopup, expanded, disabled, pressed.

Role presentation and aria-hidden are used to hide redundant markup from the accessibility tree.

Keyboard Navigation​

All DHTMLX Suite widgets are provided with a keyboard navigation support. It allows using a Suite-based app without a mouse pointer. Basic rules include:

  • the "tab" key is used to navigate between widgets and clickable areas of the widgets
  • the "esc" key closes windows and editors
  • the "enter" is used to open and hide drop-down lists of select controls
  • the arrow keys are used to move selection or change active elements within widgets
info

For the full list of built-in hotkeys, refer to the Keyboard Navigation articles of the following widgets:

High-Contrast Themes​

For users that are visually impaired due to color deficiencies, care should be taken when using colors to provide information.

Among various DHTMLX Suite themes there are the high-contrast ones:

  • Light High Contrast
  • Dark High Contrast
info

The contrast themes correspond to the AAA level.

Being rather attractive, it is also helpful for those users who have weak eye-sight.