Have you got the X Factor? Building websites for mobile and disabled users

Henny SwanOpera 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

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

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

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

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

The XXX Factor

Soundsdirty.com

• 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

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

Repeated links on a desktop

Visual Audio

Repeated links on a mobile

• 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

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...

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

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

And finally

Never under estimate your user

Ouch! Mobile Facebook on your desktop

Thank you

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