The document provides information about Web Content Accessibility Guidelines (WCAG) structure and updates. It discusses the four principles of WCAG - perceivable, operable, understandable, and robust. It also summarizes the hierarchy and guidelines within each principle. The document notes that WCAG 2.1 added 17 new success criteria related to mobile accessibility and is backwards compatible with WCAG 2.0. It breaks down the new success criteria by compliance level (A, AA, AAA).

1. What is WCAG Structure and How to digest it?
what about wcag 2.1?

2. Global Accessibility Awareness Day
19 May 2022

3. Disability Isn’t Infectious, Illiteracy Is.
A11y Slogan

4. ● What is Accessibility?
● Inclusive Products?
● WCAG stands for?
● A11y Stands for?
● Content?
Some Keywords in accessibility

5. ● Usability issues tend to affect every user
● Accessibility issues occur when people with disabilities encounter difficulties
Usability and A11y differences

6. WCAG 2.0 is made up of 4 principles divided up into 12 guidelines.
61 success criterion.
First published: May 09, 1999 | Latest version:2.1, June 05, 2018
WCAG 2.1, adds 17 new success criteria
Understanding WCAG 2.1: A History of WCAG

7. Web Content Accessibility Guidelines
https://www.w3.org/TR/WCAG21/
What WCAG stand for?

8. ● 10% to 20%, random group of 10 people
worldwide, 1 or 2 of those people are likely to
have a disability.
● Worldwide, 7 billion people, about 700 million to
1.4 billion
● Asia and the Pacific, 16.7% (1 in 6 persons)
● IRAN, 1397, 81 million, 12 million, 15% Population
What Percentage of the Population Has a Disability?

9. ✤
The WCAG Structure

10. WCAG 2.1 Hierarchy Structure

11. 1. Perceivable Principle
All users must be able to perceive your content.
2. Operable Principle
All users must be able to operate your site.
3. Understandable Principle
Just because your users can perceive and operate
your site doesn’t necessarily mean that they can understand it.
4. Robust Principle
Users should be able to access your site
from any device, platform, or browser.
WCAG Principles

12. ● Guideline 1.1 Text Alternatives: Provide text alternatives for any non-text content so that it
can be changed into other forms people need, such as large print, braille, speech, symbols
or simpler language
● Guideline 1.2 Time-based Media: Provide alternatives for time-based media.
● Guideline 1.3 Adaptable: Create content that can be presented in different ways (for
example simpler layout) without losing information or structure
● Guideline 1.4 Distinguishable: Make it easier for users to see and hear content including
separating foreground from background.
Perceivable Principle

