Accessible Javascript using Frameworks - Barcamp London 5

Accessible Javascript using Frameworks Dirk Ginader http://ginader.de Friday, March 6, 2009

What makes Javascript “Accessible”? • the content of the page is at least as accessible with Javascript as without • nothing is being withheld from users without Javascript Friday, March 6, 2009

Without accessible Markup there’s no accessible Javascript Friday, March 6, 2009

• ﬁrst and foremost a Website needs to works without Javascript • do we use the best matching HTML Elements for each Part of the Page? • is the Page perfectly logic, understandable and usable without CSS? Friday, March 6, 2009

CSS does not always make beautiful Friday, March 6, 2009

• badly used CSS is able to make a page inaccessible long before Javascript can • display:none and visibility:hidden are not generally evil but sadly quite often • hidden elements will be revealed when you :hover over them - nice! But what happens if you don’t use a mouse? • CSS is for design - not for interaction! Friday, March 6, 2009

Interaction is handled on the Server Friday, March 6, 2009

• anything you wanna achieve using Javascript you need to solve without ﬁrst • a Reload may not be cool anymore but it’s exactly as necessary as it was 10 years ago • if that is taken care of we can add some magic Friday, March 6, 2009

Javascript is the icing on the cake Friday, March 6, 2009

• Javascript is another layer above HTML and CSS • existing interaction elements like links or buttons get hijacked and changed to do their job in the Browser instead on the server • new interaction elements, that offer functionality only available with Javascript, need to be created by Javascript (use tabable elements only!) Friday, March 6, 2009

another layer: different CSS if Javascript is available Friday, March 6, 2009

• YAY! We got Javascript! Let’s dig up the DOM completely! • we better leave the changes to someone that does that job better and faster than we can: CSS • a simple 1 liner in the head does the+= ” js”; trick: document.documentElement.className • by adding .js in front of existing selectors you can now deﬁne Javascript aware CSS Friday, March 6, 2009

Screenreaders don’t understand Javascript anyway... Friday, March 6, 2009

• is there still someone believing that? • most Screenreaders actually handle Javascript very well! • they just don’t know all the time Friday, March 6, 2009

• inform Screenreaders about what’s happening • a logic and understandable workﬂow is the easiest thing to test without a Screenreader • focus() the right element • when updating the DOM it might be necessary to force the Screenreader’s virtual buffer to refresh by updating a hidden Form ﬁeld Friday, March 6, 2009

Accessibility != Screenreader Friday, March 6, 2009

• is the website usable without a mouse? • the tab key is one of the most important navigation tools • do elements react on :hover and :focus? Friday, March 6, 2009

• what happens if a page gets scaled up or down? • screen magniﬁers only show a very small part of the screen • does really every understand what happens on the page right now? Friday, March 6, 2009

How do Javascript Frameworks help with this? Friday, March 6, 2009

• reducing the pain of Javascript cross browser issues by unifying their APIs • the right timing counts: onDOMReady • don’t reinvent the wheel every day: ready made components help! Friday, March 6, 2009

• the components of the big JS frameworks are usually tested extensively against stability, usability and accessibility • testing against Screenreaders makes sense with “real” Screenreader users only Friday, March 6, 2009

Examples Friday, March 6, 2009

without Javascript Friday, March 6, 2009

with Javascript Friday, March 6, 2009

http://uk.tv.yahoo.com/ Friday, March 6, 2009

Reduce to the Max Friday, March 6, 2009

More Examples • http://code.google.com/p/google-axsjax/ • http://scriptingenabled.org/ • http://icant.co.uk/easy-youtube Friday, March 6, 2009

To not completely think through Accessibility is as worse as not thinking about it at all Friday, March 6, 2009

Friday, March 6, 2009

http://blog.ginader.de	112
http://onwebdev.blogspot.com	13
http://www.slideshare.net	3
http://coderwall.com	2
http://onwebdev.blogspot.it	2
http://lanyrd.com	1

Accessible Javascript using Frameworks - Barcamp London 5

by Dirk Ginader on Sep 29, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

6 Embeds 133

Statistics

Accessible Javascript using Frameworks - Barcamp London 5 — Presentation Transcript