Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Accessible Javascript
                              using Frameworks
                                Dirk Ginader
        ...
What makes Javascript
                           “Accessible”?

                        • the content of the page is at le...
Without accessible
                         Markup there’s no
                        accessible Javascript


Friday, Marc...
• first and foremost a Website needs to
                          works without Javascript

                        • do we...
CSS does not always
                          make beautiful


Friday, March 6, 2009
• badly used CSS is able to make a page
                          inaccessible long before Javascript can

               ...
Interaction is handled
                            on the Server


Friday, March 6, 2009
• anything you wanna achieve using Javascript
                          you need to solve without first

                  ...
Javascript is the icing
                             on the cake


Friday, March 6, 2009
• Javascript is another layer above HTML and
                          CSS

                        • existing interaction...
another layer:
                           different CSS if
                        Javascript is available


Friday, March...
• YAY! We got Javascript! Let’s dig up the
                            DOM completely!

                        • we bette...
Screenreaders don’t
                        understand Javascript
                             anyway...


Friday, March 6...
• is there still someone believing that?
                        • most Screenreaders actually handle
                    ...
• inform Screenreaders about what’s
                          happening

                        • a logic and understanda...
Accessibility
                             !=
                        Screenreader


Friday, March 6, 2009
• is the website usable without a mouse?
                        • the tab key is one of the most important
              ...
• what happens if a page gets scaled up or
                          down?

                        • screen magnifiers onl...
How do
                        Javascript Frameworks
                            help with this?


Friday, March 6, 2009
• reducing the pain of Javascript cross
                          browser issues by unifying their APIs

                 ...
• the components of the big JS frameworks
                          are usually tested extensively against
               ...
Examples



Friday, March 6, 2009
without Javascript
Friday, March 6, 2009
with Javascript
Friday, March 6, 2009
with Javascript
Friday, March 6, 2009
with 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://scriptin...
To not completely think
                  through Accessibility is
                      as worse as not
                 ...
Friday, March 6, 2009
Upcoming SlideShare
Loading in …5
×

Accessible Javascript using Frameworks - Barcamp London 5

4,399 views

Published on

Published in: Education, Technology, Design
  • Be the first to comment

Accessible Javascript using Frameworks - Barcamp London 5

  1. 1. Accessible Javascript using Frameworks Dirk Ginader http://ginader.de Friday, March 6, 2009
  2. 2. 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
  3. 3. Without accessible Markup there’s no accessible Javascript Friday, March 6, 2009
  4. 4. • first 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
  5. 5. CSS does not always make beautiful Friday, March 6, 2009
  6. 6. • 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
  7. 7. Interaction is handled on the Server Friday, March 6, 2009
  8. 8. • anything you wanna achieve using Javascript you need to solve without first • 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
  9. 9. Javascript is the icing on the cake Friday, March 6, 2009
  10. 10. • 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
  11. 11. another layer: different CSS if Javascript is available Friday, March 6, 2009
  12. 12. • 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 define Javascript aware CSS Friday, March 6, 2009
  13. 13. Screenreaders don’t understand Javascript anyway... Friday, March 6, 2009
  14. 14. • 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
  15. 15. • inform Screenreaders about what’s happening • a logic and understandable workflow 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 field Friday, March 6, 2009
  16. 16. Accessibility != Screenreader Friday, March 6, 2009
  17. 17. • 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
  18. 18. • what happens if a page gets scaled up or down? • screen magnifiers only show a very small part of the screen • does really every understand what happens on the page right now? Friday, March 6, 2009
  19. 19. How do Javascript Frameworks help with this? Friday, March 6, 2009
  20. 20. • 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
  21. 21. • 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
  22. 22. Examples Friday, March 6, 2009
  23. 23. without Javascript Friday, March 6, 2009
  24. 24. with Javascript Friday, March 6, 2009
  25. 25. with Javascript Friday, March 6, 2009
  26. 26. with Javascript Friday, March 6, 2009
  27. 27. with Javascript Friday, March 6, 2009
  28. 28. http://uk.tv.yahoo.com/ Friday, March 6, 2009
  29. 29. Reduce to the Max Friday, March 6, 2009
  30. 30. More Examples • http://code.google.com/p/google-axsjax/ • http://scriptingenabled.org/ • http://icant.co.uk/easy-youtube Friday, March 6, 2009
  31. 31. To not completely think through Accessibility is as worse as not thinking about it at all Friday, March 6, 2009
  32. 32. Friday, March 6, 2009

×