SlideShare a Scribd company logo
#open web camp Dennis Lembree WebOverhauls.com September 26, 2009 Stanford University; Palo Alto, CA This presentation is on: http://SlideShare.net/WebAxe/
Agenda Summary Issues with Twitter.com Keyboard access Heading usage JavaScript requirements Other Issues Other Benefits of Web Accessibility & Web Standards Quotes from Users Future Enhancements Attend the Session Podcast & Blog Contact Details
Summary AccessibleTwitter.com provides a web-accessible and standards-compliant version of the Twitter web site, a very popular micro-blogging web service. Winner of the 2009 Access IT @web2.0 Award
www.AccessibleTwitter.com
Issues with Twitter.com Many web accessibility issues including: Some core functionality is not  keyboard  accessible. Poor use of  headings . Much core functionality requires  JavaScript . Many more…
Keyboard Accessible Keyboard cannot access Favorite, Reply, and Delete links. ALL links are keyboard accessible.
?
Use of Headings Poor use of headings Where are the tweets? Can you find the menu? What site is this? Is my account info here? Also: Why is the footer under Following? “ Saved Searches” is a primary heading but doesn’t display on the page.
Use of Headings Ideal use of headings Where are the tweets? Can you find the menu? What site is this? Is my account info here? *Names of Tweet authors are headings which greatly improves clarity and navigation for screen readers.
JavaScript Twitter.com requires JavaScript.  Without it, the user is unable to: Favorite a tweet. Delete a tweet. Access the content under Trending Topics & Followers. Perform core actions on Followers and Following pages.
 
JavaScript Accessible Twitter is fully functional without JavaScript. Progress Enhancement is paramount. Hijax (Jeremy Keith). Unobtrusive JS, of course.
Other issues with Twitter.com that Accessible Twitter addresses Code doesn't validate. Code could use better semantics. Links unclear. underlines removed :hover pseudo class effects, but no :focus poor color contrast Custom colors may not be readable MySpace syndrome?!
 
Other issues with Twitter.com that Accessible Twitter addresses Sidebar navigation is inconsistent.  Form markup needs help: Form fields are missing labels. Fieldset tags used without legends. Layout width is static not flexible.
Other Benefits of Web Accessibility & Web Standards More  usable . Works in  text-only  user-agents such as Lynx. Keyboard accessibility opens gate for many other types of  input devices . Providing clear, consistent content and navigation benefits those with  cognitive  impairments (and is more usable in general). Use with a  mobile  device is possible.
Quotes from Users “ You can easily navigate by several methods; skip links, form fields, headings. Very effective with a screen reader.” “ really easy with a Braille Display to use” “ From now on my default web interface for Twitter! Keyboard accessible == touch accessible!”
Quotes from Users “… seems to work nicely in Lynx. Main Twitter won't let me login and mobile site won't show followers.” “ Liking it more than twitter.com! Cleaner, easier, fun!” “ Love this! So clear & Easy #dyslexia”
Quotes from Users Read more: http:// accessibletwitter.com/articles.php
Future Enhancements Always evolving. Many enhancements and features are planned including: Caching on Trends and Popular Links pages. Better error handling. Implement  ARIA live regions. Functionality to upload photos via Twitpic and/or yFrog. Open Authentication.
Attend the Session “ Twitter & Web Accessibility” presented by Dennis Lembree. 12th Annual  Accessing Higher Ground  near Denver, Colorado. “ Accessible Media, Web and Technology Conference” 10-14 Nov 2009 (Tue-Sat). Session is scheduled at 9:15am Thu, Nov 12.
Web Accessibility Podcast & Blog The author of Accessible Twitter is also the founder of Web Axe, a podcast and blog focused on web accessibility. http://webaxe.blogspot.com Since Sept 2005 Approximately 3,000 RSS subscribers
Contact Details Dennis Lembree Owner/Author www.DennisLembree.com www.WebOverhauls.com [email_address] On Twitter @Accessible Twitr @WebAxe @DennisL

More Related Content

PPT
Accessible Twitter : ACCESS-IT@Web 2.0
PPT
Twitter and Web Accessibility AHG 2009 Nov12
PPT
Twitter & Blogs
PPT
Seth Duffy Accessibility97035
PPTX
Librarians learn web day 3
PPT
ALSC Web 2.0: The Interactive Web
PPTX
Technology lesson 1
KEY
Extending your blog
Accessible Twitter : ACCESS-IT@Web 2.0
Twitter and Web Accessibility AHG 2009 Nov12
Twitter & Blogs
Seth Duffy Accessibility97035
Librarians learn web day 3
ALSC Web 2.0: The Interactive Web
Technology lesson 1
Extending your blog

What's hot (20)

