Code Library of Accessibility Examples
Beta. Feedback welcome!

Button

Button

Overview

In most circumstances, using a native HTML <button> or <input type="submit"> element is a better choice than creating a custom ARIA button, but there are use cases where an ARIA button can be appropriate, such as when styling a standard <button> is too difficult in the range of target browsers under certain circumstances, or when retrofitting legacy markup that could be problematic to convert to standard <button> elements.


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

<div> Button
<a> Button

HTML Source Code

<div class="dqu-example">
<div>
    <div role="button" id="div-button" class="button" tabindex="0" >&lt;div&gt;  Button</div>
    <a role="button" id="a-button" class="button" tabindex="0" >&lt;a&gt; Button</a>
    <button type="button" id="native-button">Native Button</button>
</div>
</div>

JavaScript Source Code

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

});

function divButtonClicked()
{
    alert("The 'div' button was clicked.");
}
function aTagButtonClicked()
{
    alert("The 'a' tag button was clicked.");
}
function nativeButtonClicked()
{
    alert("The native button tag was clicked.");
}

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

CSS Source Code

/*
  Button — Restyled
  Deque University ARIA Component
*/

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

.button,
.dqu-example button {
  padding: 10px 16px;
  display: inline-block;
  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;
}

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

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

Copy and Paste Full Page Example