Accessibility Features Overview
NOTE
The overall accessibility level of your application depends on the CardView features you use.
Accessibility Requirement | Support Level |
---|---|
Right-to-Left Support | |
Keyboard Navigation Support | |
Screen Reader Support | |
Contrast Color Theme | |
Mobile Device Support | |
Lighthouse Accessibility Validation | |
Axe Accessibility Validation | |
WAVE Accessibility Validation | |
Section 508 Support | |
WCAG 2.x Support |
- - All component features meet the requirement
- - Some component features may not meet the requirement
- - Accessibility requirement is not supported
Accessibility Standards Compliance
The CardView component meets a variety of Section 508 and WCAG 2.x compliance standards. Known exceptions:
Section 508 criteria | WCAG 2.x criteria | Exception description |
---|---|---|
501 (Web)(Software) 504.2 (Authoring Tool) 602.3 (Support Docs) |
1.4.3 Contrast (Minimum) (Level AA) 1.4.11 Non-text Contrast (Level AA 2.1 and 2.2) |
CardView does not support Windows High Contrast themes. |
11.5.2.12 Execution of available actions | 2.1.1 Keyboard (Level A) | Keyboard navigation is not supported for ColumnChooser items in 'drag' mode. |
- | 2.5.7 Dragging Movements (Level AA 2.2 only) | ColumnChooser in 'drag' mode. |
The component also complies with the European Accessibility Act (EAA) and Americans with Disabilities Act (ADA) directives.
Keyboard Navigation
CardView offers different keyboard controls depending on the focused component area and the action users want to perform.
Toolbar
Key | Action |
---|---|
Tab Shift + Tab |
Moves focus between toolbar controls and other CardView areas. |
Enter Space |
Triggers focused toolbar controls. |
Header Panel
Navigation
Key | Action |
---|---|
Tab Shift + Tab |
Moves focus between the header panel and other CardView areas. |
← → | Moves focus between header panel items. |
Shift + → Shift + ← |
Reorders the focused header item if allowColumnReordering is "true". |
Sorting and Filtering
Key | Action |
---|---|
Enter | Enables/cycles between focused header sorting options (ascending/descending). |
Shift + Enter Shift + Click |
Enables/cycles between focused header sorting without clearing previous sorting options if sorting.mode is "multiple". |
Ctrl + Enter Ctrl + Click |
Disables focused header sorting. Does not clear previous sorting options if sorting.mode is "multiple". |
Alt + ↓ | Triggers the focused header filter popup. |
Content View
Navigation
Key | Action |
---|---|
← → ↑ ↓ | Moves focus between cards. |
PageUp PageDown |
Moves focus to the previous/next page if paging.enabled is "true". |
Home End |
Moves focus to the first/last card of the focused row. |
Ctrl + Home Ctrl + End |
Moves focus to the first card of the first row/last card of the last row. |
Selection and Searching
Key | Action |
---|---|
Space | Toggles selection of the focused card and clears previous selection if selection.mode is "single". |
Ctrl + Click | Toggles selection of the focused card without clearing previous selection if selection.mode is "multiple" and selection.showCheckBoxesMode is "onClick". |
Shift + Space Shift + Click |
Toggles selection of all cards between the last selected card and the focused card if selection.mode is "multiple". |
Ctrl + A | Selects all cards if selection.mode is "multiple". |
Ctrl + F | Moves focus to the search panel if searchPanel.visible is enabled. |
Card Interaction
Key | Action |
---|---|
Shift + Enter | Edits the focused card. |
Delete | Deletes the focused card. |
Enter | When focused on a card, moves focus to the first focusable card item. When focused on a card item, triggers the item. |
Tab Shift + Tab |
Moves focus between card items. |
Esc | When focused on a card item, moves focus to the parent card. |
Filter Panel
Key | Action |
---|---|
Tab Shift + Tab |
Moves focus between filter panel items and other CardView areas. |
Enter Space |
Triggers focused filter panel item. |
Pager
Key | Action |
---|---|
Tab Shift + Tab |
Moves focus between pager items and other CardView areas. |
Enter Space |
Triggers focused pager item. |
↑ ↓ | When focused on TBA, switches the component to the next/previous page. |
Alt + ↓ | When focused on TBA, opens the dropdown. |
Popups
Key | Action |
---|---|
Tab Shift + Tab |
Moves focus between popup items. |
Enter Space |
Triggers focused controls. |
Esc | Closes the active popup. |
Use the registerKeyHandler(key, handler) method to implement a custom handler for a key.
jQuery
JavaScript
function registerKeyHandlers () { const cardView = $("#cardViewContainer").dxCardView("instance"); cardView.registerKeyHandler("backspace", function(e) { // The argument "e" contains information on the event }); cardView.registerKeyHandler("space", function(e) { // ... }); }
Angular
TypeScript
import { ..., ViewChild, AfterViewInit } from '@angular/core'; import { DxCardViewModule, DxCardViewComponent } from 'devextreme-angular'; // ... export class AppComponent implements AfterViewInit { @ViewChild(DxCardViewComponent, { static: false }) cardView: DxCardViewComponent; // Prior to Angular 8 // @ViewChild(DxCardViewComponent) cardView: DxCardViewComponent; ngAfterViewInit () { this.cardView.instance.registerKeyHandler('backspace', function(e) { // The argument "e" contains information on the event }); this.cardView.instance.registerKeyHandler('space', function(e) { // ... }); } } @NgModule({ imports: [ // ... DxCardViewModule ], // ... })
Vue
<template> <DxCardView :ref="myCardViewRef" /> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxCardView from 'devextreme-vue/card-view'; const myCardViewRef = 'my-card-view'; export default { components: { DxCardView }, data() { return { myCardViewRef } }, computed: { cardView: function() { return this.$refs[myCardViewRef].instance; } }, mounted: function() { this.cardView.registerKeyHandler('backspace', function(e) { // The argument "e" contains information on the event }); this.cardView.registerKeyHandler('space', function(e) { // ... }); } } </script>
React
App.js
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { CardView } from 'devextreme-react/card-view'; class App extends React.Component { constructor(props) { super(props); this.cardViewRef = React.createRef(); } render() { return ( <CardView ref={this.cardViewRef} /> ); } get cardView() { return this.cardViewRef.current.instance(); } componentDidMount() { this.cardView.registerKeyHandler('backspace', function(e) { // The argument "e" contains information on the event }); this.cardView.registerKeyHandler('space', function(e) { // ... }); } } export default App;
Screen Reader Support
The CardView component supports screen readers and complies to WAI-ARIA standards.
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.