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.
Getting Started with Web Accessibility – Who, What & Why Aarhus. November 4, 2015
Anne Thyme Accessibility Product Owner Siteimprove, siteimprove.dk Lars Holm Sørensen Accessibility Consultant Diversa, di...
The next 45 minutes… • Intro What is web accessibility? • Live demonstration Problems users meet when your website is inac...
What is web accessibility? ”The practice of making websites usable by people of all abilities and disabilities.” http://en...
20%
285.000 mobility/motor impairments
7% dyslexic 120.000 brain damage 50.000 developmental disability
65.000 severe visual impairment 8% of men color blind
1.000.000 aged 65+
You and me?
Problems users meet when your website is inaccessible Live demonstration
Tips & Tricks: 5 good places to start Extra bonus: Better SEO too!!!
Tip 1: Use headings
Headings • Heading should summarize content • Use Styles - • Do NOT use bold, big font size etc. • Structure headings in l...
Heading Structure Example Heading 1 Heading 2 Heading 3 Beagle Dogs Golden Retriewer Chihuahua Persian Pets Cats Maine Coo...
Tip 2: Make sure pages have titles
Page title
Page titles • Describe content • Use keywords • Unique titles
Tip 3: Write good link texts
Link texts • Link texts should make sense on their own • AVOID using ”read more”, ”click here”, ”1”, ”2”, ”3” etc. • Use k...
Tip 4: Provide alternatives for images
Alternatives for images • Images must always have an alt attribute • Title can never substitute alt attribute • 3 types of...
Image type 1: Functional • Often icons or image links • Alt text should describe function - i.e. ”Search” not ”Magnifying ...
Image type 2: Informative • Contains important information, e.g. labels, manuals, moods • Descriptive alt text - if the sa...
Image type 3: Decorative • Only serving a decorative purpose, e.g. • layout elements (lines, arrows, bullets etc.) • image...
Tip 5: Use semantic markup
Semantic markup • Headings • Lists • Paragraphs • Tables (incl. table headers) • Proper use of <strong>, <em>, <blockquote...
CMS Publishing Test, test, test… Accessible website Policy ?WCAG 2.0 Web Content Accessibility Guidelines (Level AA)
Questions?
Ressources • Web Accessibility definition: Wikipedia, http://en.wikipedia.org/wiki/Web_accessibility • Mobility impairment...
Anne Thyme & Lars H. Sørensen: Getting started with web accessibility – Who, What and Why?
Upcoming SlideShare
Loading in …5
×

Anne Thyme & Lars H. Sørensen: Getting started with web accessibility – Who, What and Why?

708 views

Published on

Up to 20% of all internet users experience accessibility issues when browsing the web. Accommodating these users is not only the “right” thing to do – it is also good for business. With an aging population, accessibility is going to play an even bigger part in the web experience in the future. Is your web organization up for this challenge?

In this session Anne Thyme, Accessibility Product Owner with Siteimprove, and Lars Holm Sørensen, Accessibility Consultant with Diversa, are going to show you why accessibility matters to your users. Lars Holm Sørensen, who is almost blind himself, will show you how he browses the web using a screen reader that reads websites aloud. You will get to experience firsthand what good and bad accessibility means in real life, and get tips & tricks for quick fixes for your website, that will result in better accessibility, while at the same time improving your SEO.

Published in: Internet
no profile picture user

  • Be the first to comment

  • Be the first to like this

Anne Thyme & Lars H. Sørensen: Getting started with web accessibility – Who, What and Why?

  1. 1. Getting Started with Web Accessibility – Who, What & Why Aarhus. November 4, 2015
  2. 2. Anne Thyme Accessibility Product Owner Siteimprove, siteimprove.dk Lars Holm Sørensen Accessibility Consultant Diversa, diversa.dk
  3. 3. The next 45 minutes… • Intro What is web accessibility? • Live demonstration Problems users meet when your website is inaccessible • Tips & Tricks 5 good places to start • Q&A
  4. 4. What is web accessibility? ”The practice of making websites usable by people of all abilities and disabilities.” http://en.wikipedia.org/wiki/Web_accessibility
  5. 5. 20%
  6. 6. 285.000 mobility/motor impairments
  7. 7. 7% dyslexic 120.000 brain damage 50.000 developmental disability
  8. 8. 65.000 severe visual impairment 8% of men color blind
  9. 9. 1.000.000 aged 65+
  10. 10. You and me?
  11. 11. Problems users meet when your website is inaccessible Live demonstration
  12. 12. Tips & Tricks: 5 good places to start Extra bonus: Better SEO too!!!
  13. 13. Tip 1: Use headings
  14. 14. Headings • Heading should summarize content • Use Styles - • Do NOT use bold, big font size etc. • Structure headings in levels (H1, H2, …, H6)
  15. 15. Heading Structure Example Heading 1 Heading 2 Heading 3 Beagle Dogs Golden Retriewer Chihuahua Persian Pets Cats Maine Coon Siamese Gold fish Fish Angel fish Clown fish
  16. 16. Tip 2: Make sure pages have titles
  17. 17. Page title
  18. 18. Page titles • Describe content • Use keywords • Unique titles
  19. 19. Tip 3: Write good link texts
  20. 20. Link texts • Link texts should make sense on their own • AVOID using ”read more”, ”click here”, ”1”, ”2”, ”3” etc. • Use keywords as links
  21. 21. Tip 4: Provide alternatives for images
  22. 22. Alternatives for images • Images must always have an alt attribute • Title can never substitute alt attribute • 3 types of images: Function determines content of alt attribute ”title”
  23. 23. Image type 1: Functional • Often icons or image links • Alt text should describe function - i.e. ”Search” not ”Magnifying glass”
  24. 24. Image type 2: Informative • Contains important information, e.g. labels, manuals, moods • Descriptive alt text - if the same information is not already given in the surrounding text
  25. 25. Image type 3: Decorative • Only serving a decorative purpose, e.g. • layout elements (lines, arrows, bullets etc.) • images used solely as decoration • Always empty alt attribute
  26. 26. Tip 5: Use semantic markup
  27. 27. Semantic markup • Headings • Lists • Paragraphs • Tables (incl. table headers) • Proper use of <strong>, <em>, <blockquote> • Use HTML for structure, CSS for presentation
  28. 28. CMS Publishing Test, test, test… Accessible website Policy ?WCAG 2.0 Web Content Accessibility Guidelines (Level AA)
  29. 29. Questions?
  30. 30. Ressources • Web Accessibility definition: Wikipedia, http://en.wikipedia.org/wiki/Web_accessibility • Mobility impairments in Denmark: Det Nationale Forskningscenter for Velfærd, http://www.sfi.dk/rapportoplysninger- 4681.aspx?Action=1&NewsId=3793&PID=9267 • Dyslexics in Denmark: Ordblindeforeningen, https://www.ordblindeforeningen.dk/definitioner.asp • Brain damage in Denmark: Hjernesagen, http://www.hjernesagen.dk/om- hjerneskader/tal-og-fakta-om-hjerneskader • Developmental impairments in Denmark: Socialstyrelsen, http://socialstyrelsen.dk/handicap/udviklingshaemning/om- udviklingshaemning/udviklingshaemning-i-tal • Visual impairments in Denmark: Instituttet for Blinde og Svagsynede, http://www.ibos.dk/om-syn/blinde-og-svagsynede-i-tal.html • Color blind in Denmark: Netdoktor.dk, http://www.netdoktor.dk/ojne/farveblindhed.htm • Senior citizens in Denmark: Danmarks Statistik, http://www.statistikbanken.dk

×