anne thyme & lars h. sørensen: getting started with web accessibility – who, what and why?
TRANSCRIPT
![Page 1: Anne Thyme & Lars H. Sørensen: Getting started with web accessibility – Who, What and Why?](https://reader035.vdocument.in/reader035/viewer/2022062821/589c85181a28abc2258b7035/html5/thumbnails/1.jpg)
Getting Started with Web Accessibility
– Who, What & WhyAarhus. November 4, 2015
![Page 2: Anne Thyme & Lars H. Sørensen: Getting started with web accessibility – Who, What and Why?](https://reader035.vdocument.in/reader035/viewer/2022062821/589c85181a28abc2258b7035/html5/thumbnails/2.jpg)
Anne ThymeAccessibility Product Owner
Siteimprove, siteimprove.dk
Lars Holm SørensenAccessibility Consultant
Diversa, diversa.dk
![Page 3: Anne Thyme & Lars H. Sørensen: Getting started with web accessibility – Who, What and Why?](https://reader035.vdocument.in/reader035/viewer/2022062821/589c85181a28abc2258b7035/html5/thumbnails/3.jpg)
The next 45 minutes…
• IntroWhat is web accessibility?
• Live demonstrationProblems users meet when your website is inaccessible
• Tips & Tricks5 good places to start
• Q&A
![Page 4: Anne Thyme & Lars H. Sørensen: Getting started with web accessibility – Who, What and Why?](https://reader035.vdocument.in/reader035/viewer/2022062821/589c85181a28abc2258b7035/html5/thumbnails/4.jpg)
What is web accessibility?
”The practice of making websites usable by people of all abilities and disabilities.”
http://en.wikipedia.org/wiki/Web_accessibility
![Page 5: Anne Thyme & Lars H. Sørensen: Getting started with web accessibility – Who, What and Why?](https://reader035.vdocument.in/reader035/viewer/2022062821/589c85181a28abc2258b7035/html5/thumbnails/5.jpg)
20%
![Page 6: Anne Thyme & Lars H. Sørensen: Getting started with web accessibility – Who, What and Why?](https://reader035.vdocument.in/reader035/viewer/2022062821/589c85181a28abc2258b7035/html5/thumbnails/6.jpg)
![Page 7: Anne Thyme & Lars H. Sørensen: Getting started with web accessibility – Who, What and Why?](https://reader035.vdocument.in/reader035/viewer/2022062821/589c85181a28abc2258b7035/html5/thumbnails/7.jpg)
285.000mobility/motor impairments
![Page 8: Anne Thyme & Lars H. Sørensen: Getting started with web accessibility – Who, What and Why?](https://reader035.vdocument.in/reader035/viewer/2022062821/589c85181a28abc2258b7035/html5/thumbnails/8.jpg)
7%dyslexic
120.000brain damage
50.000developmental disability
![Page 9: Anne Thyme & Lars H. Sørensen: Getting started with web accessibility – Who, What and Why?](https://reader035.vdocument.in/reader035/viewer/2022062821/589c85181a28abc2258b7035/html5/thumbnails/9.jpg)
65.000 severe visual impairment
8% of mencolor blind
![Page 10: Anne Thyme & Lars H. Sørensen: Getting started with web accessibility – Who, What and Why?](https://reader035.vdocument.in/reader035/viewer/2022062821/589c85181a28abc2258b7035/html5/thumbnails/10.jpg)
1.000.000aged 65+
![Page 11: Anne Thyme & Lars H. Sørensen: Getting started with web accessibility – Who, What and Why?](https://reader035.vdocument.in/reader035/viewer/2022062821/589c85181a28abc2258b7035/html5/thumbnails/11.jpg)
You and me?
![Page 12: Anne Thyme & Lars H. Sørensen: Getting started with web accessibility – Who, What and Why?](https://reader035.vdocument.in/reader035/viewer/2022062821/589c85181a28abc2258b7035/html5/thumbnails/12.jpg)
Problems users meetwhen your website is inaccessibleLive demonstration
![Page 13: Anne Thyme & Lars H. Sørensen: Getting started with web accessibility – Who, What and Why?](https://reader035.vdocument.in/reader035/viewer/2022062821/589c85181a28abc2258b7035/html5/thumbnails/13.jpg)
Tips & Tricks: 5 good places to startExtra bonus: Better SEO too!!!
![Page 14: Anne Thyme & Lars H. Sørensen: Getting started with web accessibility – Who, What and Why?](https://reader035.vdocument.in/reader035/viewer/2022062821/589c85181a28abc2258b7035/html5/thumbnails/14.jpg)
Tip 1: Use headings
![Page 15: Anne Thyme & Lars H. Sørensen: Getting started with web accessibility – Who, What and Why?](https://reader035.vdocument.in/reader035/viewer/2022062821/589c85181a28abc2258b7035/html5/thumbnails/15.jpg)
Headings
• Heading should summarize content
• Use Styles -• Do NOT use bold, big font size etc.
• Structure headings in levels (H1, H2, …, H6)
![Page 16: Anne Thyme & Lars H. Sørensen: Getting started with web accessibility – Who, What and Why?](https://reader035.vdocument.in/reader035/viewer/2022062821/589c85181a28abc2258b7035/html5/thumbnails/16.jpg)
Heading Structure Example
Heading 1 Heading 2 Heading 3Beagle
Dogs Golden RetriewerChihuahua
PersianPets Cats Maine Coon
Siamese
Gold fishFish Angel fish
Clown fish
![Page 17: Anne Thyme & Lars H. Sørensen: Getting started with web accessibility – Who, What and Why?](https://reader035.vdocument.in/reader035/viewer/2022062821/589c85181a28abc2258b7035/html5/thumbnails/17.jpg)
Tip 2: Make sure pages have titles
![Page 18: Anne Thyme & Lars H. Sørensen: Getting started with web accessibility – Who, What and Why?](https://reader035.vdocument.in/reader035/viewer/2022062821/589c85181a28abc2258b7035/html5/thumbnails/18.jpg)
Page title
![Page 19: Anne Thyme & Lars H. Sørensen: Getting started with web accessibility – Who, What and Why?](https://reader035.vdocument.in/reader035/viewer/2022062821/589c85181a28abc2258b7035/html5/thumbnails/19.jpg)
Page titles
• Describe content
• Use keywords
• Unique titles
![Page 20: Anne Thyme & Lars H. Sørensen: Getting started with web accessibility – Who, What and Why?](https://reader035.vdocument.in/reader035/viewer/2022062821/589c85181a28abc2258b7035/html5/thumbnails/20.jpg)
Tip 3: Write good link texts
![Page 21: Anne Thyme & Lars H. Sørensen: Getting started with web accessibility – Who, What and Why?](https://reader035.vdocument.in/reader035/viewer/2022062821/589c85181a28abc2258b7035/html5/thumbnails/21.jpg)
Link texts
• Link texts should make sense on their own
• AVOID using ”read more”, ”click here”, ”1”, ”2”, ”3” etc.
• Use keywords as links
![Page 22: Anne Thyme & Lars H. Sørensen: Getting started with web accessibility – Who, What and Why?](https://reader035.vdocument.in/reader035/viewer/2022062821/589c85181a28abc2258b7035/html5/thumbnails/22.jpg)
Tip 4: Provide alternatives for images
![Page 23: Anne Thyme & Lars H. Sørensen: Getting started with web accessibility – Who, What and Why?](https://reader035.vdocument.in/reader035/viewer/2022062821/589c85181a28abc2258b7035/html5/thumbnails/23.jpg)
Alternatives for images
• Images must alwayshave an alt attribute
• Title can never substitute alt attribute
• 3 types of images: Function determinescontent of alt attribute
”title”
![Page 24: Anne Thyme & Lars H. Sørensen: Getting started with web accessibility – Who, What and Why?](https://reader035.vdocument.in/reader035/viewer/2022062821/589c85181a28abc2258b7035/html5/thumbnails/24.jpg)
Image type 1: Functional
• Often icons or image links
• Alt text should describe function - i.e. ”Search” not ”Magnifying glass”
![Page 25: Anne Thyme & Lars H. Sørensen: Getting started with web accessibility – Who, What and Why?](https://reader035.vdocument.in/reader035/viewer/2022062821/589c85181a28abc2258b7035/html5/thumbnails/25.jpg)
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
![Page 26: Anne Thyme & Lars H. Sørensen: Getting started with web accessibility – Who, What and Why?](https://reader035.vdocument.in/reader035/viewer/2022062821/589c85181a28abc2258b7035/html5/thumbnails/26.jpg)
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
![Page 27: Anne Thyme & Lars H. Sørensen: Getting started with web accessibility – Who, What and Why?](https://reader035.vdocument.in/reader035/viewer/2022062821/589c85181a28abc2258b7035/html5/thumbnails/27.jpg)
Tip 5: Use semanticmarkup
![Page 28: Anne Thyme & Lars H. Sørensen: Getting started with web accessibility – Who, What and Why?](https://reader035.vdocument.in/reader035/viewer/2022062821/589c85181a28abc2258b7035/html5/thumbnails/28.jpg)
Semantic markup
• Headings• Lists• Paragraphs• Tables (incl. table headers)• Proper use of <strong>, <em>, <blockquote>
• Use HTML for structure, CSS for presentation
![Page 29: Anne Thyme & Lars H. Sørensen: Getting started with web accessibility – Who, What and Why?](https://reader035.vdocument.in/reader035/viewer/2022062821/589c85181a28abc2258b7035/html5/thumbnails/29.jpg)
CMS
Publishing
Test, test, test…
Accessiblewebsite
Policy
?WCAG 2.0Web Content Accessibility Guidelines (Level AA)
![Page 30: Anne Thyme & Lars H. Sørensen: Getting started with web accessibility – Who, What and Why?](https://reader035.vdocument.in/reader035/viewer/2022062821/589c85181a28abc2258b7035/html5/thumbnails/30.jpg)
Questions?
![Page 31: Anne Thyme & Lars H. Sørensen: Getting started with web accessibility – Who, What and Why?](https://reader035.vdocument.in/reader035/viewer/2022062821/589c85181a28abc2258b7035/html5/thumbnails/31.jpg)
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