Most freelancers and agencies who work in web knows that accessibility matters, but during the daily working life it is sometimes hard to include accessibility into the projects. At the same time accessibility seems like a huge area and it overwhelms sometimes to start with it. In this talk I will show some tools and resources about accessibility that makes it easy to start with accessibility. Also I will show the most common accessibility issues in web projects and provide simple solutions, that are easy to integrate.

1. How to start with Accessibility

2. About Me
▸ Maja Benke
▸ Webdesigner from Berlin
▸ UX and Accessibility Enthusiast
▸ Community Member since 2015
▸ @MajaBenke

3. A 11 y
A ccessibilit y

4. Step 1:
What is Accessibility

5. Enabling Access for People with
Disabilities, Special Needs and for
Assistive Technology
What is Accessibility

6. Kind of Disabilities
Physical Audio VisualCognitive
What is Accessibility

7. What is Accessibility
Kind of Disabilities
PermanentlyTemporary

8. What is Accessibility
Every Fifth Person
Needs an Accessible Website

9. Accessibility is for Everyone!
What is Accessibility

10. Step 2:
The right Mindset

11. "For people without disabilities,
technology makes things easier.
For people with disabilities,
technology makes things possible."
IBM Training Manual 1991
The right Mindset

12. The right Mindset
Why Accessibility matters
▸ Makes it Usable for People with Handicaps and doesn’t
exclude People
▸ Improves User Experience for Everyone
▸ Legally required for Public Websites
▸ It’s the Right Thing To Do
▸ Improves the Code Quality
▸ Improves SEO of a Website

13. Step 3:
Technologies for Accessibility

14. Technologies for Accessibility
Keyboard Navigation only and alternative Keyboards
Source: http://access.sfsu.edu/
Source:https://commons.wikimedia.org/wiki/File:Plage-braille-Alva.jpg

15. Technologies for Accessibility
Stylus/Wand held in the Mouth
Source: http://www.unitedspinal.org/disability-products-services/mundstab-mouthstick---mouth-head-sticks/

16. Technologies for Accessibility
Screen Readers (Voice Over, Jaws, …)

17. Technologies for Accessibility
Speech Recognition Software
Source: https://voicebot.ai/2018/12/21/google-assistant-wins-another-open-question-test-while-apple-siri-
and-amazon-alexa-improve-substantially/

18. Technologies for Accessibility
Switch Buttons
Source: https://axesslab.com/switches/
Recommendation: https://www.24a11y.com/2018/i-used-a-switch-control-for-a-day/

19. Technologies for Accessibility
Accessibility Settings
▸ Browser Options and Extensions

20. Technologies for Accessibility
Reader Mode in Browsers

21. Technologies for Accessibility
Browser Extension

22. Technologies for Accessibility
Accessibility Settings
▸ Browser Extensions and Options
▸ Settings in Operating System
▸ Zoom
▸ Tools
▸ …

23. AT and Settings Requires
Skillset of Users!
Technologies for Accessibility

24. Step 4:
Accessibility Rules

25. Accessibility Rules
Integrate A11y in Every Component
Design
Content
Code

26. A11y:
For Project Management

27. A11y for Project Management
Common Mistakes
▸ A11y are often not integrated in Requirements and
Calculation
▸ A11y is the First Position to cut out for Budget
▸ Wrong Mindset: „Accessibility is not important for this Target
Group / this Project“
▸ No Accessibility-Testing during the Project

28. A11y for Project Management
Solutions
▸ Accessibility by Design!
▸ Integrate and understand Accessibility as natural as
Responsive Design, SEO or Security
▸ Reduce Costs by integrate A11y from the Beginning and Avoid
Fees
▸ In Agencies: try to onboard Everyone in the Team.
▸ Check Accessibility after Every Step
▸ Teach your Clients about A11y, if they Work on the Website

29. A11y:
For Design

30. A11y for Design
Common mistakes
▸ Bad Color Contrast
▸ Thin and Smalls Fonts
▸ Information with Color only
▸ Not underlined Links

31. A11y for Design
Information by Color Only

32. A11y for Design
Common Mistakes
▸ Focus Style is missing
▸ Small clickable Areas / Touch Regions
▸ Mindset: „But A11y does not look good“
▸ Design breaks Functionality

33. A11y for Design
Design breaks Functionality

