Successfully reported this slideshow.
Your SlideShare is downloading. ×

How to start with Accessibility - WordCamp Stuttgart

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 77 Ad

How to start with Accessibility - WordCamp Stuttgart

Download to read offline

Most freelancers and agencies who work in web knows that accessibility matters, but during the daily working life it is sometimes hard to include accessibility into the projects. At the same time accessibility seems like a huge area and it overwhelms sometimes to start with it. In this talk I will show some tools and resources about accessibility that makes it easy to start with accessibility. Also I will show the most common accessibility issues in web projects and provide simple solutions, that are easy to integrate.

Most freelancers and agencies who work in web knows that accessibility matters, but during the daily working life it is sometimes hard to include accessibility into the projects. At the same time accessibility seems like a huge area and it overwhelms sometimes to start with it. In this talk I will show some tools and resources about accessibility that makes it easy to start with accessibility. Also I will show the most common accessibility issues in web projects and provide simple solutions, that are easy to integrate.

Advertisement
Advertisement

More Related Content

Similar to How to start with Accessibility - WordCamp Stuttgart (20)

Advertisement

How to start with Accessibility - WordCamp Stuttgart

  1. 1. How to start with Accessibility
  2. 2. About Me ▸ Maja Benke ▸ Webdesigner from Berlin ▸ UX and Accessibility Enthusiast ▸ Community Member since 2015 ▸ @MajaBenke
  3. 3. A 11 y A ccessibilit y
  4. 4. Step 1: What is Accessibility
  5. 5. Enabling Access for People with Disabilities, Special Needs and for Assistive Technology What is Accessibility
  6. 6. Kind of Disabilities Physical Audio VisualCognitive What is Accessibility
  7. 7. What is Accessibility Kind of Disabilities PermanentlyTemporary
  8. 8. What is Accessibility Every Fifth Person Needs an Accessible Website
  9. 9. Accessibility is for Everyone! What is Accessibility
  10. 10. Step 2: The right Mindset
  11. 11. "For people without disabilities, 
 technology makes things easier. For people with disabilities, 
 technology makes things possible." IBM Training Manual 1991 The right Mindset
  12. 12. The right Mindset Why Accessibility matters ▸ Makes it Usable for People with Handicaps and doesn’t exclude People ▸ Improves User Experience for Everyone ▸ Legally required for Public Websites ▸ It’s the Right Thing To Do ▸ Improves the Code Quality ▸ Improves SEO of a Website
  13. 13. Step 3: Technologies for Accessibility
  14. 14. Technologies for Accessibility Keyboard Navigation only and alternative Keyboards Source: http://access.sfsu.edu/ Source:https://commons.wikimedia.org/wiki/File:Plage-braille-Alva.jpg
  15. 15. Technologies for Accessibility Stylus/Wand held in the Mouth Source: http://www.unitedspinal.org/disability-products-services/mundstab-mouthstick---mouth-head-sticks/
  16. 16. Technologies for Accessibility Screen Readers (Voice Over, Jaws, …)
  17. 17. Technologies for Accessibility Speech Recognition Software Source: https://voicebot.ai/2018/12/21/google-assistant-wins-another-open-question-test-while-apple-siri- and-amazon-alexa-improve-substantially/
  18. 18. Technologies for Accessibility Switch Buttons Source: https://axesslab.com/switches/
 Recommendation: https://www.24a11y.com/2018/i-used-a-switch-control-for-a-day/
  19. 19. Technologies for Accessibility Accessibility Settings ▸ Browser Options and Extensions
  20. 20. Technologies for Accessibility Reader Mode in Browsers
  21. 21. Technologies for Accessibility Browser Extension
  22. 22. Technologies for Accessibility Accessibility Settings ▸ Browser Extensions and Options ▸ Settings in Operating System ▸ Zoom ▸ Tools ▸ …
  23. 23. AT and Settings Requires Skillset of Users! Technologies for Accessibility
  24. 24. Step 4: Accessibility Rules
  25. 25. Accessibility Rules Integrate A11y in Every Component Design Content Code
  26. 26. A11y: For Project Management
  27. 27. A11y for Project Management Common Mistakes ▸ A11y are often not integrated in Requirements and Calculation ▸ A11y is the First Position to cut out for Budget ▸ Wrong Mindset: „Accessibility is not important for this Target Group / this Project“ ▸ No Accessibility-Testing during the Project
  28. 28. A11y for Project Management Solutions ▸ Accessibility by Design!  ▸ Integrate and understand Accessibility as natural as 
 Responsive Design, SEO or Security ▸ Reduce Costs by integrate A11y from the Beginning and Avoid Fees ▸ In Agencies: try to onboard Everyone in the Team. ▸ Check Accessibility after Every Step ▸ Teach your Clients about A11y, if they Work on the Website 
  29. 29. A11y: For Design
  30. 30. A11y for Design Common mistakes ▸ Bad Color Contrast ▸ Thin and Smalls Fonts  ▸ Information with Color only  ▸ Not underlined Links
  31. 31. A11y for Design Information by Color Only
  32. 32. A11y for Design Common Mistakes ▸ Focus Style is missing ▸ Small clickable Areas / Touch Regions ▸ Mindset: „But A11y does not look good“ ▸ Design breaks Functionality
  33. 33. A11y for Design Design breaks Functionality
  34. 34. A11y for Design Solutions ▸ Understand your Design to Support: ▸ the User ▸ the Functionality and Content of the Website ▸ Design is not Art! ▸ Make it not only Pretty, Make It Usable  ▸ Be Creative. Find fun Ways to make your Design Accessible
  35. 35. A11y for Design Solutions - Layout ▸ Clear Layout ▸ Enough Whitespace
  36. 36. A11y for Design Clear Structure
  37. 37. A11y for Design Solutions - Layout ▸ Clear Layout ▸ Enough Whitespace ▸ Clickable Areas must be large enough ▸ Design the Focus Style together with the Hover Style
  38. 38. A11y for Design Style the Focus
  39. 39. A11y for Design Solutions - Color ▸ Clear Color Contrast (Level AA or higher) ▸ Information not by Color only ▸ Test your site in Black and White ▸ Underline your Links in Text
  40. 40. A11y for Design Underline the Links!
  41. 41. A11y for Design Solutions - Fonts ▸ Use Fonts, that are easy to read ▸ Design it not to thin and small. Make it easy to read the Text ▸ Limit the Use of Uppercase and Italic
  42. 42. A11y Checkliste - Designers - Fonts are easy to read Text is large and thick enough to read easily Limited use of Uppercase and Italic Fonts Site is understandable in Black & White Clear Color Contrast Information not by Color only Links in Text are underlined Color Clear Layout Enough Whitespace Layout Focus has a style Clickable Areas are large enough Ressources ▸ wp1x1.de/checklists-for- accessibility A11y for Design
  43. 43. Ressources ▸ A11y Posters: gov.uk https://accessibility.blog.gov.uk/ 2016/09/02/dos-and-donts-on-designing-for-accessibility/ ▸ WordPress A11y Handbook: https://make.wordpress.org/ accessibility/handbook/ Tools: ▸ Contrastchecker.com ▸ Sim Daltonism A11y for Design
  44. 44. Take a Breath and Drink some Water!
  45. 45. A11y: For Developing
  46. 46. A11y for Developing Common Mistakes ▸ Website not Usable by Keyboard only (especially Menus, Pop Ups, Accordions…) ▸ Wrong Index Order ▸ Wrong use of HTML Elements ▸ No Use of Landmarks ▸ <div class="header“> instead of <header> ▸ Missing Labels for Forms ▸ Time Limits ▸ Use of target=_blank (Links Open in new Tab) ▸ Wrong Language Settings
  47. 47. A11y for Developing Solutions - Semantics ▸ Always use Best Practice  ▸ Use Correct Semantic ▸ Learn HTML5 deeply ▸ Use Landmarks ▸ Correct Index Order
  48. 48. A11y for Developing Solutions - Code ▸ Don’t use target=_blank (let the Choice to the User)  ▸ Use a Focus Style ▸ Forms must have Labels ▸ Test for Keyboard Navigation (Menu, Tables, Accordions,..) ▸ Integrate ”Skip to Content“
  49. 49. A11y for Developing Integrate „Skip to Content“ Integrate „Skip to Content“ in <a class=”screen-reader-text skip-link” href="#content">Skip to content</a> More Informations: make.wordpress.org/accessibility/ handbook/markup/skip-links/
  50. 50. A11y for Developing Solutions - Screen Reader ▸ Use ARIA only if HTML is not enough ▸ Talk: ”Who’s is afraid of ARIA“ from Rian Rietveld
 https://wordpress.tv/2019/06/19/rian-rietveld-whos-afraid- of-aria-2/ ▸ Define Language in HTML-Tag
  51. 51. Use ARIA only if you have to Define Language in HTML-Tag Screen Reader Forms must have Labels Test for Keyboard Navigation (Menu, Tables, Accordions,..) Don’t use target=_blank Use a Focus Style Integrate ”Skip to Content“ Code Use Correct Semantic Use HTML5 Semantic Correct Index Order Use Landmarks A11y Checkliste - Developers - Ressources ▸ wp1x1.de/checklists-for- accessibility A11y for Developing
  52. 52. Ressources ▸ WordPress A11y Handbook: make.wordpress.org/accessibility/ handbook/ ▸ Theme Dev Handbook: developer.wordpress.org/themes/ functionality/accessibility/ Automatic Testing Tools: ▸ Axe: deque.com/axe/ ▸ Wave: wave.webaim.org/
  53. 53. A11y for Developing Testing Tools: Axe
  54. 54. A11y for Developing Testing Tools: Wave
  55. 55. A11y: For Content
  56. 56. A11y for Content Common Mistakes ▸ Wrong Semantic ▸ Big Text-Blocks that are hard to read ▸ No clear Meaning of Headlines, Buttons, Links, … ▸ Link-Text like „Click Here“ ▸ Alt-Texts are Missing
  57. 57. A11y for Content Solutions - Text ▸ Structured Text with Text Elements ▸ To make the scannable and easy to read
  58. 58. A11y for Content Use Headlines and Whitespace
  59. 59. A11y for Content Solutions - Text ▸ Structured Text with Text Elements ▸ To make the scannable and easy to read ▸ Correct Semantics for Headlines ▸ Important Informations on Top ▸ Clear Description for Links ▸ Not „Click Here“, better „See our Guide“ ▸ Don’t open Links by Default in new Tab
  60. 60. A11y for Content Solutions - Content ▸ Variation of Content Formats
  61. 61. A11y for Content Variation of Content Formats
  62. 62. A11y for Content Solutions - Content ▸ Variation of Content Formats ▸ Add Alt-Text to Images ▸ Provide Content from Videos, Graphs, Images also as Text ▸ Provide Subtitels and Captions
  63. 63. A11y for Content Use Captioning youtube.com/watch?v=P2YBkZCRTGA
  64. 64. A11y for Content Solutions - Content ▸ Variation of Content Formats ▸ Add Alt-Text to Images ▸ Provide Content from Videos, Graphs, Images also as Text ▸ Provide Subtitels and Captions ▸ No Autostart for Videos, Audios, Sliders ▸ Avoid Moving and Flashing Elements
  65. 65. A11y Checkliste - Content Creators - Integrate Subtitels and Captions No Autostart No flashing Elements Video, Audio & Slider Clear Description for Links Don’t open Links by Default in new Tab Links Add Alt-Text to Images Images Structured Text with Text Elements Correct Semantics for Headlines Important Informations on Top Text Content Don’t rely on Memory of Content Variation of Content Formats Ressources ▸ wp1x1.de/checklists-for- accessibility A11y for Content
  66. 66. Ressources ▸ A11y Posters: gov.uk https://accessibility.blog.gov.uk/ 2016/09/02/dos-and-donts-on-designing-for-accessibility/ Automatic Testing Tools: ▸ Gutenberg ▸ Plugin: Content Author Accessibility Preview : wordpress.org/plugins/content-author-accessibility-preview/
  67. 67. A11y for Content Gutenberg Testing Tool
  68. 68. A11y for Content Plugin: Content Author Accessibility Preview Content Author Accessibility Preview: wordpress.org/plugins/content-author- accessibility-preview/
  69. 69. A11y: General Rules
  70. 70. General A11y Rules General Accessibility Rules ▸ Be Empathic ▸ Accessibility by Design (like Responsive and SEO) ▸ Let the Choice to the User ▸ Use Best Practice ▸ Use Correct Semantic for your Elements ▸ Learn Basics of Accessibility for your Field ▸ Train your „Accessibility Thinking Muscle“
  71. 71. “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?” Steve Krug Why Accessibility matters
  72. 72. Step 5: Testing Tools
  73. 73. The right Tools Testing Tools ▸ Axe ▸ Wave ▸ ContrastChecker.com ▸ Sim Daltonism ▸ Plugin: Content Author Accessibility Preview ▸ Gutenberg Tools
  74. 74. Step 6: Ressources
  75. 75. Ressources ▸ A11y Posters and more: gov.uk https:// accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on- designing-for-accessibility/ ▸ WordPress A11y Handbook: https://make.wordpress.org/ accessibility/handbook/ ▸ WordPress Dev Handbook: developer.wordpress.org/ coding-standards/wordpress-coding-standards/accessibility/ ▸ "Accessibility for everyone“ - Laura Kalbag ▸ Accessibility Checklists: wp1x1.de/checklists-for-accessibility
  76. 76. Questions?
  77. 77. Ressources ‣ Adrian Rosilli: “Selfish Accessibility”
 youtube.com/watch?v=xbI0665plgM ‣ Taeke Reijenga: The Accessibility Business Case
 wordpress.tv/2019/06/10/taeke-reijenga-the-accessibility- business-case/

×