SlideShare a Scribd company logo

Week 3 Lecture: Accessibility

•Download as PPTX, PDF•
•
Katherine McCurdy-Lapierre, R.G.D.
Katherine McCurdy-Lapierre, R.G.D.

This document discusses accessibility and the importance of considering people with disabilities in web design. It covers the Accessibility for Ontarians with Disabilities Act (AODA), which aims to make Ontario accessible by 2025. It also discusses the four principles of accessibility: perceivable, operable, understandable, and robust. The document recommends following WCAG 2.0 guidelines and designing according to the "accessible first" principle to create content that can be used by all.

Related slideshows

Design for Accessibility
Design for AccessibilityDesign for Accessibility
Design for Accessibility
 
Website Accessibility
Website AccessibilityWebsite Accessibility
Website Accessibility
 
Accessibility for Fun and Profit
Accessibility for Fun and ProfitAccessibility for Fun and Profit
Accessibility for Fun and Profit
 
1 of 29
Week 3 Accessibility Why it matters and where to start
What we’ll cover today Pre-reading for today introduced you to the topic of Online Accessibility and the POUR Principles. Today we’ll talk about: • AODA & the law • Disabilities to consider • POUR • WCAG 2.0 • Conclusions
Ontario, Canada and beyond AODA The Accessibility for Ontarians with Disabilities Act (AODA) aims to make Ontario accessible to people with disabilities in key areas of daily living by 2025. This Act has legal implications and requires legal compliance now and in the future. It can be enforced through Human Rights complaints. Similar guidelines existing at a Federal level within Canada, the US and many other countries.
Consider the numbers… More than 1.85 million people in Ontario (4.4 million people in Canada) have a disability - that’s 15%! This number is on the rise as our population ages. In the US among working age adults: • 25% of computer users had visual difficulty or impairment • 24% of computer users have a dexterity difficulty or impairment • 20% of computer users have a hearing difficulty or impairment http://switchedonmedia.com.au/blog/screen-readers-and-assistive-technology-5-ways-to-improve-web-accessibility/
The principle of equal access for all “Accessibility is about much more than ramps and automatic doors. How we receive and process the information around us determines, in large part, the extent to which we are able to participate in the world in which we live.“ Madeleine Meilleur, Minister of Community and Social Services and Minister Responsible for Accessibility
The principle of equal access for all As Graphic Designers we strive to make our work easy to use and navigate by everyone.
The principle of equal access for all …but who is everyone? How do we ensure people can consume, interact with and enjoy the items we design and produce?
The principle of equal access for all You may have heard the increasingly popular idea of “mobile first,” meaning to design for mobile screens then adapt for larger screen size.
The principle of equal access for all Now, consider the idea of “accessible first” as a way to go further: Simple and flexible design that focuses on key tasks. …then code to standards to allow that to happen on any screen and device.
Disabilities to consider 1. Visual: Blindness, low vision, color-blindness 2. Hearing: Deafness and hard-of- hearing 3. Motor: Inability to use a mouse, slow response time, limited fine motor control 4. Cognitive: Learning disabilities, distractibility, inability to remember or focus on large amounts of information
Video: Keeping Web Accessibility In Mind Watch the video > Note: the video is from the perspective of an American postsecondary institution.
Think about your potential customers using the following devices…
Sip-and-puff system for navigationTrackballs (keyboard alternative) Screen magnifier Screen reader
How can you ensure everyone can access and understand your work?
The POUR Principles 1. Perceivable 2. Operable 3. Understandable 4. Robust
Perceivable People need to be able to input the information into their brain so that they can process it. If the information cannot get into the brain, it is inaccessible. • Sight • range of vision: low vision to fully blind • colour blind users • Hearing • range of hearing ability: hearing impaired to deaf • Touch • consider a blind-deaf user (braille) Bottom line: Content (text, video, graphics) must be transformable. How can designers make a site more perceivable? Example: CNIB Built in high contract view
Operable Not everyone uses a standard keyboard and mouse to access the web. Some people simply prefer to use the alternative technologies. • Content that is accessible to the keyboard is operable by any other assistive device • Video play, animations must be controllable • What happens when someone makes a mistake? How to they get back on track? How can designers make a site more operable? Example: CNIB Keyboard navigable
Understandable Understandability can be just as big a barrier to accessibility as any of the more technical issues. • Is the content easy to read and understand? (headings, jargon…) • Follow usability principles: • “Can most people figure it out and accomplish a goal, without it being more trouble then it’s worth?” • Allow for multiple ways to consume information (text, video, images…) How can designers make a site more understandable ? Example: Apple Watch Multiple ways to consume information
Robust People can be using different browsers, devices, operating systems, settings, add-ons… but all expect the web to work. Allow for choice. • Users should be allowed to choose their own technologies to access web content. • However, this does not mean you need to support Netscape 1.0… • Current model is to design for a spec or standard instead of a certain browser - eg. design to HTML5 and CSS3, then decide what features you want to support on older browsers How can designers make a site more robust? Example: Government of Canada Responsive, flexible, works on all devices
POUR and WCAG 2.0 POUR forms the backbone of WCAG 2.0, an internationally accepted standard for web accessibility.
What is WCAG 2.0? • Purpose: make life easier for people with disabilities • Goal: make the web a solution not a barrier • Guidelines: the 4 POUR principles • Method: provides techniques to aid designers and developers meet the guidelines
A, AA and AAA Government of Ontario Public sector organizations, businesses and non-profit organizations (50+ staff) Level A 2014: New public websites and web content must conform with WCAG 2.0 Level A Level AA 2016: All public websites and web content must conform with WCAG 2.0 Level AA 2020: All public and internal websites and web content must conform with WCAG 2.0 Level AA 2020: All public websites and web content posted after 2012, must conform with WCAG 2.0 Level AA
Fringe benefits… Usability: • speeds up load times and site performance • improves the mobile experience • makes content clearer and easier to digest Profit: • wider audience or consumer base • aging population - a huge future market! • makes pages more “searchable” Avoid legal issues: • avoids lawsuits and/or bad press
Conclusions
Accessibility is no longer an option. It’s a necessity. And, it’s the right thing to do.
As designers, see this as an opportunity to produce better work.
Conclusions • Bottom line: Accessibility first. Making information and ideas available to everyone is the defining goal of graphic design – and has been from the beginning. • Run a tests on a page or site. Load the Wave tool bar on Chrome or Firefox. • Start with the simple fixes. When adapting existing content some accessibility barriers will be simple to fix, while others will be more complex. • Opportunities: Understanding accessibility can open employment doors! Consider the implications of the 2021 deadline for Ontario.
Further reading… • I’ve only touched on the basics • For further reading about the overall concept, I recommend “A Web for Everyone” • I have a digital copy if anyone would like to have a look, or check out the book's site • To learn the technical aspects, start with webaim.org
References • http://webaim.org/articles/pour • http://www.mcss.gov.on.ca/en/mcss/publications/accessON/accessible_websites/toc.aspx • http://www.mcss.gov.on.ca/en/mcss/publications/accessON/accessible_websites/make.aspx • http://rgd-accessibledesign.com/wp- content/uploads/2014/07/RGD_AccessAbility_Handbook.pdf • http://wave.webaim.org/ • http://rosenfeldmedia.com/books/a-web-for-everyone • http://rosenfeldmedia.com/app/uploads/2014/11/AccessibleUX-Personas- Overview1.pdf?3e1f2f • http://webaim.org/resources/designers/ • http://powazek.com/posts/2583

