Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Website Accessibility & WordPress

92 Aufrufe

Veröffentlicht am

Website accessibility - what it is and why you should care. Slides from Amber Hinds' presentation for the Georgetown WordPress Meetup on August 21, 2018.

These slides cover:
- Why accessibility matters
- Accessibility laws - who needs to follow them
- Accessibility best practices
- How to test if your website is accessible or has any accessibility issues
- How to fix accessibility issues if they arise
- WordPress specific accessibility tools/themes

To watch a video recorded live at the meetup, go to https://www.facebook.com/roadwarriorwp/videos/1706475059461808/

Find out more about the Georgetown, TX WordPress meetup at https://www.wpgeorgetown.com and contact Amber at https://roadwarriorcreative.com

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Website Accessibility & WordPress

  1. 1. @roadwarriorwp | RoadWarriorCreative.com Website Accessibility & WordPress Georgetown WordPress Meetup August 21, 2018 | AMBER HINDS
  2. 2. @roadwarriorwp | RoadWarriorCreative.com Objective Have a website that can be used by everyone - people of all abilities and disabilities.
  3. 3. @roadwarriorwp | RoadWarriorCreative.com
  4. 4. @roadwarriorwp | RoadWarriorCreative.com Today’s Agenda ● Why accessibility matters ● Accessibility laws - who needs to follow them ● Accessibility best practices ● How to test if your website is accessible or has any accessibility issues ● How to fix accessibility issues if they arise ● Noteworthy WordPress specific accessibility tools/themes
  5. 5. @roadwarriorwp | RoadWarriorCreative.com Why Accessibility Matters
  6. 6. @roadwarriorwp | RoadWarriorCreative.com >1 billion of the world’s population have a disability. World Health Organization 2018 World Report on Disability
  7. 7. @roadwarriorwp | RoadWarriorCreative.com 15% of the world’s population have a disability. World Health Organization 2018 World Report on Disability
  8. 8. @roadwarriorwp | RoadWarriorCreative.com 1 in 8 people in the United States have a disability. U.S. Census Bureau's 2016 American Community Survey
  9. 9. @roadwarriorwp | RoadWarriorCreative.com $200 billion spent annually by disabled Americans. U.S. Department of Labor
  10. 10. @roadwarriorwp | RoadWarriorCreative.com Accessibility matters because... ● It’s good karma ● It’s good for SEO ● It increases revenue opportunities ● In some cases it’s legally required
  11. 11. @roadwarriorwp | RoadWarriorCreative.com Accessibility Laws* *I am not a lawyer.
  12. 12. @roadwarriorwp | RoadWarriorCreative.com Accessibility is a Civil Right ● Equal access to information: education, transit, voting, healthcare, employment, human services, etc. ● Equal ability to participate fully in our society
  13. 13. @roadwarriorwp | RoadWarriorCreative.com Rehabilitation Act of 1973 Section 504: “No otherwise qualified individual with a disability in the United States... shall, solely by reason of her or his disability, be excluded from participation in, be denied the benefits of, or be subjected to discrimination under any program or activity receiving Federal financial assistance.” Applies to: Government agencies, federally-funded projects, K-12 schools, postsecondary entities (state colleges, universities, and vocational training schools)
  14. 14. @roadwarriorwp | RoadWarriorCreative.com Rehabilitation Act of 1973 Section 508: Bars the Federal government from procuring electronic and information technology goods and services (including website design) that are not fully accessible to those with disabilities.
  15. 15. @roadwarriorwp | RoadWarriorCreative.com Rehabilitation Act of 1973 When complaints arise, members of the public, students, and employees with disabilities may: 1. File an administrative complaint with agencies they believe to be in violation of Section 508. 2. File a private lawsuit in federal district court, or 3. File a formal complaint through the US DOJ Office of Civil Rights. https://webaim.org/articles/laws/usa/rehab
  16. 16. @roadwarriorwp | RoadWarriorCreative.com Americans with Disabilities Act (ADA) Title II Communications with persons with disabilities must be "as effective as communications with others" [28 C.F.R. ss 35.160 (a)]. Title III Deals with public accommodation of people with disabilities. https://webaim.org/articles/laws/usa/ada
  17. 17. @roadwarriorwp | RoadWarriorCreative.com Americans with Disabilities Act (ADA) No clear laws on how ADA applies the the web - no regulations - but increasing numbers of lawsuits filed and won under ADA. https://webaim.org/articles/laws/usa/ada
  18. 18. @roadwarriorwp | RoadWarriorCreative.com Telecommunications Act of 1996 “The Act requires manufacturers of telecommunications equipment and customer premises equipment to ensure that the equipment is designed, developed, and fabricated to be accessible to and usable by individuals with disabilities, if readily achievable.” Complaints ● Filed with FCC ● Lawsuits are not authorized and there is no provision for damages. https://webaim.org/articles/laws/usa/telecomm
  19. 19. @roadwarriorwp | RoadWarriorCreative.com Don’t forget about your state... ● State funded IT laws ● State anti-discrimination laws ● Many states allow damages for ADA cases + Local governments + World laws https://webaim.org/articles/laws/world/
  20. 20. @roadwarriorwp | RoadWarriorCreative.com Best Practices
  21. 21. @roadwarriorwp | RoadWarriorCreative.com Your website should be... Perceivable Operable Understandable Robust
  22. 22. @roadwarriorwp | RoadWarriorCreative.com Perceivable Information needs to be transformable from one form to another. Main content and message should be separable from the way it is styled or presented.
  23. 23. @roadwarriorwp | RoadWarriorCreative.com Operable Not everyone uses a standard keyboard + mouse to navigate the web. ● Multiple ways to interact with the website ● User control over time limits/timing ● Clear instructions ● Error recovery options
  24. 24. @roadwarriorwp | RoadWarriorCreative.com Understandable ● Appropriately targeted language/reading level ● Supplemental representation of information ○ Graphics, videos, audio players, graphs, etc. ○ Summaries or excerpts before long articles ● Understandable functionality ○ Navigation structure, form interactions, available tooltips etc.
  25. 25. @roadwarriorwp | RoadWarriorCreative.com Robust ● Functionality across current and future devices, operating systems, and browsers ● Support some outdated versions ● Validate against technical standards for that platform
  26. 26. @roadwarriorwp | RoadWarriorCreative.com When to start thinking about accessibility...
  27. 27. @roadwarriorwp | RoadWarriorCreative.com
  28. 28. @roadwarriorwp | RoadWarriorCreative.com Accessibility Checklist
  29. 29. @roadwarriorwp | RoadWarriorCreative.com Accessibility in Content ● Images need appropriate alt text or empty alt text if decorative ● Caption videos ● Provide transcripts for audio and video ● Be careful about reading level (8th grade) ● Avoid rapid flashing (no more than 3x/sec.)
  30. 30. @roadwarriorwp | RoadWarriorCreative.com Accessibility in Design ● Website must have consistent interface ● Check color contrast ● Beware of line length issues ● Keep related items close (proximity) ● Design focus states for links, buttons, etc. ● Design for error states
  31. 31. @roadwarriorwp | RoadWarriorCreative.com Accessibility in Development ● Follow Web Standards (W3C/WAI) ● Set page language ● Use semantics (headings, buttons, labels) ● Foreground images, please (with alt text) ● Hide informative text for screen readers with a CSS class like: .screen-reader-text ● Mobile-first, responsive design navigable with keyboard only (tab key)
  32. 32. @roadwarriorwp | RoadWarriorCreative.com Example: Fort Collins Montessori School
  33. 33. @roadwarriorwp | RoadWarriorCreative.com Guideline + Testing Resources ● P.O.U.R.: https://webaim.org/articles/pour ● Current web content accessibility guidelines (WCAG) 2.1: https://www.w3.org/TR/WCAG21 ● WCAG 2 implementation checklist: https://webaim.org/standards/wcag/checklist ● Test your website: http://wave.webaim.org or get the Chrome extension ● Chrome Dev Tools > Audits ● Color contrast checker: https://webaim.org/resources/contrastchecker ● Screen readers: ○ ChromeVox ○ NVDA
  34. 34. @roadwarriorwp | RoadWarriorCreative.com
  35. 35. @roadwarriorwp | RoadWarriorCreative.com Accessibility & WordPress Core ● Handbook on WordPress Accessibility ● Theme Developer’s Handbook Accessibility Guidelines ● Requirements for the accessibility-ready tag in the theme directory ● Make WordPress Accessible - you can help! ● Learn More: Accessibility talks on WordPress.tv
  36. 36. @roadwarriorwp | RoadWarriorCreative.com Accessibility Ready Themes Free Themes ● 124 tagged “Accessibility ready” in the Theme Directory at https://wordpress.org/themes/tags/accessibility-ready Premium Themes ● Genesis by StudioPress - https://my.studiopress.com/themes ● 200 tagged “Accessible” on Themeforest - https://themeforest.net/category/wordpress?term=accessible
  37. 37. @roadwarriorwp | RoadWarriorCreative.com Accessibility Plugin Fix common accessibility issues without changing your theme. https://wordpress.org/plugin s/wp-accessibility
  38. 38. @roadwarriorwp | RoadWarriorCreative.com What if I just want to hire someone? Ask yourself how much of an expert you want, and how key accessibility is to your website’s success and reputation (or legal compliance)... ● Knowability - Austin-based nonprofit ● Check with local agencies ● Find a freelancer Is there anyone in the room today?
  39. 39. @roadwarriorwp | RoadWarriorCreative.com Amber Hinds Creative Director Road Warrior Creative amber@roadwarriorcreative.com @roadwarriorwp on all the socials