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.
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?”
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/
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/
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
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.
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">☃</span>
Resource: https://tink.uk/accessible-emoji/
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
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
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
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
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
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!!!
