E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: Dynamic filtering of record sets

Number of posts in this thread: 4 (In chronological order)

From: Robert Fentress
Date: Tue, Mar 31 2015 9:13AM
Subject: Dynamic filtering of record sets
No previous message | Next message →

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

From: Pratik Patel
Date: Tue, Mar 31 2015 9:26AM
Subject: Re: Dynamic filtering of record sets
← Previous message | Next message →

Rob,

We have done several usability studies with this type of control/interface. Can you tell us the purpose of such an interface and how it benefits? Or, how is it intended to be used?

Regards,

Pratik

Pratik Patel
Founder and CEO, EZFire
M: 718-249-7019
E: = EMAIL ADDRESS REMOVED = (or = EMAIL ADDRESS REMOVED = )
Follow me on Twitter: @ppatel
Follow me on LinkedIn: http://www.linkedin.com/pub/pratik-patel/9/985/882
Skype: Patel.pratik

From: Bryan Garaventa
Date: Wed, Apr 01 2015 12:24AM
Subject: Re: Dynamic filtering of record sets
← Previous message | Next message →

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

From: Robert Fentress
Date: Thu, Apr 02 2015 9:27AM
Subject: Re: Dynamic filtering of record sets
← Previous message | No next message

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 ADDRESS 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
>
>
>