Web Accessibility & Usability 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.