KEY
Blogging basics
PPS
Web Technologies For College And University Presidents V3
DOCX
Multimedia System & Design!
PDF
A Beginner's Guide to WordPress - Podcamp Toronto 2012
PPT
Joomla Seo Presentation
PPTX
Wordpress: It's more than just a Blog
PPTX
Optimizing Library Resources for Screen Readers
KEY
A Beginner’s Guide to Wordpress - WordCamp Toronto 2011
PDF
Introduction to WordPress Class 2
PPT
Architecture of RIA from JAOO
PPTX
Help Me Help You: The art and science of getting good WordPress support - Wor...
ODP
Web 2.0 2012 - lesson 3 - blog
PPTX
Twitter bootstrap-101
PPT
Top Website Mistakes
PDF
Introduction to WordPress Class 4
ZIP
Refresh WordPress Beginner Workshop
PPT
Passionate About Plugins - WordCamp Montreal 2012
PPTX
WordPress developer 101
PPTX
Contributing to WordPress: You Don't Need to Know Code
PPTX
Facebookclone nct
Blogging basics
Web Technologies For College And University Presidents V3
Multimedia System & Design!
A Beginner's Guide to WordPress - Podcamp Toronto 2012
Joomla Seo Presentation
Wordpress: It's more than just a Blog
Optimizing Library Resources for Screen Readers
A Beginner’s Guide to Wordpress - WordCamp Toronto 2011
Introduction to WordPress Class 2
Architecture of RIA from JAOO
Help Me Help You: The art and science of getting good WordPress support - Wor...
Web 2.0 2012 - lesson 3 - blog
Twitter bootstrap-101
Top Website Mistakes
Introduction to WordPress Class 4
Refresh WordPress Beginner Workshop
Passionate About Plugins - WordCamp Montreal 2012
WordPress developer 101
Contributing to WordPress: You Don't Need to Know Code
Facebookclone nct
Ad

Viewers also liked (7)

PPTX
Uso de la C,S y Z
PDF
Uso de la s, c y z
PPTX
Tecnicismos LEOyE II
PPTX
Equipo 2 leoye tecnicismos
PPT
Pedagogía tecnicista
PPT
EL TECNICISMO
PPTX
Uso de c, s y z
Uso de la C,S y Z
Uso de la s, c y z
Tecnicismos LEOyE II
Equipo 2 leoye tecnicismos
Pedagogía tecnicista
EL TECNICISMO
Uso de c, s y z
Ad

Similar to Accessible Twitter at Open Web Camp (20)

PPT
"Twitter and Web Accessibility" INDATA Conference 2010
PPT
EASI Webinar: Twitter And Web Accessibility
PPT
Twitter and Web Accessibility (EASI Webinar)
PDF
How to engineer accessible websites
PPT
Accessibility of Twitter
PPT
Plan For Accessibility - TODCon 2008
PPT
corePHP Usability Accessibility by Steven Pignataro
PDF
How to create accessible websites - Web Accessibility Summit
PPTX
Presentation _ Unit no. 1_ Lesson No. 1_ Grade 8.pptx
PDF
Professional web development with libraries
PPT
Accessibility Usability Professional Summry
PPT
Web Accessibility
PPTX
Designing Accessible Drupal Themes
PPT
Usability Guidelines
PPT
How To Build An Accessible Web Application
PPT
Introduction web tech
ODP
Accessibility, SEO and Joomla
ODP
Accessibility, SEO and Joomla
PPT
Web Usability
PPT
Dfg Intranet Development
"Twitter and Web Accessibility" INDATA Conference 2010
EASI Webinar: Twitter And Web Accessibility
Twitter and Web Accessibility (EASI Webinar)
How to engineer accessible websites
Accessibility of Twitter
Plan For Accessibility - TODCon 2008
corePHP Usability Accessibility by Steven Pignataro
How to create accessible websites - Web Accessibility Summit
Presentation _ Unit no. 1_ Lesson No. 1_ Grade 8.pptx
Professional web development with libraries
Accessibility Usability Professional Summry
Web Accessibility
Designing Accessible Drupal Themes
Usability Guidelines
How To Build An Accessible Web Application
Introduction web tech
Accessibility, SEO and Joomla
Accessibility, SEO and Joomla
Web Usability
Dfg Intranet Development

More from Dennis Lembree (9)

PPTX
SVG Icons and Screen Reader Accessibility
PPTX
HTML5's ARIA and a Web-Accessible Dropdown Widget
PPT
How To Build An Accessible Web Application - a11yBos
PPT
Networking with Twitter, Part 2
PPT
Networking with Twitter, Part 1
ODP
AccessU 2011 Keynote
PPT
Accessible Twitter Update at CSUN11 Tweetup
PPT
Making JavaScript Accessible
PPT
Accessible Twitter CSUN Tweetup 2010
SVG Icons and Screen Reader Accessibility
HTML5's ARIA and a Web-Accessible Dropdown Widget
How To Build An Accessible Web Application - a11yBos
Networking with Twitter, Part 2
Networking with Twitter, Part 1
AccessU 2011 Keynote
Accessible Twitter Update at CSUN11 Tweetup
Making JavaScript Accessible
Accessible Twitter CSUN Tweetup 2010

Recently uploaded (20)