More Related Content

Week 3 Lecture: Accessibility

  • 1. Week 3 Accessibility Why it matters and where to start
  • 2. What we’ll cover today Pre-reading for today introduced you to the topic of Online Accessibility and the POUR Principles. Today we’ll talk about: • AODA & the law • Disabilities to consider • POUR • WCAG 2.0 • Conclusions
  • 3. Ontario, Canada and beyond AODA The Accessibility for Ontarians with Disabilities Act (AODA) aims to make Ontario accessible to people with disabilities in key areas of daily living by 2025. This Act has legal implications and requires legal compliance now and in the future. It can be enforced through Human Rights complaints. Similar guidelines existing at a Federal level within Canada, the US and many other countries.
  • 4. Consider the numbers… More than 1.85 million people in Ontario (4.4 million people in Canada) have a disability - that’s 15%! This number is on the rise as our population ages. In the US among working age adults: • 25% of computer users had visual difficulty or impairment • 24% of computer users have a dexterity difficulty or impairment • 20% of computer users have a hearing difficulty or impairment http://switchedonmedia.com.au/blog/screen-readers-and-assistive-technology-5-ways-to-improve-web-accessibility/
  • 5. The principle of equal access for all “Accessibility is about much more than ramps and automatic doors. How we receive and process the information around us determines, in large part, the extent to which we are able to participate in the world in which we live.“ Madeleine Meilleur, Minister of Community and Social Services and Minister Responsible for Accessibility
  • 6. The principle of equal access for all As Graphic Designers we strive to make our work easy to use and navigate by everyone.
  • 7. The principle of equal access for all …but who is everyone? How do we ensure people can consume, interact with and enjoy the items we design and produce?
  • 8. The principle of equal access for all You may have heard the increasingly popular idea of “mobile first,” meaning to design for mobile screens then adapt for larger screen size.
  • 9. The principle of equal access for all Now, consider the idea of “accessible first” as a way to go further: Simple and flexible design that focuses on key tasks. …then code to standards to allow that to happen on any screen and device.
  • 10. Disabilities to consider 1. Visual: Blindness, low vision, color-blindness 2. Hearing: Deafness and hard-of- hearing 3. Motor: Inability to use a mouse, slow response time, limited fine motor control 4. Cognitive: Learning disabilities, distractibility, inability to remember or focus on large amounts of information
  • 11. Video: Keeping Web Accessibility In Mind Watch the video > Note: the video is from the perspective of an American postsecondary institution.
  • 12. Think about your potential customers using the following devices…
  • 13. Sip-and-puff system for navigationTrackballs (keyboard alternative) Screen magnifier Screen reader
  • 14. How can you ensure everyone can access and understand your work?
  • 15. The POUR Principles 1. Perceivable 2. Operable 3. Understandable 4. Robust
  • 16. Perceivable People need to be able to input the information into their brain so that they can process it. If the information cannot get into the brain, it is inaccessible. • Sight • range of vision: low vision to fully blind • colour blind users • Hearing • range of hearing ability: hearing impaired to deaf • Touch • consider a blind-deaf user (braille) Bottom line: Content (text, video, graphics) must be transformable. How can designers make a site more perceivable? Example: CNIB Built in high contract view
  • 17. Operable Not everyone uses a standard keyboard and mouse to access the web. Some people simply prefer to use the alternative technologies. • Content that is accessible to the keyboard is operable by any other assistive device • Video play, animations must be controllable • What happens when someone makes a mistake? How to they get back on track? How can designers make a site more operable? Example: CNIB Keyboard navigable
  • 18. Understandable Understandability can be just as big a barrier to accessibility as any of the more technical issues. • Is the content easy to read and understand? (headings, jargon…) • Follow usability principles: • “Can most people figure it out and accomplish a goal, without it being more trouble then it’s worth?” • Allow for multiple ways to consume information (text, video, images…) How can designers make a site more understandable ? Example: Apple Watch Multiple ways to consume information
  • 19. Robust People can be using different browsers, devices, operating systems, settings, add-ons… but all expect the web to work. Allow for choice. • Users should be allowed to choose their own technologies to access web content. • However, this does not mean you need to support Netscape 1.0… • Current model is to design for a spec or standard instead of a certain browser - eg. design to HTML5 and CSS3, then decide what features you want to support on older browsers How can designers make a site more robust? Example: Government of Canada Responsive, flexible, works on all devices
  • 20. POUR and WCAG 2.0 POUR forms the backbone of WCAG 2.0, an internationally accepted standard for web accessibility.
  • 21. What is WCAG 2.0? • Purpose: make life easier for people with disabilities • Goal: make the web a solution not a barrier • Guidelines: the 4 POUR principles • Method: provides techniques to aid designers and developers meet the guidelines
  • 22. A, AA and AAA Government of Ontario Public sector organizations, businesses and non-profit organizations (50+ staff) Level A 2014: New public websites and web content must conform with WCAG 2.0 Level A Level AA 2016: All public websites and web content must conform with WCAG 2.0 Level AA 2020: All public and internal websites and web content must conform with WCAG 2.0 Level AA 2020: All public websites and web content posted after 2012, must conform with WCAG 2.0 Level AA
  • 23. Fringe benefits… Usability: • speeds up load times and site performance • improves the mobile experience • makes content clearer and easier to digest Profit: • wider audience or consumer base • aging population - a huge future market! • makes pages more “searchable” Avoid legal issues: • avoids lawsuits and/or bad press
  • 25. Accessibility is no longer an option. It’s a necessity. And, it’s the right thing to do.
  • 26. As designers, see this as an opportunity to produce better work.
  • 27. Conclusions • Bottom line: Accessibility first. Making information and ideas available to everyone is the defining goal of graphic design – and has been from the beginning. • Run a tests on a page or site. Load the Wave tool bar on Chrome or Firefox. • Start with the simple fixes. When adapting existing content some accessibility barriers will be simple to fix, while others will be more complex. • Opportunities: Understanding accessibility can open employment doors! Consider the implications of the 2021 deadline for Ontario.
  • 28. Further reading… • I’ve only touched on the basics • For further reading about the overall concept, I recommend “A Web for Everyone” • I have a digital copy if anyone would like to have a look, or check out the book's site • To learn the technical aspects, start with webaim.org
  • 29. References • http://webaim.org/articles/pour • http://www.mcss.gov.on.ca/en/mcss/publications/accessON/accessible_websites/toc.aspx • http://www.mcss.gov.on.ca/en/mcss/publications/accessON/accessible_websites/make.aspx • http://rgd-accessibledesign.com/wp- content/uploads/2014/07/RGD_AccessAbility_Handbook.pdf • http://wave.webaim.org/ • http://rosenfeldmedia.com/books/a-web-for-everyone • http://rosenfeldmedia.com/app/uploads/2014/11/AccessibleUX-Personas- Overview1.pdf?3e1f2f • http://webaim.org/resources/designers/ • http://powazek.com/posts/2583