Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

1

Share

Download to read offline

Global Accessibility Awareness Day

Download to read offline

Presentation given by Claudio Luis Vera and Lisette Arocha for Global Accessibility Awareness Day 2018

Global Accessibility Awareness Day

  1. 1. Building websites for all Web Accessibility and Inclusive Design Claudio Luis Vera - Designer, information architect, human at Simple-theory.com Lisette Maria Arocha - Developer and accessibility specialist at PwC Experience Center
  2. 2. Hats that I’ve worn Ranked by insight and time spent in role Front- end developer Creative Director UX Designer Aging human Management Certified A11y professional Caregiver CLAUDIO LUIS VERA, SIMPLE-THEORY / ROYAL CARIBBEAN
  3. 3. Hats that I’ve worn Ranked by insight and time spent in role Front End Developer Accessibility Speciality Person with Chronic Health Condition LISETTE MARIA AROCHA / PWC EXPERIENCE CENTER
  4. 4. Digital Accessibility Digital accessibility is the practice of making digital experiences useful by everyone, regardless of physical abilities.
  5. 5. Why is accessibility important?
  6. 6. Why is accessibility important? Independence.
  7. 7. 19% of the overall US population reports having a disability - US Census Bureau, 2010
  8. 8. 38.7%of the US population over age 65 reports having a disability - US Census Bureau, 2010
  9. 9. 81-98%of the US population over age 90 reports having a disability - from US Census Bureau, 90+ in the United States: 2006-2008
  10. 10. What is a disability? Disability is not a personal health condition. Disability comes from mismatched human interactions
  11. 11. Disabilities vs. Impairments Sometimes the limitations with our senses and physical abilities are the same. It’s just the circumstances that differ.
  12. 12. Permanent / Temporary / Situational Universal design serves everyone, not just the full-time disabled.
  13. 13. Universal design Create products and environments that the vast majority of people can use, taking into account our natural physical diversity. Design once, for use by all.
  14. 14. What about tailoring user experiences for people with disabilities? Many view this as “separate but equal”
  15. 15. Diversity of Web Users Visual People with “low vision” to full blindness in one or both eyes or color blindness use text-to- speech synthesis, read using braille or need to be able to enlarge or reduce text size and images and have sufficient contrast. Auditory Auditory disabilities can range from being “hard of hearing” to deafness and experience barriers with audio content that does not have captions or transcripts and interactions that rely on voice only. Physical People with motor disabilities experience barriers when websites and applications do not allow for them to use the keyboard or alternate input device or when they provide insufficient time to respond to tasks. Speech Speech disabilities may include difficulty producing speech that is recognizable and rely on alternative ways of communicating, for example, through the use of text based communication. Cognitive Cognitive, learning or neurological abilities impact how people hear, move, see, speak, and understand information and can experience barriers with complex interactions, sentences and moving, blinking or flickering content. Diverse There are many reasons why people may experience varying degrees of auditory, cognitive, physical, speech, and visual disabilities such as temporary or age- related impairments, health conditions or situational limitations. It is important to consider a broad diversity of functional needs.
  16. 16. Understanding barriers to accessibility
  17. 17. Use of Color When you use color to identify or distinguish information, make sure that this information is still available to people who can't perceive color.
  18. 18. Designing for color deficiencies Don’t rely on color coding alone in your interface - add another graphical treatment for those who don’t see color
  19. 19. Not everyone sees the full color spectrum. 9% of males have some sort of color vision deficiency 0.5% of females -National Eye Institute
  20. 20. Dirty window Cataracts
  21. 21. What does a motor disability feel like? Let’s try using a website without a pointing device.
  22. 22. What’s a screen reader? Screen readers are software programs that allow blind or visually impaired users to read the text that is displayed on the computer screen with a speech synthesizer or braille display. -American Federation for the Blind NVDA JAWS Voiceover Mac
  23. 23. main Skipto main Skipto main main
  24. 24. Reasons why accessibility is important It’s our audience People who depend on assistive technology are our customers, too. We need to accommodate for accessibility so that they can purchase product and services online easily. It allows us to scale From a technology standpoint, accessible websites produce quality code that is easier to manage, adapts to various devices and produces better search engine results. It’s just good business Having an accessible website means opening up your products and services to a large and underserved market that are loyal to brands that accommodates them and their needs. It’s the law Title III of the Americans with Disabilities Act requires that business, government and nonprofit service providers make accommodations for accessibility in order to enable access to the same services and products as clients who are not disabled.
  25. 25. The Americans with Disabilities Act Title III of the Americans with Disabilities Act (ADA) requires that businesses and nonprofit services providers make accessibility accommodations to enable the disabled public to access the same services as clients who are not disabled. It prohibits discrimination against people with disabilities in "places of public accommodation". This term has been read in various lawsuits to include electronic media and web sites. Section 508 is an amendment made to the Rehabilitation Act of 1973 and requires federal agencies to make their electronic and information technology accessible to people with disabilities A Voluntary Product Accessibility Template (VPAT) is a document which evaluates how accessible a particular product is according to Section 508. Section 508
  26. 26. Gil v. Winn-Dixie Landmark case tried in June 2017
  27. 27. Gil v. Winn-Dixie Stores, Inc. Main findings: Title III applies to websites that include services that are offered in a brick-and- mortar location. Brands are responsible for all third party software and services offered on their websites. JAWS and NVDA are the screen readers to be evaluated against
  28. 28. Two type of plaintiffs The trolls Law firms that regularly scan major brands’ sites for accessibility mistakes. Can recoup all legal fees Pissed-off PwDs Individuals who are unable to complete core tasks on a website, app or user experience. Can only earn a nominal award.
  29. 29. What is WCAG 2.0? The international standard for web accessibility, made up of an exhaustive set of guidelines.
  30. 30. Because it’s boring AF.
  31. 31. Four Principles of Accessibility (POUR) Perceivable Users must be able to perceive content. Provide text alternatives for non- text content Provide captions and other alternatives for multimedia Create content that can be presented in different ways, including by assistive technologies, without losing meaning Make it easier for users to consume content Operable Users must be able to operate our website using a variety of methods. Make all functionality available from a keyboard Give users enough time to read and use content Avoid using content that causes seizures Help users navigate and find content Understandable Content must be understandable. Make text readable and understandable Make content appear and operate in predictable ways Help users correct mistakes Robust Experience must be robust enough to change with technology. Maximize compatibility with current and future users tools
  32. 32. WCAG Levels “Baseline” Priority A If success criteria is not achieved accessibility users will find it impossible to use “Great standard” Priority AA If success criteria is not achieved accessibility users will find it difficult to use “The Ideal” Priority AAA If success criteria is not achieved accessibility users will find it somewhat difficult to use
  33. 33. “Mostly accessible” helps no one.
  34. 34. Top accessibility mistakes Missing alt tags or alt text Missing form field labels Insufficient color contrast Broken tab index Hidden focus Using styles instead of headings Using buttons where links should go Missing “Skip navigation” link Social toolbars that don’t skip links
  35. 35. Bringing accessibility into your everyday work Self testing Use a browser plug- in or a color contrast checker to test your own work. Formal audits and trusted testers Run tests with users who know assistive technologies. Automated testing Use a tool like AMP or SiteImprove to run reports and tests on your project Continuous monitoring Review new content and use scheduled site crawls to check compliance concept visual design development staging production ongoing
  36. 36. Once accessible does not mean always accessible.
  37. 37. Who’s responsible? How different disciplines impact web accessibility
  38. 38. Strategy & UX Design Development Quality Identifying and planning for potential accessibility issues along the user journey. Applying universal design principles for a good user experience for all users, including people with disabilities. Developing using WCAG standards and a stack-based approach to accessibility. A combination of automated and manual testing is done to ensure WCAG compliance and an accessible experience. Digital Accessibility Accessibility Requirements User Experience Universal Design Content Strategy User Research Activities Design Accessibility Testing User Centered Usability Testing Developing to WCAG Standards Developing accessible interactions Manual Accessibility Testing Automated Accessibility Testing Accessibility Stack How to integrate accessibility into your product lifecycle
  39. 39. Best Practices
  40. 40. PwC’s Digital Services
  41. 41. Indiana Jones Method Learn an important accessibility lesson from Indiana Jones: when you take something in an interface away, you need to replace it with something that serves the same purpose just as well, or even better.
  42. 42. Sample of a color palette built around color contrast. An accessible color palette
  43. 43. Choosing colors for accessibility You can use Lea Verou’s color checker to test ratios WCAG sets a minimum standard for contrast at a ratio of 4.5 : 1
  44. 44. How to get more involved Learn to check your work Use WAVE, aXe, or other testing tools Get trained Courses are available through Deque U. Get certified Core (CPACC), technical (WAS) and combined (CPWA) certification Join UGA’s Web Accessibility Group IAAP IxDA Accessibility groups in various open source projects
  45. 45. Resources HTML Codesniffer browser bookmarklet that checks code conforms to standards WAVE accessibility tester (Chrome/Firefox) AXE accessibility tester (Chrome dev tools) Contrast checker from the Mac App Store WebbIE (screen reader for the sighted) IAAP (International Association of Accessibility Professionals) Deque University (accessibility courses) UGA Web Accessibility Group (WAG) The lawsuit that will change web accessibility, (Gil v. Winn-Dixie blog post)
  • joedevon

    May. 18, 2019

Presentation given by Claudio Luis Vera and Lisette Arocha for Global Accessibility Awareness Day 2018

Views

Total views

208

On Slideshare

0

From embeds

0

Number of embeds

1

Actions

Downloads

13

Shares

0

Comments

0

Likes

1

×