The Accordion component has been designed keeping in mind the WAI-ARIA specifications, by applying
the prompt WAI-ARIA roles, states, and properties along with the keyboard support. Thus, making it usable for people who use assistive WAI-ARIA Accessibility supports that is achieved through the attributes like aria-multiselectable, aria-disabled, aria-expanded, aria-selected, and aria-hidden.
It helps to provides information about the elements in a document for assistive technology.
The component implements the keyboard navigation support by following the
WAI-ARIA practices and tested in major screen readers.
| Property | Functionality |
|---|---|
| role | presentation: It indicates that the element is used to control presentation. This attribute is added to the Accordion element describing the actual role of the element. heading: It identifies the element as a heading that serves as an Accordion header. This attribute is added to all the Accordion header elements describing the actual role of the element. |
| aria-multiselectable | It indicates the expand mode in the Accordion. Default value of this attribute is true. If expand mode value is changed as ‘single’, the attribute value changes to false. |
| aria-disabled | It indicates the disabled state of the Accordion and its items. |
| aria-expanded | It indicates the expand state of the Accordion Item. Default value of this attribute is false. If an item is expanded, the attribute value changes to ‘true’. |
| aria-selected | It indicates the Selection state of the Accordion Item. Default value of this attribute is false. If an item is expanded, the attribute value changes to ‘true’. |
| aria-hidden | It indicates the content visible state of the Accordion Item. Default value of this attribute is true. If an item content is visible, the attribute value changes to ‘false`. |
| aria-labelledby | Attribute is set to content (panel) and it points to the corresponding Accordion header. |
| aria-controls | Attribute is set to the header and it points to the corresponding Accordion content. |
| aria-level | It defines the hierarchical level of an Accordion element with its inner level. |
Keyboard navigation is enabled by default. Possible keys are:
| Key | Description |
|---|---|
| Space or Enter | When focus is on the Accordion header, click on the focused element makes the element to expand and collapse. |
| Down Arrow | Focus the next Accordion header. |
| Up Arrow | Focus the previous Accordion header. |
| Home | Focus the first Accordion header. |
| End | Focus the last Accordion header. |
ej.base.enableRipple(true);
//Initialize Accordion component
var accordion = new ej.navigations.Accordion({
items: [
{ header: 'ASP.NET', content: 'Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services.' },
{ header: 'ASP.NET MVC', content: 'The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller.' },
{ header: 'JavaScript', content: 'JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser.' },
]
});
//Render initialized Accordion component
accordion.appendTo('#element');<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 Accordion</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Toolbar Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.3.47/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/20.3.47/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
<br><br>
<div id="result"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>