Ajax and Accessibility

       Mike Davies
  AbilityNet – Rich Media
      February 2008
Mike Davies
●   Web Developer at Yahoo!
●   previously Legal & General
    ●   Web accessibility case study (PAS78)
●   Ac...
Ajax and Accessibility Agenda
●   Ajax and Web 2.0
●   Accessibility issues with Ajax
●   Case study of retrofitting a web...
Ajax and Web 2.0
●   What is Web 2.0?
●   Web 1.0 + something else
Web 1.0
●   Publishers producing websites
●   Visitors read websites
●   Clearly enforced divide
Characteristics of Web 2.0
●   Breaking the Publisher/Reader divide
●   User contributes/generates content
●   Social medi...
Examples of Web 2.0
●   Users sharing content:
    ●   Flickr, Y! Answers, YouTube, Wikipedia
●   Users publishing/subscri...
Web as a platform
●   Email
    ●   Gmail, Yahoo Mail, Hotmail Live
●   Calendar / Project Management
    ●   Basecamp, 30...
So how do we build all of this?
Building blocks of Web 2.0
●   HTML
●   CSS
●   JavaScript (and Ajax)
What is Ajax?
●   Connecting to a server using JavaScript
●   Avoids page refreshes
●   Dynamic updates to content
●   Dyn...
Ajax accessibility issues:
             Overview
●   General issues
●   Screen reader issues
●   Screen magnifier issues
●...
Ajax accessibility issues:
              General
●   Lack of page refresh – breaks web
    model
●   User independent upda...
Ajax accessibility issues:
             Screen readers
●   Updating the virtual buffer
●   Two issues:
    ●   Is the cont...
Ajax accessibility issues:
             Screen readers
●   User initiated updates
●   User independent updates
●   Delayed...
Ajax accessibility issues –
        Screen magnifiers
●   Distance between action and result
●   Changing the content they...
Ajax accessibility issues –
          keyboard users
●   Offscreen content
●   Removing focused content
●   Interactive el...
Case study of retrofitting a
      web page using Ajax
●   Pre-requisites
    ●   Structured and semantic HTML
    ●   Tex...
Case Study: Yahoo! TV Search
●   Common Interface: Tabbed Search
Case Study: Yahoo! TV Search
●   Its just a form!
Case Study: Yahoo! TV Search
●   Plus: Adding the visual cue with CSS
●   Plus: JavaScript to enhance the user
    experie...
Case Study: Currency
     Converter
Case Study: Currency
             Converter
●   Simple HTML Form
●   Visual cues
●   Enhancing labels
●   Screen reader te...
Recommended solutions for
         accessible Ajax
●   Development
●   Testing
Recommended solutions:
             Development
●   Progressive enhancement
    ●   Semantic and structured HTML
    ●   C...
Recommended solutions:
              Testing
●   Disable JavaScript and CSS:
    ●   Core functionality must work
●   Enab...
Testing with a screen reader
●   Don't use a screen reader
●   Get a screen reader user instead
●   Screen reader power us...
References
●   Standards
    ●   PAS 78 – British Standards Institution
         ●   en.wikipedia.org/wiki/Pas_78
    ●   ...
References: Books
●   Joe Clark: Building Accessible Websites
    ●   joeclark.org/book
●   Shawn Lawton Henry: Just Ask
 ...
References: Web
●   Gez Lemon / Juicy Studio
    ●   www.juicystudio.com
●   Alastair Campbell
    ●   alastairc.ac
●   Gr...
Thank you
Questions & Answers
Upcoming SlideShare
Loading in …5
×

Mike Davies - Ajax And Accessibility

10,494 views
10,224 views

Published on

Not my presentation but one that all-out accessibility carer and colleague Mike Davies has given at Abilitynet

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

No Downloads
Views
Total views
10,494
On SlideShare
0
From Embeds
0
Number of Embeds
40
Actions
Shares
0
Downloads
78
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

