Presentations: AbilityNet Rich Media: February 2008
Ajax and Accessibility
By Mike Davies, as part of AbilityNet's Rich Media workshop, February 2008.
Mike Davies
- Web Developer at Yahoo!
- previously Legal & General
- Web accessibility case study (PAS78)
- Accessibility practitioner
- www.isolani.co.uk
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
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 media / shared experiences
- Web as a Platform
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
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
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
- Dynamic processing of user inputs
Ajax accessibility issues: Overview
- General issues
- Screen reader issues
- Screen magnifier issues
- Keyboard issues
- Movement and colour issues
Ajax accessibility issues: General
- Lack of page refresh - breaks web model
- User independent updates
- Visual dependencies
- JavaScript barriers
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
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
Ajax accessibility issues - Screen magnifiers
- Distance between action and result
- Changing the content they are reading
- Overflowing content
- Changing focus
Ajax accessibility issues - keyboard users
- Offscreen content
- Removing focused content
- Interactive elements focusable
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
Case Study: Yahoo! TV Search
- Common Interface: Tabbed Search
- Its just a form!
- Plus: Adding the visual cue with CSS
- Plus: JavaScript to enhance the user experience
- Audio cues (Extra text)
- Keyboard access for free (labels)
Case Study: Currency Converter
- Simple HTML Form
- Visual cues
- Enhancing labels
- Screen reader testing
- Catching bugs
Recommended solutions for accessible Ajax
- Development
- Testing
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
Recommended solutions: Testing
- Identify visual cues, ensure text-only equivalents are available
- Visual cues: colour, positioning, arrows, GUI metaphors
- Disable JavaScript and CSS: Core functionality must work
- Test it without a mouse
- Test it on a slow connection
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
References: Standards
References: Books
References: Web
Thank you
- Questions & Answers