Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Web Accessibility “ The power of the web is in its universality. Access by everyone regardless of disability is an essenti...
You have no control over  how users access your website. <ul><li>Different browsers </li></ul><ul><li>Different technology...
Why do we need accessible websites? Of that 20% -  57%  have more than one disability. 20%  of the population has some dis...
What is assistive technology? <ul><li>Screen Readers </li></ul><ul><ul><li>and browser plug-ins </li></ul></ul><ul><li>Mag...
Impairments (who needs it?)
Why do they need it? <ul><li>Communicate </li></ul><ul><li>Access Information </li></ul><ul><li>Access Study </li></ul><ul...
Why do they need it? <ul><li>“ If anybody asks me what the Internet means to me, I will tell him without hesitation: To me...
Planning
Strategy planning – upfront <ul><li>Integrated Comms and Operations Contingency Levels, Standards Non-tech alternatives De...
Design
Design Factors <ul><li>Customer-centric </li></ul><ul><li>Task focused </li></ul><ul><li>Clear page hierarchy </li></ul><u...
Provide a Rich Experience
Build
Document Publishing <ul><li>PDF’s are for print  </li></ul><ul><ul><li>inaccessible (not just for the blind) </li></ul></u...
Deliver clean HTML <ul><li>Ensure your Content Management System can deliver standards compliant code </li></ul><ul><li>Se...
Plain English <ul><li>Use Subject-Verb-Object construction by default  </li></ul><ul><li>e.g. “The cat sat on the mat.”, i...
Inverted Pyramid <ul><li>Enables skim-reading </li></ul><ul><li>The most important information is first and the least impo...
Alternative Text – for images <ul><li>Provide meaningful information for people who can’t see the image. </li></ul><ul><li...
Test
Testing <ul><li>Usability </li></ul><ul><li>Technical </li></ul><ul><li>Observational </li></ul><ul><li>User Testing </li>...
Top Website Faults <ul><li>Text alternatives – absent or useless </li></ul><ul><li>Essential public accountability and oth...
In Conclusion - 1 <ul><li>Ten points to remember </li></ul><ul><li>Everyone benefits </li></ul><ul><li>Focus on the user <...
In Conclusion - 2 <ul><li>Ten points to remember </li></ul><ul><li>Don’t leave it to the techies </li></ul><ul><li>Learn a...
Contact Mike <ul><li>Mike Osborne </li></ul><ul><li>AccEase Ltd </li></ul><ul><li>P. 04 934 2821 </li></ul><ul><li>M. 021 ...
Upcoming SlideShare
Loading in …5
×

Web Accessibility - plan,design, build, test an accessible website

1,676 views

Published on

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

