Alex Molchanov - Meet accessibility Guidelines
0 likes161 views
This document provides guidance on meeting accessibility guidelines based on the P.O.U.R. criteria of websites being perceivable, operable, understandable, and robust. It outlines common accessibility issues like missing alt text, proper use of headings, color contrast, and form labels. Tips are provided on making text readable at different sizes, proper focus order, and use of ARIA attributes. Guidelines around valid HTML, use of assistive technologies, and prioritizing real accessibility bugs over false positives are also covered.
Alex Molchanov - Meet accessibility Guidelines
- 2. About Me Alexandr Molchanoff Specialized in Drupal since 2013 Head of QA - Belarus Department
- 3. Who has accessibility requirements
- 5. P.O.U.R criteria ● Perceivable ( воспринимаемый) ● Operable (управляемый) ● Understandable (понятный) ● Robust (валидный - без ошибок в Html)
- 6. Perceivable Most widely met issues: ● Missing alt text for images, icons. (Don’t need to duplicate.) ● Form labels (at least aria labels) ● Title frames ● Meaningful sequence ● Links in text should have contrast 3:1 and underlined on hover ● Contrast ratio text/background should be at least 4.5:1 ● Blocks of text ○ no more than 80 chars wide ○ No scrolling when text size is doubled
- 7. Image and Alt text
- 8. Inform editors ● Make Alt text required ● Not repeat nearby text
- 9. Links should be underlined Make link Identified not only by color
- 12. Operable ● Bypass blocks (Skip to main content) ● Focus order ● Clear Link purpose, form labels, section headings
- 13. Focus Order
- 14. Load More Focus should go to next loaded item
- 16. Understandable ● CONSISTENT IDENTIFICATION - same element styles through the site ● Error Identification and prevention - form fields with helpful hints and errors
- 17. Robust ● Valid HTML ○ No duplicated ids ○ Proper usage of elements
- 18. WAI-ARIA Accessible Rich Internet Applications https://www.w3.org/TR/wai-aria-1.1/
- 19. Typical Assistive Tools ● Voiceover on Mac ● Voiceover on iPhone ● Android Talkback ● JAWS, NVDA - Windows
- 20. Example: Contrast WCAG 2.0 Success Criteria 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has contrast ratio of at least 5:1, except for the following: ● Large text: Large-scale text have a contrast ratio at least 3:1 ● Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, or that are part of a picture that contains significant other visual content, have no contrast requirement. ● Logotypes: Text that is part of logo or brand name has no minimum contrast requirement.
- 21. Color Scheme
- 23. Contrast calculation brightness = (299*R + 587*G + 114*B) / 1000 http://contrast-ratio.com/
- 24. Color selection (Hue, Saturation, Lightness, Alpha)
- 26. Tricky places Increase your estimates - sniffers missed that
- 27. Slick Slider Has custom built-in ARIA features
- 28. False Bugs And issue prioritization
- 29. False Bugs Automatic tools do not account for background images, gradients, etc. Ensure fall-back contrast is defined in case images do not display. Hidden elements may be alerted as low contrast.
- 30. Accessibility vs Usability ● A website can comply with standards ● A website can Pass all the automated checks ● A website can appear to be accessible HOWEVER ● May have to sacrifice Modern UI features ● Limited Color Selection ● Individual users may have cognitive, technical, or other barriers
- 31. User Way
- 32. Links userway.org https://www.w3.org/TR/UNDERSTANDING-WCAG20/ Reporting tool: https://www.w3.org/WAI/eval/report-tool/ And guidences provided at WebAIM including http://webaim.org/standards/wcag/checklist