際際滷

際際滷Share a Scribd company logo

Accessibility for beginners

Elizabeth Fiennes
Elizabeth Fiennes

A workshop for those new to accessibility - what it is - what it looks like when done well - how to advocate for improvement - how to audit for it - tools to use to assess it

1 of 27
Download to read offline
Accessibility for beginners Geir Gulbrandsen, Zinat Wali & Elizabeth Fiennes
What is web accessibility? A product design practice Ensures your website can be interacted with by everyone including those with issues around: vision, hearing, motor function and cognition It is the just, fair and inclusive way to share your website with the world
Some myths Its all about headings Its all about contrast but this can be adjusted in the browser anyway Its expensive, time-consuming and so subjective We will get sued if someone with vision, hearing, motor function or cognition issues cannot use our site in a particular way We have to be able to prove our site has been tested to a particular standard or the government will make us take it down My user base dont have accessibility needs
Accessibility and the law Related EU legislation (public sector): Directive (EU) 2016/2102 of the European Parliament (Based on WCAG 2.1) Link Ireland (general) (Disability act of 2005) Link UK legislation (general): (Based on WCAG 2.0) (Disability act of 2010) Link Link Link
Who benefits when you design for accessibility? Our family members living with permanent conditions Our friends with temporary situational limitations Our relatives using older computers or phones Our countrymen and women who are new to the web or to our websites Our customers who are not fluent in the language of our websites. Society Your company Your employees You Everybody
Supporting people with visual challenges: Globally, estimates say 1.3bn people live with a visual impairment. 217 million have a moderate to severe distance vision impairment 826 million people live with a near vision impairment 36 million people are blind The majority of people with vision impairment are over the age of 50. Source: The WHO
Web Content Accessibility guidelines (WCAG) World Wide Web Consortium (W3C) are the main international standards organization for the Internet. They publish the WCAG guidelines. Main WCAG Principles Web content should be: Perceivable Operable Understandable Robust
Accessible visual design Clear, distinct links to the other parts of the site (Understandable) Clear headings which screen readers will be able to easily read (Perceivable) UI reorders to accommodate zoom (Operable) Search box at the top of the page (Predictable) Uncluttered design (Understandable)
Design considerations Please turn to the cards with this symbol to look at some design and testing ideas to support people with visual challenges Is there anything that is not clear?
Lets get hands on Please go to: (We apologise in advance) (Massively apologise) https://www.theworldsworstwebsiteever.co m Can you notice any issues that may a鍖ect people with visual accessibility needs?
Supporting people with audio challenges: Around 466 million people worldwide have a degree of hearing loss 34 million are children It is estimated that by 2050 over 900 million people will have a debilitating level of hearing Source: The WHO
Accessible audio design Closed caption / subtitles for the hard of hearing (Perceivable) The subtitles keep pace with what is being said (Understandable) Di鍖erent size options for the subtitles (Perceivable) The subtitles are correct (Understandable) Content can be played at a variety of download qualities which support the use of older browsers and devices (Robust)
Design considerations Please turn to the cards with this symbol to look at some design ideas to support people with hearing challenges Is there anything that is not clear?
Lets get hands on Turn o鍖 your sound Please go to: https://www.warnerbros.com/movies/ youve-got-mail/#videos Play the video Can you notice any issues that may a鍖ect people with audio accessibility needs? (Hint: Find subtitles / text)
Accessible motor design Keyboard navigation (Operable) Distinct color/graphic on focus (Perceivable) Large clickable areas (Operable)
Supporting people with motor-based challenges: An estimated 720 million people experience significant motor function di鍖iculties in their everyday lives 100 million have very significant di鍖iculties 90 million of these are children aged 15 and under Source: The WHO 2004 World report on disability
Design considerations Please turn to the cards with this symbol to look at some design ideas to support people with motor-function challenges Is there anything that is not clear?
Lets get hands on Please go to: http://www.nicolawalbeck.com Can you find any issues that may a鍖ect people with motor-based accessibility needs? (Hint: Only use your keyboard to navigate the site)
Supporting people with cognitive issues: A person with cognitive issues may have challenges around: Retaining information Problem-Solving Attention span Reading comprehension (Elizabeth!) Linguistic ambiguity Verbal Comprehension
Accessible cognitive design Predictable search box location with known icons (Understandable) Letter spacing (Understandable) Clear headings (Operable and Perceivable) Font sizing and resizing (Perceivable) Line lengths (Understandable) Friendly Fonts (Perceivable)
Design considerations Please turn to the cards with this symbol to look at some design ideas to support people with cognitive challenges Is there anything that is not clear?
Lets get hands on Please go to: https://www.marvel.com/captainmarvel Can you find any issues that may a鍖ect people with cognition-based accessibility needs?
What if my website is already live? Its never too late to start! Use available tools and services Bake them into your pipeline if time allows Perform your own testing/audit/evaluation manually Bring in a good generalist company like Scott Logic who can help advise you on design and testing Photo by Nathan Bingle on Unsplash
Some helpful tools Lighthouse If you are using Google Chrome it comes with an accessibility audit tool built in. Be aware that it does only catch some types of problems. Behaviour and experience must still be tested manually. It is an easily accessible good start. Axe Axe from Deque is a browser plugin that adds functionality to the Dev Tools. Provides details about the issue, can highlight the problem in the code or on the page, and even suggests some way to fix it. Wave The Web Accessibility Evaluation Tool - another browser plugin. Audits for a wide range of issues including contrast analysis. Full list from: https://www.w3.org/WAI/ER/tools/
Lets get hands on Please go to: https://wave.webaim.org/ Enter www.lingscars.com in the box labeled Web page address...: and hit Enter Have a look at the left-hand side report and consider the issues reported.
Progress is being made how will you contribute to it?
Questions?

