DevExtreme (v23.1, v23.2) — Accessibility Enhancements (Angular, React, Vue, jQuery)

In our last two major release cycles (v23.1 and v23.2), we extended accessibility-support across numerous DevExtreme components. In this post, I'll document enhancements introduced in 2023 - enhancements designed to better serve the needs of individuals with auditory/motor/cognitive impairments.

v23.1 Enhancements

In v23.1, we focused on the following accessibility-related capabilities: adhering to the WAI-ARIA standard for disabled UI elements and allowing screen readers to report disabled elements when focused. A global rework of aria-* attributes was implemented, enhancing screen reader support for all UI components.

Visual improvements were made to Tabs and TabPanel components in Material and Generic themes, introducing new states for hover, active, disabled, focused, and selected.

We introduced customization options for Charts, allowing users to apply images and SVG patterns, making them more accessible to visually impaired individuals.

View Demo

We also fine-tuned keyboard navigation in the TreeView, enabling users to easily navigate checkboxes. In the Calendar, users can now focus on the Today button and press Enter to navigate to today's date.

Documentation-related  updates were made for a number of components, supplying detailed information on accessibility support and testing methodologies.

v23.2 Enhancements

Building on the changes made in our v23.1 release cycle, v23.2 ships with enhancements designed to address WCAG and Section 508 standards.

We enhanced DataGrid color contrast:

All DataGrid checker errors identified by accessibility tools (Axe, WAVE, Lighthouse) were resolved. Keyboard navigation within adaptive rows was refined, allowing users to expand/collapse rows more easily. We added the ability to focus on total summary and group footer summaries as well. 

We also extended support for screen readers as follows: 

• Modified cells and deleted rows in DevExtreme DataGrid batch edit mode.
• Delete confirmation messages in the DevExtreme DataGrid.
• Sort header indexes in the DevExtreme DataGrid.
• Items in Lookup.
• Dialog titles in the HtmlEditor.
• Validation messages for multiple components.
• Continuous rework of aria-* attributes.

Improved keyboard navigation support was extended to multiple components, with a particular focus on the Calendar component.

Visual focus indication in Popup and other related components was updated to deliver a more user-friendly experience.

We also kept improved accessibility-related content in our help system. 

We are committed to delivering accessible UI components and ensuring a more inclusive user experience for all. We plan to continue accessibility-related development efforts in our forthcoming release cycle. To help us shape development plans in the coming year, please take a moment and share your thoughts/feedback with us.

Free DevExpress Products - Get Your Copy Today