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.

Midcamp2016

307 views

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

Midcamp2016

  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 slideshare.net/CarieFisher
  3. 3. 3Credit: http://www.glowingdial.com Just the Facts1
  4. 4. 4 What is website accessibility anyway? Credit: http://netdna.webdesignerdepot.com 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: http://www.northfloridaahec.org 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: https://ironyisapoormaster.files.wordpress.com 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: http://blog.jewilson.com Path to Accessibility2
  8. 8. 8Credit: https://fortunedotcom.files.wordpress.com Rule #1: Don’t Freak Out What can I do about website accessibility?
  9. 9. 9Credit: http://www.wareferst.org Rule #2: Learn a Few Things
  10. 10. 10Credit: http://7-themes.com Rule #3: Build from the Ground Up
  11. 11. 11Credit: https://www.haikudeck.com Rule #4: Use the Right Tools
  12. 12. 12Credit: https://happier1.imgix.net Rule #5: Try, Try Again Do or do not. There is no try.
  13. 13. 13Credit: https://0.s3.envato.com Yeah, it’s that Easy3
  14. 14. 14 Grey Muzzle Case Study
  15. 15. 15 greymuzzle.org
  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: https://ronniemcbrayer.files.wordpress.com
  23. 23. 23Credit: http://www.uglydogbooks.com Resources4
  24. 24. 24Credit: http://indianagrace.org Resources - General Types of Disabilities - https://www.w3.org/WAI/intro/people-use- web/diversity Accessibility Law - http://webaim.org/articles/laws/usa Understanding Web Accessibility - http://uiaccess.com/ understanding.html User Stories - https://www.w3.org/WAI/intro/people-use-web/ stories Design/Theme Specific - http://alistapart.com/topic/accessibility
  25. 25. 25Credit: http://indianagrace.org Resources - Guidelines & Checklists WCAG 2.0 - https://www.w3.org/TR/WCAG20/#guidelines WCAG 2.0 Checklist - http://webaim.org/standards/wcag/checklist Section 508 - http://www.section508.gov Section 508 Checklist - http://webaim.org/standards/508/ checklist ATAG - https://www.w3.org/WAI/intro/atag.php UAAG - https://www.w3.org/WAI/intro/uaag.php General checklist - http://a11yproject.com/checklist.html
  26. 26. 26Credit: http://indianagrace.org Resources - Tools Overview of Tools - http://webaim.org/articles/tools General Tool - http://pa11y.org Visualization Toolkit - http://khan.github.io/tota11y Color Blindness Simulator - http://www.color-blindness.com/ coblis-color-blindness-simulator Color Safe - http://colorsafe.co VoiceOver - http://webaim.org/articles/voiceover Wave - http://wave.webaim.org
  27. 27. 27Credit: http://www.link-assistant.com Wrap-up5
  28. 28. 28Credit: http://www.1seo.com 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 Joind.in: https://joind.in/talk/cfe7c Room survey: http://goo.gl/WXQ5H6 Twitter: @cariefisher
  30. 30. @Mediacurrent Mediacurrent.com Thank you! slideshare.net/mediacurrent

×