Accessibility in Vue Color picker component
16 Mar 20233 minutes to read
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. It helps to provide information about the widget for assistive technology to the disabled person in screen reader.
ColorPicker provides built-in compliance with the WAI-ARIA specifications. WAI-ARIA supports is achieved through the attributes like aria-label
and aria-selected
applied to the color palette tiles.
To know about the accessibility of SplitButton, refer to the SplitButton Accessibility
section.
Properties | Functionality |
---|---|
role | Specified as gridcell for the tiles in the color palette. |
aria-label | Holds the color of the tile. |
aria-selected | Indicates the current selected state of the tile. |
Keyboard interaction
To know about the keyboard interaction of SplitButton, refer to the SplitButton Keyboard interaction
section.
The following list of keys can be used to interact with the ColorPicker after the popup has opened.
Press | To do this |
---|---|
Upper Arrow | Moves the handler/tile up from the current position. |
Down Arrow | Moves the handler/tile down from the current position. |
Left Arrow | Moves the handler/tile left from the current position. |
Right Arrow | Moves the handler/tile right from the current position. |
Enter | Apply the selected color value. |
Tab | To focus the next focusable element in the ColorPicker popup. |
<template>
<div class='wrap'>
<h4>Choose Color</h4>
<ejs-colorpicker></ejs-colorpicker>
</div>
</template>
<script>
import Vue from 'vue';
import { ColorPickerPlugin } from '@syncfusion/ej2-vue-inputs';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
Vue.use(ColorPickerPlugin);
export default {}
</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-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css';
.wrap {
margin: 0 auto;
width: 300px;
text-align: center;
}
</style>