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


-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Robert Fentress
Sent: Tuesday, March 31, 2015 8:14 AM
To: WebAIM Discussion List
Subject: [WebAIM] Dynamic filtering of record sets

Does anyone have experience with dynamically filtering record sets with a search field in an accessible way? For instance, you have a field and as you type each character, a set of records below it are updated. This is not intended to be an auto-complete or a combo box type thing, since the list of items updated is separate from the field.

Thanks,
Rob

--
Robert Fentress
Senior Accessibility Solutions Designer
540.231.1255

Technology-enhanced Learning & Online Strategies Assistive Technologies
1180 Torgersen Hall
620 Drillfield Drive (0434)
Blacksburg, Virginia 24061