34. A11y for Design
Solutions
▸ Understand your Design to Support:
▸ the User
▸ the Functionality and Content of the Website
▸ Design is not Art!
▸ Make it not only Pretty, Make It Usable
▸ Be Creative. Find fun Ways to make your Design Accessible

35. A11y for Design
Solutions - Layout
▸ Clear Layout
▸ Enough Whitespace

36. A11y for Design
Clear Structure

37. A11y for Design
Solutions - Layout
▸ Clear Layout
▸ Enough Whitespace
▸ Clickable Areas must be large enough
▸ Design the Focus Style together with the Hover Style

38. A11y for Design
Style the Focus

39. A11y for Design
Solutions - Color
▸ Clear Color Contrast (Level AA or higher)
▸ Information not by Color only
▸ Test your site in Black and White
▸ Underline your Links in Text

40. A11y for Design
Underline the Links!

41. A11y for Design
Solutions - Fonts
▸ Use Fonts, that are easy to read
▸ Design it not to thin and small. Make it easy to read the Text
▸ Limit the Use of Uppercase and Italic

42. A11y Checkliste
- Designers -
Fonts are easy to read
Text is large and thick enough to read easily
Limited use of Uppercase and Italic
Fonts
Site is understandable in Black & White
Clear Color Contrast
Information not by Color only
Links in Text are underlined
Color
Clear Layout
Enough Whitespace
Layout
Focus has a style
Clickable Areas are large enough
Ressources
▸ wp1x1.de/checklists-for-
accessibility
A11y for Design

43. Ressources
▸ A11y Posters: gov.uk https://accessibility.blog.gov.uk/
2016/09/02/dos-and-donts-on-designing-for-accessibility/
▸ WordPress A11y Handbook: https://make.wordpress.org/
accessibility/handbook/
Tools:
▸ Contrastchecker.com
▸ Sim Daltonism
A11y for Design

44. Take a Breath and
Drink some Water!

45. A11y:
For Developing

46. A11y for Developing
Common Mistakes
▸ Website not Usable by Keyboard only (especially Menus, Pop Ups, Accordions…)
▸ Wrong Index Order
▸ Wrong use of HTML Elements
▸ No Use of Landmarks
▸ <div class="header“> instead of <header>
▸ Missing Labels for Forms
▸ Time Limits
▸ Use of target=_blank (Links Open in new Tab)
▸ Wrong Language Settings

47. A11y for Developing
Solutions - Semantics
▸ Always use Best Practice
▸ Use Correct Semantic
▸ Learn HTML5 deeply
▸ Use Landmarks
▸ Correct Index Order

48. A11y for Developing
Solutions - Code
▸ Don’t use target=_blank (let the Choice to the User)
▸ Use a Focus Style
▸ Forms must have Labels
▸ Test for Keyboard Navigation (Menu, Tables, Accordions,..)
▸ Integrate ”Skip to Content“

49. A11y for Developing
Integrate „Skip to Content“
Integrate „Skip to Content“ in
<a class=”screen-reader-text skip-link” href="#content">Skip to
content</a>
More Informations: make.wordpress.org/accessibility/
handbook/markup/skip-links/

50. A11y for Developing
Solutions - Screen Reader
▸ Use ARIA only if HTML is not enough
▸ Talk: ”Who’s is afraid of ARIA“ from Rian Rietveld
https://wordpress.tv/2019/06/19/rian-rietveld-whos-afraid-
of-aria-2/
▸ Define Language in HTML-Tag

51. Use ARIA only if you have to
Define Language in HTML-Tag
Screen Reader
Forms must have Labels
Test for Keyboard Navigation (Menu,
Tables, Accordions,..)
Don’t use target=_blank
Use a Focus Style
Integrate ”Skip to Content“
Code
Use Correct Semantic
Use HTML5
Semantic
Correct Index Order
Use Landmarks
A11y Checkliste
- Developers -
Ressources
▸ wp1x1.de/checklists-for-
accessibility
A11y for Developing

52. Ressources
▸ WordPress A11y Handbook: make.wordpress.org/accessibility/
handbook/
▸ Theme Dev Handbook: developer.wordpress.org/themes/
functionality/accessibility/
Automatic Testing Tools:
▸ Axe: deque.com/axe/
▸ Wave: wave.webaim.org/

53. A11y for Developing
Testing Tools: Axe

