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.

How to create accessible websites - WordCamp Boston

Web accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to, websites by people with disabilities. When your website is inaccessible, research shows you could be excluding up to 20 percent of your visitors and customers. When your website is accessible, everyone can consume your information and interact with you and your services. Visually-impaired users can visit your website using a screen reader. Those who can’t use a mouse can navigate your site using a keyboard or other input device. Designing with accessibility in mind will also improve your SEO. Join my workshop to learn more about accessibility, the importance of universal design, and how to create a high-quality user experience that is inclusive and beneficial to all.

  • Login to see the comments

How to create accessible websites - WordCamp Boston

  1. 1. Rachel Cherry @bamadesigner
 bamadesigner.com wpcampus.org HOW TO CREATE ACCESSIBLE WEBSITES
  2. 2. #WCBOS #a11y @bamadesigner • Intro to accessibility, universal design, and why it’s important
 • WCAG accessibility standards and legal concerns
 • How to add accessibility testing to your workflow
 • Common accessibility issues and how to address them
 • Easy accessibility fixes that make a big impact This workshop will cover:
  3. 3. Everything from this workshop: bamadesigner.com/wcbos
  4. 4. #WCBOS #a11y @bamadesigner Web accessibility refers to 
 the inclusive practice of 
 removing barriers that prevent interaction with, or access to, websites by people with disabilities.
  5. 5. #WCBOS #a11y @bamadesigner Data shows 1 in 5 people have a disability. 
 You could be excluding 20% of your students (and humanity) from access to education and information. Why is accessibility important?
  6. 6. Information wants to be free ACCESSIBLE Information needs to be #WCBOS #a11y
  7. 7. How do we ensure the digital world is accessible? VISUAL HEARING MOTOR COGNITIVE Deafness and hard-of-hearingBlindness, low vision, color-blindness Inability to use a mouse, 
 slow response time, 
 limited fine motor control Learning disabilities, inability to remember or focus on large amounts of information
  8. 8. #WCBOS #a11y @bamadesigner The four principles of accessibility: • Perceivable • Operable • Understandable • Robust
  9. 9. #WCBOS #a11y @bamadesigner Perceivable: Information (and user interface components) must be presentable to users in ways they can perceive. Must be available to the senses either through the browser or through assistive technologies (e.g. screen readers, screen enlargers, etc.)
  10. 10. Perceivable: • Provide text alternatives for non-text content, like images, video, and audio • Offer captions, transcripts, and audio descriptions for audio and video • Design content to be easy to read and listened to, e.g. good contrast, volume control
  11. 11. #WCBOS #a11y @bamadesigner Operable: User interface components and navigation cannot require interaction that a user cannot perform. Users can interact with all functionality using either the mouse, keyboard, or an assistive device.
  12. 12. Operable: • All functionality should be available using a keyboard • There should be enough time to read content and perform functionality • Avoid designing content that might cause seizures • Help users navigate and find content
  13. 13. #WCBOS #a11y @bamadesigner Understandable: Users must be able to understand the information as well as the operation of the user interface. Content is clear and limits confusion and ambiguity.

  14. 14. #WCBOS #a11y @bamadesigner • Write easy-to-read text with assistive technologies in mind • Design content and the interface to behave in predictable ways • Help users to avoid and correct mistakes when entering input Understandable:
  15. 15. #WCBOS #a11y @bamadesigner Robust: Content must be robust enough that it can be interpreted reliably by as many web browsers and agents as possible, including assistive technologies. Users must be able to access the content as technologies advance.
  16. 16. How do we create 
 ACCESSIBLE 
 websites? #WCBOS #a11y
  17. 17. The challenge: Change your perspective.
  18. 18. Universal design is the design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design. RONALD L. MACE, FOUNDER OF THE CENTER FOR UNIVERSAL DESIGN UNIVERSAL DESIGN New perspective:
  19. 19. #WCBOS #a11y @bamadesigner Where accessible design considers 
 the needs of people with disabilities. Universal design considers 
 the needs of a diverse human population.
  20. 20. Everyone uses technology
 DIFFERENTLY. #WCBOS #a11y
  21. 21. #WCBOS #a11y @bamadesigner To achieve universal design (and provide accessible technology), we have to consider diverse needs during every step of a project.
  22. 22. #WCBOS #a11y @bamadesigner Much easier and cheaper 
 to design for (and maintain) accessibility during your project than to handle after the fact.
  23. 23. #WCBOS #a11y @bamadesigner Working together during every step: PLANNING CONTENT DESIGN (UI/UX) ENGINEERING MAINTENANCE
  24. 24. 1. Focus on high quality UX and valid HTML markup • Follow web standards to provide robust experience 2. Learn web accessibility standards and understand common barriers • Adopt checklists into every step of your workflow 3. Use tools to test for violations, priority on user testing • Software really helps, but human experience is king How to create accessible websites:
  25. 25. • Web accessibility is more prominent in higher education 
 because the only laws that exist are for organizations that receive federal funding. Legal implications/standards
  26. 26. The only laws that exist are for organizations that receive federal funding.
  27. 27. • Web accessibility is more prominent in higher education 
 because the only laws that exist are for organizations that receive federal funding. • There is now (thankfully) only one set of web 
 standards for accessibility: WCAG 2.0. • There used to be two. Legal implications/standards
  28. 28. General businesses and organizations are not required by law, but still receive civil suits. To name a few: What about general businesses?
  29. 29. • Web Accessibility Laws & Policies • https://www.w3.org/WAI/policies/ • Introduction to Laws Throughout the World • https://webaim.org/articles/laws/world/ What about other countries?
  30. 30. The Web Content Accessibility Guidelines (WCAG) are published by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C). • WCAG has 3 levels: A, AA, and AAA • WCAG version 2.0 AA is the industry standard • Current version was published in December 2008 • WCAG is drafting version 2.1 was released June 2018 Web accessibility standards:
  31. 31. WCAG 2.0 Quick Reference https://www.w3.org/WAI/WCAG20/quickref/ Walks you through techniques and failures!
  32. 32. WCAG 2.0 Checklists: • http://webaim.org/standards/wcag/checklist • https://a11yproject.com/checklist • https://www.wuhcag.com/wcag-checklist/ • Create your own!
  33. 33. Pages without proper heading structure/order • Are your headers in order? h1, h2, h3, etc. • Allows content to be readable without a stylesheet, for those who do not navigate visually. Common website barriers:
  34. 34. Non-text content without a text equivalent • Provide alt attributes or captions for images • Provide captions and audio descriptions for videos • Provide transcripts for audio recordings Common website barriers:
  35. 35. Without alternative text, life-saving information in this 
 graphic is not available to visually impaired users.
  36. 36. .screen-reader-text {
 clip: rect(1px, 1px, 1px, 1px); clip-path: polygon(0 0, 0 0, 0 0, 0 0); position: absolute !important; white-space: nowrap; height: 1px; width: 1px; overflow: hidden; } How to hide content visually:
  37. 37. The point of providing a text equivalent is to convey the same information and context as people 
 who can see the image. DO NOT: Simply write “red car”. DO: Ask yourself “why is this picture 
 of a red car on the page? PRO TIP for writing image alt text:
  38. 38. Being unable to access functionality by keyboard • Can you access all actions, functionality and content? • Can you open “popups”, interact with them, close them? • Does any functionality have keyboard trap? Common website barriers:
  39. 39. Unable to visually determine if an element has focus • If someone is navigating your site by keyboard, could they determine where they are on the page? • Could they determine which form field has focus? • Could they determine if a button can be pressed? Common website barriers:
  40. 40. NEVER: Remove :focus CSS styles EASY FIX: 
 Search your CSS for usage of :hover. Test those elements on your site and make sure there are equivalent :focus styles. PRO TIP to ensure element focus:
  41. 41. PRO TIP to ensure element focus: button { background-color: #d8d8d8; color: #222; &:focus, &:hover { background: #222; color: #fff; } }
  42. 42. Unable to skip large blocks of repeatable content • The most common barriers for guests are having to tab through the header and menu on every page. • Do you use ARIA to help label sections of your page? Common website barriers:
  43. 43. <a id=“skip” href="#content">Skip to Main Content</a> #skip { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } #skip:focus { position: static; width: auto; height: auto; } How to provide “Skip to content”:
  44. 44. Actions without defined purpose or context • Do your actions (links and buttons) provide clear context about what’s going to happen? Never use “click here”. • Is the HTML markup for your actions valid? • Are you using a link when you should be using a button? Common website barriers:
  45. 45. Using color to convey information / insufficient contrast • Is there clear contrast between the color of your text 
 and its background color? Minimum: 4.5:1 • If a guest is color blind, would they have the same experience as any other guest? Common website barriers:
  46. 46. Web accessibility means that people with disabilities can perceive, understand, navigate, interact with, and contribute to the Web. If color is the only method for conveying a link:
  47. 47. The link is invisible to those who can’t see blue: Web accessibility means that people with disabilities can perceive, understand, navigate, interact with, and contribute to the Web.
  48. 48. Web accessibility means that people with disabilities can perceive, understand, navigate, interact with, and contribute to the Web. If a different color AND an underline is used:
  49. 49. Then the link would become visible: Web accessibility means that people with disabilities can perceive, understand, navigate, interact with, and contribute to the Web.
  50. 50. While not an official standard, responsive web design is important to ensure your site can be viewed on assistive devices of various sizes. Other considerations:
  51. 51. Another important consideration is download speeds/order to ensure access to those who don’t have access to high speed Internet. Other considerations:
  52. 52. Be mindful of your language. Avoid sentences like “See our home page for more information”. Use non-sensory language instead, e.g. “Visit our home page”. Other considerations:
  53. 53. Spec created to improve accessibility of applications by providing extra information to screen readers via HTML attributes. ARIA (Assistive Rich Internet Applications)
  54. 54. <div role="contentinfo"> <p>WordCamp Boston is an annual conference celebrating WordPress, the open source software that powers over 28% of the internet.</p> </div> <div role="alert"> <p>Have you said “Hi Roy” today? Go to hiroy.club to greet Roy and make Rachel happy.</p> </div> ARIA example:
  55. 55. GOOD MARKUP The foundation for good accessibility is #WCBOS #a11y Which also improves your SEO!
  56. 56. CHALLENGE! It’s time for a good ole’ fashioned #WCBOS #a11y #youbetterwork
  57. 57. 1.Open your website’s home page 2.Navigate to every action element on the page 3.Interact with all functionality on the page 4.BUT YOU CAN’T USE YOUR MOUSE 5.Document any issues. Challenge #1
  58. 58. an accessibility evaluation tool from WebAIM http://wave.webaim.org • Free in-browser testing • Free Chrome extension • Premium API TESTS FOR: Section 508 and WCAG 2.0 A/AA
  59. 59. an accessibility visualization toolkit http://khan.github.io/tota11y • Alt text and confusing link text • Color contrast • Heading structure • Form labels • ARIA landmarks TESTS FOR: • Javascript file that places button on site • Free Chrome extension
  60. 60. client-side script that checks HTML source code and detects violations of a defined coding standard http://squizlabs.github.io/HTML_CodeSniffer • Copy/paste code for quick testing • Free bookmarklet for in-browser testing TESTS FOR: Section 508 and WCAG 2.0 A/AA/AAA
  61. 61. an automated accessibility testing library http://pa11y.org • Section508 • WCAG 2.0 A/AA/AAA TESTS FOR: • Web dashboard • JSON web service • Command line PROVIDES:
  62. 62. Javascript library that executes automated accessibility testing inside your testing framework or browser of choice http://www.deque.com/products/axe • Free Javascript library • Free Chrome extension
  63. 63. Material Design:
 Color Tool https://material.io/color/ Allows you to measure 
 the accessibility level of 
 any color combination.
  64. 64. wA11y - The Web Accessibility Toolbox
 https://wordpress.org/plugins/wa11y/ WORDPRESS PLUGINS
  65. 65. WORDPRESS PLUGINS
  66. 66. BROWSER TOOLS
  67. 67. BROWSER TOOLS
  68. 68. BROWSER TOOLS
  69. 69. Take advantage of 
 in-browser testing tools to evaluate product demos before you purchase. ACCESSIBILITY PRO TIP: #WCBOS #a11y
  70. 70. 1. Open https://bamadesigner.com/wcbos/ 2. Install at least 2 different tools 3. Use them to test your website’s home page 4. Document common and surprising issues Challenge #2
  71. 71. 1. Focus on high quality UX and valid HTML markup • Follow web standards to provide robust experience 2. Learn web accessibility standards and understand common barriers • Adopt checklists into every step of your workflow 3. Use tools to test for violations, priority on user testing • Software really helps, but human experience is king How to create accessible websites:
  72. 72. #WCBOS #a11y @bamadesigner The foundation of good accessibility is good design, markup, and UX which creates a high quality experience for everyone.
  73. 73. #WCBOS #a11y @bamadesigner Where accessible design considers 
 the needs of people with disabilities. Universal design considers 
 the needs of a diverse human population.
  74. 74. #WCBOS #a11y @bamadesigner When you plan for accessibility, YOU WON’T WORK HARDER. YOU’LL WORK SMARTER.
  75. 75. Everything from this workshop: bamadesigner.com/wcbos
  76. 76. Rachel Cherry @bamadesigner
 bamadesigner.com wpcampus.org ANY QUESTIONS? #WCBOS #a11y

×