13. ● Guideline 2.1 Keyboard Accessible: Make all functionality available from a keyboard.
● Guideline 2.2 Enough Time: Provide users enough time to read and use content.
● Guideline 2.3 Seizures: Do not design content in a way that is known to cause seizures.
● Guideline 2.4 Navigable: Provide ways to help users navigate, find content, and determine
where they are.
(<nav><sitemap>, find content (search, skip to content) and determine where they are
(proper page title)
● Guideline 2.5 Input Modalities: Make it easier for users to operate functionality through
various inputs beyond keyboard.
Operable Principle

14. ● Guideline 3.1 Readable: Make text content readable and understandable.
● Guideline 3.2 Predictable: Make Web pages appear and operate in predictable ways.
● Guideline 3.3 Input Assistance: Help users avoid and correct mistakes.
Understandable Principle

15. ● Guideline 4.1 Compatible: Maximize compatibility with current and future user agents,
including assistive technologies.
This can be accomplished by implementing technology in the following order: HTML, CSS,
Javascript.
Robust Principal

16. ‫ﮔﺎﻧﻪ‬‫ﭼﻨﺪ‬ ‫ﻫﺎی‬‫ﺮ‬ ‫ﻣﺴ‬ – ۲.۴.۵ ‫ﻣﻮﻓﻘﯿﺖ‬ ‫ﺷﺎﺧﺺ‬ «
Success criteria numbers
Operable Principle
Guideline 2.4 Navigable
Fifth Success criteria

17. ● A Essential
● AA Ideal Support
● AAA Specialized Support
Compliance Levels

18. ✤
The WCAG 2.1 Updates

19. ● WCAG 2.0 are included in WCAG 2.1
● WCAG 2.0 the wording of those criteria has not changed
● WCAG 2.1 is “backwards compatible”
● Content that conforms to WCAG 2.1 also conforms to WCAG 2.0.”
● WCAG 2.1 includes 17 new success criteria related to mobile accessibility
● WCAG 2.1 provisions will benefit more people
WCAG 2.1 Update Structure

20. ● Speech Input
○ Character Key Shortcuts
○ Label in Name
● Pointer
○ Pointer Gestures
○ Pointer Cancellation
○ Target Size
● Input Methods
○ Concurrent Input Mechanisms
○ Motion Actuation
● Device Settings
○ Orientation
○ Other Standards that can be applicable to Mobile
● Identify Input Purpose and Reflow
○ Non-Text Contrast
○ Text Spacing
○ Content on Hover or Focus
Largest Changes in WCAG 2.1: Mobile Specific Highlights

21. ●
A ‫ﻣﻄﺎﺑﻘﺖ‬ ‫ﺳﻄﺢ‬ ۲.۱ ‫روزرﺳﺎﻧﯽ‬‫ﺑﻪ‬ ‫در‬ ‫ﺟﺪﯾﺪ‬ ‫ﻣﻮﻓﻘﯿﺖ‬ ‫ﻫﺎی‬‫ﺷﺎﺧﺺ‬
○
‫درﯾﺎﻓﺖ‬ ‫ﻗﺎﺑﻞ‬ – ۱ ‫اﺻﻞ‬
■
‫ﺮ‬ ‫ﭘﺬ‬‫ﺳﺎزش‬ ۱.۳ ‫راﻫﺒﺮد‬
●
‫ای‬‫ﻧﻮﯾﺴﻪ‬‫ﮏ‬ ‫ﻫﺎی‬‫ﻣﯿﺎﻧﺒﺮ‬ – ۲.۱.۴ ‫ﻣﻮﻓﻘﯿﺖ‬ ‫ﺷﺎﺧﺺ‬ «
○
‫اﺟﺮا‬ ‫ﻗﺎﺑﻞ‬ – ۲ ‫اﺻﻞ‬
■
‫ﭼﻨﺪﮔﺎﻧﻪ‬ ‫ورودی‬ ‫ﻫﺎی‬‫روش‬ ۲.۵ ‫راﻫﺒﺮد‬
●
‫ﮔﺮ‬‫ﻧﺸﺎن‬ ‫ﻋﻨﻮان‬ ‫ﺑﻪ‬ ‫ﻫﺎ‬‫اﻧﮕﺸﺖ‬ ‫ژﺳﺖ‬ – ۲.۵.۱ ‫ﻣﻮﻓﻘﯿﺖ‬ ‫ﺷﺎﺧﺺ‬ «
●
‫ﮔﺮ‬‫ﻧﺸﺎن‬ ‫ﮔﺮﻓﺘﻦ‬ ‫ﻧﺎدﯾﺪه‬ – ۲.۵.۲ ‫ﻣﻮﻓﻘﯿﺖ‬ ‫ﺷﺎﺧﺺ‬
●
‫ﺮ‬ ‫ﭘﺬ‬‫دﺳﺘﺮس‬ ‫ﻧﺎم‬ ‫و‬ ‫ﺑﺮﭼﺴﺐ‬ ‫ﻖ‬ ‫ﺗﻄﺎ‬ – ۲.۵.۳ ‫ﻣﻮﻓﻘﯿﺖ‬ ‫ﺷﺎﺧﺺ‬ «
●
‫دﺳﺖ‬ ‫ﺣﺮﮐﺘﯽ‬ ‫ﻫﺎی‬‫ژﺳﺖ‬ ‫ﺳﺎزی‬‫ﻓﻌﺎل‬ – ۲.۵.۴ ‫ﻣﻮﻓﻘﯿﺖ‬ ‫ﺷﺎﺧﺺ‬ «
WCAG 2.1 Updates Level Breakdown
‫اﻧﺪ‬‫ﺷﺪه‬ ‫ﻟﯿﻨﮏ‬ ‫ﺳﺎﯾﺖ‬‫وب‬ ‫ﺑﻪ‬ ‫ﻣﻮﻓﻘﯿﺖ‬ ‫ﻫﺎی‬‫ﺷﺎﺧﺺ‬

22. ●
AA ‫ﻣﻄﺎﺑﻘﺖ‬ ‫ﺳﻄﺢ‬ ۲.۱ ‫روزرﺳﺎﻧﯽ‬‫ﺑﻪ‬ ‫در‬ ‫ﺟﺪﯾﺪ‬ ‫ﻣﻮﻓﻘﯿﺖ‬ ‫ﻫﺎی‬‫ﺷﺎﺧﺺ‬
○
‫درﯾﺎﻓﺖ‬ ‫ﻗﺎﺑﻞ‬ – ۱ ‫اﺻﻞ‬
■
‫ﺮ‬ ‫ﭘﺬ‬‫ﺳﺎزش‬ – ۱.۳ ‫راﻫﺒﺮد‬
●
‫ﺻﻔﺤﻪ‬ ‫ﺮی‬ ‫ﻗﺮارﮔ‬ ‫ﺟﻬﺖ‬ – ۱.۳.۴ ‫ﻣﻮﻓﻘﯿﺖ‬ ‫ﺷﺎﺧﺺ‬ «
●
‫ورودی‬ ‫ﻫﺪف‬ ‫ﮐﺮدن‬ ‫ﻣﺸﺨﺺ‬ – ۱.۳.۵ ‫ﻣﻮﻓﻘﯿﺖ‬ ‫ﺷﺎﺧﺺ‬ «
■
‫ﺮ‬ ‫ﭘﺬ‬‫ﺗﺸﺨﯿﺺ‬ ۱.۴ ‫راﻫﺒﺮد‬
●
‫ﺮی‬ ‫ﭘﺬ‬‫اﻧﻄﺒﺎق‬ – ۱.۴.۱۰ ‫ﻣﻮﻓﻘﯿﺖ‬ ‫ﺷﺎﺧﺺ‬ «
●
‫ﻨﯽ‬ ‫ﺮﻣ‬ ‫ﻏ‬ ‫ﻫﺎی‬‫ﺑﺨﺶ‬ ‫ﮐﻨﺘﺮاﺳﺖ‬ – ۱.۴.۱۱ ‫ﻣﻮﻓﻘﯿﺖ‬ ‫ﺷﺎﺧﺺ‬ «
●
‫ﻣﺘﻦ‬ ‫ﻓﺎﺻﻠﮥ‬ – ۱.۴.۱۲ ‫ﻣﻮﻓﻘﯿﺖ‬ ‫ﺷﺎﺧﺺ‬ «
●
Focus ‫ﯾﺎ‬ Hover ‫ﺣﺎﻟﺖ‬ ‫در‬ ‫ﻣﺤﺘﻮا‬ – ۱.۴.۱۳ ‫ﻣﻮﻓﻘﯿﺖ‬ ‫ﺷﺎﺧﺺ‬ «
○
‫ﺗﻮاﻧﻤﻨﺪی‬ – ۴ ‫اﺻﻞ‬
■
‫ﺳﺎزﮔﺎر‬ ۴.۱ ‫راﻫﺒﺮد‬
●
‫ﺳﯿﺴﺘﻢ‬ ‫وﺿﻌﯿﺖ‬ ‫ﻫﺎی‬‫ﯿﺎم‬ – ۱.۴.۱۰ ‫ﻣﻮﻓﻘﯿﺖ‬ ‫ﺷﺎﺧﺺ‬ «
WCAG 2.1 Updates Level Breakdown
‫اﻧﺪ‬‫ﺷﺪه‬ ‫ﻟﯿﻨﮏ‬ ‫ﺳﺎﯾﺖ‬‫وب‬ ‫ﺑﻪ‬ ‫ﻣﻮﻓﻘﯿﺖ‬ ‫ﻫﺎی‬‫ﺷﺎﺧﺺ‬

23. ●
AAA ‫ﻣﻄﺎﺑﻘﺖ‬ ‫ﺳﻄﺢ‬ ۲.۱ ‫روزرﺳﺎﻧﯽ‬‫ﺑﻪ‬ ‫در‬ ‫ﺟﺪﯾﺪ‬ ‫ﻣﻮﻓﻘﯿﺖ‬ ‫ﻫﺎی‬‫ﺷﺎﺧﺺ‬
○
‫درﯾﺎﻓﺖ‬ ‫ﻗﺎﺑﻞ‬ – ۱ ‫اﺻﻞ‬
■
‫ﺮ‬ ‫ﭘﺬ‬‫ﺳﺎزش‬ – ۱.۳ ‫راﻫﺒﺮد‬
●
‫ﻫﺪف‬ ‫ﯽ‬ ‫ﺷﻨﺎﺳﺎ‬ – ۱.۳.۶ ‫ﻣﻮﻓﻘﯿﺖ‬ ‫ﺷﺎﺧﺺ‬ «
○
‫اﺟﺮا‬ ‫ﻗﺎﺑﻞ‬ – ۲ ‫اﺻﻞ‬
■
‫ﮐﺎﻓﯽ‬ ‫زﻣﺎن‬ ۲.۲ ‫راﻫﺒﺮد‬
●
‫ﻫﺎ‬‫درﻧﮓ‬ – ۲.۲.۶ ‫ﻣﻮﻓﻘﯿﺖ‬ ‫ﺷﺎﺧﺺ‬
■
‫ﺰﯾﮑﯽ‬ ‫ﻓ‬ ‫ﻫﺎی‬‫واﮐﻨﺶ‬ ‫و‬ ‫ﺗﺸﻨﺞ‬ ۲.۳ ‫راﻫﺒﺮد‬
●
‫ﮐﺎرﺑﺮی‬ ‫ﺗﻌﺎﻣﻼت‬ ‫از‬ ‫ﺑﺮآﻣﺪه‬ ‫اﻧﯿﻤﯿﺸﻦ‬ – ۲.۳.۳ ‫ﻣﻮﻓﻘﯿﺖ‬ ‫ﺷﺎﺧﺺ‬ «
■
‫ﭼﻨﺪﮔﺎﻧﻪ‬ ‫ورودی‬ ‫ﻫﺎی‬‫روش‬ ۲.۵ ‫راﻫﺒﺮد‬
●
‫ﻫﺪف‬ ‫اﻧﺪازه‬ – ۲.۵.۵ ‫ﻣﻮﻓﻘﯿﺖ‬ ‫ﺷﺎﺧﺺ‬ «
●
‫ورودی‬ ‫ﻫﺎی‬‫روش‬ ‫اﻧﻮاع‬ ‫وﺟﻮد‬ ‫ﻟﺰوم‬ – ۲.۵.۶ ‫ﻣﻮﻓﻘﯿﺖ‬ ‫ﺷﺎﺧﺺ‬ «
WCAG 2.1 Updates Level Breakdown
‫اﻧﺪ‬‫ﺷﺪه‬ ‫ﻟﯿﻨﮏ‬ ‫ﺳﺎﯾﺖ‬‫وب‬ ‫ﺑﻪ‬ ‫ﻣﻮﻓﻘﯿﺖ‬ ‫ﻫﺎی‬‫ﺷﺎﺧﺺ‬

24. ✤
78 Success Criteria
‫ﺷﻮﯾﻢ؟‬ ‫ﻣﺴﻠﻂ‬ ‫ﻣﻮﻓﻘﯿﺖ‬ ‫ﻫﺎی‬‫ﺷﺎﺧﺺ‬ ‫ﺑﻪ‬ ‫ﭼﻄﻮر‬

25. pwcag.ir
Persian Web Content Accessibility Guideline
‫وب‬ ‫ﻣﺤﺘﻮای‬ ‫ﭘﺬیﺮی‬‫دﺳﺘﺮﺳﯽ‬ ‫ﻓﺎرﺳﯽ‬ ‫ﻧﺎﻣﮥ‬‫ﺷیﻮه‬

26. :‫وب‬ ‫ﻣﺤﺘﻮای‬ ‫ﭘﺬیﺮی‬‫دﺳﺘﺮﺳﯽ‬ ‫ﻓﺎرﺳﯽ‬ ‫ﻧﺎﻣﮥ‬‫ﺷیﻮه‬ ‫تﻠﮕﺮام‬
t.me/pwcag
Persian WCAG 2.1 Telegram

27. :‫وب‬ ‫ﻣﺤﺘﻮای‬ ‫ﭘﺬیﺮی‬‫دﺳﺘﺮﺳﯽ‬ ‫ﻓﺎرﺳﯽ‬ ‫ﻧﺎﻣﮥ‬‫ﺷیﻮه‬ ‫اﯾﻨﺴتﺎﮔﺮام‬
instagram.com/persian.wcag
Persian WCAG 2.1 Telegram

28. :‫وب‬ ‫ﻣﺤﺘﻮای‬ ‫ﭘﺬیﺮی‬‫دﺳﺘﺮﺳﯽ‬ ‫ﻓﺎرﺳﯽ‬ ‫ﻧﺎﻣﮥ‬‫ﺷیﻮه‬ ‫دﯾﺠﯿتﺎﻟﯽ‬ ‫ﮐتﺎب‬ ‫داﻧﻠﻮد‬
pwcag.ir/download/
Persian WCAG 2.1

29. Usability Stage | ‫ﮐﺎرﺑﺮدﭘﺬیﺮی‬ ‫اﺳﺘیﺞ‬
t.me/uthinking
Persian WCAG 2.1 Telegram

30. Persian WCAG 2.1
‫ﮐﻨﯿﻢ؟‬ ‫ﮐﻮررﻧﮕﯽ‬ ‫و‬ ‫ﺑﯿﻨﺎیﯽ‬‫ﮐﻢ‬ ‫ﻧﺎﺗﻮاﻧﯽ‬ ‫ﺑﺎ‬ ‫اﻓﺮادی‬ ‫اﺳﺘﻔﺎده‬ ‫آﻣﺎده‬ ‫را‬ ‫ﻓﺮاﮔیﺮ‬ ‫ﻣﺤﺼﻮﻻت‬ ‫ﭼﻄﻮر‬ :‫وﺑﯿﻨﺎر‬ ‫ﻣﻌﺮﻓﯽ‬
(people with disability day) ‫ﺗﻮاﻧﯽ‬ ‫ﮐﻢ‬ ‫و‬ ‫ﻧﺎﺗﻮاﻧﯽ‬ ‫دارای‬ ‫اﻓﺮاد‬ ‫ﺟﻬﺎﻧﯽ‬ ‫روز‬ ‫ﺑﯿﺎﻧﯿﻪ‬ – ۰:۴۱
‫ﻃﺮاﺣﯽ‬ ‫ﻦ‬ ‫ﻗﻮاﻧ‬ ‫و‬ ‫ﻫﺎ‬‫ﻧﺎﺗﻮاﻧﯽ‬ ‫ﻣﻌﺮﻓﯽ‬ – ۰۴:۵۵
‫اﺳﺖ؟‬ ‫ﺰان‬ ‫ﻣ‬ ‫ﭼﻪ‬ ‫ﺑﻪ‬ ‫ﯽ‬ ‫ﺑﯿﻨﺎ‬‫ﮐﻢ‬ ‫و‬ ‫ﮐﻮررﻧﮕﯽ‬ ِ
‫ﯽ‬ ‫ﺑﯿﻨﺎ‬ ِ‫ﻼل‬ ‫اﺧ‬ ‫آﻣﺎری‬ ‫ﺟﺎﻣﻌﮥ‬ ِ
‫ﺑﺰرﮔﯽ‬ – ۰۹:۲۵
‫ﭼﯿﺴﺖ؟‬ ‫ﮐﻮررﻧﮕﯽ‬ ‫اﻧﻮاع‬ – ۰۹:۵۴
‫ﭼﯿﺴﺖ؟‬ ‫ﯽ‬ ‫ﺑﯿﻨﺎ‬‫ﮐﻢ‬ ‫اﻧﻮاع‬ – ۱۱:۲۷
‫ﺑﯿﻨﻨﺪ؟‬‫ﯽ‬ ‫ﭼﻄﻮر‬ ‫ﮐﻮررﻧﮓ‬ ‫ﻫﺎی‬‫آدم‬ – ۱۲:۴۱
‫ﺑﯿﻨﻨﺪ؟‬‫ﯽ‬ ‫ﭼﻄﻮر‬ ‫ﺑﯿﻨﺎ‬‫ﮐﻢ‬ ‫ﻫﺎی‬‫آدم‬ – ۱۳:۵۰
‫دارﻧﺪ؟‬ ‫اﻧﺴﺎن‬ ‫دﯾﺪ‬ ‫روی‬ ‫ﺑﺪی‬ ‫ﺮات‬ ‫ﺄﺛ‬ ‫ﭼﻪ‬ ‫ﯽ‬ ‫ﭼﺸ‬ ‫ﻣﺸﮑﻼت‬ ‫ﮐﻠﯽ‬ ‫ﻃﻮر‬ ‫ﺑﻪ‬ – ۱۴:۱۳
‫ﭼﯿﺴﺖ؟‬ ‫ﯽ‬ ‫ﺑﯿﻨﺎ‬ ‫ﻼل‬ ‫اﺧ‬ ‫ﺑﺎ‬ ‫اﻓﺮاد‬ ‫ﺑﺮای‬ Inclusive ِ‫ﻣﺤﺼﻮل‬ ‫ﻃﺮاﺣﯽ‬ ‫ﻻﯾﻪ‬ ‫ﺎﻧﺪاردﻫﺎی‬ ‫اﺳ‬ – ۱۵:۳۰
‫ﭼﯿﺴﺖ؟‬ ‫ﯽ‬ ‫ﺑﯿﻨﺎ‬ ‫ﻼل‬ ‫اﺧ‬ ‫دارای‬ ‫اﻓﺮاد‬ ‫ﺑﺮای‬ Inclusive ِ‫ﻣﺤﺼﻮل‬ ‫ﺑﺮای‬ ‫ﺳﻨﺠﯽ‬ ‫ﻣﺸﮑﻞ‬ ‫اﺑﺰارﻫﺎی‬ – ۱۷:۱۸
‫ﺑﯿﺎﻣﻮزﯾﻢ؟‬ ‫را‬ ‫ﺮ‬ ‫ﻓﺮاﮔ‬ ‫ﻣﺤﺼﻮل‬ ‫ﺗﻮﻟﯿﺪ‬ ‫و‬ ‫ﭘﺬیﺮ‬‫دﺳﺘﺮﺳﯽ‬ ‫ﻃﺮاﺣﯽ‬ ‫ﭼﻄﻮر‬ – ۱۸:۱۱
:‫آﭘﺎرات‬ ‫در‬ ‫اراﯾﻪ‬ ‫وﯾﺪﺋﻮی‬ ‫ﻟﯿﻨﮏ‬
https://aparat.com/v/EBY5u

31. ✤