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.

Widget configs

`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.

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

Calendar accessibility guide

All fields, buttons, links and events are tabbable. Focus is moved between them using the Tab key.

Upon activating a new mode, the first day cell of that view is focused. Tab is processed naturally, and when focused on a day cell, will move onto the first tabbable element in that cell.

Pressing Home from inside a calendar view focuses that view's selector button in the Calendar's toolbar.

Pressing Enter when focused on an event invokes the EventEdit feature on the focused event.

Pressing Space when focused on an event invokes the EventMenu feature on the focused event.

Encapsulating day cells may be focused by typing Escape while focused on a child of a day cell. Focus will then move outwards to the cell. All day cells are labeled to describe their time orientation and event content. Arrow keys are used to move between day cells as described for the views below.

Day view, Week view and DayResourceView

As mentioned, by default the first day cell in the main part of the view is activated.

← and → keys navigate between the day cells.

↑ moves upwards to the corresponding day cell in the all day events row if it is available.

The all day row has two sub rows. One is the header row that contains just the date, and a link to the day view for that date, and the event row, which contains cells, which contain the all day events.

Day cell overflow button

If, in a height-limited day cell, the number of events exceeds the capacity of the cell to show them, a cell overflow button is shown after the last visible event.

Cell overflow buttons are labeled with an announcement informing the user how many events are in overflow. Activating the button shows a dialog containing the full set of events for the day, and the first event is focused.

Pressing Escape, as always, closes the dialog and focuses the element from which it was activated.

Month view

Pressing Tab while focused on a day cell moves focus down into the day cell.

There is a link inside each cell to the day view for that date if available.

After that there are the events, and a possible cell overflow button.

↑, ↓, ← and → keys navigate the day cells for the month.

Agenda view

Agenda view is a Grid, so the WCAG grid navigation guidelines apply. There is only one column, and cells encapsulate a date.

Arrow keys navigate up and down.

Tab navigates the content of the day cells which means that events are tabbable.

Ctrl+R activates the range settings menu.

Year View

The top level focusable items, which are first focused when a year view is activated, are the month links.

Month links

Each of the twelve-month links is labeled with the month description and a summary of events for that month. Activating the link will activate the month mode for that month if available.

Tab, ← and → keys navigate between the month links.

↓ from a month link enters the month grid for that month and focuses the week link for the first week in that month.

Week links

Each week link is labeled with the week description and a summary of events for that week. Activating the link will activate the week mode for that month if available.

↑, ↓, ← and → keys navigate within the month grid.

Day links

Day links immediately follow the week link in each row. Each is labeled with a summary of events for that day. Activating the link will show an overflow popup containing events for that day, if any, or activate the day mode for that day if there are no events and the day mode is available.