WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Dynamic filtering of record sets

for

From: Bryan Garaventa
Date: Apr 1, 2015 12:24AM

If all that you wish is to provide an announcement that something has occurred, such as the first newly added item, or a notification such as '45 matches loaded', or something else, the simplest method for doing this is to use unobtrusive announcement with a live region.

You can do this by adding an offscreen positioned container element to the end of the Body element, which includes aria-live="polite" so that speech is queued up and not interrupted, such as the following.

<div id="handleId" class="offscreen" aria-live="polite"></div>

Then use innerHTML to set the text that you want announced as part of the status message when new records are loaded.

E.G

document.getElementById('handleId').innerHTML = '12 records loaded';

Example:
http://whatsock.com/training/demos/lr/aria-live-polite.html

You can even make this truly unobtrusive via JavaScript by using a script that creates an empty container element and appends it to the Body for this purpose without having to modify every page directly.

If you wish for this to work on mobile devices such as iOS, it's important to use an offscreen class that doesn't include the use of the Top or Left properties, such as the following.

.offscreen {
position: absolute;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
z-index: -1000;
}

Reference:
https://developer.yahoo.com/blogs/tenydnblog/clip-hidden-content-better-accessibility-53456.html

Best wishes,
Bryan