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


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.

  • Login to see the comments

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
  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
  12. 12. Pawel
  13. 13. Simone • 41 year old office manager • Dyslexic • Uses software which highlights text as it reads it out
  14. 14. Simone
  15. 15. Setting up Personas 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 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 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: • •
  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 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>
  37. 37. Emojis • Cultural/personal differences in understanding of emojis • Browsers show them differently More Problems
  38. 38. Emojis Ressource:
 (Image: GroupLens Research, University of Minnesota) These are the same emoji “Grinning”!
  39. 39. Emojis Resource: 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
  52. 52. Videos + Audios • Transcribe your audios (and video) and write information also into the 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:
  58. 58. GIFs: Good Example
 Only plays once Source:
  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 #WCEU
  61. 61. More Ressources Accessibility Handbook WordPress
  62. 62. More Ressources A11y Blog of 
 A11y Personas, A11y Posters, …
  63. 63. More Ressources Accessibility Newsletter
  64. 64. More Ressources • “Accessibility for Everyone”: products/accessibility-for-everyone (Book, ebook, Audiobook) • • Guidelines:
  65. 65. Questions? @Maja Benke #WCEU