10 quick tests to check your web page for accessibility

@TouficSbeiti

What is WCAG ?

Web Content Accessibility Guidelines

(WCAG) 2.0 defines how to make Web content more

accessible to people with disabilities. Accessibility

involves a wide range of disabilities, including visual,

auditory, physical, speech, cognitive, language,

learning, and neurological disabilities.

WCAG 2.035 pages

Techniques and Failures for WCAG 2.0

Und236

How to Meet WCAG 2.068

1400

Understanding WCAG 2.0

Page Title

Does the title describe the content or the

purpose of the Web page?

Resize text

Is the content still readable and functional when resized to 200%?

Navigation with keyboard

Can you navigate the page without the

mouse?

Links

Where is the link taking you?

Video

Can you see, hear, read and control

the video?

Close captions

Play /

paus

e

Volume

control

Transcr

ipt

Control

Images

Do all images have text versions?

Web Developer Toolbar

Color

Is there enough contrast between the text and

background? Color alone is used to provide info?

Color Contrast Analyzer

Document structure

Is the page well structured with proper

headings?

Web Developer Toolbar

WAVE Toolbar

Forms

Is the form clear and easy to use?

Web Developer Toolbar

Language

Can you indentify the language in which your content is presented ?

Accessibility Toolbar

WCAG2 AA Success Criterion1.1.1 Non-text Content1.2.1 Audio-only and Video-only (Prerecorded)1.2.2 Captions (Prerecorded)1.2.3 Audio Description or Media Alternative (Prerecorded)1.2.4 Captions (Live)1.2.5 Audio Description (Prerecorded)1.3.1 Info and Relationships1.3.2 Meaningful Sequence1.3.3 Sensory Characteristics1.4.1 Use of Color1.4.2 Audio Control1.4.3 Contrast (Minimum)1.4.4 Resize text1.4.5 Images of Text2.1.1 Keyboard2.1.2 No Keyboard Trap2.2.1 Timing Adjustable2.2.2 Pause, Stop, Hide2.3.1 Three Flashes or Below Threshold

2.4.1 Bypass Blocks2.4.2 Page Titled2.4.3 Focus Order2.4.4 Link Purpose (In Context)2.4.5 Multiple Ways2.4.6 Headings and Labels2.4.7 Focus Visible3.1.1 Language of Page3.1.2 Language of Parts3.2.1 On Focus3.2.3 Consistent Navigation3.2.4 Consistent Identification3.3.1 Error Identification3.3.2 Labels or Instructions3.3.4 Error Prevention (Legal, Financial, Data)4.1.1 Parsing4.1.2 Name, Role, Value

WCAG2 AA Success Criterion1.1.1 Non-text Content1.2.1 Audio-only and Video-only (Prerecorded)1.2.2 Captions (Prerecorded)1.2.3 Audio Description or Media Alternative (Prerecorded)1.2.4 Captions (Live)1.2.5 Audio Description (Prerecorded)1.3.1 Info and Relationships1.3.2 Meaningful Sequence1.3.3 Sensory Characteristics1.4.1 Use of Color1.4.2 Audio Control1.4.3 Contrast (Minimum)1.4.4 Resize text1.4.5 Images of Text2.1.1 Keyboard2.1.2 No Keyboard Trap2.2.1 Timing Adjustable2.2.2 Pause, Stop, Hide2.3.1 Three Flashes or Below Threshold

2.4.1 Bypass Blocks2.4.2 Page Titled2.4.3 Focus Order2.4.4 Link Purpose (In Context)2.4.5 Multiple Ways2.4.6 Headings and Labels2.4.7 Focus Visible3.1.1 Language of Page3.1.2 Language of Parts3.2.1 On Focus3.2.3 Consistent Navigation3.2.4 Consistent Identification3.3.1 Error Identification3.3.2 Labels or Instructions3.3.4 Error Prevention (Legal, Financial, Data)4.1.1 Parsing4.1.2 Name, Role, Value

Success Criterion Tested Page title 2.4.2 Page Titled

Resize text 1.4.4 Resize Text

Navigation with keyboard 2.1.1 Keyboard2.1.2 No Keyboard Trap2.4.3 Focus Order2.4.7 Focus Visible

Images 1.1.1 Non-text Content1.4.5 Images of Text

Document structure 1.3.1 Info and Relationships1.3.2 Meaningful Sequence2.4.6 Headings and Labels

Links 2.4.4 Link Purpose (In Context)

Color contrast 1.4.3 Contrast (Minimum)1.4.1 Use of Color

Code validation 3.1.2 Language of Parts3.1.1 Language of Page

Video 1.2.1 Audio-only and Video-only (Prerecorded)1.2.2 Captions (Prerecorded)1.2.3 Audio Description or Media Alternative (Prerecorded)1.2.4 Captions (Live)1.2.5 Audio Description (Prerecorded)1.4.2 Audio Control2.2.2 Pause, Stop, Hide

Forms3.3.1 Error Identification3.3.2 Labels or Instructions2.4.6 Headings and Labels

Are you using a template ?

• Bypass Blocks• Multiple Ways• Consistent Navigation• Consistent Identification

WCAG2 AA Success Criterion1.1.1 Non-text Content1.2.1 Audio-only and Video-only (Prerecorded)1.2.2 Captions (Prerecorded)1.2.3 Audio Description or Media Alternative (Prerecorded)1.2.4 Captions (Live)1.2.5 Audio Description (Prerecorded)1.3.1 Info and Relationships1.3.2 Meaningful Sequence1.3.3 Sensory Characteristics1.4.1 Use of Color1.4.2 Audio Control1.4.3 Contrast (Minimum)1.4.4 Resize text1.4.5 Images of Text2.1.1 Keyboard2.1.2 No Keyboard Trap2.2.1 Timing Adjustable2.2.2 Pause, Stop, Hide2.3.1 Three Flashes or Below Threshold

2.4.1 Bypass Blocks2.4.2 Page Titled2.4.3 Focus Order2.4.4 Link Purpose (In Context)2.4.5 Multiple Ways2.4.6 Headings and Labels2.4.7 Focus Visible3.1.1 Language of Page3.1.2 Language of Parts3.2.1 On Focus3.2.3 Consistent Navigation3.2.4 Consistent Identification3.3.1 Error Identification3.3.2 Labels or Instructions3.3.4 Error Prevention (Legal, Financial, Data)4.1.1 Parsing4.1.2 Name, Role, Value

Information and relationship

Tables and CSS

Code validation

Is the page coded according to

specifications?

Tools

• Firefox add on:• Web developer tool bar• WAVE accessibility toolbar• Accessibility Evaluation Toolbar• Jim Thatcher favelets

Colour contrast analyserColor Oracle

Thanks

@TouficSbeiti