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.



Published on

Website accessibility is often an afterthought at the end a project when there is an accessibility audit or a user submits an issue, but what if we switched focus and started thinking about accessibility at the beginning of a project during the initial design and development stages?

In this talk I will present a quick overview of website accessibility (the what, who, and why), then review the underlying guidelines to making a site accessible, and finally present some general rules to keep in the back of your mind while designing and developing your next site. Not only will incorporating accessibility into your daily lives help people with disabilities actually be able to use your site, but it can help attract a wider audience/larger customer base, make your site rank higher with search engines, and can improve your overall user experience on both desktop and mobile devices.

Published in: Technology
  • Be the first to comment

  • Be the first to like this


  1. 1. Easy Ways to Make Your Site More Accessible MidCamp 2016 - March 18, 2016
  2. 2. Carie Fisher @cariefisher /in/cehfisher Website developer, graphics guru, Drupal diva, broke technophile, and Star Wars fan (by default). Carie has been focused professionally on Drupal since 2009. In her role as a Senior Front-End Developer at Mediacurrent, she thrives on the challenge of turning a static mock-up into a responsive, live site that is both beautiful and functional. Senior Front End Developer - Mediacurrent 2
  3. 3. 3Credit: Just the Facts1
  4. 4. 4 What is website accessibility anyway? Credit: Web accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities. When sites are correctly designed, developed and edited, all users have equal access to information and functionality. - Wikipedia
  5. 5. 5 Who is website accessibility for? Credit: EVERYONE!!! 57 million Americans (over 18%) have some type of DISABILITY • Visual impairments • Hearing impairments • Cognitive impairments • Mobility impairments • Temporary Disabilities • Seizure Disorders • Aging population • Search engine bots
  6. 6. 6 Why should I care about website accessibility? Credit: Karma Points - Everyone should have full access to cat videos & ridiculous internet memes…as well as all the useful information Smart Thing to Do - Opens your site to a wider audience, good for SEO/search bots/Google ranking, etc It is the Law* - Federal/state agencies, airlines, Section 504 & 508, Americans with Disabilities Act (ADA) 2018
  7. 7. 7Credit: Path to Accessibility2
  8. 8. 8Credit: Rule #1: Don’t Freak Out What can I do about website accessibility?
  9. 9. 9Credit: Rule #2: Learn a Few Things
  10. 10. 10Credit: Rule #3: Build from the Ground Up
  11. 11. 11Credit: Rule #4: Use the Right Tools
  12. 12. 12Credit: Rule #5: Try, Try Again Do or do not. There is no try.
  13. 13. 13Credit: Yeah, it’s that Easy3
  14. 14. 14 Grey Muzzle Case Study
  15. 15. 15
  16. 16. • Plan out heading & page structure • Add page titles for browser tabs • Add a ‘skip to content’ link • The heading hierarchy is meaningful • Try not to skip heading levels • Use a markup validator tool 16 Structure
  17. 17. • Use colors on the opposite ends of the color spectrum • Be careful with light shades • Do not rely on color alone to convey info to your users • Use solid color backgrounds • Use color/contrast WCAG standard testing tools 17 Color & Contrast
  18. 18. • Use a limited number of fonts & provide alternative fonts • Specify the font size in terms of %, em or a relative value • Use adequate font size - 10pt min • Limit the use of ALL CAPS • Limit the use of font variations 18 Fonts
  19. 19. • Differentiate links with theme elements besides color • Use descriptive link text • Do not use images for links • Avoid super short or long links • Design link focus indicators • Ensure link text makes sense on its own 19 Links
  20. 20. • Use animation, video & audio carefully & selectively • Avoid flashing/strobing content • Provide alt ways to access content • USE ALT TAGS! Be accurate, be succinct, avoid being redundant, avoid “image of” phrases, & use empty alt attributes for decorative images 20 Media
  21. 21. • Accessible menus • Dyslexia font • Contrast theme • Font resizing buttons • Visual focus indicators • Sitemap • Accessibility statement 21 Special Features
  22. 22. 22 Your Challenge Credit:
  23. 23. 23Credit: Resources4
  24. 24. 24Credit: Resources - General Types of Disabilities - web/diversity Accessibility Law - Understanding Web Accessibility - understanding.html User Stories - stories Design/Theme Specific -
  25. 25. 25Credit: Resources - Guidelines & Checklists WCAG 2.0 - WCAG 2.0 Checklist - Section 508 - Section 508 Checklist - checklist ATAG - UAAG - General checklist -
  26. 26. 26Credit: Resources - Tools Overview of Tools - General Tool - Visualization Toolkit - Color Blindness Simulator - coblis-color-blindness-simulator Color Safe - VoiceOver - Wave -
  27. 27. 27Credit: Wrap-up5
  28. 28. 28Credit: MidCamp Sprint Sunday, March 20 at 10 am UIC COMRB 909 S. Wolcott St (across the street from the venue) Contributors of all skill sets and levels are welcome and encouraged to join us!
  29. 29. 29 Feedback Room survey: Twitter: @cariefisher
  30. 30. @Mediacurrent Thank you!