Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Accessible
Content
- Maja Benke
Why Accessible
Content Matters?
– Steve Krug
“The one argument for accessibility that doesn’t get
made nearly often enough is how extraordinarily
better i...
Accessible Websites: 

Cooperation of Design,
Development and Content
What is Accessible
Content?
Accessible Content
can be consumed by as many people as possible,
regardless
• situations

• goals
• skill sets

• needs
Accessibility Personas
Accessibility Personas
https://alphagov.github.io/accessibility-personas/
Accessibility Personas
Pawel
Asperger
Simone
Dyslexic
Saleem
Deaf
Ashleigh
Sight Impaired
Ron
Various Conditions
Chris
Rhe...
Accessibility Personas
Pawel
Asperger
Simone
Dyslexic
Saleem
Deaf
Ashleigh
Sight Impaired
Ron
Various Conditions
Chris
Rhe...
Pawel
• 24 year old chemistry graduate

• Asperger’s and anxiety

• Adjusts things, like colours, to
reduce potential stre...
Pawel
Simone
• 41 year old office manager

• Dyslexic

• Uses software which
highlights text as it reads it
out
https://alphagov.g...
Simone
Setting up Personas
https://alphagov.github.io/accessibility-personas/setup/#setting-up-
personas
Dos and Don'ts for
Accessible Content
Text
Use Subheadings to
Loosen up Text-Blocks
Avoid large text-blocks - use elements to loosen up text
Text
• Use semantic structure with headlines

• Only one H1 per page

• Don’t skip a headline-level

• Content defines head...
Gutenberg Helps to Stick to
Semantic Heading
Top Toolbar - H1 not selectable
The Gutenberg Editor helps to stick
to the Semantic Heading Structure
Top Toolbar - H1 not selectable
Error message for wr...
Text-Elements
Designed by Vaadin from Flaticon https://www.flaticon.com/authors/vaadin/lineal
Subheadings Lists (Unordered)...
Correct use of Lists
• Unordered list for
enumeration with no
particular order

• Ordered lists for content,
where the ord...
Text-Elements
Designed by Vaadin from Flaticon https://www.flaticon.com/authors/vaadin/lineal
Subheadings Lists (Unordered)...
Accessibility for
Accordions and Tables
TableAccordion
Accessibility for
Accordions and Tables
• Better Overview of Complex Content and Good for Visual
People

• Tricky for Scre...
Text-Styles
• Use capitalisation correctly! 

• Don’t use all capitals for real words! 

• Use capitals for abbreviations ...
Capitals for Abbreviations

- Good Example: #WCEU
Capitals for Abbreviations

- Bad Example: #wceu
Remember:

#WCEU in Capitals
Content
• Don’t go wild with text-styles. Carefully use styles like italic,
bold for single words. Stick to the style guid...
Important Information
https://www.elmastudio.de/en/themes/docs/
pukeko/
• Important information and
summary on the top

• ...
Links
Links
• Clear description for links.

Not “Click here”! 

Better: “Contact Us”

• Don’t open in a new tab! 

If you do, te...
Emojis
Emojis
• Better understanding of the overall meaning/expression of
written Text

• Accessible in apps and native programs ...
Emojis
• Cultural/personal differences in understanding of emojis 

• Browsers show them differently
More Problems
Emojis
Ressource: https://www.mirror.co.uk/tech/you-mistake-grimace-emoji-grin-7787192

