jQuery Accessible RIA

[Felix Nagel]

A few month ago I asked you a bunch of questions to support my master
thesis. I finished my work 6 weeks ago and now im ready to show my
results:

jQuery Accessible RIA, a collection of strictly WAI WCAG 2.0 and WAI
ARIA conform web applications based on the popular Java-Script
framework jQuery (using the UI Widget Factory). My goal was to provide
some accessible, usable and easy to implement widgets to improve
quality and working speed in frontend developers’ daily routine. So I
picked some of the most seen design patterns on the web: currently a
lightbox app, live form-validation, accessible tabs and sortable
tables are ready to use.

The code and the thesis are both licensed under a Creative Commons
Attribution-Share Alike 3.0 Unported Licence. So please feel free to
use my work, even in your commercial projects!

Please check out the wiki at GitHub to learn about the features and
how to use. There will definitely be further development and some
handy new widgets, so it would be great to get some feedback in code
quality and accessibility.

http://wiki.github.com/fnagel/jQuery-Accessible-RIA

yours
Felix Nagel

ps: Would be nice if you could post, tweet or talk about it :-)

[Jörn Zaefferer]

Did you post this to other jQuery lists? jquery-en and jquery-ui both get much more attention then this list, and from what I've seen, the work you've done there deserves much more attention.

Jörn

[Steve Lee]

> On Sat, Oct 10, 2009 at 4:03 PM, Felix Nagel <felix...@googlemail.com>
> wrote:
>>
>> A few month ago I asked you a bunch of questions to support my master
>> thesis. I finished my work 6 weeks ago and now im ready to show my
>> results:
>>
>> jQuery Accessible RIA, a collection of strictly WAI WCAG 2.0 and WAI
>> ARIA conform web applications based on the popular Java-Script
>> framework jQuery (using the UI Widget Factory). My goal was to provide
>> some accessible, usable and easy to implement widgets to improve
>> quality and working speed in frontend developers’ daily routine. So I
>> picked some of the most seen design patterns on the web: currently a
>> lightbox app, live form-validation, accessible tabs and sortable
>> tables are ready to use.
>>
>> The code and the thesis are both licensed under a Creative Commons
>> Attribution-Share Alike 3.0 Unported Licence. So please feel free to
>> use my work, even in your commercial projects!
>>
>> Please check out the wiki at GitHub to learn about the features and
>> how to use. There will definitely be further development and some
>> handy new widgets, so it would be great to get some feedback in code
>> quality and accessibility.
>>
>> http://wiki.github.com/fnagel/jQuery-Accessible-RIA
>>
>> yours
>> Felix Nagel
>>
>> ps: Would be nice if you could post, tweet or talk about it :-)

I tweeted them ;-)

The look good. I did find the key board access to be broken in the tab
demo and the focus is not clear on the light box when tabbing.

Steve

[Felix Nagel]

Hey Steve,

according to the WAI WCAG 2.0 its not recomended to control tabs with tabulator but with arrow keys -- try it!

CSS for focus will be added soon: http://github.com/fnagel/jQuery-Accessible-RIA/issues/#issue/5

Thanks for reporting this to me, really appreciated!

--
Bethesdastraße 16
20535 Hamburg

m 01 71 / 19 80 16 7
t 040 / 33 98 35 41
icq 323632957
skype felixnagel.com

gtalk felix...@googlemail.com
msn re-a...@hotmail.de
xing felix_nagel2
twitter felixnagel

www.felixnagel.com | in...@felixnagel.com| www.nonkonform-design.de
Unleashed Emotion - Fotografie auf dem Mach1 Festival (FH-Projekt)

[Jörn Zaefferer]

Can you elaborate a bit on the differences between your widgets and jQuery UI widgets, eg. for tabs?

Jörn

On Sat, Oct 10, 2009 at 4:03 PM, Felix Nagel <felix...@googlemail.com> wrote:

[Felix Nagel]

Hey Jörn,

there is no diffrence as i use the orginal widget as a base. I added no functionality but accessibility tweaks. The UI Tabs widget is already very powerfull so i decided to improve it.You could call it an "addon". Just link it below the original widget js file and youre done. Watch firebug to see what my widget does.

greetings felix

ps: please report bugs to me or use the bugtracker: http://github.com/fnagel/jQuery-Accessible-RIA/issues

[Steve Lee]

2009/10/24 Felix Nagel <in...@felixnagel.com>

according to the WAI WCAG 2.0 its not recomended to control tabs with tabulator but with arrow keys -- try it!

OK

The quirk is though that while I can see the individual tabs being sub controls in a complex control so arrows are right, I've got used to tabs being the way all existing websites have worked up to now (when they have worked at all). So it's a mute point and I'll not argue with you or WCAG 2.0
 

CSS for focus will be added soon: http://github.com/fnagel/jQuery-Accessible-RIA/issues/#issue/5

neat

 

Thanks for reporting this to me, really appreciated!

no problem ;-)

Steve

[Felix Nagel]

Hey there,

i found some time to make some smaller bugfixes and some mportant
ones
:
* Multiple tables work with pager now
* Changed handling of checkboxes and radios (better CMS form handling
support)

Please take a look at the commit history or the issues on:
http://github.com/fnagel/jQuery-Accessible-RIA

Comments welcome!

@Steve

For sure their a postive and negative aspects on navigating with
arrows. I tried to be WCAG 2.0 / ARIA conform as much as possible. Not
without think for myself, of course:
One important pro argue is tabbing trough links within the tabs. When
you got a bunch of tabs and some links in the content, the user have
to tab trough all tabs to reach one of the links. Every time again.
Same when wanna go back to the tabs pane. Thats annoying so i think
arrows should be more usable here.

But thanks for the hint and this should be easily changed. Perhaps it
could be a nice feature to choose between both behaviors.

Yours Felix


On Oct 26, 3:41 pm, Steve Lee <SteveA...@gmail.com> wrote:
> 2009/10/24 Felix Nagel <i...@felixnagel.com>

[Felix Nagel]

Update: Added a quick custom form validation feature and fixed a bug
with multiple tables.

Please keep reoprting bugs and ideas to me, thanks a lot!

http://github.com/fnagel/jQuery-Accessible-RIA

yours felix

[Felix Nagel]

Another Update:

fully jQuery UI CSS Theme Switcher compatible -- see the demos:

http://wiki.github.com/fnagel/jQuery-Accessible-RIA


regards,

Felix