0
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

3,831

Published on

Published in: Education, Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,831
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
56
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
































































  • Transcript of "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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×