Understanding ARIA: Accessible Rich Internet Applications – Links and Buttons

ARIA (Accessible Rich Internet Applications) provides semantic information that assists screen readers and other assistive technologies in interpreting custom UI components. By assigning appropriate role , state , and property attributes to HTML elements, developers can make non‑native controls accessible.

For a native <button> element, screen readers automatically announce it as a button. When a <span> is used to mimic a button, the element must be given tabindex="0" to become focusable and role="button" so the screen reader recognises it as a button.

<span tabindex="0" role="button">保存

Keyboard accessibility requires managing focus and handling Enter and Space keys. Native buttons already support these interactions, while custom elements need explicit JavaScript handling.

When using ARIA for links, the role="link" attribute can be added, but native <a> tags are preferred because browsers provide built‑in features such as opening in a new window and copying URLs.

Two practical examples are presented:

Example 1 – Regular Button

<div tabindex="0" role="button" id="btnPrint">打印页面</div>

The following JavaScript makes the element printable via mouse click or keyboard Enter / Space :

let btnPrint = document.getElementById('btnPrint');
btnPrint.addEventListener('click', () => { window.print(); });
btnPrint.addEventListener('keydown', (e) => {
    switch (e.keyCode) {
        case 32: // space
            e.preventDefault();
            break;
        case 13: // enter
            e.preventDefault();
            window.print();
            break;
    }
});
btnPrint.addEventListener('keyup', (e) => {
    if (e.keyCode === 32) {
        e.preventDefault();
        window.print();
    }
});

Example 2 – Toggle Button

<style>
#btnMute {
    display: inline-block;
    padding: .3em .8em .4em .2em;
    border: 1px solid;
    background-repeat: no-repeat;
    background-position: .8em center;
    background-size: auto 1em;
}
#btnMute[aria-pressed="false"] { background-image: url(https://s4.ssl.qhres.com/static/ceaad449f261254b.svg); }
#btnMute[aria-pressed="true"]  { background-image: url(https://s1.ssl.qhres.com/static/f991a555e87bdbdd.svg); }
</style>
<span tabindex="0" role="button" aria-pressed="false" id="btnMute">静音</span>

The JavaScript toggles the aria-pressed state and handles keyboard activation:

let btnMute = document.getElementById('btnMute');
btnMute.addEventListener('click', toggleMutePressed);
btnMute.addEventListener('keydown', (e) => {
    switch (e.keyCode) {
        case 32:
            e.preventDefault();
            break;
        case 13:
            e.preventDefault();
            toggleMutePressed();
            break;
    }
});
btnMute.addEventListener('keyup', (e) => {
    if (e.keyCode === 32) {
        e.preventDefault();
        toggleMutePressed();
    }
});
function toggleMutePressed() {
    let isPressed = btnMute.getAttribute('aria-pressed') === 'true';
    btnMute.setAttribute('aria-pressed', isPressed ? 'false' : 'true');
}

Key take‑aways:

Provide correct ARIA semantics ( role , aria‑pressed , aria‑label , etc.) so assistive technologies understand the element.

Ensure keyboard focus with tabindex="0" and handle Enter and Space keys to activate controls.

Prefer native HTML elements ( <a> , <button> , <label> , form controls) whenever possible because they already include accessibility and keyboard behavior.

Reference: WAI‑ARIA Authoring Practices 1.1 .