UNDERSTANDING WCAG 2.0
SRINIVASU CHAKRAVARTHULA

IN THIS SESSION…
•Overview
•Interpretation
WCAG
2.0

OVERVIEW
• Web Content Accessibility Guidelines
• W3C candid recommendation – 11th December, 2008
• Covers recommendations to make web accessible to all
• Developed through W3C Process with individuals and organizations (WCAG – Working Group)
• WCAG 2.1 is currently a public working draft

WCAG 2.0 LAYERS
Principles
• At the top
• Perceivable
• Operable
• Understandable
• Robust
Guidelines
• 12 Guidelines
• Basic goals to authors
• Not Testable
• Help Understand
Success Criterion and
better implement
Techniques
Success Criterion
• 63 Success Criterions
• 3 Levels – A, AA & AAA
• Testable

WHAT IS A, AA & AAA
• A = Minimum
• AA = Recommended level and should be
achieved
• AAA = Maximum Level of conformance

INTERPRETATION
WCAG 2.0 PRINCIPLE 1 – PERCEIVABLE

1.1.1 NON TEXT CONTENT (A)
• Images do uses <alt> attribute or <longdisc>
• Alt text is descriptive
• Complex graphs do have a link to a page that has description
• Functional images like links, buttons do have alt text
• Decorative images must have “null” alt attribute
• CAPTCHA hass an alternative

1.2.1 AUDIO-ONLY AND VIDEO-ONLY (A)
• Helps users with vision impariment and hard of hearing
• Pre-recorded audio-only -> A document with story and dialogues
• Pre-recorded Video-only -> An audio track

1.2.2 CAPTIONS – PRERECORDED (A)
• Captions are provided for all prerecorded audio content in synchronized media

1.2.3 AUDIO DESCRIPTION OR MEDIA ALTERNATIVE
• An alternative for time-based media or audio description of the prerecorded video content is provided
for synchronized media,

1.3.1 INFO & RLEATIONSHIPS (A)
• Semantics
• Structure
• Forms
• Relationships
• Tables

1.3.2 MEANINGFUL SEQUENCE (A)
• Reading order

1.3.3 SENSORY CHARACTERSTICS
Shape alone
Size alone
Location alone
Sound alone
Orientation alone

1.4.1 USE OF COLOR
• Do NOT provide information only by means of color alone
• E.g. Green button indicates pass, Red button indicates Fail

1.4.2 AUDIO CONTROLS
• Provide Play, Pause, Stop etc., controls, if an audio plays automatically for more than 3 seconds

1.4.3 CONTRAST MINIMUM (A)
• Regular Text: 4.5:1
• Large Text: 3:1

1.4.4 RESIZE TEXT (AA)
• User should be able to resize font with browser zoom / options provided by AT

1.4.5 IMAGES OF TEXT (AA)
• Where possible, use natural text to convey information
• Do NOT use images of text
• Exception: logo types

INTERPRETATION
WCAG 2.0 PRINCIPLE 2: OPERABLE

2.1.1 KEYBOARD (A)
• All functionality must be available via keyboard
• Links
• Buttons
• Menus
• Custom widgets

2.1.2 NO KEYBOARD TRAP (A)
• Ensure there is no keyboard trap

2.2.1 TIMING ADJUSTABLE (A)
• No time limit would be advisable
• If there is a time limit, user should be able to extend

2.2.2 PAUSE, STOP, HIDE (A)
• Moving content
• Blinking content
• Scrolling
• Auto-updation of content

2.3.1 THREE FLASHES OR BELOW THRESHOLD
• Flashing content should not be used

2.4.1 BYPASS BLOCKS (A)
• Skip to main content
• Accurate heading structure
• ARIA land marks

2.4.2 PAGE TITLED (A)
• Unique and meaningful page title

2.4.3 FOCUS ORDER (A)
• Modals
• All focusable elements
• On collapsing an element, return focus to triggered element

2.4.4 LINK PURPOSE (IN CONTEXT) (A)
• Avoid links like Click here, read more, more as independent links
• Alternative: use aria-describeby or <title> attribute
• Be cautious while using <title> attribute

2.4.5 MULTIPLE WAYS (AA)
• Search
• Sitemap
• Breadcrumb navigation

2.4.6 HEADINGS AND LABELS (AA)
• Section headings
• Visible labels
• Placeholder text cannot be a lable – floating label can be an option

2.4.7 FOCUS VISIBLE (AA)
• Never use outline:none
• Don’t like browser focus indicator, design a custom focus indicator

INTERPRETATION
WCAG 2.0 PRINCIPLE 3: UNDERSTANDABLE

3.1.1 LANGUAGE OF PAGE (A)
• Use <lang> attribute to define language of document

3.1.2 LANGAUGE OF PARTS (AA)
• If provided, Assistive technologies detect the same and switch to respective language

3.2.1 AND 3.2.2. CHANGE IN CONTEXT (AA)
• On focus
• On input

3.2.3 AND 3.2.4 CONSISTENT NAVIGATION AND
IDENTIFICATION (AA)
• Consistent navigation across pages
• An element that is across pages should have a common look, feel and functionality

3.3.1 ERROR IDENTIFICATION (A)
• Notify in text
• Errors must be exposed to assistive technologies

3.3.2 LABELS & INSTRUCTIONS (A)
• Required fields
• Inputs that require specific format (DOB)
• Character limit

3.3.3 ERROR SUGGESTIONS (AA)
• Help user to fix errors

3.3.4 ERROR PREVENTION (AA)
• Specially for legal, financial, data applications
• User should be able to modify / delete
• User should be able to preview the data provided

INTERPRETATION
WCAG 2.0 PRINCOLE 4: ROBUST

4.1.1 PARSING (A)
• Start and End tags
• Nesting correctly
• Unique IDs

4.1.2 NAME, ROLE, VALUE (A)
• Name – what the element is?
• Role – Job of the element e.g. button, menu, tab
• Value – property of the element e.g. expand, collapsed

Thank you!
Srinivasu Chakravarthula | https://www.serveominclusion.com | https://www.srinivasu.org
@Csrinivasu | @ServeOMAccess