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.
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

12,186 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
  • Be the first to comment

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

×