WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Dynamic filtering of record sets

for

From: Robert Fentress
Date: Apr 2, 2015 9:27AM

Thanks, guys.

Pratik, there are several places in the web application I am
evaluating where this sort of filtering is used. For instance, in the
application, the user creates a number of pages, each with a unique
title. There is a central place where the titles of all these pages
is listed and these titles are links to each specific page. At the
top of the list is a filter field where the user can enter in a
string. As each letter is typed, the string is compared against the
titles of all the pages and ones that don't contain the string are
removed from the list.

Bryan, this is what I was thinking of. I just wasn't sure if this was
the best strategy or if there was another, better, way that I hadn't
thought of.

Best,
Rob

On Wed, Apr 1, 2015 at 2:24 AM, Bryan Garaventa
< <EMAIL REMOVED> > wrote:
> 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
>
>
>