PPTX
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
PPTX
Spectroscopy.pptx food analysis technology
PDF
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
PPTX
Programs and apps: productivity, graphics, security and other tools
PDF
Empathic Computing: Creating Shared Understanding
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
PDF
Review of recent advances in non-invasive hemoglobin estimation
PDF
Encapsulation theory and applications.pdf
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
PDF
Network Security Unit 5.pdf for BCA BBA.
PDF
Electronic commerce courselecture one. Pdf
PPTX
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
PPTX
Cloud computing and distributed systems.
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
Spectroscopy.pptx food analysis technology
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
Programs and apps: productivity, graphics, security and other tools
Empathic Computing: Creating Shared Understanding
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Dropbox Q2 2025 Financial Results & Investor Presentation
Review of recent advances in non-invasive hemoglobin estimation
Encapsulation theory and applications.pdf
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
Network Security Unit 5.pdf for BCA BBA.
Electronic commerce courselecture one. Pdf
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
Digital-Transformation-Roadmap-for-Companies.pptx
Cloud computing and distributed systems.
Building Integrated photovoltaic BIPV_UPV.pdf
The Rise and Fall of 3GPP – Time for a Sabbatical?

Accessible Twitter at Open Web Camp

  • 1. #open web camp Dennis Lembree WebOverhauls.com September 26, 2009 Stanford University; Palo Alto, CA This presentation is on: http://SlideShare.net/WebAxe/
  • 2. Agenda Summary Issues with Twitter.com Keyboard access Heading usage JavaScript requirements Other Issues Other Benefits of Web Accessibility & Web Standards Quotes from Users Future Enhancements Attend the Session Podcast & Blog Contact Details
  • 3. Summary AccessibleTwitter.com provides a web-accessible and standards-compliant version of the Twitter web site, a very popular micro-blogging web service. Winner of the 2009 Access IT @web2.0 Award
  • 5. Issues with Twitter.com Many web accessibility issues including: Some core functionality is not keyboard accessible. Poor use of headings . Much core functionality requires JavaScript . Many more…
  • 6. Keyboard Accessible Keyboard cannot access Favorite, Reply, and Delete links. ALL links are keyboard accessible.
  • 7. ?
  • 8. Use of Headings Poor use of headings Where are the tweets? Can you find the menu? What site is this? Is my account info here? Also: Why is the footer under Following? “ Saved Searches” is a primary heading but doesn’t display on the page.
  • 9. Use of Headings Ideal use of headings Where are the tweets? Can you find the menu? What site is this? Is my account info here? *Names of Tweet authors are headings which greatly improves clarity and navigation for screen readers.
  • 10. JavaScript Twitter.com requires JavaScript. Without it, the user is unable to: Favorite a tweet. Delete a tweet. Access the content under Trending Topics & Followers. Perform core actions on Followers and Following pages.
  • 11.  
  • 12. JavaScript Accessible Twitter is fully functional without JavaScript. Progress Enhancement is paramount. Hijax (Jeremy Keith). Unobtrusive JS, of course.
  • 13. Other issues with Twitter.com that Accessible Twitter addresses Code doesn't validate. Code could use better semantics. Links unclear. underlines removed :hover pseudo class effects, but no :focus poor color contrast Custom colors may not be readable MySpace syndrome?!
  • 14.  
  • 15. Other issues with Twitter.com that Accessible Twitter addresses Sidebar navigation is inconsistent. Form markup needs help: Form fields are missing labels. Fieldset tags used without legends. Layout width is static not flexible.
  • 16. Other Benefits of Web Accessibility & Web Standards More usable . Works in text-only user-agents such as Lynx. Keyboard accessibility opens gate for many other types of input devices . Providing clear, consistent content and navigation benefits those with cognitive impairments (and is more usable in general). Use with a mobile device is possible.
  • 17. Quotes from Users “ You can easily navigate by several methods; skip links, form fields, headings. Very effective with a screen reader.” “ really easy with a Braille Display to use” “ From now on my default web interface for Twitter! Keyboard accessible == touch accessible!”
  • 18. Quotes from Users “… seems to work nicely in Lynx. Main Twitter won't let me login and mobile site won't show followers.” “ Liking it more than twitter.com! Cleaner, easier, fun!” “ Love this! So clear & Easy #dyslexia”
  • 19. Quotes from Users Read more: http:// accessibletwitter.com/articles.php
  • 20. Future Enhancements Always evolving. Many enhancements and features are planned including: Caching on Trends and Popular Links pages. Better error handling. Implement ARIA live regions. Functionality to upload photos via Twitpic and/or yFrog. Open Authentication.
  • 21. Attend the Session “ Twitter & Web Accessibility” presented by Dennis Lembree. 12th Annual Accessing Higher Ground near Denver, Colorado. “ Accessible Media, Web and Technology Conference” 10-14 Nov 2009 (Tue-Sat). Session is scheduled at 9:15am Thu, Nov 12.
  • 22. Web Accessibility Podcast & Blog The author of Accessible Twitter is also the founder of Web Axe, a podcast and blog focused on web accessibility. http://webaxe.blogspot.com Since Sept 2005 Approximately 3,000 RSS subscribers
  • 23. Contact Details Dennis Lembree Owner/Author www.DennisLembree.com www.WebOverhauls.com [email_address] On Twitter @Accessible Twitr @WebAxe @DennisL