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