Getting Started with Web Accessibility
– Who, What & WhyAarhus. November 4, 2015
Anne ThymeAccessibility Product Owner
Siteimprove, siteimprove.dk
Lars Holm SørensenAccessibility Consultant
Diversa, diversa.dk
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
What is web accessibility?
”The practice of making websites usable by people of all abilities and disabilities.”
http://en.wikipedia.org/wiki/Web_accessibility
20%
285.000mobility/motor impairments
7%dyslexic
120.000brain damage
50.000developmental disability
65.000 severe visual impairment
8% of mencolor blind
1.000.000aged 65+
You and me?
Problems users meetwhen your website is inaccessibleLive demonstration
Tips & Tricks: 5 good places to startExtra 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 levels (H1, H2, …, H6)
Heading Structure Example
Heading 1 Heading 2 Heading 3Beagle
Dogs Golden RetriewerChihuahua
PersianPets Cats Maine Coon
Siamese
Gold fishFish Angel fish
Clown fish
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 keywords as links
Tip 4: Provide alternatives for images
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”
Image type 1: Functional
• Often icons or image links
• Alt text should describe function - i.e. ”Search” not ”Magnifying glass”
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
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
Tip 5: Use semanticmarkup
Semantic markup
• Headings• Lists• Paragraphs• Tables (incl. table headers)• Proper use of <strong>, <em>, <blockquote>
• Use HTML for structure, CSS for presentation
CMS
Publishing
Test, test, test…
Accessiblewebsite
Policy
?WCAG 2.0Web Content Accessibility Guidelines (Level AA)
Questions?
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