What should you consider while writing content in terms of accessibility? In This talk I will give an overview how to write accessible content and give tips and hints how to use the block editor to create accessible content.

1. Accessible
Content
- Maja Benke

2. Why Accessible
Content Matters?

3. – Steve Krug
“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?”

4. Accessible Websites:
Cooperation of Design,
Development and Content

5. What is Accessible
Content?

6. Accessible Content
can be consumed by as many people as possible,
regardless
• situations
• goals
• skill sets
• needs

7. Accessibility Personas

8. Accessibility Personas
https://alphagov.github.io/accessibility-personas/

9. Accessibility Personas
Pawel
Asperger
Simone
Dyslexic
Saleem
Deaf
Ashleigh
Sight Impaired
Ron
Various Conditions
Chris
Rheumatoid ArthritisSight Impaired
Claudia

10. Accessibility Personas
Pawel
Asperger
Simone
Dyslexic
Saleem
Deaf
Ashleigh
Sight Impaired
Ron
Various Conditions
Chris
Rheumatoid ArthritisSight Impaired
Claudia

11. Pawel
• 24 year old chemistry graduate
• Asperger’s and anxiety
• Adjusts things, like colours, to
reduce potential stress and
distractions
https://alphagov.github.io/accessibility-personas/pawel/

12. Pawel

13. Simone
• 41 year old office manager
• Dyslexic
• Uses software which
highlights text as it reads it
out
https://alphagov.github.io/accessibility-personas/simone/

14. Simone

15. Setting up Personas
https://alphagov.github.io/accessibility-personas/setup/#setting-up-
personas

16. Dos and Don'ts for
Accessible Content

17. Text

18. Use Subheadings to
Loosen up Text-Blocks
Avoid large text-blocks - use elements to loosen up text

19. Text
• Use semantic structure with headlines
• Only one H1 per page
• Don’t skip a headline-level
• Content defines headline-level, not style

20. Gutenberg Helps to Stick to
Semantic Heading
Top Toolbar - H1 not selectable

21. The Gutenberg Editor helps to stick
to the Semantic Heading Structure
Top Toolbar - H1 not selectable
Error message for wrong semantics

22. Text-Elements
Designed by Vaadin from Flaticon https://www.flaticon.com/authors/vaadin/lineal
Subheadings Lists (Unordered) Lists (Ordered)

23. Correct use of Lists
• Unordered list for
enumeration with no
particular order
• Ordered lists for content,
where the order matters

24. Text-Elements
Designed by Vaadin from Flaticon https://www.flaticon.com/authors/vaadin/lineal
Subheadings Lists (Unordered) Lists (Ordered)
Quotes Tables Accordion

25. Accessibility for
Accordions and Tables
TableAccordion

26. Accessibility for
Accordions and Tables
• Better Overview of Complex Content and Good for Visual
People
• Tricky for Screen Reader Users
• Tables and Accordions can be Accessible for Screen Readers
- if they are done right
• Gutenberg Table-Block in WordPress 5.2 are not accessible
Will be more Accessible in WordPress 5.3+
Resources:
• http://www.howtocreate.co.uk/accessibletable.html
• https://www.hassellinclusion.com/blog/accessible-accordion-pattern/

27. Text-Styles
• Use capitalisation correctly!
• Don’t use all capitals for real words!
• Use capitals for abbreviations and acronyms

28. Capitals for Abbreviations
- Good Example: #WCEU

29. Capitals for Abbreviations
- Bad Example: #wceu

30. Remember:
#WCEU in Capitals

31. Content
• Don’t go wild with text-styles. Carefully use styles like italic,
bold for single words. Stick to the style guide.
• Use easy and plain language
• Keep it clear, simple and short
• Guide the user with tips and hints.

32. Important Information
https://www.elmastudio.de/en/themes/docs/
pukeko/
• Important information and
summary on the top
• Highlight important
information

33. Links

34. Links
• Clear description for links.
Not “Click here”!
Better: “Contact Us”
• Don’t open in a new tab!
If you do, tell the user

35. Emojis

36. Emojis
• Better understanding of the overall meaning/expression of
written Text
• Accessible in apps and native programs (emojis are read
out)
• Not by default accessible in websites, as emojis are
unicodes. For example: ☃ (Difficult for screen-reader
users)
<span role="img" aria-label="Snowman">&#9731;</span>
Resource: https://tink.uk/accessible-emoji/

37. Emojis
• Cultural/personal differences in understanding of emojis
• Browsers show them differently
More Problems

38. Emojis
Ressource: https://www.mirror.co.uk/tech/you-mistake-grimace-emoji-grin-7787192
(Image: GroupLens Research, University of Minnesota)
These are the same emoji “Grinning”!

39. Emojis
Resource: http://adrianroselli.com/2016/12/accessible-emoji-tweaked.html
Tweak for emojis with tool tip

40. Emojis
Use them in native apps (Twitter, Slack…)
If you think the emoji is clear enough
Recommendation
Use them carefully in websites.
Extra explanation/additional work needed

41. Different Users Prefer
Different Content Formats

42. Mix of Content Formats
support text with images, graphics and videos

43. Images and Graphics
a picture is worth a thousand words

44. Images and Graphics
• Don’t rely on colours only (for stats, graphics, … )
• Don’t “hide” text in images
• Use alt-text - also for decorative images.
Provide the same informations from image into text
• If that is too long - Include information also in the text

45. Alt-Text in Gutenberg

46. Twitter - Activate Alt-Text

47. PDF

48. PDF
• Hard to make it accessible - Try to avoid it
• Provide informations also on the website (as HTML)
• Use semantic text-elements, same rules like on websites

49. Video + Audio

50. Videos + Audios
• Great addition for text
• Don’t let it auto-start
• Use captioning for videos - Don’t rely on sound
• Vimeo needs captioning file
• YouTube can include automatic captioning

51. Use Captioning
https://www.youtube.com/watch?v=P2YBkZCRTGA

52. Videos + Audios
• Transcribe your audios (and video) and write information
also into the text
• https://auphonic.com/
• https://cloud.google.com/speech-to-text/
• Use chapter marks

53. Use Chapter Marks
YouTube Podcasts

54. Videos + Audios
Provide show notes (podcasts)

55. GIFs

56. GIFs
• Good way express things
• Try to avoid GIFs - better use videos - More control for the
user
• Okay for short video-sequels (not for longer videos)
• Don’t use GIFs in loop! Only repeat 2-3 times and than
stop it - Photoshop, and better GIF-Programs have an
option for that
• Be careful with flashing images and big movements!!!

57. GIFs: Bad Example
Infinite Loop
Source: https://giphy.com/gifs/ouE6OPO1MADM4

58. GIFs: Good Example
Only plays once
Source: https://giphy.com/gifs/ouE6OPO1MADM4

59. – Tim Berners-Lee
“The power of the Web is in its universality.
Access by everyone regardless of disability
is an essential aspect.”

60. Thank you
Slides via wp1x1.de
#WCEU

61. More Ressources
Accessibility Handbook WordPress
https://make.wordpress.org/accessibility/handbook/

62. More Ressources
A11y Blog of gov.uk:
https://accessibility.blog.gov.uk/
A11y Personas, A11y Posters, …

63. More Ressources
Accessibility Newsletter
https://a11yweekly.com/

64. More Ressources
• “Accessibility for Everyone”: https://abookapart.com/
products/accessibility-for-everyone (Book, ebook,
Audiobook)
• https://webaim.org/
• Guidelines: https://www.w3.org/TR/WCAG21/

65. Questions?
@Maja Benke
#WCEU