Using accessibility in Bryntum widgets

Accessibility Policy

We strive to make our web components as accessible and usable as possible. We do this by following Section 508 and the Web Content Accessibility Guidelines (WCAG 2.1) produced by the World Wide Web Consortium (W3C, the web's governing body).

Key commitments

Images have alternative text (so if you can't see the image you can still read the text).
An Accessible theme in which color contrast between the foreground and background is sufficiently strong. (Available Q3 2025)
Text can be resized according to user preference using browser zoom commands.
Headings are correctly used (they're not just ordinary text made to look big and bold).
Links make sense by themselves (e.g. no links that just say "Click here" or "More...").
Tables or ARIA-compliant Grids are used for laying out tabular information and have proper headings and summaries.
All operations implemented as mouse gestures have a keyboard based equivalent.
All input fields have a label or aria-label which describes them.
All buttons have a label or aria-label which describes them.
Tooltip content is announced on focus.

Feedback

If you have a problem with the accessibility of our web components, please contact us and provide the URL (web address) of the material you tried to access, the problem you experienced, and your contact information. We'll attempt to provide the information you're seeking.

Example pages

The example apps all have a "Skip to content" link as the first tabbable element in the page, which, if focused by Tab and activated, jumps past the example's chrome and into the example application.

`ariaElement`

The name of a named element, which is the main ARIA element that acquires the role attribute and the aria-label attribute.

This is normally the Widget's encapsulating element. For input fields, it is the input element.

Widget subclasses, which have custom DOM can set this.

`role`

The ARIA role to assign to the ariaElement.

System-supplied widgets know their own roles, but this can be overridden by configuration, or in subclasses.

`ariaLabel`

A localizable string key, which, when resolved from the locale, is applied to the aria-label attribute of the Widget's ariaElement.

Note that this is re-evaluated and updated on focusIn and focusOut. This is because locale files can specify a function to yield the value. The widget itself is passed as the templateData, so the result can reflect widget state.

`ariaDescription`

A localizable string key, which, when resolved from the locale, is applied to an inner element, which is referenced by the aria-describedby attribute of the Widget's ariaElement

If not specified, the tooltip text value is used as the ariaDescription.

`ariaHasPopup`

An indicator that the widget offers a popup containing extra functionality, which is set to the role of that popup.

System supplied widgets such as Button, MenuItem and the PickerFields (Combo, DateField and TimeField) will automatically set this to the role of their popups.

VoiceOver utility on OSX

In the Settings tab, the "Synchronize keyboard focus and VoiceOver cursor" must be checked.

Keyboard-accessible widgets

Most low level widgets such as TextField, NumberField and Checkbox are native HTML input fields, which are accessible natively. The Tab key moves between them.

When any Field is configured clearable : true, Shift+Backspace may be used to invoke the trigger and clear the field.

Certain more complex input widgets have special key handling.

NumberFields respond to ↓ and ↑ by decrementing or incrementing by their configured step value just as would happen by clicking the spin down or up triggers.

Combo

The Combo widget is fully keyboard accessible. Typing into the field filters the store and shows the dropdown listbox as soon as the configured minChars have been typed.

Pressing ↓ shows the listbox unfiltered.

When the listbox is visible, ↑ and ↓ may be used to navigate between the items, Enter selects the focused item.

Button

The Button widget is keyboard accessible. If it has a configured menu, then Enter will activate the menu. Escape will hide the menu.

DateField

The DateField widget is keyboard accessible.

Shift+↓ activates the "nudge backwards" trigger. Shift+↑ activates the " nudge forwards" trigger.

Pressing ↓ shows a popup date picker, which is an aria Grid in which each cell represents a date.

As with all grids, ↑, ↓, ← and → navigate as expected with wrapping to the previous month at the edges.

When focused on a date cell, Enter selects that date and sets the value of the date field.

Tab and Shift+Tab navigate to the month and year change buttons in the header and then back into the cells.

As with all popups, Escape closes the date picker. Focus reverts to the DateField.

TimeField

↓ and ↑ decrement and increment the hours or minutes subfield currently focused.

Pressing Space shows a popup time picker, which allows the hours, minutes and AM/PM to be chosen separately.

Popup

The Popup widget is keyboard accessible in that Tab functions normally but is trapped within the popup.

If an Escape keyboard event bubbles from a descendant widget, this closes the popup and reverts focus to the element that was focused before the popup was shown.

This is the case for all widgets, which are transient and contain focus when they hide. The hide operation actively pushes focus back to the element from which focus entered the widget.

TabPanel

The TabPanel widget is keyboard accessible. The tabs in the tab list are Buttons and are tabbable.

When the Tab key is used to navigate into the tab list, the currently active tab is focused. Tab moves between them as usual.

Activate the focused tab using the Enter key. The newly activated child of the TabPanel is focused.

Grids (This includes Schedulers, Gantts, and the Agenda view of Calendar)

Grids are fully accessible, according to WAI-ARIA guidelines.

The column headers are treated as Grid cells and constitute row 1 of the Grid.

↑, ↓, ← and → keys work as expected to move focus to adjacent cells. When navigation moves onto an input field (like a filter field of cell editor) which is inside a cell, Escape moves focus outwards to the cell element ready for onward navigation. Tab / Shift+Tab may be used to move to focusable content in the next/previous cell because arrow keys are used for input editing.

Space when focused on a cell invokes the defined context menu if enabled. So for a column header, the HeaderMenu feature will activate. From a data cell, the CellMenu feature will activate.

The HeaderMenu is the way to access sorting, grouping, filtering and moving columns between sub grids in a keyboard-accessible manner.

Page Up moves up in the current column by one page.

Page Down moves down in the current column by one page.

Home moves to the first cell in a row.

End moves to the last cell in a row.

Ctrl+Home moves to the first cell (The first column header).

Ctrl+End moves to the last cell.

If a cell has focusable content, navigating to that cell focuses the first focusable element in the cell which may then be used as normal. The Tab key may be used inside the cell. Arrow and other grid navigation keys work as usual and navigate away from the cell.

Enter invokes the defined cell editor for the cell (if any, and if the CellEdit feature is enabled).

When focused inside a cell, Escape moves focus back up to the cell.

Tree feature

When a Grid is configured to represent data as a tree, the following keystrokes manipulate the nodes:

Shift+← when focused on the tree column collapses the node.

Shift+→ when focused on the tree column expands the node.

Filter feature

When focused on a filterable column header, typing F will show and focus the filter field.

Search feature

The Search feature has the following default keyboard shortcuts:

F3 or Ctrl+G - Move focus to next search hit
Shift+F3 or Ctrl+Shift+G - Move focus to previous search hit