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?”
- 4. Accessible Websites: Cooperation of Design, Development and Content
- 6. Accessible Content can be consumed by as many people as possible, regardless • situations • goals • skill sets • needs
- 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
- 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
- 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">☃</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
- 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
- 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, …
- 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/