More Related Content
Accessible content
- 1.
- 2.
- 3. – Steve Krug “Theone 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: Cooperationof Design, Development and Content
- 5.
- 6. Accessible Content can beconsumed by as many people as possible, regardless • situations • goals • skill sets • needs
- 7.
- 8.
- 9. Accessibility Personas Pawel Asperger Simone Dyslexic Saleem Deaf Ashleigh Sight Impaired Ron VariousConditions Chris Rheumatoid ArthritisSight Impaired Claudia
- 10. Accessibility Personas Pawel Asperger Simone Dyslexic Saleem Deaf Ashleigh Sight Impaired Ron VariousConditions Chris Rheumatoid ArthritisSight Impaired Claudia
- 11. Pawel • 24 yearold chemistry graduate • Asperger’s and anxiety • Adjusts things, like colours, to reduce potential stress and distractions https://alphagov.github.io/accessibility-personas/pawel/
- 12.
- 13. Simone • 41 yearold office manager • Dyslexic • Uses software which highlights text as it reads it out https://alphagov.github.io/accessibility-personas/simone/
- 14.
- 15.
- 16. Dos and Don'tsfor Accessible Content
- 17.
- 18. Use Subheadings to Loosenup Text-Blocks Avoid large text-blocks - use elements to loosen up text
- 19. Text • Use semanticstructure with headlines • Only one H1 per page • Don’t skip a headline-level • Content defines headline-level, not style
- 20. Gutenberg Helps toStick to Semantic Heading Top Toolbar - H1 not selectable
- 21. The Gutenberg Editorhelps to stick to the Semantic Heading Structure Top Toolbar - H1 not selectable Error message for wrong semantics
- 22. Text-Elements Designed by Vaadinfrom Flaticon https://www.flaticon.com/authors/vaadin/lineal Subheadings Lists (Unordered) Lists (Ordered)
- 23. Correct use ofLists • Unordered list for enumeration with no particular order • Ordered lists for content, where the order matters
- 24. Text-Elements Designed by Vaadinfrom Flaticon https://www.flaticon.com/authors/vaadin/lineal Subheadings Lists (Unordered) Lists (Ordered) Quotes Tables Accordion
- 25. Accessibility for Accordions andTables TableAccordion
- 26. Accessibility for Accordions andTables • 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 capitalisationcorrectly! • 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.
- 31. Content • Don’t gowild 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/ • Importantinformation and summary on the top • Highlight important information
- 33.
- 34. Links • Clear descriptionfor links. Not “Click here”! Better: “Contact Us” • Don’t open in a new tab! If you do, tell the user
- 35.
- 36. Emojis • Better understandingof 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 differencesin 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: GroupLensResearch, University of Minnesota) These are the same emoji “Grinning”!
- 39.
- 40. Emojis Use them innative 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 DifferentContent Formats
- 42. Mix of ContentFormats support text with images, graphics and videos
- 43. Images and Graphics apicture 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.
- 46. Twitter - ActivateAlt-Text
- 47.
- 48. PDF • Hard tomake it accessible - Try to avoid it • Provide informations also on the website (as HTML) • Use semantic text-elements, same rules like on websites
- 49.
- 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.
- 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 YouTubePodcasts
- 54. Videos + Audios Provideshow notes (podcasts)
- 55.
- 56. GIFs • Good wayexpress 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 InfiniteLoop Source: https://giphy.com/gifs/ouE6OPO1MADM4
- 58. GIFs: Good Example Onlyplays once Source: https://giphy.com/gifs/ouE6OPO1MADM4
- 59. – Tim Berners-Lee “Thepower of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
- 60. Thank you Slides viawp1x1.de #WCEU
- 61. More Ressources Accessibility HandbookWordPress https://make.wordpress.org/accessibility/handbook/
- 62. More Ressources A11y Blogof gov.uk: https://accessibility.blog.gov.uk/ A11y Personas, A11y Posters, …
- 63.
- 64. More Ressources • “Accessibilityfor Everyone”: https://abookapart.com/ products/accessibility-for-everyone (Book, ebook, Audiobook) • https://webaim.org/ • Guidelines: https://www.w3.org/TR/WCAG21/
- 65.