Accessibility
25 Feb 20222 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. |
Keyboard shortcuts |
Actions |
Tab |
Focuses the active button in the ButtonGroup. |
Arrow Keys |
Activates next/previous button in the ButtonGroup. |
<h5>Normal behavior</h5>
<div class='e-btn-group' role='group'>
@Html.EJS().Button("html").Render()
@Html.EJS().Button("css").Render()
@Html.EJS().Button("javacript").Render()
</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>
public ActionResult Index()
{
return View();
}