Twitter and Web Accessibility AHG 2009 Nov12

3,511 views

Published on

Dennis Lembree's presentation "Twitter and Web Accessibility" given at Accessing Higher Ground conference; Westminster, Colorado; November 12, 2009.

Published in: Technology, Design
2 Comments
7 Likes
Statistics
Notes
  • Stewart, thank you for your comment. The target audience was pretty technical, so that is why a few slides have abundant information. Types of handicaps include those with visual, hearing, mobility , and cognitive impairments. Accessibility not only covers the disabled, but many other issues such as English as second language, broken mouse or speakers, low internet bandwidth, search engine optimization, and cross-browser support.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice effort to improve things.
    As you may have found out presenting these slides - a number of them have way too much info on them to make your point. Perhaps selecting some PARTS of pages (right after the slide you show) will work.
    If you're seeking the help handicapped, what specific types?
    Good luck!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
3,511
On SlideShare
0
From Embeds
0
Number of Embeds
73
Actions
Shares
0
Downloads
0
Comments
2
Likes
7
Embeds 0
No embeds

No notes for slide

Twitter and Web Accessibility AHG 2009 Nov12

  1. 1. 12 th Annual Accessing Higher Ground “ Accessible Media, Web and Technology Conference” Dennis Lembree November 12, 2009 Westminster, Colorado This presentation is on SlideShare at: http://SlideShare.net/WebAxe/ Twitter and Web Accessibility
  2. 2. Agenda <ul><li>Issues with Twitter.com </li></ul><ul><ul><li>Keyboard Access </li></ul></ul><ul><ul><li>Use of Headings </li></ul></ul><ul><ul><li>JavaScript </li></ul></ul><ul><ul><li>Other Issues </li></ul></ul><ul><li>Accessible Applications </li></ul><ul><li>AccessibleTwitter.com </li></ul><ul><ul><li>Keyboard, Headings, JavaScript </li></ul></ul><ul><ul><li>Quotes from Users </li></ul></ul><ul><ul><li>Future Enhancements </li></ul></ul><ul><li>Other Benefits of Web Accessibility & Web Standards </li></ul><ul><li>Contact Details </li></ul><ul><li>Questions </li></ul>
  3. 3. Issues with Twitter.com <ul><li>Many web accessibility issues including: </li></ul><ul><ul><li>Core functionality is not keyboard accessible. </li></ul></ul><ul><ul><li>Poor use of headings . </li></ul></ul><ul><ul><li>Much core functionality requires JavaScript . </li></ul></ul><ul><ul><li>Many more… </li></ul></ul>
  4. 4. Keyboard Access <ul><li>Keyboard cannot access Favorite, Reply, and Delete links. </li></ul>
  5. 5. ?
  6. 6. Use of Headings <ul><li>Poor use of headings </li></ul><ul><ul><li>Where are the tweets? </li></ul></ul><ul><ul><li>Can you find the menu? </li></ul></ul><ul><ul><li>What site is this? </li></ul></ul><ul><ul><li>Is my account info here? </li></ul></ul><ul><ul><li>Also: </li></ul></ul><ul><ul><ul><li>Why is the footer under Following? </li></ul></ul></ul><ul><ul><ul><li>“ Saved Searches” is a primary heading but doesn’t display on the page. </li></ul></ul></ul>
  7. 7. JavaScript <ul><li>Twitter.com requires JavaScript. Without it, the user is unable to: </li></ul><ul><ul><li>Favorite a tweet. </li></ul></ul><ul><ul><li>Delete a tweet. </li></ul></ul><ul><ul><li>Access the content under Trending Topics & Followers. </li></ul></ul><ul><ul><li>Perform core actions on Followers and Following pages. </li></ul></ul>
  8. 9. Other issues with Twitter.com <ul><li>Code doesn't validate. </li></ul><ul><li>Code could use better semantics. </li></ul><ul><li>Links unclear. </li></ul><ul><ul><li>underlines removed </li></ul></ul><ul><ul><li>:hover pseudo class effects, but no :focus </li></ul></ul><ul><ul><li>poor color contrast </li></ul></ul><ul><li>Sidebar navigation is inconsistent. </li></ul><ul><li>Form mark-up needs help: </li></ul><ul><ul><li>Form fields are missing labels. </li></ul></ul><ul><ul><li>Fieldset tags used without legends. </li></ul></ul><ul><li>Layout width is static not flexible. </li></ul><ul><li>Custom colors may not be readable. </li></ul>
  9. 11. Accessible Applications <ul><li>Accessible Twitter </li></ul><ul><ul><li>http:// www.accessibletwitter.com / </li></ul></ul><ul><li>Slandr </li></ul><ul><ul><li>Mobile site, web-based </li></ul></ul><ul><ul><li>http:// m.slandr.net / </li></ul></ul><ul><li>Qwitter </li></ul><ul><ul><li>Desktop client for screen readers </li></ul></ul><ul><ul><li>http://qwitter-client.net / </li></ul></ul><ul><li>TwInbox (previously McTwit) </li></ul><ul><ul><li>Plug-in for MS Outlook </li></ul></ul><ul><ul><li>http:// techhit.com/TwInbox / </li></ul></ul>
  10. 12. AccessibleTwitter.com <ul><li>Accessible Twitter provides a fully web-accessible and standards-compliant version of the Twitter web site, a very popular micro-blogging web service. </li></ul><ul><li>Winner of the 2009 Access IT @web2.0 Award </li></ul>
  11. 13. www.AccessibleTwitter.com
  12. 14. Keyboard Access <ul><li>ALL links are keyboard accessible. </li></ul>
  13. 15. Use of Headings <ul><li>Ideal use of headings </li></ul><ul><ul><li>Where are the tweets? </li></ul></ul><ul><ul><li>Can you find the menu? </li></ul></ul><ul><ul><li>What site is this? </li></ul></ul><ul><ul><li>Is my account info here? </li></ul></ul><ul><ul><li>*Names of Tweet authors are headings which greatly improves clarity and navigation for screen readers. </li></ul></ul>
  14. 16. JavaScript <ul><li>Accessible Twitter is fully functional without JavaScript. </li></ul>
  15. 17. JavaScript <ul><li>Accessible Twitter uses JavaScript to enhance behavior. </li></ul><ul><ul><li>Progress Enhancement is paramount. </li></ul></ul><ul><ul><li>Hijax (Jeremy Keith). </li></ul></ul><ul><ul><li>Unobtrusive, of course. </li></ul></ul><ul><ul><li>ARIA (W3C WAI) </li></ul></ul>
  16. 18. Other issues with Twitter.com <ul><li>Code doesn't validate. </li></ul><ul><li>Code could use better semantics. </li></ul><ul><li>Links unclear. </li></ul><ul><ul><li>underlines removed </li></ul></ul><ul><ul><li>:hover pseudo class effects, but no :focus </li></ul></ul><ul><ul><li>poor color contrast </li></ul></ul><ul><li>Sidebar navigation is inconsistent. </li></ul><ul><li>Form mark-up needs help: </li></ul><ul><ul><li>Form fields are missing labels. </li></ul></ul><ul><ul><li>Fieldset tags used without legends. </li></ul></ul><ul><li>Layout width is static not flexible. </li></ul><ul><li>Custom colors may not be readable. </li></ul>
  17. 19. AccessibleTwitter.com Fixes <ul><li>Code validates. </li></ul><ul><li>Code is semantic. </li></ul><ul><li>Links clear. </li></ul><ul><ul><li>underlines not removed </li></ul></ul><ul><ul><li>:hover pseudo class and :focus </li></ul></ul><ul><ul><li>good color contrast </li></ul></ul><ul><li>Navigation is consistent. </li></ul><ul><li>Form mark-up is accessible: </li></ul><ul><ul><li>Form fields have labels. </li></ul></ul><ul><ul><li>Fieldset tags include legends. </li></ul></ul><ul><li>Layout width is flexible. </li></ul><ul><li>Custom colors are not implemented. </li></ul>
  18. 21. Quotes from Users <ul><li>“ Wow! You have really made my day, and I am smiling once again. I am so excited that I found your Accessible Twitter. Now I feel that I can be in the cutting edge of everything that is happening in the Twitter Universe” </li></ul>
  19. 22. Quotes from Users <ul><li>“ You can easily navigate by several methods; skip links, form fields, headings. Very effective with a screen reader.” </li></ul><ul><li>“ really easy with a Braille Display to use” </li></ul><ul><li>“ From now on my default web interface for Twitter! Keyboard accessible == touch accessible!” </li></ul>
  20. 23. Quotes from Users <ul><li>“… seems to work nicely in Lynx. Main Twitter won't let me login and mobile site won't show followers.” </li></ul><ul><li>“ Liking it more than twitter.com! Cleaner, easier, fun!” </li></ul><ul><li>“ Love this! So clear & Easy #dyslexia” </li></ul>
  21. 24. Quotes from Users <ul><li>Read these quotes and more: http://accessibletwitter.com/articles.php </li></ul>
  22. 25. Future Enhancements <ul><li>Always evolving. </li></ul><ul><li>Many enhancements and features are planned including: </li></ul><ul><ul><li>Twitter Lists . </li></ul></ul><ul><ul><li>Caching on Trends and Popular Links pages. </li></ul></ul><ul><ul><li>Better error handling. </li></ul></ul><ul><ul><li>Functionality to upload photos via Twitpic and/or yFrog. </li></ul></ul><ul><ul><li>Open Authentication. </li></ul></ul>
  23. 26. Other Benefits of Web Accessibility & Web Standards <ul><li>More usable . </li></ul><ul><li>Better functionality with assistive technology such as text browsers & Braille devices. </li></ul><ul><li>Keyboard accessibility opens gate for many other types of input devices . </li></ul><ul><li>Providing clear, consistent content and navigation benefits those with cognitive impairments (and is more usable in general). </li></ul><ul><li>Use with a mobile device is possible. </li></ul>
  24. 27. Contact Details <ul><li>Dennis Lembree </li></ul><ul><ul><li>Owner/Author </li></ul></ul><ul><ul><li>www.DennisLembree.com </li></ul></ul><ul><ul><li>www.WebOverhauls.com </li></ul></ul><ul><ul><li>WebAxe.blogspot.com </li></ul></ul><ul><li>Twitter Accounts </li></ul><ul><ul><li>@ Accessible Twitr </li></ul></ul><ul><ul><li>@ WebAxe </li></ul></ul><ul><ul><li>@ DennisL </li></ul></ul>
  25. 28. Questions?

×