React
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Accessibility in React Color Picker component

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-labeland 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.
Source
Preview
index.tsx
index.html
styles.css
index.jsx
import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";

class App extends React.Component<{}, {}> {
   public render() {
        return (
          <div id='container'>
            <div className='wrap'>
                <h4>Choose Color</h4>
                <ColorPickerComponent/>
            </div>
          </div>
        );
    }
};
ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 React ColorPicker</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="React ColorPicker Component" />
    <meta name="author" content="Syncfusion" />
    <link href="styles.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
#loader {
    color: #008cff;
    font-family: 'Helvetica Neue', 'calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.wrap {
    margin: 0 auto;
    width: 300px;
    text-align: center;
}

h4 {
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
    font-size: 14px;
}
import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component {
    render() {
        return (<div id='container'>
            <div className='wrap'>
                <h4>Choose Color</h4>
                <ColorPickerComponent />
            </div>
          </div>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('element'));
Previous
Next