Drupal Quick wins for an accessible website
Download as PPTX, PDF0 likes60 views
The document provides an overview of web accessibility, emphasizing its importance for people with disabilities and the need for websites to be designed inclusively. It outlines key guidelines for making websites accessible, such as following WCAG 2.1, ensuring semantic structure, and managing focus visibility. Additionally, it suggests practical tools and 'quick wins' to improve website accessibility, encouraging engagement in community contributions.
Drupal Quick wins for an accessible website
- 1. Quick wins For an accessible website
- 2. Table of contents 1.What is accessibility? 2.Why is it important? 3.How do we make a website accessible?
- 3. Who am I? @marloes_bosch β© Marloes Bosch β© Front-end developer @ LimoenGroen. β© Co-organizer of Frontend United. β© Worked in healthcare for 10 years.
- 4. 1. What is accessibility?
- 5. β The meaning of? Web accessibility means that people with disabilities can use the Web.
- 6. Accessibility not only helps disabled people β© Subtitles: deaf people && people in the train. β© Contrast: visually disabled && people in the sun. β© Semantic HTML: screen readers && Google. β© Keyboard navigation: physically disabled && advanced users.
- 7. β The meaning of! Web accessibility means that websites, tools, and technologies are designed and developed to work for all people, whatever their hardware, software, language, location, or ability.
- 8. 2. Why is it important?
- 9. For many reasons β© More (all!) people benefit from it. β© More products are being offered online. β© More people are becoming dependent of digital services. β© More governments need it, because itβs legally required. β© More organizations need it, because it targets a larger audience. β© Just because we can! Technology is not a limiting factor.
- 10. 5. How do we make a website accessible?
- 11. WCAG 2.1. β© Web Content Accessibility Guidelines
- 12. WCAG 2.1. Perceivable Operable Understandable Robust 4 guidelines 5 guidelines 3 guidelines 1 guideline 29 success criteria 29 success criteria 17 success criteria 3 success criteria A: 9 AA: 11 AAA: 9 A: 14 AA: 3 AAA: 12 A: 5 AA: 5 AAA: 7 A: 2 AA: 1 AAA: / Principles Guidelines Success criteria Levels of conformance
- 13. Quick wins! β© Semantic structure β© Links & buttons β© Focus management
- 14. Semantic HTML β© Use actual HTML heading tags to bundle information. β© Make sure your heading levels are correct (on all pages). β© Provide a meaningful and semantic HTML structure.
- 15. Links & buttons β© Make sure the link/button is recognisable and clickable. β© Provide a meaningful and unique text in the link/button. β© Communicate the state of the button when toggling elements.
- 16. Focus management β© Focus styling should be visible at all costs. β© Focus styling should have a contrast of 3:1 (if you added styling). β© Create a logical focus order.
- 17. And never forget: β© To disable your styles to analyze your DOM structure. β© To navigate through your website with your keyboard.
- 18. Tools used β© Web Developer (to disable styles) β© HeadingsMap (to check heading structure) β© Accessibility Insights (to indicate keyboard navigation)
- 19. Other recommended tools β© aXe core β© WAVE toolbar β© HTML validator
- 21. Join us for contribution opportunities Thursday, October 31, 2019 9:00-18:00 Room: Europe Foyer 2 Mentored Contribution First Time Contributor Workshop General Contribution #DrupalContributions 9:00-14:00 Room: Diamond Lounge 9:00-18:00 Room: Europe Foyer 2
- 22. What did you think? Locate this session at the DrupalCon Amsterdam website: https://drupal.kuoni-congress.info/2019/program/ Take the Survey! https://www.surveymonkey.com/r/DrupalConAmsterdam
- 23. www.limoengroen.nl | +31 20 737 1880 | hallo@limoengroen.nl De Ruijterkade 142 Amsterdam To disable your styles from time to time. To navigate through your website with your keyboard.