JavaScript
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Accessibility in JavaScript ListBox control

06 Jun 2023 / 3 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. ListBox provides built-in compliance with WAI-ARIA specifications. WAI-ARIA support is achieved through the attributes like aria-multiselectable and aria-selected applied for ListBox element and selected elements in the ListBox. It helps the people with disabilities by providing information about the widget for assistive technology in the screen readers. ListBox component contains the listbox role and option role.

Properties Functionality
listbox This role will be specified for root element.
aria-multiselectable Applied to the element with the ListBox role, tells assistive technologies that the list supports multiple selection. The default value is true.
option Identifies each selectable element containing the name of an option.
aria-selected Applied to elements with role option that are visually styled as selected to inform assistive technologies that the options are selected.

Keyboard interaction

Keyboard shortcuts Actions
Up arrow Moves focus to the previous option.
Down arrow Moves focus to the next option.
Home Moves focus to first option.
End Moves focus to last option.
Space Changes the selection state of the focused option.
Ctrl + A Selects all options in the list.
Ctrl + Shift + Home Selects the focused option and all options up to the first option.
Ctrl + Shift + End Selects the focused option and all options down to the last option.
Ctrl + (Up or Down) Press Ctrl key with up / down arrow or mouse to select multiple items.
Source
Preview
app.ts
index.html
Copied to clipboard
import { ListBox } from '@syncfusion/ej2-dropdowns';

// define the array of object
let data: { [key: string]: Object }[] = [
    { text: 'Hennessey Venom' },
    { text: 'Bugatti Chiron' },
    { text: 'Bugatti Veyron Super Sport' },
    { text: 'SSC Ultimate Aero' },
    { text: 'Koenigsegg CCR' },
    { text: 'McLaren F1' },
    { text: 'Aston Martin One- 77' },
    { text: 'Jaguar XJ220' },
    { text: 'McLaren P1' },
    { text: 'Ferrari LaFerrari' }
];

// initialize ListBox component
let listObj: ListBox = new ListBox({
    //set the data to dataSource property
    dataSource: data
});
listObj.appendTo('#listbox');
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Essential JS 2 ListBox</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="styles.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/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='loader'>LOADING....</div>
    <div id='container' style="margin:0 auto; width:250px;">
        <h4>Select your favorite car:</h4>
        <input id='listbox' />
    </div>
</body>

</html>
Previous
Next