WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible table filtering options

for

From: Allison Bloodworth
Date: Nov 8, 2010 4:12PM

Wow, Terrill, thanks so much for trying this out for us! It would seem to me that ARIA-Live would be what we want, as Live Region's description here: http://juicystudio.com/article/wai-aria-live-regions.php is:

"AJAX live regions allows text to be spoken without giving it focus. This is good in that it means that users can be informed of multiple updates without losing their place within the content. The following attributes are defined in the States and Properties module that relate to AJAX live regions."

However, I'm not experiencing anything other than the addition of the "Row count" line in the text with Mac's VoiceOver. I'm not sure ARIA is supported in VoiceOver, so that may be the problem. Terrill, did you actually record what you heard with the other screen readers you tested somewhere? Was there some sort of interruption (I'm assuming it would probably happen after the user entered text into one of the filter fields, then left the field) that told you the number of table rows had changed?

Does this seem to others what this table would need to be accessible?

Thanks!
Allison

On Nov 6, 2010, at 8:11 AM, Terrill Bennett wrote:

> Y'all,
>
> Sorry, I do NOT program in JQuery... but then, things like that have
> never stopped me from making a fool of myself, before. So I thought
> I'd see what I could do with this PicNet filter-thingy and ARIA-Live.
>
> To the original PicNet demo, I:
>
> 1. I added proper labels to the check boxes in the demo.
>
> 2. I took the obfuscated JQuery source code, and started looking.
> Found a place that looked hopeful.
>
> 3. Copied the ARIA-Live demo from:
>
> http://accessibleajax.clcworld.net/simple/controls.htm
>
> 4. Merged the demo code from PicNet with the demo above.
>
> 5. Researched a wee bit on "How to" do some JQuery stuff on Google.
>
> 6. Hard-coded (kludged) an example. (It's easy to find in the .js -
> it's the part with statements on separate lines).
>
> Results:
>
> http://bennett1.org/temp_stuff/filterTest.htm
>
> In my recording of NVDA, I tabbed through the form starting at the
> top. I allowed SOME of the instructions to be read, but didn't wait
> for it to complete - I moved on by tabbing until I eventually reached
> Text Column 1. You will (sometimes) hear NVDA say things like "tab" as I move:
>
> 1. When I reach the Quick Find, I press Tab and move to the Clear Filters link.
>
> 2. I press Tab again to reach the Text Column 1, I pause. I press
> Ctrl (not heard) to stop reading the instructions, and we hear "50
> rows" from the ARIA-Live update.
>
> 3. In Text Column 1, I then type 9. We hear "10 rows" (more on this
> count in a second - see NOTE below).
>
> While I didn't record it, I did continue to the Select list, picked
> Item 1, hit Enter, and the rows reduced count, and NVDA announced the
> new row count. You'll have to trust me!
>
> NOTE: I seem to have found a slight bug, uh, I mean "undocumented
> feature" in the filter. If you go to the ORIGINAL demo from Picnet,
> type 9 in Text Column 1, you'll get some number of rows (I think at
> first I got 12?). Clear the filters using the link, back to Text
> Column 1, type 9, get a different count. Reload the page, repeat, you
> will probably get a different count, again. Weird.
>
> Anyway, I seem to have made SOME progress. Perhaps someone who
> actually knows JQuery can make it better. Links to the ZIPped files
> (htm, modified .js and MP3) are at the bottom of the page.
>
> Enjoy!
>
> -- Terrill --
>
> "Man who says it cannot be done, should not interrupt man who is doing it."
> -- Ancient Chinese Proverb
>
>