Have you got the X Factor? Building accessible and mobile websites


Published on

A walk through who your diverse and mobile users are and what they are viewing online and via mobiles, cross over of guidelines, issues and examples.

Published in: Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Web Evangelist Opera x browser devices W3C WAI education and outreach Looking at the cross overs between web and mobile Also the focuns of my blog Also co-lead of WaSP ILG
  • Have you got the X Factor? Building accessible and mobile websites

    1. Have you got the X Factor? Building websites for mobile and disabled users Henny Swan Opera Software
    2. The X Factor <ul><ul><li>X Platform </li></ul></ul><ul><ul><li>X Widgets </li></ul></ul><ul><ul><li>X over of experiences </li></ul></ul><ul><ul><li>X over of users </li></ul></ul><ul><ul><li>X over of guidelines </li></ul></ul><ul><ul><li>See Barriers to mobile users and people with disabilities </li></ul></ul>
    3. WCAG meets MWBP <ul><li>Web Content Accessibility Guidelines (WCAG) </li></ul><ul><ul><li>Produced by Web Accessibility Initiative </li></ul></ul><ul><ul><li>Versions 1.0 and 2.0 </li></ul></ul><ul><ul><li>Levels Single-A, Double-A and Triple-A </li></ul></ul><ul><li>Mobile Web Best Practices (MWBP) </li></ul><ul><ul><li>Produced by Mobile Web Initiative </li></ul></ul><ul><ul><li>No priorities </li></ul></ul><ul><li>X over but not a direct mapping </li></ul>
    4. See Relationship between WCAG and MWBP
    5. Not my customers... <ul><li>“ Disabled people aren't my target market” </li></ul><ul><li>“ Blind people aren't intrested in cars” </li></ul><ul><li>“ My site's too niche for mobile users” </li></ul><ul><li>“ No one writes a shopping list on their mobile...” </li></ul>
    6. Do you really know your users?
    7. Mobile users <ul><li>40% of mobile traffic to social networks </li></ul><ul><li>Niche sites </li></ul><ul><li>3bn phones worldwide </li></ul><ul><li>In China 73m people (29% of all internet users) use only phones </li></ul><ul><li>... grew by 45% in the six months to June </li></ul><ul><li>Check out Opera's State of the Mobile Web Reports </li></ul>
    9. Diverse users <ul><li>Disabled users: </li></ul><ul><ul><li>Sight, hearing, cognition and mobility </li></ul></ul><ul><li>Aging and baby boomers </li></ul><ul><ul><li>Increasing (EU 20%, 2010, 64+)‏ </li></ul></ul><ul><ul><li>high expectations </li></ul></ul><ul><ul><li>multiple impairments </li></ul></ul><ul><ul><li>wealthy </li></ul></ul><ul><li>International users </li></ul><ul><li>Mobile to desktop users </li></ul><ul><li>Check out How people with disabilities use the web </li></ul>
    10. The XXX Factor
    11. Soundsdirty.com <ul><li>image here </li></ul>
    12. Sounds Dirty, codes clean <ul><li>Alt text, LONGDESC and inline descriptions </li></ul><ul><li>Navigation aids </li></ul><ul><li>Headings </li></ul><ul><li>Link text </li></ul><ul><li>CSS </li></ul><ul><li>Access keys </li></ul><ul><li>Alternative formats for XXX Movies </li></ul>
    13. www.thisislondon.com <ul><li>Web accessibility tested using Jaws 8 with Internet Explorer 7 </li></ul><ul><li>Mobile tested using: </li></ul><ul><ul><li>walled garden thing </li></ul></ul><ul><ul><li>Opera Opera Mini Mobile Emulator </li></ul></ul><ul><li>Shared issues </li></ul><ul><ul><li>Repeated links </li></ul></ul><ul><ul><li>Skip links </li></ul></ul><ul><ul><li>Overuse of images </li></ul></ul>
    14. Repeated links on a desktop Visual Audio
    15. Repeated links on a mobile <ul><li>Increased scrolling </li></ul><ul><li>Long links wrap </li></ul><ul><li>CAPITALISATION </li></ul><ul><li>Cost </li></ul><ul><li>Download speeds </li></ul>
    16. Solutions <ul><li>www.BBC.com mobile view: </li></ul><ul><li>Skip links </li></ul><ul><li>Low graphic links </li></ul><ul><li>Access keys </li></ul><ul><li>Help links </li></ul><ul><li>CSS based layout </li></ul>
    17. A word about widgets
    18. Widgets <ul><li>Single purpose web apps </li></ul><ul><li>Separate from browser </li></ul><ul><li>Available on desktop, mobile or TV </li></ul><ul><li>Standards compliant </li></ul><ul><li>W3C Widgets 1.0 </li></ul><ul><li>Disabled mobile users want widgets too: directions, shopping lists, Twitter you name it... </li></ul>
    19. Opera Widget contest: $10K prizes My wish list...make them accessible, try using WAI ARIA
    20. Testing
    21. Debugging with Opera Dragonfly <ul><li>Debugging is important, remote debugging is hard, an emulator is not the same: </li></ul><ul><ul><li>DOM inspection </li></ul></ul><ul><ul><li>CSS inspection </li></ul></ul><ul><ul><li>Error console </li></ul></ul><ul><ul><li>See updates on the fly </li></ul></ul><ul><li>Debugs </li></ul><ul><ul><li>Pages, mobile and widgets </li></ul></ul><ul><li>Try it on Opera 9.5+, Tools -> Advanced -> Developer Tools </li></ul>
    22. One web
    23. One web <ul><li>x platform = one web </li></ul><ul><li>Web standards the framework of one web </li></ul><ul><ul><li>Web standards support developers </li></ul></ul><ul><ul><li>Web standards support site owners </li></ul></ul><ul><ul><li>Web standards support diverse users </li></ul></ul>
    24. And finally
    25. Never under estimate your user Ouch! Mobile Facebook on your desktop
    26. Thank yo u I am iheni on Twitter , Flickr , Slideshare and my blog www.iheni.com