Code Library of Accessibility Examples
Beta. Feedback welcome!

Button (Toggle)

Button (Toggle)

A toggle button is similar to a checkbox because it is either selected or not selected, and every toggle button can operate independent of all other toggle buttons. In fact, a checkbox can be an acceptable alternative to a toggle button.


Turn on a screen reader to experience this example in action.

Aria Toggle Button

HTML Source Code

<div class="dqu-example">
<div>
    <div role="button" id="div-button" class="button" tabindex="0" aria-pressed="false" >Aria Toggle Button</div>
    <button type="button" id="native-button" aria-pressed="false" >Native Toggle Button</button>
</div>
</div>

JavaScript Source Code

window.addEventListener('load', function () {
    document.getElementById('div-button').addEventListener('click', divButtonClicked);
    document.getElementById('div-button').addEventListener('keydown', keydownButtonHandler);
    document.getElementById('native-button').addEventListener('click', nativeButtonClicked);
});

const CHECK_ICON = '<i class="fa-solid fa-circle-check icon success"></i>';
function divButtonClicked()
{
    var button = document.getElementById("div-button");
    var isAriaPressed = toggleButton(button);
    if(isAriaPressed)
    {
        button.textContent = "ARIA Toggle Button";
        button.classList.remove("pressed");
        
    }
    else
    {
        button.innerHTML = CHECK_ICON+" ARIA Toggle Button";
        button.classList.add("pressed");
    }             
}

function toggleButton(button)
{
    var isAriaPressed = button.getAttribute('aria-pressed') === 'true';
    button.setAttribute('aria-pressed', isAriaPressed ? 'false' : 'true');
    return isAriaPressed;
}

function nativeButtonClicked()
{
    var button = document.getElementById("native-button");
    var isAriaPressed = toggleButton(button);
    if(isAriaPressed)
        button.textContent = "Native Toggle Button";
    else
        button.innerHTML = CHECK_ICON+" Native Toggle Button";
}

function keydownButtonHandler(event) {
    if (event.key === ' ') {
        event.preventDefault();
        event.target.click();
    }
    else if (event.key === 'Enter') {
        event.preventDefault();
        event.target.click();
    }
}

CSS Source Code

/*
  Toggle Button — Restyled
  Deque University ARIA Component
*/

:root {
  --dqu-interactive: #2e5f7a;
  --dqu-interactive-hover: #3a7a9a;
  --dqu-interactive-active: #254c62;
  --dqu-interactive-light: rgba(46, 95, 122, 0.08);
  --dqu-border-secondary: #8c827d;
  --dqu-font-family: "Noto Sans", sans-serif;
}

.button,
.dqu-example button {
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--dqu-interactive);
  border-radius: 9999px;
  margin: 4px;
  font-family: var(--dqu-font-family);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--dqu-interactive);
  background: #ffffff;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pressed,
button[aria-pressed="true"] {
  background: var(--dqu-interactive);
  color: #ffffff;
  border-color: var(--dqu-interactive);
}

.button:hover,
.dqu-example button:hover {
  background-color: var(--dqu-interactive-light);
  outline: 2px solid var(--dqu-interactive) !important;
  outline-offset: 2px;
}

.pressed:hover,
button[aria-pressed="true"]:hover {
  background-color: var(--dqu-interactive-hover);
  color: #ffffff;
}

.button:focus,
.dqu-example button:focus {
  background-color: var(--dqu-interactive-light);
  outline: 3px solid var(--dqu-interactive) !important;
  outline-offset: 2px;
}

.pressed:focus,
button[aria-pressed="true"]:focus {
  background-color: var(--dqu-interactive-hover);
  color: #ffffff;
}

Copy and Paste Full Page Example