The Web Content Accessibility Guidelines (WCAG) specify which requirements a website should meet to be accessible for everyone regardless of device, location or disability. Since September 2018 they’re not just guidelines anymore, they are obligated rules for government websites of EU state members. In the coming years, these will become mandatory for all public websites. So there’s no excuse left to ignore the requirements. This presentation is a guide through questions like: Which Drupal modules are useful for accessibility? What kind of configuration promotes it? How could you structure your HTML in twig? How can CSS help you? Quick wins for you, a huge win for an accessible web. This presentation by Marloes Bosch from LimoenGroen is part of DrupalCon Amsterdam 2019, October 28-31 2019

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.