10 quick tests to enhance your site’s accessibility
Post on 15-Apr-2017
348 Views
Preview:
Transcript
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
top related