54. A11y for Developing
Testing Tools: Wave

55. A11y:
For Content

56. A11y for Content
Common Mistakes
▸ Wrong Semantic
▸ Big Text-Blocks that are hard to read
▸ No clear Meaning of Headlines, Buttons, Links, …
▸ Link-Text like „Click Here“
▸ Alt-Texts are Missing

57. A11y for Content
Solutions - Text
▸ Structured Text with Text Elements
▸ To make the scannable and easy to read

58. A11y for Content
Use Headlines and Whitespace

59. A11y for Content
Solutions - Text
▸ Structured Text with Text Elements
▸ To make the scannable and easy to read
▸ Correct Semantics for Headlines
▸ Important Informations on Top
▸ Clear Description for Links
▸ Not „Click Here“, better „See our Guide“
▸ Don’t open Links by Default in new Tab

60. A11y for Content
Solutions - Content
▸ Variation of Content Formats

61. A11y for Content
Variation of Content Formats

62. A11y for Content
Solutions - Content
▸ Variation of Content Formats
▸ Add Alt-Text to Images
▸ Provide Content from Videos, Graphs, Images also as Text
▸ Provide Subtitels and Captions

63. A11y for Content
Use Captioning
youtube.com/watch?v=P2YBkZCRTGA

64. A11y for Content
Solutions - Content
▸ Variation of Content Formats
▸ Add Alt-Text to Images
▸ Provide Content from Videos, Graphs, Images also as Text
▸ Provide Subtitels and Captions
▸ No Autostart for Videos, Audios, Sliders
▸ Avoid Moving and Flashing Elements

65. A11y Checkliste
- Content Creators -
Integrate Subtitels and Captions
No Autostart
No flashing Elements
Video, Audio & Slider
Clear Description for Links
Don’t open Links by Default in new Tab
Links
Add Alt-Text to Images
Images
Structured Text with Text Elements
Correct Semantics for Headlines
Important Informations on Top
Text
Content
Don’t rely on Memory of Content
Variation of Content Formats
Ressources
▸ wp1x1.de/checklists-for-
accessibility
A11y for Content

66. Ressources
▸ A11y Posters: gov.uk https://accessibility.blog.gov.uk/
2016/09/02/dos-and-donts-on-designing-for-accessibility/
Automatic Testing Tools:
▸ Gutenberg
▸ Plugin: Content Author Accessibility Preview :
wordpress.org/plugins/content-author-accessibility-preview/

67. A11y for Content
Gutenberg Testing Tool

68. A11y for Content
Plugin: Content Author Accessibility Preview
Content Author Accessibility Preview: wordpress.org/plugins/content-author-
accessibility-preview/

69. A11y:
General Rules

70. General A11y Rules
General Accessibility Rules
▸ Be Empathic
▸ Accessibility by Design (like Responsive and SEO)
▸ Let the Choice to the User
▸ Use Best Practice
▸ Use Correct Semantic for your Elements
▸ Learn Basics of Accessibility for your Field
▸ Train your „Accessibility Thinking Muscle“

71. “The one argument for accessibility that doesn’t get
made nearly often enough is how extraordinarily
better it makes some people’s lives.
How many opportunities do we have to dramatically
improve people’s lives just by doing our job a little
better?”
Steve Krug
Why Accessibility matters

72. Step 5:
Testing Tools

73. The right Tools
Testing Tools
▸ Axe
▸ Wave
▸ ContrastChecker.com
▸ Sim Daltonism
▸ Plugin: Content Author Accessibility Preview
▸ Gutenberg Tools

74. Step 6:
Ressources

75. Ressources
▸ A11y Posters and more: gov.uk https://
accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-
designing-for-accessibility/
▸ WordPress A11y Handbook: https://make.wordpress.org/
accessibility/handbook/
▸ WordPress Dev Handbook: developer.wordpress.org/
coding-standards/wordpress-coding-standards/accessibility/
▸ "Accessibility for everyone“ - Laura Kalbag
▸ Accessibility Checklists: wp1x1.de/checklists-for-accessibility

76. Questions?

77. Ressources
‣ Adrian Rosilli: “Selfish Accessibility”
youtube.com/watch?v=xbI0665plgM
‣ Taeke Reijenga: The Accessibility Business Case
wordpress.tv/2019/06/10/taeke-reijenga-the-accessibility-
business-case/