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.

Web accessibility 101: The why, who, what, and how of "a11y"

624 views

Published on

Our in-house ecentricarts Accessibility Team (known as EAT) has compiled a ton of resources to help you understand the ins and outs of web accessibility. This includes: why it matters, who it impacts, common misconceptions, a beginner's guide to WCAG 2.0 and accessibility legislation, and how you can test, design, develop, and create more accessible websites.

This presentation also includes examples of before/after screenreader demos, and our 2017 company video made with described audio.

Published in: Internet
  • Be the first to comment

Web accessibility 101: The why, who, what, and how of "a11y"

  1. 1. Web accessibility 101 The why, who, what, and how of “a11y” September 2017
  2. 2. Brought to you by EAT, the ecentricarts accessibility team.
  3. 3. What we’ll cover: ➜ Why accessibility? An introduction ● Why we care ➜ Common a11y misconceptions ➜ Understanding accessibility guidelines ● What is WCAG? ● Legal requirements ➜ Making accessible content ➜ Coding accessible websites ● Accessible CMS customizations ➜ Accessibility tools & testing FYI: “a11y” is Twitter shorthand for accessibility (there are 11 letters between the a and y). Use #a11y on social media to find the latest articles and discussions.
  4. 4. Why accessibility? The why’s, who’s, and how’s
  5. 5. The internet is one of the best things that has ever happened to people with disabilities. WebAIM, a world leader in web accessibility
  6. 6. Accessibility by the numbers Americans have difficulty performing functional or participatory activities (US Census) 1 in 5 of the global population report challenges in dealing with basic daily tasks and interactions (WHO) 15% Of us will have some form of disability by the time we retire (StatsCan) >30%
  7. 7. https://twitter.com/estellevw/status/877642246258016258 http://gs.statcounter.com/ https://www.census.gov/newsroom/releases/archives/miscellaneous/cb12-134.html
  8. 8. Accessibility helps: The deaf and hard of hearing The blind and partially sighted Those with limited dexterity or mobility Those with cognitive and/or vestibular disorders Remember, these may be permanent or temporary conditions
  9. 9. Accessibility helps: A person holding a phone in one hand A person with concussion symptoms A person with a broken arm A person outside in bright sunlight These circumstances are also known as situational disabilities
  10. 10. Accessibility helps... everyone! ➜ We all benefit from clear, logical, and user-friendly content and experiences ➜ Remember, over 30% of Canadians will have some form of disability by the time we retire BONUS: Accessible websites use semantic HTML and can help increase organic search traffic by as much as 50%
  11. 11. Assistive Technologies Assistive technologies help users with disabilities increase, maintain, or improve their functional capabilities. ➜ Screen readers ➜ Eye tracking software ➜ Keyboard shortcuts ➜ Braille displays
  12. 12. Why we care A (very) brief statement
  13. 13. We think everyone deserves to learn and access information online, and it’s our responsibility [as designers, developers, and content creators] to help bridge the usability gap. - ecentricarts accessibility team
  14. 14. Common web accessibility misconceptions
  15. 15. Common misconceptions “Web accessibility only helps a fraction of my users/the population.” ➜ 3.8 million Canadians over 15 years old (14%) live with disabilities ➜ 7.2% of Canadians have mobility issues, yet all new buildings in Ontario must be barrier-free - why not the internet, too? ● Barrier-free buildings help people with permanent and temporary motor disabilities, plus situational disabilities (e.g. a parent pushing a stroller) ➜ The big picture: There are significant overlaps between accessibility and usability that can benefit everyone
  16. 16. Common misconceptions “Web accessibility is expensive and time consuming.” ➜ More research is required to create accessible sites, but designers and developers experienced in accessibility require less research time and bake these “extra features” in from the get-go ● Retrofitting inaccessible sites is a lot more time consuming (A.K.A. more $$$) than building an accessible site from scratch ➜ See W3C’s Financial Factors of web accessibility for more details
  17. 17. Common misconceptions “We don’t need to be compliant.” ➜ Legislation (like the Canadians with Disabilities Act) is still evolving ➜ Web accessibility lawsuits are steadily increasing in the U.S. ● The precedent has been set: a blind plaintiff unable to purchase products online has successfully sued Winn-Dixie, a major American grocery chain ● Five Guys website currently fighting ADA non-compliance lawsuit ➜ You can avoid future “uh-oh” moments by getting to know the standards and staying ahead of the web accessibility curve
  18. 18. Understanding Accessibility Standards What are they and how does that affect your organization?
  19. 19. The basics of WCAG 2.0 The de facto standard of web accessibility
  20. 20. WCAG 2.0 The Web Content Accessibility Guidelines are a series of internationally recognized guidelines that are intended to help solve many problems that web users with disabilities face.
  21. 21. Core Principles: Perceivable Make it easier for users to see and hear content. Think about: ➜ Alt text ➜ Captions
  22. 22. Core Principles: Operable Help users navigate to and find content. Think about: ➜ Focus states ➜ Keyboard navigation ➜ Form labels ➜ Avoid flashes or fast animations Don’t use content that can cause seizures.
  23. 23. Core Principles: Understandable Make content appear and operate in predictable ways. Think about: ➜ Link text ➜ Form errors ✔ Consistency and clarity is crucial
  24. 24. Core Principles: Robust Maximize compatibility with current and future user tools. Think about: ➜ Semantics ➜ Valid HTML
  25. 25. Conformance Levels All guidelines are assigned one of three levels of conformance (A, AA, AAA) based on a number of factors including, whether: ➜ The task is essential and/or no workarounds can be provided ➜ It is possible to achieve for all websites/types of content ➜ The skills required to achieve it are reasonable to learn in a week’s time or less ➜ The standard would limit the look and feel of the site
  26. 26. Conformance Levels ➜ Level A ● High user impact ● Low impact on presentation/functionality ● Easy to implement 1.2.2 Captions are provided for all pre-recorded videos with audio
  27. 27. Conformance Levels ➜ Level AA ● High user impact ● Some impact on presentation/functionality 1.2.5 An audio description is provided for all pre-recorded videos with audio (see next slide for example)
  28. 28. Demo: Described audio The 2017 ecentricarts company video with described audio
  29. 29. Conformance Levels ➜ Level AAA ● Specific user impact ● Some impact on presentation/functionality ● Increased level of difficulty to implement 1.2.6 Sign language interpretation is provided for all pre-recorded videos with audio
  30. 30. Legal Requirements What are the rules and who needs to comply?
  31. 31. Currently, Canada only mandates government websites. Legislation in progress: the Canadians with Disabilities Act In Ontario? Follow AODA, the Accessibility for Ontarians with Disabilities Act: ➜ Ontario is the first province to enact legislation for accessibility ➜ Government of Ontario sites must meet WCAG Level AA ➜ Websites for public sector and organizations with 50+ employees must meet WCAG Level A - WCAG Level AA as of January 1, 2021 In Canada
  32. 32. In the United States ➜ Government institutions & ICT fall under Section 508; refreshed this year ➜ Educational & Federally Funded Institutions: Section 504 -> 508 ➜ Non-profits: “Public accommodation” falls under ADA ➜ Private sector: “Public accommodation” falls under the ADA
  33. 33. Section 508 Government & Government-funded* institutions have 16 requirements: ➜ Must provide a text equivalent (i.e. transcript, captions) for non-text materials ➜ Tables must be appropriately labeled with headers ➜ AT users must be able to fully complete & access info in forms ➜ 508 Refresh: Everything new built after January 18th, 2018 must comply to Level AA standard *grey area
  34. 34. ADA Updates ➜ DOJ declining to amend current ADA rules under current administration ● Experts predict this will cause increase in privately brought lawsuits under ADA Title III ➜ Winn-Dixie: June 13th, 2017 ● Judge sided with plaintiff, a screen-reader user ● Injunction requires Winn-Dixie to update website based off of WCAG Level AA ➜ ADA Title III lawsuits steadily increasing year-over-year
  35. 35. In the European Union Public Sector: ➜ Requirements map to WCAG Level A ➜ Everything new after September 18, 2018 must comply by September 18, 2019
  36. 36. Worldwide ➜ WCAG 2.0 is the de facto standard worldwide ➜ Countries whose gov’t sites must comply with at least WCAG 2.0 Level A: ● Japan ● New Zealand ● All of the EU ➜ Countries with broad accessibility laws that have been applied to the web ● USA (ADA) (Lawsuits interpreting this as meeting WCAG 2.0 Level A/AA) ● Australia (DDA) (Gov’t interpreting this as meeting WCAG 2.0 Level A) ● UK (EQA) (Discrimination lawsuits settled out of court; Gov’t interpreting this as WCAG 2.0)
  37. 37. Making Accessible Content Best practices and quick wins
  38. 38. Writing accessible content ➜ Use appropriate page titles ➜ Use logical headings and proper structure ➜ Provide captions or a written transcript for video content ➜ Remember: what may feel ambiguous or confusing to you will be equally (if not, more confusing) for other users
  39. 39. Writing accessible content ➜ Make sure link text describes the purpose of the link ● Use “Read more about our recent work” instead of simply “Read more” ➜ Use meaningful, descriptive alt text on images ● WebAIM’s guide to writing alt text Painting of George Washington crossing the Delaware River
  40. 40. Coding accessible content ➜ Use semantic markup ● Buttons as buttons, lists as lists, tables as tables, select for dropdown, header, main, aside and footer to identify your content ➜ Mark up your headings semantically & in a logical order ➜ Use empty alt attributes if the image is decorative only
  41. 41. ➜ Provide control options on videos, gifs and carousels Designing accessible content
  42. 42. ➜ Ensure links are easily identified with a distinct design treatment ➜ Reserve underlines for links only Designing accessible content
  43. 43. ➜ Design clear hover and focus states for interactive elements ➜ If the default focus ring is disabled, provide an alternative visible focus Designing accessible content
  44. 44. Designing accessible content ➜ “It’s estimated that 91% of the top 100 popular sites home pages fail color contrast” - Rethinking Colour and Contrast ➜ Ensure text meets accessible colour contrast ratios ● Be mindful of colour contrast when overlaying live text onto photos ● Check with the WebAIM contrast checker tool ➜ Use legible fonts ➜ Avoid images with embedded text
  45. 45. Coding Accessible Websites The basics
  46. 46. Bypass blocks give users of assistive technology direct access to the primary content of your page. Add a “Skip to” link to all page templates that jumps passed repeated navigation into the main content container. Skip Links (Bypass blocks) Check out Foundation’s show-on-focus class
  47. 47. Form Labels ➜ Ensure all form controls have an appropriate labels associated with them. Using ID’s and the for attribute ➜ Don’t use placeholder text as a replacement for labels. Use CSS & JS to position semantic labels over top of form fields to achieve specific design treatments ➜ Indicate required fields programmatically and visually. Use aria-required and an asterisk attached to the label
  48. 48. Form Errors ➜ Write helpful error text for each form control. Don’t rely on colour alone - like a red border - to indicate errors ➜ Programmatically associate error text and tooltips with form inputs. Use aria-describedby on inputs that points to the ID of the message ➜ List all form errors in a list on invalid submission. Link errors directly to respective inputs for easy access
  49. 49. Demo: Forms (before) Here, the screen reader software can’t communicate the red error message to the user
  50. 50. Demo: Forms (after) Here, the screen reader software reads a global error message first, properly informing the user
  51. 51. ARIA landmark roles ARIA (Accessible Rich Internet Applications) is a set of accessibility attributes that can be added to HTML markup. Adding appropriate landmark roles to common HTML tags allows users of assistive technology a way to quickly get around a page.
  52. 52. Demo: ARIA Landmark Roles ARIA roles allow assistive tech users to easily navigate through different sections of the page
  53. 53. Language Indicating the language of content using the lang attribute on multilingual sites ensures assistive technology will read content with correct pronunciation. ➜ Add a global language on the <html> tag. ➜ Add a lang attribute to any in page content that differs in language.
  54. 54. Demo: lang lang tags drastically change how a screen reader will read/pronounce the words on screen
  55. 55. Make sure the code you’re writing is valid by running it through the W3C markup validator. Common issues to look out for: ➜ Duplicate ID’s ➜ Incorrect element nesting ➜ Missing headings Valid HTML
  56. 56. CMS Optimizations Empower content editors to create accessible websites by providing options and information right in the CMS. ➜ Add instructions with accessibility tips right inside your CMS editor Learn more about improving content entry for Wordpress here ➜ Make it easy for editors to add alt text, transcripts or alternate video When creating embedded media widgets, always provide additional fields to include alternates
  57. 57. Tools & Testing How do you know if your site is truly accessible?
  58. 58. Automated tools Accessibility Evaluation Tools (WAVE and aXe) analyze website markup against various WCAG criteria and run right in your browser. These tools help to detect: ➜ Missed heading levels ➜ Empty links and alt text ➜ Colour contrast issues
  59. 59. Vision simulators See what users see by running vision simulators in the browser. These programs (Color Contrast Analyzer, NoCoffee) help identify areas that may be failing WCAG contrast ratios or are generally problematic.
  60. 60. Don’t rely on automated tools Accessibility is all about context, and sometimes bots have a hard time understanding context. ➜ Can result in false positives or false negatives ➜ Use automated programs as a “first pass” only ➜ Ensure manual testing is done on all key areas of functionality
  61. 61. Quick wins with a keyboard ➜ Navigate and submit forms with just a keyboard ➜ Using tab, look for clearly visible focus states ➜ Ensure hover events are replicated on focus where appropriate ➜ Dismiss disruptive content (like modals) with the escape key ➜ Check for keyboard traps ➜ Look for Skip Links as the first focusable element
  62. 62. Try a screenreader Understand how users navigate websites with a screen reader using one of the following screen reader/browser combinations: ➜ NVDA with Firefox on Windows ➜ VoiceOver with Safari on Mac OS ➜ JAWS with either IE or Firefox on Windows Use the arrow keys and the tab key while listening to the screen reader output Screen Reader Basics: NVDA -- A11ycasts
  63. 63. Resources ➜ WebAIM WCAG Checklist ➜ WebAIM 508 Standards Checklist ➜ OATMEAL: eBay Core Accessibility Tests ➜ A11y Dev Tools ➜ Inclusive Design Principles ➜ WAVE ➜ aXe ➜ Color Contrast Analyzer ➜ NoCoffee ➜ “Web accessibility according to actual people with disabilities” ➜ MDN Accessibility ➜ Search #a11y on Twitter
  64. 64. Thanks for joining us Any questions or comments? We’d love to hear from you! EAT@ecentricarts.com

×