Web Accessibility - plan,design, build, test an accessible website

  1. 1. Web Accessibility “ The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.” - Tim Berners-Lee W3C Director and inventor of the World Wide Web Mike Osborne – 24 June 2010
  2. 2. You have no control over how users access your website. <ul><li>Different browsers </li></ul><ul><li>Different technology </li></ul><ul><ul><li>PCs, Macs, Linux, mobile devices </li></ul></ul><ul><ul><li>Different assistive technologies </li></ul></ul><ul><li>Screen sizes </li></ul><ul><li>Screen resolutions </li></ul><ul><li>Mouse/keyboard/voice </li></ul><ul><li>Colour depth </li></ul><ul><li>Images on/off </li></ul><ul><li>Stylesheets on/off </li></ul><ul><li>User stylesheets </li></ul><ul><li>Javascript on/off </li></ul><ul><li>Flash - present or not </li></ul><ul><li>LCD or CRT </li></ul><ul><ul><li>Different monitors & settings </li></ul></ul><ul><li>Ambient light & monitors </li></ul><ul><li>Bandwidth </li></ul>The web is not print.
  3. 3. Why do we need accessible websites? Of that 20% - 57% have more than one disability. 20% of the population has some disability.
  4. 4. What is assistive technology? <ul><li>Screen Readers </li></ul><ul><ul><li>and browser plug-ins </li></ul></ul><ul><li>Magnifiers </li></ul><ul><li>Braille Output </li></ul><ul><li>Speech to text </li></ul><ul><ul><li>Voice commands </li></ul></ul><ul><li>Browser Tools & Capabilities </li></ul>
  5. 5. Impairments (who needs it?)
  6. 6. Why do they need it? <ul><li>Communicate </li></ul><ul><li>Access Information </li></ul><ul><li>Access Study </li></ul><ul><li>Access Entertainment </li></ul><ul><li>Access Work </li></ul>The internet offers independence and freedom
  7. 7. Why do they need it? <ul><li>“ If anybody asks me what the Internet means to me, I will tell him without hesitation: To me ( a quadriplegic) the Internet occupies the most important part in my life. It is my feet that can take me to any part of the world; it is my hands which help me accomplish my work; it is my best friend – it gives my life meaning.” </li></ul><ul><li>- Dr. ZhangXu, practising orthopaedic surgeon (via the Internet), Anshan, China </li></ul>
  8. 8. Planning
  9. 9. Strategy planning – upfront <ul><li>Integrated Comms and Operations Contingency Levels, Standards Non-tech alternatives Determine site purpose and audiences </li></ul>
  10. 10. Design
  11. 11. Design Factors <ul><li>Customer-centric </li></ul><ul><li>Task focused </li></ul><ul><li>Clear page hierarchy </li></ul><ul><li>Intuitive navigation </li></ul><ul><li>Simple pages </li></ul><ul><li>Legible type </li></ul><ul><li>Adequate contrast </li></ul>
  12. 12. Provide a Rich Experience
  13. 13. Build
  14. 14. Document Publishing <ul><li>PDF’s are for print </li></ul><ul><ul><li>inaccessible (not just for the blind) </li></ul></ul><ul><ul><ul><li>e.g. low vision, low bandwidth </li></ul></ul></ul><ul><ul><li>magnification </li></ul></ul><ul><ul><ul><li>horizontal scrolling </li></ul></ul></ul><ul><ul><li>now a lot easier to convert Word to HTML </li></ul></ul><ul><li>Multiple Fonts </li></ul><ul><li>Spreadsheets </li></ul>
  15. 15. Deliver clean HTML <ul><li>Ensure your Content Management System can deliver standards compliant code </li></ul><ul><li>Select or build an accessible template </li></ul><ul><ul><li>Ensure skip to content & navigation links built in </li></ul></ul><ul><li>Follow HTML syntax </li></ul><ul><ul><li>Don’t use <TABLE> for layout, use CSS </li></ul></ul><ul><ul><li>Use <Hn> headings to convey page structure </li></ul></ul>
  16. 16. Plain English <ul><li>Use Subject-Verb-Object construction by default </li></ul><ul><li>e.g. “The cat sat on the mat.”, instead of “The mat was sat on by the cat.” </li></ul><ul><li>Avoid vocabulary that a good portion of your audience will stumble over </li></ul><ul><li>Use verbs instead of &quot;nounisms” </li></ul><ul><ul><li>Introduce rather than to make an introduction </li></ul></ul><ul><li>Use active voice instead of passive </li></ul><ul><li>Avoid overly long sentences </li></ul>
  17. 17. Inverted Pyramid <ul><li>Enables skim-reading </li></ul><ul><li>The most important information is first and the least important is last </li></ul><ul><ul><li>Applies to the page and to each paragraph </li></ul></ul><ul><li>Structure: </li></ul><ul><li>Key Message </li></ul><ul><ul><li>Supporting Point </li></ul></ul><ul><ul><li>Supporting Point </li></ul></ul>
  18. 18. Alternative Text – for images <ul><li>Provide meaningful information for people who can’t see the image. </li></ul><ul><li>They need to present the same information that is conveyed by the image including complex images such as charts and graphs. </li></ul><ul><li>Essential when text is delivered as an image. </li></ul><ul><li>Purely decorative images need empty “” alts so screen readers will ignore them. </li></ul><ul><li>Alts should close with a full-stop and a space. </li></ul><ul><li>Where visible they can also be useful for sighted people if images are switched off </li></ul>
  19. 19. Test
  20. 20. Testing <ul><li>Usability </li></ul><ul><li>Technical </li></ul><ul><li>Observational </li></ul><ul><li>User Testing </li></ul>
  21. 21. Top Website Faults <ul><li>Text alternatives – absent or useless </li></ul><ul><li>Essential public accountability and other important documents on the site in pdf only </li></ul><ul><li>Poor colour contrast </li></ul><ul><li>Poor enlargement </li></ul><ul><li>Complex pages and language </li></ul><ul><li>Small navigation points </li></ul><ul><li>Accessibility statements focused on compliance rather than an understanding of an audience </li></ul><ul><li>Overly busy (home) pages </li></ul>
  22. 22. In Conclusion - 1 <ul><li>Ten points to remember </li></ul><ul><li>Everyone benefits </li></ul><ul><li>Focus on the user </li></ul><ul><li>Decide on the level of accessibility </li></ul><ul><li>Get buy-in from decision-makers </li></ul><ul><li>Link to business planning </li></ul>
  23. 23. In Conclusion - 2 <ul><li>Ten points to remember </li></ul><ul><li>Don’t leave it to the techies </li></ul><ul><li>Learn about accessibility </li></ul><ul><li>Plan for accessibility </li></ul><ul><li>Insist on standards and best-practice </li></ul><ul><li>Test for usability & accessibility </li></ul>
  24. 24. Contact Mike <ul><li>Mike Osborne </li></ul><ul><li>AccEase Ltd </li></ul><ul><li>P. 04 934 2821 </li></ul><ul><li>M. 021 675 010 </li></ul><ul><li>E. [email_address] </li></ul><ul><li>W. www.AccEase.com </li></ul><ul><li>B. www.LowVisionary.com </li></ul>

×