Mike Davies - Ajax And Accessibility

  1. Ajax and Accessibility Mike Davies AbilityNet – Rich Media February 2008
  2. Mike Davies ● Web Developer at Yahoo! ● previously Legal & General ● Web accessibility case study (PAS78) ● Accessibility practitioner ● www.isolani.co.uk
  3. Ajax and Accessibility Agenda ● Ajax and Web 2.0 ● Accessibility issues with Ajax ● Case study of retrofitting a web page using Ajax ● Recommended solutions for implementing Ajax to maximise accessibility ● Testing Ajax with a screen reader
  4. Ajax and Web 2.0 ● What is Web 2.0? ● Web 1.0 + something else
  5. Web 1.0 ● Publishers producing websites ● Visitors read websites ● Clearly enforced divide
  6. Characteristics of Web 2.0 ● Breaking the Publisher/Reader divide ● User contributes/generates content ● Social media / shared experiences ● Web as a Platform
  7. Examples of Web 2.0 ● Users sharing content: ● Flickr, Y! Answers, YouTube, Wikipedia ● Users publishing/subscribing ● Blogs, RSS ● Social networking / communities ● Facebook, MySpace, Ning ● Interactive applications ● Google Maps
  8. Web as a platform ● Email ● Gmail, Yahoo Mail, Hotmail Live ● Calendar / Project Management ● Basecamp, 30 Boxes, Google Calendar ● Personalised Homepages ● My Yahoo!, Netvibes, Pageflakes ● Aggregators and meme-trackers ● Google Reader, Techmeme, Technorati
  9. So how do we build all of this?
  10. Building blocks of Web 2.0 ● HTML ● CSS ● JavaScript (and Ajax)
  11. What is Ajax? ● Connecting to a server using JavaScript ● Avoids page refreshes ● Dynamic updates to content ● Dynamic processing of user inputs
  12. Ajax accessibility issues: Overview ● General issues ● Screen reader issues ● Screen magnifier issues ● Keyboard issues ● Movement and colour issues
  13. Ajax accessibility issues: General ● Lack of page refresh – breaks web model ● User independent updates ● Visual dependencies ● JavaScript barriers
  14. Ajax accessibility issues: Screen readers ● Updating the virtual buffer ● Two issues: ● Is the content available to the user? ● Is the user aware the content is updated? ● Hidden content
  15. Ajax accessibility issues: Screen readers ● User initiated updates ● User independent updates ● Delayed updates (Ajax) ● Virtual buffer sometimes not updated ● Hidden input field hack ● Manual updates ● Usability issues
  16. Ajax accessibility issues – Screen magnifiers ● Distance between action and result ● Changing the content they are reading ● Overflowing content ● Changing focus
  17. Ajax accessibility issues – keyboard users ● Offscreen content ● Removing focused content ● Interactive elements focusable
  18. Case study of retrofitting a web page using Ajax ● Pre-requisites ● Structured and semantic HTML ● Text alternative to visual cues ● Case studies ● Y! TV Search ● Y! Finance Currency Converter
  19. Case Study: Yahoo! TV Search ● Common Interface: Tabbed Search
  20. Case Study: Yahoo! TV Search ● Its just a form!
  21. Case Study: Yahoo! TV Search ● Plus: Adding the visual cue with CSS ● Plus: JavaScript to enhance the user experience ● Audio cues (Extra text) ● Keyboard access for free (labels)
  22. Case Study: Currency Converter
  23. Case Study: Currency Converter ● Simple HTML Form ● Visual cues ● Enhancing labels ● Screen reader testing ● Catching bugs
  24. Recommended solutions for accessible Ajax ● Development ● Testing
  25. Recommended solutions: Development ● Progressive enhancement ● Semantic and structured HTML ● Core functionality in HTML only ● Use CSS to add visual cues ● Use JavaScript to add ● Dynamic updates ● User-enhancements
  26. Recommended solutions: Testing ● Disable JavaScript and CSS: ● Core functionality must work ● Enable CSS and JavaScript: ● Identify visual cues, ensure text-only equivalents are available ● Visual cues: colour, positioning, arrows, GUI metaphors ● Test it without a mouse ● Test it on a slow connection
  27. Testing with a screen reader ● Don't use a screen reader ● Get a screen reader user instead ● Screen reader power user – good for first pass testing ● Normal screen reader user – better for real user testing
  28. References ● Standards ● PAS 78 – British Standards Institution ● en.wikipedia.org/wiki/Pas_78 ● Web Content Accessibility Guidelines 1.0 ● w3.org/TR/WCAG10 ● WCAG Samurai Errata ● wcagsamurai.org
  29. References: Books ● Joe Clark: Building Accessible Websites ● joeclark.org/book ● Shawn Lawton Henry: Just Ask ● www.uiaccess.com/accessucd
  30. References: Web ● Gez Lemon / Juicy Studio ● www.juicystudio.com ● Alastair Campbell ● alastairc.ac ● Grant Broome ● grantbroome.blogspot.com ● Steve Faulkner ● paciellogroup.com/blog
  31. Thank you
  32. Questions & Answers

×