Accessibility in Vue Daterangepicker component
11 Jun 20248 minutes to read
The DateRangePicker component followed the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.
The accessibility compliance for the DateRangePicker component is outlined below.
WAI-ARIA attributes
The web accessibility makes web content and web applications more accessible for people with disabilities. It especially helps in dynamic content change and development of advanced user interface controls with AJAX, HTML, JavaScript, and related technologies. DateRangePicker provides built-in compliance with WAI-ARIA specifications. WAI-ARIA support is achieved through the attributes like aria-expanded
, aria-disabled
, and aria-activedescendant
applied as an input element.
To know about the accessibility of Calendar, refer to the Calendar’s Accessibility section.
It helps people with disabilities by providing information about the widget for assistive technology in the screen readers. DateRangePicker component contains grid role and grid cell for each day cell.
-
Aria-expanded: Indicates the currently selected date of the DateRangePicker component.
-
Aria-disabled: Indicates the disabled state of the DateRangePicker component.
Keyboard Interaction
Use the below keys to interact with the DateRangePicker. This component implements the keyboard navigation support by following the WAI-ARIA practices.
It supports the following list of shortcut keys:
Input Navigation
Before opening the popup, use the following list of keys to control the popup element.
Press | To do this |
---|---|
Alt + Down Arrow | Opens the popup. |
Alt + Up Arrow | Closes the popup. |
Esc | Closes the popup. |
Calendar Navigation
Use the following list of keys to navigate the currently focused Calendar after the popup has opened.
Press | To do this |
---|---|
Upper Arrow | Focuses the same day of the previous week. |
Down Arrow | Focuses the same day of the next week. |
Left Arrow | Focuses the day before. |
Right Arrow | Focuses the next day. |
Home | Focuses the first day of the month. |
End | Focuses the last day of the month. |
Page Up | Focuses the same date of the previous month. |
Page Down | Focuses the same date of the next month. |
Enter | Selects the currently focused date. |
Shift + Page Up | Focuses the same date for the previous year. |
Shift + Page Down | Focuses the same date for the next year. |
Control + Home | Focuses the first date of the current year. |
Control + End | Focuses the last date of the current year. |
To focus the DateRangePicker component, use the
alt+t
keys.
<template>
<div id="app">
<div class='wrapper'>
<ejs-daterangepicker placeholder="Select a Range" ref="DateInstance"></ejs-daterangepicker>
</div>
</div>
</template>
<script setup>
import { DateRangePickerComponent as EjsDaterangepicker } from '@syncfusion/ej2-vue-calendars';
import { onMounted, ref } from 'vue';
const DateInstance = ref(null);
onMounted(() => {
let DateObj = DateInstance.value;
document.onkeyup = function (e) {
if (e.altKey && e.keyCode === 84) {
// press alt+t to focus the control.
DateObj.$el.focus();
}
}
}
);
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
.wrapper {
max-width: 250px;
margin: 0 auto;
}
</style>
<template>
<div id="app">
<div class='wrapper'>
<ejs-daterangepicker placeholder="Select a Range" ref="DateInstance"></ejs-daterangepicker>
</div>
</div>
</template>
<script>
import { DateRangePickerComponent } from '@syncfusion/ej2-vue-calendars';
export default {
name: "App",
components: {
"ejs-daterangepicker": DateRangePickerComponent
},
mounted() {
let DateObj = this.$refs.DateInstance;
document.onkeyup = function (e) {
if (e.altKey && e.keyCode === 84) {
// press alt+t to focus the control.
DateObj.$el.focus();
}
}
}
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
.wrapper {
max-width: 250px;
margin: 0 auto;
}
</style>
Ensuring accessibility
The DateRangePicker component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.
The accessibility compliance of the DateRangePicker component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the DateRangePicker component with accessibility tools.