buttons are not keyboard or screen reader accessible at all, and as a developer you’re responsible for implementing the full functionality of the control you use based on its role. The following outline classes can be used that are built-in in Bootstrap 4: Have a look at this demo where I used all these classes: The example markup for .btn-outline-danger class: Now, see various combinations for the split button styles for dropdowns – all created by using built-in button classes. Posting for a friend. d'oh! This simple example just creates a widget and assigns the ARIA switch role to it. A bug report needs to be filed with Google to get aria-expanded working in Chrome on Android. As soon as I added this, the toggle started working fine. Framework choice already determined and you’re stuck with DIV buttons.
The expected keyboard shortcut for toggling the value of a switch is the Space key. The most interesting part is probably the use of attribute selectors and the :first-child and :last-child pseudo-classes to do all the heavy lifting of changing the appearance of the switch based on whether it's on or off. The switch has two child elements containing the "off" and "on" labels and is followed by a identifying the switch. . Many usability experts  recommend keeping the standard design of native buttons as they appear in that user’s device, because they already expect that look and feel. The developer is required to change the value of the aria-checked attribute dynamically when the switch is toggled. In the last post in the A11y Support Series we talked about ARIA role=”alert” Modal Dialogs. A common problem is that

controls don’t work with the Enter AND Spacebar keys or they don’t work with the keyboard at all. aria-expanded, aria-pressed, and aria-disabled). Toggle Buttons. Describes how ARIA's features integrate into HTML. Identifies the element (or elements) that describes the object. aria-controls should also point to the id of the container the button expands and collapses. So why the heck would you ever use a role=”button” over a real