Explore web accessibility

Announce important details

We can dynamically change parts of a page using JavaScript without having the page to reload. For example - display some notification message to the user, changing the view on navigation, etc. These changes are visible to the users who can see, but the users relying only on feedback from assistive technologies like screen readers would miss out on these details, unless we specifically make these details available to them as well.

We need to announce these changes to the users, and we can achieve it through:

aria-live regions
dedicated live region with role="status", role="log" or role="alert"

Read more about these at MDN documentation on live regions

Inaccessible example:

How to test: Enter some text in below textbox and submit the form. The success or error message will appear in the region just above the textbox. It will not announce these messages if you have screen-reader turned on.

Accessible example:

How to test: Enter some text in below textbox and submit the form. The success or error message will appear in the region just above the textbox. It will also announce these messages if you have screen-reader turned on.

Sample code:

HTML

<form className="announcer-form">
    <div className="submit-status" role="status" aria-live="polite"></div>
    <label>
        Enter text to announce:
        <input type="text" id="textInput" />
    </label>
    <button type="submit" id="submitTextBtn">Submit</button>
</form>

JavaScript

const form = document.querySelector('form');
const liveRegion = document.querySelector('.submit-status');
const textInput = document.querySelector('#textInput');
const submitTextBtn = document.querySelector('#submitTextBtn');

const submitData = (e) => {
    e.preventDefault();
    const text = textInput.value;

    if (text.trim().length) {
        liveRegion.textContent = 'Form submitted successfully with text ' + text;
    } else {
        liveRegion.textContent = 'Error submitting form. Please enter valid text to proceed.';
    }
}

form.onsubmit = (e) => {
    e.preventDefault();
    submitData();
}
submitTextBtn.addEventListener('click', submitData)