More Related Content

Accessibility for beginners

  • 1. Accessibility for beginners Geir Gulbrandsen, Zinat Wali & Elizabeth Fiennes
  • 2. What is web accessibility? A product design practice Ensures your website can be interacted with by everyone including those with issues around: vision, hearing, motor function and cognition It is the just, fair and inclusive way to share your website with the world
  • 3. Some myths Its all about headings Its all about contrast but this can be adjusted in the browser anyway Its expensive, time-consuming and so subjective We will get sued if someone with vision, hearing, motor function or cognition issues cannot use our site in a particular way We have to be able to prove our site has been tested to a particular standard or the government will make us take it down My user base dont have accessibility needs
  • 4. Accessibility and the law Related EU legislation (public sector): Directive (EU) 2016/2102 of the European Parliament (Based on WCAG 2.1) Link Ireland (general) (Disability act of 2005) Link UK legislation (general): (Based on WCAG 2.0) (Disability act of 2010) Link Link Link
  • 5. Who benefits when you design for accessibility? Our family members living with permanent conditions Our friends with temporary situational limitations Our relatives using older computers or phones Our countrymen and women who are new to the web or to our websites Our customers who are not fluent in the language of our websites. Society Your company Your employees You Everybody
  • 6. Supporting people with visual challenges: Globally, estimates say 1.3bn people live with a visual impairment. 217 million have a moderate to severe distance vision impairment 826 million people live with a near vision impairment 36 million people are blind The majority of people with vision impairment are over the age of 50. Source: The WHO
  • 7. Web Content Accessibility guidelines (WCAG) World Wide Web Consortium (W3C) are the main international standards organization for the Internet. They publish the WCAG guidelines. Main WCAG Principles Web content should be: Perceivable Operable Understandable Robust
  • 8. Accessible visual design Clear, distinct links to the other parts of the site (Understandable) Clear headings which screen readers will be able to easily read (Perceivable) UI reorders to accommodate zoom (Operable) Search box at the top of the page (Predictable) Uncluttered design (Understandable)
  • 9. Design considerations Please turn to the cards with this symbol to look at some design and testing ideas to support people with visual challenges Is there anything that is not clear?
  • 10. Lets get hands on Please go to: (We apologise in advance) (Massively apologise) https://www.theworldsworstwebsiteever.co m Can you notice any issues that may a鍖ect people with visual accessibility needs?
  • 11. Supporting people with audio challenges: Around 466 million people worldwide have a degree of hearing loss 34 million are children It is estimated that by 2050 over 900 million people will have a debilitating level of hearing Source: The WHO
  • 12. Accessible audio design Closed caption / subtitles for the hard of hearing (Perceivable) The subtitles keep pace with what is being said (Understandable) Di鍖erent size options for the subtitles (Perceivable) The subtitles are correct (Understandable) Content can be played at a variety of download qualities which support the use of older browsers and devices (Robust)
  • 13. Design considerations Please turn to the cards with this symbol to look at some design ideas to support people with hearing challenges Is there anything that is not clear?
  • 14. Lets get hands on Turn o鍖 your sound Please go to: https://www.warnerbros.com/movies/ youve-got-mail/#videos Play the video Can you notice any issues that may a鍖ect people with audio accessibility needs? (Hint: Find subtitles / text)
  • 15. Accessible motor design Keyboard navigation (Operable) Distinct color/graphic on focus (Perceivable) Large clickable areas (Operable)
  • 16. Supporting people with motor-based challenges: An estimated 720 million people experience significant motor function di鍖iculties in their everyday lives 100 million have very significant di鍖iculties 90 million of these are children aged 15 and under Source: The WHO 2004 World report on disability
  • 17. Design considerations Please turn to the cards with this symbol to look at some design ideas to support people with motor-function challenges Is there anything that is not clear?
  • 18. Lets get hands on Please go to: http://www.nicolawalbeck.com Can you find any issues that may a鍖ect people with motor-based accessibility needs? (Hint: Only use your keyboard to navigate the site)
  • 19. Supporting people with cognitive issues: A person with cognitive issues may have challenges around: Retaining information Problem-Solving Attention span Reading comprehension (Elizabeth!) Linguistic ambiguity Verbal Comprehension
  • 20. Accessible cognitive design Predictable search box location with known icons (Understandable) Letter spacing (Understandable) Clear headings (Operable and Perceivable) Font sizing and resizing (Perceivable) Line lengths (Understandable) Friendly Fonts (Perceivable)
  • 21. Design considerations Please turn to the cards with this symbol to look at some design ideas to support people with cognitive challenges Is there anything that is not clear?
  • 22. Lets get hands on Please go to: https://www.marvel.com/captainmarvel Can you find any issues that may a鍖ect people with cognition-based accessibility needs?
  • 23. What if my website is already live? Its never too late to start! Use available tools and services Bake them into your pipeline if time allows Perform your own testing/audit/evaluation manually Bring in a good generalist company like Scott Logic who can help advise you on design and testing Photo by Nathan Bingle on Unsplash
  • 24. Some helpful tools Lighthouse If you are using Google Chrome it comes with an accessibility audit tool built in. Be aware that it does only catch some types of problems. Behaviour and experience must still be tested manually. It is an easily accessible good start. Axe Axe from Deque is a browser plugin that adds functionality to the Dev Tools. Provides details about the issue, can highlight the problem in the code or on the page, and even suggests some way to fix it. Wave The Web Accessibility Evaluation Tool - another browser plugin. Audits for a wide range of issues including contrast analysis. Full list from: https://www.w3.org/WAI/ER/tools/
  • 25. Lets get hands on Please go to: https://wave.webaim.org/ Enter www.lingscars.com in the box labeled Web page address...: and hit Enter Have a look at the left-hand side report and consider the issues reported.
  • 26. Progress is being made how will you contribute to it?