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?
Nächste SlideShare
Wird geladen in …5
×

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

650 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

×