0
We b A c c e s s i bi l i t y
    G o n e W i ld
                        N o w eve n w i lde r !

      Jared Smith & Jon ...
Gone wild?
  Mistakes, misconceptions, over-
indulgences, minutia, and generally
   silly aspects of modern web
          ...
Disclaimers
• There will be controversy and you
  may disagree.
• We’ll attempt to be equal
  opportunity offenders
• Ther...
Survey of screen reader
   user preferences
   http://webaim.org/projects/screenreadersurvey/
Alt text blunders
•   alt=”bullet”
alt=”bullet”
alt=”image of my cat”
Adding “image of...”, “graphic of...”, etc.
             to alt text
alt=”photo of the
   White House”
alt=”photo of the
   White House”
alt=”smiling lady”???
alt=”smiling lady”
alt=”Our business promises the best
service you will find on the
planet. Our team is professionally
trained to offer excel...
“Describing” images - particularly
   decorative images used to
    convey mood or feeling.
Apple iPhone

   alt=”iPhone web site”
Images that have a function MUST have alt text
Images that have a function MUST have alt text
           alt=”iPhone web site”
Avoiding redundant text...
<a href=”http://apple.com/iphone/”>
 <img src=”iphone.jpg” alt=””><br>
          Apple iPhone</...
Logos that link to the home page
Logos that link to the home page

        There’s no real consensus
Overly long alt text...




Using real text instead of images (when possible)...
alt=”Sales steadily increased
from $5 million to $16 million
     between 1996 and 2004”
Focusing on equivalent CONTENT rather
        than describing an image
longdesc=”80 percent of this
 chart resembles Pac-man. 20
      percent does not.”
Putting anything other than
    a URL in longdesc...
The most accessible site
     on Earth...
•Home
•Products
•Support
•Sales
•Forum
•Contact Us


              Hey, I’m the content!!!
Can you have too much accessibility?
FAIL!
Which provides better accessibility?
FAIL!
FAIL!
FAIL!
Text-only alternatives

• Not an excuse for a site that could
  otherwise be made accessible
• Only benefits a small number...
Building one version of a web
 site that is fully accessible...
Using text only versions of
 inaccessible web sites...
We don’t need no stinkin’ badges
Accesskey and Tabindex
Tabindex
• tabindex=”1+”
    Specifies exact tab order. Ensure tabindex
    is complete, logical, and intuitive.
•   tabind...
Visually hiding content

• display:none AND
    visibility:hidden hides from
    everyone
•   Position off-screen left wit...
Skip to content

• Think beyond “screen reader access”
• One link is typically sufficient
• Are headings “a mechanism”?
• U...
Navigation



Navigate through CNN.com using only the keyboard
Navigation


• Ensure page is keyboard accessible
• Do not remove outline
• Provide clear focus indicators
Text resizing


Increase the font size (not zoom) at
              MLB.com
Bullet-proof web design...
Fixing screen readers


  alt=”sea sun”
         vs.
    alt=”CSUN”
Until user agents...



     They do
You don’t need to provide...

• default text in form fields
• printable character between links
• redundant text links for ...
Acronym and Abbreviation

• Expand in text at first instance OR use
  <acronym> or <abbr>.
• It’s not necessary to expand a...
Proper use of Acronym and Abbreviation
Headings
Properly structured, one <h1>, never empty




                          ... and other semantic structure.
Title attribute

• Advisory information only
• Ignored by screen readers, except...
    • form elements missing labels
   ...
Using title attribute
    properly...
Accessibility > Compliance
The mythical “accessible” web site doesn’t exist!

  “Is your site WCAG 2.0 AAA compliant???”
Cognitive disabilities


    (not much happening here)
