1.
Getting Started with
Web Accessibility
– Who, What & Why
Aarhus. November 4, 2015

2.
Anne Thyme
Accessibility Product Owner
Siteimprove, siteimprove.dk
Lars Holm Sørensen
Accessibility Consultant
Diversa, diversa.dk

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.
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.
20%

6.
285.000
mobility/motor impairments

7.
7%
dyslexic
120.000
brain damage
50.000
developmental disability

8.
65.000
severe visual impairment
8% of men
color blind

9.
1.000.000
aged 65+

10.
You and me?

11.
Problems users meet
when your website is
inaccessible
Live demonstration

12.
Tips & Tricks:
5 good places to start
Extra bonus: Better SEO too!!!

13.
Tip 1: Use headings

14.
Headings
• Heading should summarize content
• Use Styles -
• Do NOT use bold, big font size etc.
• Structure headings in levels (H1, H2, …, H6)

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.
Tip 2: Make sure pages
have titles

17.
Page title

18.
Page titles
• Describe content
• Use keywords
• Unique titles

19.
Tip 3: Write good link
texts

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.
Tip 4: Provide
alternatives for images

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.
Image type 1: Functional
• Often icons or image links
• Alt text should describe function - i.e.
”Search” not ”Magnifying glass”

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.
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.
Tip 5: Use semantic
markup

27.
Semantic markup
• Headings
• Lists
• Paragraphs
• Tables (incl. table headers)
• Proper use of <strong>, <em>, <blockquote>
• Use HTML for structure, CSS for
presentation

28.
CMS
Publishing
Test, test, test…
Accessible
website
Policy
?WCAG 2.0
Web Content Accessibility
Guidelines (Level AA)

29.
Questions?

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