Web 2.0 and User Experience For diverse users

What is Web 2.0? Breaks the website owner / user (publisher / reader) divide User contributes / generates content Social media / networking Web as a platform: Email, Calendars, Project Management

Breaks the website owner / user (publisher / reader) divide

User contributes / generates content

Social media / networking

Web as a platform:

Email, Calendars, Project Management

Why Web 2.0 and accessibility? Issues Web interfaces have changed significantly How users interact is changing Web applications enable complex (AJAX) interactions How can we enable accessible innovation?

Issues

Web interfaces have changed significantly

How users interact is changing

Web applications enable complex (AJAX) interactions

How can we enable accessible innovation?

Why Web 2.0 and accessibility? Users with diverse needs Can users interact using assistive technologies? Is it easy to use? Is it easy to learn? Is it a good user experience? Can users with disabilities contribute?

Users with diverse needs

Can users interact using assistive technologies?

Is it easy to use?

Is it easy to learn?

Is it a good user experience?

Can users with disabilities contribute?

Unleashing the potential of Web 2.0

The potential of social networking Social networking has huge opportunities for disabled users Equal participation in business and leisure Network without physical mobility being an issue Deaf users now have easy and economical access to BSL video New enhancements such as predictive text fields benefit users with reading difficulties

Social networking has huge opportunities for disabled users

Equal participation in business and leisure

Network without physical mobility being an issue

Deaf users now have easy and economical access to BSL video

New enhancements such as predictive text fields benefit users with reading difficulties

A web 2.0 eco-system is a growing suite of applications that work together. For example, YouTube videos can be embedded in MySpace pages. If the top sites are inaccessible does this create problems throughout the Web 2.0 eco-system?

Users want to participate in social networking… … but are unable to because the tools are inaccessible

Common difficulties Inaccessible CAPTCHA graphics Information architecture does not adapt to user needs Can’t use without a mouse / visual interface Over complex interfaces Difficult to understand what the application can do

Inaccessible CAPTCHA graphics

Information architecture does not adapt to user needs

Can’t use without a mouse / visual interface

Over complex interfaces

Difficult to understand what the application can do

Has Web 2.0 development created a culture where both accessibility and usability are no longer valued or prioritised? Are we in danger of repeating the same mistakes from the early days of web development? Accessibility is not an iteration for mythical phase 2!

Web 2.0 Build now, Fix later… Otherwise known as iteration

Is it (poorly implemented) AJAX’s fault? AJAX is not the main culprit! … but it’s still guilty!

AJAX issues Screen reader and magnifier users not knowing parts of the screen have updated Functionality being dependent on mouse use

Screen reader and magnifier users not knowing parts of the screen have updated

Functionality being dependent on mouse use

Web applications that are easy to use is as important as technical accessibility

Information architecture and accessibility Our user testing with disabled users shows that information architecture and content have a huge impact on accessibility. This video shows the impact of poor content and information architecture on a user with a mild learning disability. The next video shows the difficulties a screen reader user experiences on a multi language website – this highlights the difficulties caused by unexpected actions

Our user testing with disabled users shows that information architecture and content have a huge impact on accessibility.

This video shows the impact of poor content and information architecture on a user with a mild learning disability.

The next video shows the difficulties a screen reader user experiences on a multi language website – this highlights the difficulties caused by unexpected actions

Solutions

CAPTCHA graphics In the short term, All CAPTCHA graphics should have an audio alternative In the longer term, there are a number of alternatives (none are completely viable) Email verification Mobile phone verification Logic question (when this was trialled in the US there was 2 out 3 failures) Server side scripts / plugins

In the short term, All CAPTCHA graphics should have an audio alternative

In the longer term, there are a number of alternatives (none are completely viable)

Email verification

Mobile phone verification

Logic question (when this was trialled in the US there was 2 out 3 failures)

Server side scripts / plugins

Help pages The web has changed and many users do not have a familiarity needed to confidently use social networking sites A JAWS user we spoke to DIDN’T KNOW video playback could be controlled on YouTube For example, the contents of a links list dialogue box on a static website and a Web 2.0 site sound very different Having useful help information which gives an overview of the site allows users to build an accurate mental model of the application

The web has changed and many users do not have a familiarity needed to confidently use social networking sites

A JAWS user we spoke to DIDN’T KNOW video playback could be controlled on YouTube

For example, the contents of a links list dialogue box on a static website and a Web 2.0 site sound very different

Having useful help information which gives an overview of the site allows users to build an accurate mental model of the application

Better use of Rich Media Flash is used to control rich media content and display adverts YouTube does not use labels for the buttons on its Flash player Adverts should have labels and alternatives so they are not disorientating MySpace does not allow users to control audio playback when browsing

Flash is used to control rich media content and display adverts

YouTube does not use labels for the buttons on its Flash player

Adverts should have labels and alternatives so they are not disorientating

MySpace does not allow users to control audio playback when browsing

Accessible innovation APIs allow developers to make applications more accessible: The lovely Christian Heilmann’s Easy YouTube for users with learning disabilities http://icant.co.uk/easy-youtube/ http://www.youtube.com/watch?v=bluJaIMQN0k Steve Faulker’s Making Twitter Tweet http://www.paciellogroup.com/blog/misc/notifier/index.html

APIs allow developers to make applications more accessible:

The lovely Christian Heilmann’s Easy YouTube for users with learning disabilities

http://icant.co.uk/easy-youtube/

http://www.youtube.com/watch?v=bluJaIMQN0k

Steve Faulker’s Making Twitter Tweet

http://www.paciellogroup.com/blog/misc/notifier/index.html

The challenges of user generated content How can creators be encouraged to create accessible content?

Users creating accessible content Authoring tools need to be accessible: Encourage users to add alt text Allow users to add headings (semantic structure) Encourage users to add captions/subtitles

Authoring tools need to be accessible:

Encourage users to add alt text

Allow users to add headings (semantic structure)

Encourage users to add captions/subtitles

Conclusions Test with disabled users to create a great user experience for everyone! Make data open – accessible APIs and mashups can be developed Consider how to manage user generated content Plan for accessibility from the start – not an iteration

Test with disabled users to create a great user experience for everyone!

Make data open – accessible APIs and mashups can be developed

Consider how to manage user generated content

Plan for accessibility from the start – not an iteration

Thankyou GeekGirls! [email_address] With thanks: Damon Rose, BBC Ouch Ian Forrester, BBC Backstage Christian Heilmann, Yahoo Our testers: David, Hazel, Chris Lottie Poulton, Camera Di, Julia, Johann, AbilityNet