The document discusses web accessibility and usability principles, including WCAG 2.1 guidelines and four main design principles: perceivable, operable, understandable, and robust. WCAG 2.1 has three compliance levels (A, AA, AAA) and covers guidelines, success criteria, and techniques for developing accessible web content. The four principles provide best practices for making web content accessible to all users, including those with disabilities that impact vision, hearing, mobility, cognition, etc. Specific techniques are outlined under each principle.

1. WEB ACCESSIBLITY & USABLITY PRINCIPLE
By
Anurag Kumar

2. WCAG 2.1
• WCAG
• DEFINE AS WEB CONTENT ACCESSIBLITY GUDIELINES
• It has Three Level
• A = Simple (minimum level of accessibility comply with from first hi fidelity prototype)
• AA = Intermediate ( recommended level of accessibility comply with from beta)
• AAA = Advanced (highest level of accessibility comply with for live)
• WCAG 2.1
It includes all of the guidelines, success criteria, and techniques for authors to use as they are developing and
evaluating Web content. This includes content from WCAG 2.0 and can be filtered in many ways to help authors focus
on relevant content.

3. WCAG 2.1
The Web Content Accessibility Guidelines are an internationally recognized set of recommendations for improving
web accessibility
They explain how to make digital services, websites and apps accessible to everyone, including users with
impairments to their:
• Vision – like severely sight impaired, sight impaired or color blind people
• Hearing – like people who are deaf or hard of hearing
• Mobility – like those who find it difficult to use a mouse or keyboard
• Thinking and Understanding – like people with dyslexia., autism or learning difficulties

4. Four Designs Principles
1. Perceivable
2. Operable
3. Understandable
4. Robust

5. 1. Perceivable
1. Provide text alternative 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
2. Time-based media : Provide alternatives for time based media
3. Create content that can be represented in different ways (for example simple layouts ) without losing
information or structure
4. Make it easier for users to see and hear content including separating foreground from background

6. 1.1 Provide Text Alternatives
• Do controls have names , or description?
e.g. give button names
• Non-text Captcha(or other tests alternatives
e.g. solve the math problem
• Textual communication of visual that
provide sensory experiences
e.g. fruit performance

7. 1.2 Time-based media alternative
• Time based media=pre-recorded media, live
stream
• Provide audio captions pre recorded media
• Provide transcript
• Provide sign language on videos
• Provide auto descriptive voice over

8. 1.3 Adaptable Content Presentation
• Text is provided in a meaningful sequence
• Instruction for operating or understanding
interfaces does not depend on sensory
content
e.g. text as well as color, shape, size,
orientation, or sound
• The page is understandable in different
screen orientation
e.g. portrait and landscape
• Assistive technology can identify an input
fields purpose

9. 1.4 Make it easier for user to see
and hear content
• Color is not only way conveying information
• If audio plays automatically, the user has
stop/start/mute(etc.)controls
• Text and image of text have a contrast ratio
of 4.5 to 1
• Large scale text=3 to 1 min
• Incidental text=no requirement
• Text as logo = no requirement

10. 2. Operable
1. Make all functionality available from a keyboard
2. Provide users enough time to read and use content
3. Do not design content in a way that is known to cause seizures
4. Provide ways to help users navigate, find content, and determine where they are

11. 2.1 Keyboard Functionality
• All features must be controllable via the keyboard
• Keyboard shortcuts can be turnoff
• Users can modify keyboard shortcuts

12. 2.2 Remove Time Restrictions
• Time limit can be turned off adjusted, or
extended
• Moving, blinking, or scrolling(etc.) information
can be paused, stopped or hidden
• Users are warned about times out

13. 2.3 Prevent Seizures
• Do not flash anything ore than three times in a row
• User can disable animations triggered through interaction

14. 2.4 Helpful Navigation
• Web page have titles
• A link’s purpose is clear from link itself.
• Multiple ways of locating web pages
• Heading the labels describe the content’s topic
and purpose

15. 3. Understandable
1. Make text content readable and understandable
2. Make web pages appear and operate is predictable ways
3. Help users avoid and correct mistakes

16. 3.1 Make text Readable and
Understandable
• Browser / system can determine the
programmed language
• e.g. simplified English vs Traditional
• Unusual words can be identified and
defined
• Abbreviation can be identified and defined
• User needs more than a lower-secondary
school reading level

17. 3.2 Make web pages appear
And operate predictably
• changing the user interface does not change
context of use
• Navigation is consistent across the site
• Function are identified in the same way across site

18. 3.3 Help user avoid and correct mistakes
• Users are notified of errors when they
occur
• Content input has clear labels
• Correct actions are offered when users
make errors
• Interface only allow ‘correct’ input
• Users can undo actions

19. 4. Robust
Maximize compatibility with current and future user
agents, including assistive technologies
1.Focuses on coding rather than design
2.Many websites make use of dynamic content such
as status messages that are written in markup
languages such as HTML and XML
e.g. if users are viewing their social media feeds,
they can be alerted of a new post without the
browser automatically scrolling up to display it
to them.