React CardView - Accessibility

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.