(Image: GroupLens Research, Univer...
Emojis
Resource: http://adrianroselli.com/2016/12/accessible-emoji-tweaked.html
Tweak for emojis with tool tip
Emojis
Use them in native apps (Twitter, Slack…) 

If you think the emoji is clear enough
Recommendation
Use them carefull...
Different Users Prefer
Different Content Formats
Mix of Content Formats
support text with images, graphics and videos
Images and Graphics
a picture is worth a thousand words
Images and Graphics
• Don’t rely on colours only (for stats, graphics, … ) 

• Don’t “hide” text in images

• Use alt-text...
Alt-Text in Gutenberg
Twitter - Activate Alt-Text
PDF
PDF
• Hard to make it accessible - Try to avoid it

• Provide informations also on the website (as HTML)

• Use semantic t...
Video + Audio
Videos + Audios
• Great addition for text

• Don’t let it auto-start

• Use captioning for videos - Don’t rely on sound

•...
Use Captioning
https://www.youtube.com/watch?v=P2YBkZCRTGA
Videos + Audios
• Transcribe your audios (and video) and write information
also into the text

• https://auphonic.com/

• ...
Use Chapter Marks
YouTube Podcasts
Videos + Audios
Provide show notes (podcasts)
GIFs
GIFs
• Good way express things

• Try to avoid GIFs - better use videos - More control for the
user

• Okay for short vide...
GIFs: Bad Example

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

Only plays once
Source: https://giphy.com/gifs/ouE6OPO1MADM4
– Tim Berners-Lee
“The power of the Web is in its universality.
Access by everyone regardless of disability
is an essentia...
Thank you
Slides via wp1x1.de
#WCEU
More Ressources
Accessibility Handbook WordPress

https://make.wordpress.org/accessibility/handbook/
More Ressources
A11y Blog of gov.uk: 

https://accessibility.blog.gov.uk/



A11y Personas, A11y Posters, …
More Ressources
Accessibility Newsletter

https://a11yweekly.com/
More Ressources
• “Accessibility for Everyone”: https://abookapart.com/
products/accessibility-for-everyone (Book, ebook,
...
Questions?
@Maja Benke

#WCEU
Upcoming SlideShare
Loading in …5
×

Accessible content

432 views

Published on

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.

  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Accessible content

  1. 1. Accessible Content - Maja Benke
  2. 2. Why Accessible Content Matters?
  3. 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. 4. Accessible Websites: 
 Cooperation of Design, Development and Content
  5. 5. What is Accessible Content?
  6. 6. Accessible Content can be consumed by as many people as possible, regardless • situations • goals • skill sets • needs
  7. 7. Accessibility Personas
  8. 8. Accessibility Personas https://alphagov.github.io/accessibility-personas/
  9. 9. Accessibility Personas Pawel Asperger Simone Dyslexic Saleem Deaf Ashleigh Sight Impaired Ron Various Conditions Chris Rheumatoid ArthritisSight Impaired Claudia
  10. 10. Accessibility Personas Pawel Asperger Simone Dyslexic Saleem Deaf Ashleigh Sight Impaired Ron Various Conditions Chris Rheumatoid ArthritisSight Impaired Claudia
  11. 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. 12. Pawel
  13. 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. 14. Simone
  15. 15. Setting up Personas https://alphagov.github.io/accessibility-personas/setup/#setting-up- personas
  16. 16. Dos and Don'ts for Accessible Content
  17. 17. Text
  18. 18. Use Subheadings to Loosen up Text-Blocks Avoid large text-blocks - use elements to loosen up text
  19. 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. 20. Gutenberg Helps to Stick to Semantic Heading Top Toolbar - H1 not selectable
  21. 21. The Gutenberg Editor helps to stick to the Semantic Heading Structure Top Toolbar - H1 not selectable Error message for wrong semantics
  22. 22. Text-Elements Designed by Vaadin from Flaticon https://www.flaticon.com/authors/vaadin/lineal Subheadings Lists (Unordered) Lists (Ordered)
  23. 23. Correct use of Lists • Unordered list for enumeration with no particular order • Ordered lists for content, where the order matters
  24. 24. Text-Elements Designed by Vaadin from Flaticon https://www.flaticon.com/authors/vaadin/lineal Subheadings Lists (Unordered) Lists (Ordered) Quotes Tables Accordion
  25. 25. Accessibility for Accordions and Tables TableAccordion
  26. 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. 27. Text-Styles • Use capitalisation correctly! • Don’t use all capitals for real words! • Use capitals for abbreviations and acronyms

  28. 28. Capitals for Abbreviations
 - Good Example: #WCEU
  29. 29. Capitals for Abbreviations
 - Bad Example: #wceu
  30. 30. Remember:
 #WCEU in Capitals
  31. 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. 32. Important Information https://www.elmastudio.de/en/themes/docs/ pukeko/ • Important information and summary on the top • Highlight important information
  33. 33. Links
  34. 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. 35. Emojis
  36. 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/
  37. 37. Emojis • Cultural/personal differences in understanding of emojis • Browsers show them differently More Problems
  38. 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. 39. Emojis Resource: http://adrianroselli.com/2016/12/accessible-emoji-tweaked.html Tweak for emojis with tool tip
  40. 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. 41. Different Users Prefer Different Content Formats
  42. 42. Mix of Content Formats support text with images, graphics and videos
  43. 43. Images and Graphics a picture is worth a thousand words
  44. 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. 45. Alt-Text in Gutenberg
  46. 46. Twitter - Activate Alt-Text
  47. 47. PDF
  48. 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. 49. Video + Audio
  50. 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. 51. Use Captioning https://www.youtube.com/watch?v=P2YBkZCRTGA
  52. 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. 53. Use Chapter Marks YouTube Podcasts
  54. 54. Videos + Audios Provide show notes (podcasts)
  55. 55. GIFs
  56. 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. 57. GIFs: Bad Example
 Infinite Loop Source: https://giphy.com/gifs/ouE6OPO1MADM4
  58. 58. GIFs: Good Example
 Only plays once Source: https://giphy.com/gifs/ouE6OPO1MADM4
  59. 59. – Tim Berners-Lee “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
  60. 60. Thank you Slides via wp1x1.de #WCEU
  61. 61. More Ressources Accessibility Handbook WordPress
 https://make.wordpress.org/accessibility/handbook/
  62. 62. More Ressources A11y Blog of gov.uk: 
 https://accessibility.blog.gov.uk/ 
 A11y Personas, A11y Posters, …
  63. 63. More Ressources Accessibility Newsletter
 https://a11yweekly.com/
  64. 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. 65. Questions? @Maja Benke #WCEU

×