Have you got the X Factor? Building websites for mobile and disabled users Henny Swan Opera Software

The X Factor X Platform X Widgets X over of experiences X over of users X over of guidelines See Barriers to mobile users and people with disabilities

X Platform

X Widgets

X over of experiences

X over of users

X over of guidelines

See Barriers to mobile users and people with disabilities

WCAG meets MWBP Web Content Accessibility Guidelines (WCAG) Produced by Web Accessibility Initiative Versions 1.0 and 2.0 Levels Single-A, Double-A and Triple-A Mobile Web Best Practices (MWBP) Produced by Mobile Web Initiative No priorities X over but not a direct mapping

Web Content Accessibility Guidelines (WCAG)

Produced by Web Accessibility Initiative

Versions 1.0 and 2.0

Levels Single-A, Double-A and Triple-A

Mobile Web Best Practices (MWBP)

Produced by Mobile Web Initiative

No priorities

X over but not a direct mapping

See Relationship between WCAG and MWBP

Not my customers... “ Disabled people aren't my target market” “ Blind people aren't intrested in cars” “ My site's too niche for mobile users” “ No one writes a shopping list on their mobile...”

“ Disabled people aren't my target market”

“ Blind people aren't intrested in cars”

“ My site's too niche for mobile users”

“ No one writes a shopping list on their mobile...”

Do you really know your users?

Mobile users 40% of mobile traffic to social networks Niche sites 3bn phones worldwide In China 73m people (29% of all internet users) use only phones ... grew by 45% in the six months to June Check out Opera's State of the Mobile Web Reports

40% of mobile traffic to social networks

Niche sites

3bn phones worldwide

In China 73m people (29% of all internet users) use only phones

... grew by 45% in the six months to June

Check out Opera's State of the Mobile Web Reports

Diverse users Disabled users: Sight, hearing, cognition and mobility Aging and baby boomers Increasing (EU 20%, 2010, 64+)‏ high expectations multiple impairments wealthy International users Mobile to desktop users Check out How people with disabilities use the web

Disabled users:

Sight, hearing, cognition and mobility

Aging and baby boomers

Increasing (EU 20%, 2010, 64+)‏

high expectations

multiple impairments

wealthy

International users

Mobile to desktop users

Check out How people with disabilities use the web

The XXX Factor

Soundsdirty.com image here

image here

Sounds Dirty, codes clean Alt text, LONGDESC and inline descriptions Navigation aids Headings Link text CSS Access keys Alternative formats for XXX Movies

Alt text, LONGDESC and inline descriptions

Navigation aids

Headings

Link text

CSS

Access keys

Alternative formats for XXX Movies

www.thisislondon.com Web accessibility tested using Jaws 8 with Internet Explorer 7 Mobile tested using: walled garden thing Opera Opera Mini Mobile Emulator Shared issues Repeated links Skip links Overuse of images

Web accessibility tested using Jaws 8 with Internet Explorer 7

Mobile tested using:

walled garden thing

Opera Opera Mini Mobile Emulator

Shared issues

Repeated links

Skip links

Overuse of images

Repeated links on a desktop Visual Audio

Repeated links on a mobile Increased scrolling Long links wrap CAPITALISATION Cost Download speeds

Increased scrolling

Long links wrap

CAPITALISATION

Cost

Download speeds

Solutions www.BBC.com mobile view: Skip links Low graphic links Access keys Help links CSS based layout

www.BBC.com mobile view:

Skip links

Low graphic links

Access keys

Help links

CSS based layout

A word about widgets

Widgets Single purpose web apps Separate from browser Available on desktop, mobile or TV Standards compliant W3C Widgets 1.0 Disabled mobile users want widgets too: directions, shopping lists, Twitter you name it...

Single purpose web apps

Separate from browser

Available on desktop, mobile or TV

Standards compliant

W3C Widgets 1.0

Disabled mobile users want widgets too: directions, shopping lists, Twitter you name it...

Opera Widget contest: $10K prizes My wish list...make them accessible, try using WAI ARIA

Testing

Debugging with Opera Dragonfly Debugging is important, remote debugging is hard, an emulator is not the same: DOM inspection CSS inspection Error console See updates on the fly Debugs Pages, mobile and widgets Try it on Opera 9.5+, Tools -> Advanced -> Developer Tools

Debugging is important, remote debugging is hard, an emulator is not the same:

DOM inspection

CSS inspection

Error console

See updates on the fly

Debugs

Pages, mobile and widgets

Try it on Opera 9.5+, Tools -> Advanced -> Developer Tools

One web

One web x platform = one web Web standards the framework of one web Web standards support developers Web standards support site owners Web standards support diverse users

x platform = one web

Web standards the framework of one web

Web standards support developers

Web standards support site owners

Web standards support diverse users

And finally

Never under estimate your user Ouch! Mobile Facebook on your desktop

Thank yo u I am iheni on Twitter , Flickr , Slideshare and my blog www.iheni.com