Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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 ...
Prochain SlideShare
Chargement dans…5
×

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

1 722 vues

Publié le

Publié dans : Design, Technologie
  • Soyez le premier à commenter

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>

×