Uploaded bySrinivasu Chakravarthula
Understanding wcag 2.0
This document provides an overview of the Web Content Accessibility Guidelines (WCAG) 2.0, outlining its principles, guidelines, and success criteria for making web content accessible to all users. It covers topics such as perceivable, operable, understandable, and robust aspects of web content, along with specific requirements under each principle. The document emphasizes the importance of implementing these guidelines effectively to enhance accessibility for individuals with disabilities.
More Related Content
Similar to Understanding wcag 2.0
Understanding wcag 2.0
- 1. UNDERSTANDING WCAG 2.0 SRINIVASUCHAKRAVARTHULA
- 2.
- 3. OVERVIEW • Web ContentAccessibility 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
- 4. 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
- 5. WHAT IS A,AA & AAA • A = Minimum • AA = Recommended level and should be achieved • AAA = Maximum Level of conformance
- 6. INTERPRETATION WCAG 2.0 PRINCIPLE1 – PERCEIVABLE
- 7. 1.1.1 NON TEXTCONTENT (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
- 8. 1.2.1 AUDIO-ONLY ANDVIDEO-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
- 9. 1.2.2 CAPTIONS –PRERECORDED (A) • Captions are provided for all prerecorded audio content in synchronized media
- 10. 1.2.3 AUDIO DESCRIPTIONOR MEDIA ALTERNATIVE • An alternative for time-based media or audio description of the prerecorded video content is provided for synchronized media,
- 11. 1.3.1 INFO &RLEATIONSHIPS (A) • Semantics • Structure • Forms • Relationships • Tables
- 12. 1.3.2 MEANINGFUL SEQUENCE(A) • Reading order
- 13. 1.3.3 SENSORY CHARACTERSTICS Shapealone Size alone Location alone Sound alone Orientation alone
- 14. 1.4.1 USE OFCOLOR • Do NOT provide information only by means of color alone • E.g. Green button indicates pass, Red button indicates Fail
- 15. 1.4.2 AUDIO CONTROLS •Provide Play, Pause, Stop etc., controls, if an audio plays automatically for more than 3 seconds
- 16. 1.4.3 CONTRAST MINIMUM(A) • Regular Text: 4.5:1 • Large Text: 3:1
- 17. 1.4.4 RESIZE TEXT(AA) • User should be able to resize font with browser zoom / options provided by AT
- 18. 1.4.5 IMAGES OFTEXT (AA) • Where possible, use natural text to convey information • Do NOT use images of text • Exception: logo types
- 19. INTERPRETATION WCAG 2.0 PRINCIPLE2: OPERABLE
- 20. 2.1.1 KEYBOARD (A) •All functionality must be available via keyboard • Links • Buttons • Menus • Custom widgets
- 21. 2.1.2 NO KEYBOARDTRAP (A) • Ensure there is no keyboard trap
- 22. 2.2.1 TIMING ADJUSTABLE(A) • No time limit would be advisable • If there is a time limit, user should be able to extend
- 23. 2.2.2 PAUSE, STOP,HIDE (A) • Moving content • Blinking content • Scrolling • Auto-updation of content
- 24. 2.3.1 THREE FLASHESOR BELOW THRESHOLD • Flashing content should not be used
- 25. 2.4.1 BYPASS BLOCKS(A) • Skip to main content • Accurate heading structure • ARIA land marks
- 26. 2.4.2 PAGE TITLED(A) • Unique and meaningful page title
- 27. 2.4.3 FOCUS ORDER(A) • Modals • All focusable elements • On collapsing an element, return focus to triggered element
- 28. 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
- 29. 2.4.5 MULTIPLE WAYS(AA) • Search • Sitemap • Breadcrumb navigation
- 30. 2.4.6 HEADINGS ANDLABELS (AA) • Section headings • Visible labels • Placeholder text cannot be a lable – floating label can be an option
- 31. 2.4.7 FOCUS VISIBLE(AA) • Never use outline:none • Don’t like browser focus indicator, design a custom focus indicator
- 32. INTERPRETATION WCAG 2.0 PRINCIPLE3: UNDERSTANDABLE
- 33. 3.1.1 LANGUAGE OFPAGE (A) • Use <lang> attribute to define language of document
- 34. 3.1.2 LANGAUGE OFPARTS (AA) • If provided, Assistive technologies detect the same and switch to respective language
- 35. 3.2.1 AND 3.2.2.CHANGE IN CONTEXT (AA) • On focus • On input
- 36. 3.2.3 AND 3.2.4CONSISTENT NAVIGATION AND IDENTIFICATION (AA) • Consistent navigation across pages • An element that is across pages should have a common look, feel and functionality
- 37. 3.3.1 ERROR IDENTIFICATION(A) • Notify in text • Errors must be exposed to assistive technologies
- 38. 3.3.2 LABELS &INSTRUCTIONS (A) • Required fields • Inputs that require specific format (DOB) • Character limit
- 39. 3.3.3 ERROR SUGGESTIONS(AA) • Help user to fix errors
- 40. 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
- 41. INTERPRETATION WCAG 2.0 PRINCOLE4: ROBUST
- 42. 4.1.1 PARSING (A) •Start and End tags • Nesting correctly • Unique IDs
- 43. 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
- 44. Thank you! Srinivasu Chakravarthula| https://www.serveominclusion.com | https://www.srinivasu.org @Csrinivasu | @ServeOMAccess