#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

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

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…

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.

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.

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.

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.

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.

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?!

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.

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.

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!”

“ 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”

“… 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

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.

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.

“ 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

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

Dennis Lembree

Owner/Author

www.DennisLembree.com

www.WebOverhauls.com

[email_address]

On Twitter

@Accessible Twitr

@WebAxe

@DennisL