Building accessibility in a large scale web application experience with Yahoo Mail Classic

1
Building accessibility in a large scale web
application experience with Yahoo! Mail
Classic Omprakash Subbarao Director Yahoo! SDC,
Bangalore Feb 5th 2008
2
Web Accessibility

• Web Accessibility refers primarily to the ability
  of disabled users to access and use web sites and
  web applications as effectively as non-disabled
  users.
• The power of the web is in its universality.
  Access by everyone regardless of disability is an
  essential aspect. Tim Berners-Lee, inventor
  of the World Wide Web

3
Yahoo! and accessibility

• Our success is based on having a lot of happy
  visitors finding the content they want and
  consuming it as easily as possible.
• This includes people of all levels of ability,
  technical knowledge, education and age groups.
• This signifies the importance of accessibility
  for Yahoo!
• It is core part of our expertise in front end
  development

4
Sounds familiar to you?

• Accessibility is
• a technical problem for us
• a must as we have to follow a certain law
• implementation based on myths and hearsay (All
  screen reader users do things this way)
• a development overhead

5
Where are we moving?

• Towards web accessibility as an opportunity for
  all by making it a usability benefit
• Built as an integral part of every Yahoo! product
• This is nothing new

6
Yahoo!s Accessibility Guideline

• Yahoo! recommends all its web sites to provide
  best possible support for assistive technologies
• Users of assistive technologies also should be
  able to use most of the features with similar
  ease as any other user
• Yahoo! is committed to ensuring that our sites do
  not present an obstacle to users of assistive
  technologies whenever possible.
• When a site or page cannot be made to correctly
  function with assistive technologies we will seek
  a reasonable alternative offering the same
  information and services

7
Accessibility for Yahoo! Mail Classic

• One of the most visited site on Earth
• 250 Mn active users
• 1 Bn Page Views per day
• Lot of assistive technology users access Yahoo!
  Mail everyday
• Providing them the best experience is
• Our Moral responsibility
• Makes business sense

8
Key points

• Complete accessibility support key objective with
  new Yahoo! Mail Classic
• Included as a key requirement with product PRD
• Criterion for product success
• How we started
• Involved accessibility specialist at various
  development stages
• Stakeholders got training with assistive
  technologies
• Prototype supported accessibility features that
  were verified by expert
• Accessibility included as part of core
  engineering design
• Separate test cycles added for testing with
  assistive technologies

9
Best Engineering Practises

• Plan for accessibility at each stage of
  development
• Start with designing your markup semantically
• All functionality must be keyboard accessible
• Consider localization needs with accessibility
  specific text

10
Semantic Markup

• To be semantic is to embed as much meaning as
  possible into the markup itself
• Were literally injecting human-understandable
  semantics, meaning, and controls directly into
  the guts of the computer layer
• - Nate Koechley, FE Evangelist

11
Semantic Markup

• Markup applies to data
• Mark it up like you mean it
• Use
  ,
  ,
  1. for list of items
  2. Use Header tags for headings of modules
  3. This sentence has emphasis.
  4. This sentence has strong
     emphasis.
  5. Place important content first (Source order
     independent)
  6. Linearization
  7. Helps screen-readers
  8. Good for SEO (Search Engine Optimization)
  9. Microformats
  
  12
  Examples of Markup of welcome page
  13
  Accessibility and Markup
  • General
  • Text resizing
  • Titles for each page
  • Tooltips
  • Easy keyboard navigation
  • Navigation
  • Header tags(H1/H2/H3 etc) instead of CSS to
    categorize sections on page
  • Links
  • All links make sense when read out of context
  • Normal way to write code
  • Add
  • Make it accessible
  • Addclassoffscreen a new folder
  • .offscreen positionabsolutetop-999pxl
    eft-999px
  
  Add a new folder

14
Accessibility and Markup

• Form fields
• Normal way to write code
• Subject idSubject"
• Make it accessible
• Subject
• Use tabindex
• Images
• Use appropriate ALT attributes
• Data tables
• Use summary, caption, thead for tables
• CAPTCHA
• Put hidden text, which is read out, to take user
  to customer care
• Use Audio Captcha

15
Accessibility and Markup

• Advanced practices
• Off-screen content to hide content from normal
  users (absolute positioning)
• Shortcut keys and access keys
• Accessible DHTML (Menus, RTE etc)
• Accessible Javascript
• device independent event handlers (onfocus and
  onblur instead of onmouseover and onclick)

16
Thank You!
17
Text Resizing
18
Appendix - Assistive Technologies

• Screen readers (eg. JAWS)
• Screen magnifiers
• On-screen keyboards
• Alternative input devices
• Keyboards
• Mice
• Switches
• Mouthstick, Headwand
• Voice recognition systems

19
Examples of Markup of welcome page