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.

Optimizing Your Website for Accessibility

327 views

Published on

Google is becoming more and more focused on website accessibility. It’s so important, that Google now includes information on accessibility within its development guide for website owners.

If Google cares about accessibility, this means website owners and bloggers need to too. In this presentation, Rebecca is joined by Carrie Dils, Founder of The Fearless Freelancer.

The two will explore common accessibility issues and explain what you can do to optimize your website for accessibility. They’ll break down these technical issues into everyday speak so you can learn what matters, what you should audit, and how you can fix issues.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Optimizing Your Website for Accessibility

  1. 1. Optimizing Your Website for Accessibility #a11y Rebecca Gill | Web Savvy Marketing | diySEOcourses.com Carrie Dils | TheFearlessFreelancer.com | OfficeHours.FM
  2. 2. Rebecca Gill | Web Savvy Marketing | diySEOcourses.com Carrie Dils | TheFearlessFreelancer.com | OfficeHours.FM Accessibility matters to both humans and SEO.
  3. 3. What is accessibility?
  4. 4. -Wikipedia entry for “Web Accessibility” Web accessibility refers to the inclusive practice of removing barriers that prevent access to websites by people with disabilities. When sites are correctly designed, developed and edited, all users have equal access to information and functionality.
  5. 5. What is accessibility?
  6. 6. What is accessibility? good <
  7. 7. Rebecca Gill | Web Savvy Marketing | diySEOcourses.com Carrie Dils | TheFearlessFreelancer.com | OfficeHours.FM Web Savvy Marketing Copyright © 2018,  All Rights Reserved 4 Principles of Accessibility 1. Perceivable 2. Operable 3. Understandable 4. Robust P O U R
  8. 8. Rebecca Gill | Web Savvy Marketing | diySEOcourses.com Carrie Dils | TheFearlessFreelancer.com | OfficeHours.FM Web Savvy Marketing Copyright © 2018,  All Rights Reserved 4 Principles of Accessibility 1. Perceivable 2. Operable 3. Understandable 4. Robust Any discussion of web accessibility is based upon the assumption that people need to be able to perceive web content. They 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. -https://webaim.org/articles/pour/perceivable
  9. 9. Rebecca Gill | Web Savvy Marketing | diySEOcourses.com Carrie Dils | TheFearlessFreelancer.com | OfficeHours.FM Web Savvy Marketing Copyright © 2018,  All Rights Reserved Examples: Perceivable Remove titles from your links Bad: <a href=“/contact/” title=“Contact Us”>Contact Us</a> Good: <a href=“/contact/”>Contact Us</a> Add meaningful “alt” text to images Bad: <img src=“/img1249438743.jpg” alt=“img1249438743” /> Still bad: <img src=“/img1249438743.jpg” alt=“” /> Good: <img src=“/red-balloon.jpg” alt=“smiling kid holding a red balloon” /> Use form labels (hide with CSS if you want, but make it visible in the HTML output) <form> <label class=“hide-this-if-you-want”>First Name</label> <input type=“text” name=“first-name” /> </form>
  10. 10. Rebecca Gill | Web Savvy Marketing | diySEOcourses.com Carrie Dils | TheFearlessFreelancer.com | OfficeHours.FM Web Savvy Marketing Copyright © 2018,  All Rights Reserved Color blindness Normal MonochromaticTritanopia https://www.toptal.com/designers/colorfilter
  11. 11. Rebecca Gill | Web Savvy Marketing | diySEOcourses.com Carrie Dils | TheFearlessFreelancer.com | OfficeHours.FM Web Savvy Marketing Copyright © 2018,  All Rights Reserved Color contrast • Foreground and background color need to be sufficiently different so that text is comfortably easy to read. • 3:1 ratio for large scale text (18pt or 14pt bold) • 4.5:1 ratio for other text https://contrastchecker.com/
  12. 12. Rebecca Gill | Web Savvy Marketing | diySEOcourses.com Carrie Dils | TheFearlessFreelancer.com | OfficeHours.FM Web Savvy Marketing Copyright © 2018,  All Rights Reserved 4 Principles of Accessibility 1. Perceivable 2. Operable 3. Understandable 4. Robust Not everyone uses a standard keyboard and mouse to access the web. Some people use adaptive devices or alternative devices that accommodate their disabilities. Keyboard accessibility is one of the most important principles of Web accessibility because it cuts across disability types and technologies. - https://webaim.org/articles/pour/operable
  13. 13. Rebecca Gill | Web Savvy Marketing | diySEOcourses.com Carrie Dils | TheFearlessFreelancer.com | OfficeHours.FM Web Savvy Marketing Copyright © 2018,  All Rights Reserved Give users enough time to read and use content Bad: Moving/blinking content that can’t be paused or stopped. Bad: Alerts that can’t be suppressed or postponed. Bad: Authentication session expires and data is lost when user re-authenticates Examples: Operable Make all functionality available from a keyboard Bad: Using the tab button to move through a form and jumping from a form field focus to some other spot on the page. Good: Using the tab button to move sequentially through navigation. Use skip links
  14. 14. Rebecca Gill | Web Savvy Marketing | diySEOcourses.com Carrie Dils | TheFearlessFreelancer.com | OfficeHours.FM Web Savvy Marketing Copyright © 2018,  All Rights Reserved Examples: Operable Keyboard Nav & Skiplinks Demo
  15. 15. Rebecca Gill | Web Savvy Marketing | diySEOcourses.com Carrie Dils | TheFearlessFreelancer.com | OfficeHours.FM Web Savvy Marketing Copyright © 2018,  All Rights Reserved Examples: Operable Don’t cause seizures.
  16. 16. Rebecca Gill | Web Savvy Marketing | diySEOcourses.com Carrie Dils | TheFearlessFreelancer.com | OfficeHours.FM Web Savvy Marketing Copyright © 2018,  All Rights Reserved The Worst Website Ever
  17. 17. Rebecca Gill | Web Savvy Marketing | diySEOcourses.com Carrie Dils | TheFearlessFreelancer.com | OfficeHours.FM Web Savvy Marketing Copyright © 2018,  All Rights Reserved 4 Principles of Accessibility 1. Perceivable 2. Operable 3. Understandable 4. Robust Most web content contains information communicated through language. The language should be as easy to understand as possible and appropriate for the intended audience. The functionality of web content must also be understandable. Users must be able to understand all navigation and other forms of interaction. - https://webaim.org/articles/pour/understandable
  18. 18. Rebecca Gill | Web Savvy Marketing | diySEOcourses.com Carrie Dils | TheFearlessFreelancer.com | OfficeHours.FM Web Savvy Marketing Copyright © 2018,  All Rights Reserved Examples: Understandable Use the language attribute on HTML Bad: Using the tab button to move through a form and jumping from a form field focus to some other spot on the page. Good: Using the tab button to move sequentially through navigation. Give users enough time to read and use content Bad: Moving/blinking content that can’t be paused or stopped. Bad: Alerts that can’t be suppressed or postponed. Bad: Authentication session expires and data is lost when user re-authenticates Don’t use carousels (sliders) - http://shouldiuseacarousel.com/
  19. 19. Rebecca Gill | Web Savvy Marketing | diySEOcourses.com Carrie Dils | TheFearlessFreelancer.com | OfficeHours.FM Web Savvy Marketing Copyright © 2018,  All Rights Reserved 4 Principles of Accessibility 1. Perceivable 2. Operable 3. Understandable 4. Robust Strive to maximize compatibility with current and future user agents, including assistive technologies. Make your HTML as valid as possible. Programmatically name interface components correctly (i.e. buttons, forms, navigation)
  20. 20. Rebecca Gill | Web Savvy Marketing | diySEOcourses.com Carrie Dils | TheFearlessFreelancer.com | OfficeHours.FM Web Savvy Marketing Copyright © 2018,  All Rights Reserved Examples: Robust • Code parses without error • Use online validators • Use code linters • For all user-interface components, the name and role can be programmatically determined (use HTML5 and ARIA) • ARIA is a way to provide additional information about the semantics of the various elements to assistive technologies like screen readers https://validator.w3.org/ https://www.w3.org/TR/html-aria/ <button>This is an HTML5 button</button>
 <a href=“” role=“button”>This is a link with an ARIA role of button</a>
  21. 21. How can I test my website?
  22. 22. Rebecca Gill | Web Savvy Marketing | diySEOcourses.com Carrie Dils | TheFearlessFreelancer.com | OfficeHours.FM Web Savvy Marketing Copyright © 2018,  All Rights Reserved Chrome Accessibility Audit 1. Install Chrome Developer Tools (https://developers.google.com/web/tools/lighthouse/) 2. Right-click > Inspect > Audit tab
  23. 23. Rebecca Gill | Web Savvy Marketing | diySEOcourses.com Carrie Dils | TheFearlessFreelancer.com | OfficeHours.FM Web Savvy Marketing Copyright © 2018,  All Rights Reserved WAVE (wave.webaim.org)
  24. 24. Rebecca Gill | Web Savvy Marketing | diySEOcourses.com Carrie Dils | TheFearlessFreelancer.com | OfficeHours.FM Web Savvy Marketing Copyright © 2018,  All Rights Reserved Dynomapper
  25. 25. Rebecca Gill | Web Savvy Marketing | diySEOcourses.com Carrie Dils | TheFearlessFreelancer.com | OfficeHours.FM Web Savvy Marketing Copyright © 2018,  All Rights Reserved Dynomapper
  26. 26. Rebecca Gill | Web Savvy Marketing | diySEOcourses.com Carrie Dils | TheFearlessFreelancer.com | OfficeHours.FM Web Savvy Marketing Copyright © 2018,  All Rights Reserved WAVE (wave.webaim.org)
  27. 27. How can I improve my website?
  28. 28. Rebecca Gill | Web Savvy Marketing | diySEOcourses.com Carrie Dils | TheFearlessFreelancer.com | OfficeHours.FM Web Savvy Marketing Copyright © 2018,  All Rights Reserved Improve your site based on your role • Designer • Developer • Content Creator • Consultant
  29. 29. Rebecca Gill | Web Savvy Marketing | diySEOcourses.com Carrie Dils | TheFearlessFreelancer.com | OfficeHours.FM Web Savvy Marketing Copyright © 2018,  All Rights Reserved Designers • Color contrast checker – https://webaim.org/resources/ contrastchecker/ • Identifying good contrast color schemes - https:// material.io/collections/color/ • Avoid tiny fonts – https://wordpress.org/plugins/wp- accessibility/ • Clear and consistent navigation
  30. 30. Rebecca Gill | Web Savvy Marketing | diySEOcourses.com Carrie Dils | TheFearlessFreelancer.com | OfficeHours.FM Web Savvy Marketing Copyright © 2018,  All Rights Reserved Developers • Skip Links – https://carriedils.com/add-skip-nav-wordpress- theme/ • Keyboard Navigation – https://www.nngroup.com/articles/ keyboard-accessibility/ & Logical tabbing order (tab index)
 
 
 
 
 • ARIA roles (Accessible Rich Internet Applications) – https:// developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA Image credits
  31. 31. Rebecca Gill | Web Savvy Marketing | diySEOcourses.com Carrie Dils | TheFearlessFreelancer.com | OfficeHours.FM Web Savvy Marketing Copyright © 2018,  All Rights Reserved Developers: Semantic HTML5 • Semantic HTML5 helps search engines better understand the components of a web page and it helps them “see” content like a human 
 • While Google won’t penalize anyone who fails to use HTML5 and it isn’t a direct ranking factor, the usage does assist with SEO efforts and helps prepare the website for usage of Structured Data and Schema
 • When used properly, semantic HTML5 will provide a content outline
 • Semantic HTML5 is also used by screen readers, which means it is important for accessibility
 • Google is essentially blind, so accessibility-related HTML5 that helps a screen reader will in turn also help Google
 • HTML5 header tags are used for search engines and accessibility, so they should not be used for styling of content
  32. 32. Rebecca Gill | Web Savvy Marketing | diySEOcourses.com Carrie Dils | TheFearlessFreelancer.com | OfficeHours.FM Web Savvy Marketing Copyright © 2018,  All Rights Reserved Content Creators • Alt Text for images • Proper heading structure (H1, H2, etc) • Contextual link text (click here!)
  33. 33. Rebecca Gill | Web Savvy Marketing | diySEOcourses.com Carrie Dils | TheFearlessFreelancer.com | OfficeHours.FM Web Savvy Marketing Copyright © 2018,  All Rights Reserved Consultant • Accessibility matters to both humans and SEO • You have to consider accessibility in modern SEO efforts • Review each page template as a minimum • Scan the entire website to make sure user content isn’t causing issues as well • Fix everything associated with template coding • Educate your client on user generated issues • Communicate plugin issues to the developer • Client content
  34. 34. Accessibility doesn't have to be all or nothing. Start with small steps in the right direction.
  35. 35. Rebecca Gill | Web Savvy Marketing | diySEOcourses.com Carrie Dils | TheFearlessFreelancer.com | OfficeHours.FM Web Savvy Marketing Copyright © 2018,  All Rights Reserved Additional Resources Web Content Accessibility Guidelines (WCAG 2.0)
 https://www.w3.org/TR/WCAG20/ Google resources for accessibility (includes links to Chrome add-ons)
 https://www.google.com/accessibility/ Links to various accessibility tools
 https://wpcampus.org/resources/accessibility/ Dynomapper
 https://dynomapper.com/blog/27-accessibility-testing Semantic HTML5 for Content Writers
 https://www.semrush.com/blog/best-practices-in-semantic-html5-for- content-writers/
  36. 36. Q&A
  37. 37. Rebecca Gill SEO Consultant and Instructor @rebeccagill
 RebeccaGill.com Carrie Dils Web Developer and Consultant @cdils CarrieDils.com CARRIE DILS

×