Accessibility in EJ2 TypeScript Button group control

10 May 20235 minutes to read

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.
ButtonGroup provides built-in compliance with WAI-ARIA specifications. It helps the people with disabilities by providing information about the widget for assistive technology in the screen readers. ButtonGroup component contains the group role.

Properties Functionality
role Indicates the group for the container that holds two or more buttons.

Keyboard interaction

Normal behavior

Keyboard shortcuts Actions
Tab Focuses the next button in the ButtonGroup.
Enter/Space Activates the focused button in the ButtonGroup.

Checkbox type behavior

Keyboard shortcuts Actions
Tab Focuses the next button in the ButtonGroup.
Space Activates the focused button in the ButtonGroup.

Radiobutton type behavior

Keyboard shortcuts Actions
Tab Focuses the active button in the ButtonGroup.
Arrow Keys Activates next/previous button in the ButtonGroup. 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Button-Group</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="https://cdn.syncfusion.com/ej2/23.2.4/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <h5>Normal behavior</h5>
        <div class='e-btn-group' role='group'>
            <button class="e-btn">HTML</button>
            <button class="e-btn">CSS</button>
            <button class="e-btn">Javascript</button>
        </div>
        <h5>Checkbox type behavior</h5>
        <div class='e-btn-group' role='group'>
            <input type="checkbox" id="checkbold" name="font" />
            <label class="e-btn" for="checkbold">Bold</label>
            <input type="checkbox" id="checkitalic" name="font" />
            <label class="e-btn" for="checkitalic">Italic</label>
            <input type="checkbox" id="checkunderline" name="font" />
            <label class="e-btn" for="checkunderline">Underline</label>
        </div>
        <h5>Radiobutton type behavior</h5>
        <div class='e-btn-group' role='group'>
            <input type="radio" id="radioleft" name="align" />
            <label class="e-btn" for="radioleft">Left</label>
            <input type="radio" id="radiomiddle" name="align" />
            <label class="e-btn" for="radiomiddle">Center</label>
            <input type="radio" id="radioright" name="align" />
            <label class="e-btn" for="radioright">Right</label>
        </div>
    </div>
</body>

</html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}
.e-btn-group {
  margin: 0 5px 5px 5px;
}