Cognitive load vs Functionality
Other
• Accessibility statements. Who cares?
• Site maps aren’t typically used
• Design for optimal line length (Jello lay...
Questions?
<plug shameless=”true”>
   read the articles
   check the blog
   join the list
   subscribe to newsletter
   g...
Web Accessibility Gone Wild
Web Accessibility Gone Wild
Web Accessibility Gone Wild
Web Accessibility Gone Wild
Web Accessibility Gone Wild
Web Accessibility Gone Wild
Upcoming SlideShare
Loading in...5
×

Web Accessibility Gone Wild

4,481

Published on

Web Accessibility Gone Wild explores mistakes, misconceptions, over-indulgences, minutia, and generally silly aspects of modern web accessibility

Published in: Technology, Design
3 Comments
20 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,481
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
105
Comments
3
Likes
20
Embeds 0
No embeds

No notes for slide

Transcript of "Web Accessibility Gone Wild"

  1. 1. We b A c c e s s i bi l i t y G o n e W i ld N o w eve n w i lde r ! Jared Smith & Jon Whiting http://webaim.org
  2. 2. Gone wild? Mistakes, misconceptions, over- indulgences, minutia, and generally silly aspects of modern web accessibility ... or “How to FAIL at web accessibility”
  3. 3. Disclaimers • There will be controversy and you may disagree. • We’ll attempt to be equal opportunity offenders • There’s little logic to the sequencing of topics
  4. 4. Survey of screen reader user preferences http://webaim.org/projects/screenreadersurvey/
  5. 5. Alt text blunders
  6. 6. • alt=”bullet”
  7. 7. alt=”bullet”
  8. 8. alt=”image of my cat”
  9. 9. Adding “image of...”, “graphic of...”, etc. to alt text
  10. 10. alt=”photo of the White House”
  11. 11. alt=”photo of the White House”
  12. 12. alt=”smiling lady”???
  13. 13. alt=”smiling lady”
  14. 14. alt=”Our business promises the best service you will find on the planet. Our team is professionally trained to offer excellent customer service throughout the contract negotiation process. Customer satisfaction is our top priority and is guaranteed.”
  15. 15. “Describing” images - particularly decorative images used to convey mood or feeling.
  16. 16. Apple iPhone alt=”iPhone web site” Images that have a function MUST have alt text
  17. 17. Images that have a function MUST have alt text alt=”iPhone web site”
  18. 18. Avoiding redundant text... <a href=”http://apple.com/iphone/”> <img src=”iphone.jpg” alt=””><br> Apple iPhone</a>
  19. 19. Logos that link to the home page
  20. 20. Logos that link to the home page There’s no real consensus
  21. 21. Overly long alt text... Using real text instead of images (when possible)...
  22. 22. alt=”Sales steadily increased from $5 million to $16 million between 1996 and 2004”
  23. 23. Focusing on equivalent CONTENT rather than describing an image
  24. 24. longdesc=”80 percent of this chart resembles Pac-man. 20 percent does not.”
  25. 25. Putting anything other than a URL in longdesc...
  26. 26. The most accessible site on Earth...
  27. 27. •Home •Products •Support •Sales •Forum •Contact Us Hey, I’m the content!!!
  28. 28. Can you have too much accessibility?
  29. 29. FAIL!
  30. 30. Which provides better accessibility?
  31. 31. FAIL!
  32. 32. FAIL!
  33. 33. FAIL!
  34. 34. Text-only alternatives • Not an excuse for a site that could otherwise be made accessible • Only benefits a small number of users • Native accessibility = text alternative • Rarely used
  35. 35. Building one version of a web site that is fully accessible...
  36. 36. Using text only versions of inaccessible web sites...
  37. 37. We don’t need no stinkin’ badges
  38. 38. Accesskey and Tabindex
  39. 39. Tabindex • tabindex=”1+” Specifies exact tab order. Ensure tabindex is complete, logical, and intuitive. • tabindex=”0” Place item in the default tab order • tabindex=”-1” Do not place in tab order, but allow the element to programmatically receive focus
  40. 40. Visually hiding content • display:none AND visibility:hidden hides from everyone • Position off-screen left with CSS for screen readers • Use judiciously
  41. 41. Skip to content • Think beyond “screen reader access” • One link is typically sufficient • Are headings “a mechanism”? • Use ARIA landmark roles
  42. 42. Navigation Navigate through CNN.com using only the keyboard
  43. 43. Navigation • Ensure page is keyboard accessible • Do not remove outline • Provide clear focus indicators
  44. 44. Text resizing Increase the font size (not zoom) at MLB.com
  45. 45. Bullet-proof web design...
  46. 46. Fixing screen readers alt=”sea sun” vs. alt=”CSUN”
  47. 47. Until user agents... They do
  48. 48. You don’t need to provide... • default text in form fields • printable character between links • redundant text links for client-side image maps
  49. 49. Acronym and Abbreviation • Expand in text at first instance OR use <acronym> or <abbr>. • It’s not necessary to expand all instances. • It’s not necessary to expand commonly known acronyms and abbreviations (for our web site - HTML, CSS, etc.)
  50. 50. Proper use of Acronym and Abbreviation
  51. 51. Headings Properly structured, one <h1>, never empty ... and other semantic structure.
  52. 52. Title attribute • Advisory information only • Ignored by screen readers, except... • form elements missing labels • <frame title=”navigation”> • <acronym>/<abbr>...usually.
  53. 53. Using title attribute properly...
  54. 54. Accessibility > Compliance The mythical “accessible” web site doesn’t exist! “Is your site WCAG 2.0 AAA compliant???”
  55. 55. Cognitive disabilities (not much happening here)
  56. 56. Cognitive load vs Functionality
  57. 57. Other • Accessibility statements. Who cares? • Site maps aren’t typically used • Design for optimal line length (Jello layouts) • Provide accurate, descriptive page titles • You don’t HAVE to check in screen readers • Don’t provide summary for layout tables • Use fieldset for grouped radio buttons and checkboxes • Layout tables don’t (typically) affect accessibility
  58. 58. Questions? <plug shameless=”true”> read the articles check the blog join the list subscribe to newsletter get our training </plug>
  1. A particular slide catching your eye?

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

×