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.
WEB ACCESSIBILITY 

(ADA SECTION 508) 





WHAT DOES IT MEAN FOR YOUR
WEBSITE
BY: ST. PETE DESIGN
WHO WE ARE?

• We are a web development company located in St. Pete. We have been
building WordPress sites and WordPress p...
OUR STORY

Joe and I attended the National Federation for the Blind (NFB) convention in
Orlando last year. After sitting i...
TALK OUTLINE
1. WHAT IS SECTION 508
2. 11 EASY STEPS TO HELP YOUR SECTION 508 COMPLIANCE
3. SOME DEVELOPER TOOLS TO HELP Y...
WHAT IS “SECTION 508” AND “WCAG 2.0”?

• (WCAG) Web Content Accessibility Guidelines (WCAG) 2.0 defines how to
make Web co...
WHAT IS “SECTION 508” AND “WCAG 2.0”?
• (WCAG) Web Content Accessibility Guidelines (WCAG) 2.0 defines how to
make Web con...
A FEW FACTS:



OVER 1 BILLION PEOPLE WORLDWIDE HAVE SOME SORT
OF DISABILITY



AN ESTIMATED 253 MILLION PEOPLE WORLDWIDE ...
WHY DOES SECTION 508 EXIST?
Why should I make my sites compliant?
11 EASY STEPS TO HELP WITH COMPLIANCE

Here are some easy steps to add to your development process while building your sit...
11 EASY STEPS CONTINUED…

1. Provide alternative text for non-text content
ALT TEXT EXAMPLE
• How do you add alt text?
ALT TEXT EXAMPLE
• What do good alt text tags look like?
11 EASY STEPS CONTINUED…
1. Provide alternative text for non-text content
2. Label form elements
FORM LABELS EXAMPLE
• How do you add form labels?
FORM LABELS EXAMPLE
• What do good form labels look like?
11 EASY STEPS CONTINUED…
1. Provide alternative text for non-text content
2. Label form elements
3. Add manuscript or clos...
CLOSED CAPTIONS EXAMPLE
• What do closed captions look like?
AUDIO DESCRIPTION EXAMPLE
• What is an example of a video with a good audio description?
THE LION KING



VIDEO WITH AUDIO DESCRIPTION



HTTPS://WWW.YOUTUBE.COM/WATCH?V=7-XOHN2BWG4
11 EASY STEPS CONTINUED…
1. Provide alternative text for non-text content
2. Label form elements
3. Add manuscript or clos...
CONTRAST
• Color contrast ratio should be a minimum of 4.5:1
• With the exception of links. Links can be 3:1
• What does b...
CONTRAST
• What does good contrast look like?
11 EASY STEPS CONTINUED…
5. Make link text descriptive
LINK DESCRIPTION EXAMPLE
• What do good and bad link descriptions look like?
Questions?
11 EASY STEPS CONTINUED…
6. Do not use color as the only indication of meaning
EXAMPLE #1: USING COLOR TO CONVEY MEANING FOR
INPUT FIELDS.
In Correct Example Correct Example
EXAMPLE #2 USING COLOR AS A INDICATOR WHEN ASKING
QUESTIONS.
In Correct Example Correct Example
11 EASY STEPS CONTINUED…
6. The color of any given content cannot be the only indication of value or what
it is.
7. Make s...
11 EASY STEPS CONTINUED…
6. The color of any given content cannot be the only indication of value or what
it is.
7. Make s...
HOW TO PROPERLY HANDLE INPUT ERRORS 
11 EASY STEPS CONTINUED…
6. The color of any given content cannot be the only indication of value or what
it is.
7. Make s...
11 EASY STEPS CONTINUED…
6. The color of any given content cannot be the only indication of value or what it is.
7. Make s...
11 EASY STEPS CONTINUED…
6. The color of any given content cannot be the only indication of value or what it is.
7. Make s...
11 EASY STEPS CONTINUED…
6. The color of any given content cannot be the only indication of value or what it is.
7. Make s...
STEP #1 DOWNLOAD WP-ACCESSIBILITY PLUGIN

STEP #2 SIMPLY ACTIVATE “ENABLE SKIPLINKS”
HOW TO CREATE A SKIP NAVIGATION IN WORDPRESS

THE EASIEST WAY TO INSERT A SKIP NAVIGATION LINK TO YOUR PAGE IS BY MODIFYIN...
HOW TO CREATE A SKIP NAVIGATION IN WORDPRESS
2. INDEX.PHP - HAS THE CONTENT OF YOUR MAIN PAGE.
3. PAGE.PHP - HAS THE CONTE...
Questions?
11 EASY STEPS TO HELP WITH COMPLIANCE

Here are some easy steps to add to your development process while building your sit...
TOOLS FOR DEVELOPERS
• Userway.org - This software helps your site get closer to being ADA Section
508 compliant by adding...
TECHNOLOGY THAT HELPS
• NVDA - NVDA (NonVisual Desktop Access) is a free “screen reader” which
enables blind and vision im...
Questions?
ONE WEBSITE AT A TIME! 
•StPeteDesign.com
•Steve@StPeteDesign.com
•Joe@StPeteDesign.com
Web Accessibility (ADA Section 508): What Does it Mean for Your Website
Web Accessibility (ADA Section 508): What Does it Mean for Your Website
Web Accessibility (ADA Section 508): What Does it Mean for Your Website
Web Accessibility (ADA Section 508): What Does it Mean for Your Website
Web Accessibility (ADA Section 508): What Does it Mean for Your Website
Web Accessibility (ADA Section 508): What Does it Mean for Your Website
Web Accessibility (ADA Section 508): What Does it Mean for Your Website
Web Accessibility (ADA Section 508): What Does it Mean for Your Website
Web Accessibility (ADA Section 508): What Does it Mean for Your Website
Web Accessibility (ADA Section 508): What Does it Mean for Your Website
Upcoming SlideShare
Loading in …5
×

Web Accessibility (ADA Section 508): What Does it Mean for Your Website

55 views

Published on

What is ADA Section 508 (WCAG 2.0)and what does that mean for developers?

253 million people worldwide have some sort of visual impairment. As developers, we can help a lot of people by making the web accessible to everyone. We will explain in English what ADA Section 508 is and what that means for developers and web accessibility.

We will also explain some things developers can do to help their clients become compliant and avoid expensive lawsuits.

Featured Speakers: Joe Lopreste and Steve Curtis of St Pete Design. Steve Curtis is co-owner of St. Pete Design which he founded in 2012. He has been developing WordPress websites since 2008. Joe LoPreste is a proud father of 2 amazing girls 17 and 13. He is a St. Pete native and has been working with technology for the last 10+ years.

Presented at WordPress St. Petersburg Meetup.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Web Accessibility (ADA Section 508): What Does it Mean for Your Website

  1. 1. WEB ACCESSIBILITY 
 (ADA SECTION 508) 
 
 
 WHAT DOES IT MEAN FOR YOUR WEBSITE BY: ST. PETE DESIGN
  2. 2. WHO WE ARE?
 • We are a web development company located in St. Pete. We have been building WordPress sites and WordPress plugins since 2012. We specialize in Web Accessibility for WordPress sites and plugins.
  3. 3. OUR STORY
 Joe and I attended the National Federation for the Blind (NFB) convention in Orlando last year. After sitting in on several classes we were moved by how difficult it is for visually impaired people to do what we take for granted everyday. As a result we decided that we wanted to make sites and software that everybody has full access to. This includes the 100’s of millions of people with visual disabilities. We also want to help other developers learn the basics of web accessibility for the sites and software that they create.
  4. 4. TALK OUTLINE 1. WHAT IS SECTION 508 2. 11 EASY STEPS TO HELP YOUR SECTION 508 COMPLIANCE 3. SOME DEVELOPER TOOLS TO HELP YOU BECOME COMPLIANT
  5. 5. WHAT IS “SECTION 508” AND “WCAG 2.0”?
 • (WCAG) Web Content Accessibility Guidelines (WCAG) 2.0 defines how to make Web content more accessible to people with disabilities. Accessibility involves a wide range of disabilities, including visual, auditory, physical, speech, cognitive, language, learning, and neurological disabilities. (World Wide Recommended Guidelines)
  6. 6. WHAT IS “SECTION 508” AND “WCAG 2.0”? • (WCAG) Web Content Accessibility Guidelines (WCAG) 2.0 defines how to make Web content more accessible to people with disabilities. Accessibility involves a wide range of disabilities, including visual, auditory, physical, speech, cognitive, language, learning, and neurological disabilities. (World Wide Recommended Guidelines) • (Section 508) of the Rehabilitation Act (29 U.S.C. § 794d) requires that Federal agencies' electronic and information technology is accessible to people with disabilities, including employees and members of the public. (U.S. law)
  7. 7. A FEW FACTS:
 
 OVER 1 BILLION PEOPLE WORLDWIDE HAVE SOME SORT OF DISABILITY
 
 AN ESTIMATED 253 MILLION PEOPLE WORLDWIDE LIVE WITH A VISION IMPAIRMENT.
 
 AN ESTIMATED 19 MILLION CHILDREN WORLDWIDE ARE VISUALLY IMPAIRED
 (CREDIT: WORLD HEALTH ORGANIZATION)
  8. 8. WHY DOES SECTION 508 EXIST? Why should I make my sites compliant?
  9. 9. 11 EASY STEPS TO HELP WITH COMPLIANCE
 Here are some easy steps to add to your development process while building your site. 1. Provide alternative text for non-text content 2. Label form elements 3. Add manuscript or closed captions of audio for videos. Add audio description for all animations. 4. Ensure color contrast meets minimum thresholds 5. Make link text descriptive 6. Do not use color as the only indication of meaning 7. Make sure your font size is at least 18+ 8. If there is an input error by the user, it must be identified and described in the text to the user. (error handling) 9. Your entire website should be able to be navigated by using only your keyboard (tab navigation) 10. Use flexible time limits for your site, add an option for users to click for more time. 11. Provide skip navigation links so that users can skip repetitive content such as nav menus, widgets (recent posts) etc.
  10. 10. 11 EASY STEPS CONTINUED…
 1. Provide alternative text for non-text content
  11. 11. ALT TEXT EXAMPLE • How do you add alt text?
  12. 12. ALT TEXT EXAMPLE • What do good alt text tags look like?
  13. 13. 11 EASY STEPS CONTINUED… 1. Provide alternative text for non-text content 2. Label form elements
  14. 14. FORM LABELS EXAMPLE • How do you add form labels?
  15. 15. FORM LABELS EXAMPLE • What do good form labels look like?
  16. 16. 11 EASY STEPS CONTINUED… 1. Provide alternative text for non-text content 2. Label form elements 3. Add manuscript or closed captions of audio for videos. Add audio description for all animations.
  17. 17. CLOSED CAPTIONS EXAMPLE • What do closed captions look like?
  18. 18. AUDIO DESCRIPTION EXAMPLE • What is an example of a video with a good audio description?
  19. 19. THE LION KING
 
 VIDEO WITH AUDIO DESCRIPTION
 
 HTTPS://WWW.YOUTUBE.COM/WATCH?V=7-XOHN2BWG4
  20. 20. 11 EASY STEPS CONTINUED… 1. Provide alternative text for non-text content 2. Label form elements 3. Add manuscript or closed captions of audio for videos. Add audio description for all animations. 4. Ensure color contrast meets minimum thresholds
  21. 21. CONTRAST • Color contrast ratio should be a minimum of 4.5:1 • With the exception of links. Links can be 3:1 • What does bad contrast look like?
  22. 22. CONTRAST • What does good contrast look like?
  23. 23. 11 EASY STEPS CONTINUED… 5. Make link text descriptive
  24. 24. LINK DESCRIPTION EXAMPLE • What do good and bad link descriptions look like?
  25. 25. Questions?
  26. 26. 11 EASY STEPS CONTINUED… 6. Do not use color as the only indication of meaning
  27. 27. EXAMPLE #1: USING COLOR TO CONVEY MEANING FOR INPUT FIELDS. In Correct Example Correct Example
  28. 28. EXAMPLE #2 USING COLOR AS A INDICATOR WHEN ASKING QUESTIONS. In Correct Example Correct Example
  29. 29. 11 EASY STEPS CONTINUED… 6. The color of any given content cannot be the only indication of value or what it is. 7. Make sure your font size is at least 18+
  30. 30. 11 EASY STEPS CONTINUED… 6. The color of any given content cannot be the only indication of value or what it is. 7. Make sure your font size is at least 18+ 8. If there is an input error by the user, it must be identified and described in the text to the user. (error handling)
  31. 31. HOW TO PROPERLY HANDLE INPUT ERRORS 
  32. 32. 11 EASY STEPS CONTINUED… 6. The color of any given content cannot be the only indication of value or what it is. 7. Make sure your font size is at least 18+ 8. If there is an input error by the user, it must be identified and described in the text to the user. (error handling) 9. Your entire website should be able to be navigated by using only your keyboard (tab navigation)
  33. 33. 11 EASY STEPS CONTINUED… 6. The color of any given content cannot be the only indication of value or what it is. 7. Make sure your font size is at least 18+ 8. If there is an input error by the user, it must be identified and described in the text to the user. (error handling) 9. Your entire website should be able to be navigated by using only your keyboard (tab navigation) 10. You must offer flexible time limits (if any) associated with the website or software.
  34. 34. 11 EASY STEPS CONTINUED… 6. The color of any given content cannot be the only indication of value or what it is. 7. Make sure your font size is at least 18+ 8. If there is an input error by the user, it must be identified and described in the text to the user. (error handling) 9. Your entire website should be able to be navigated by using only your keyboard (tab navigation) 10. You must offer flexible time limits (if any) associated with the website or software. *The user must “be alerted and given sufficient time to indicate more time is required”.
  35. 35. 11 EASY STEPS CONTINUED… 6. The color of any given content cannot be the only indication of value or what it is. 7. Make sure your font size is at least 18+ 8. If there is an input error by the user, it must be identified and described in the text to the user. (error handling) 9. Your entire website should be able to be navigated by using only your keyboard (tab navigation) 10. You must offer flexible time limits (if any) associated with the website or software. 11. Provide skip navigation links so that users can skip repetitive content such as nav menus, widgets (recent posts) etc.
  36. 36. STEP #1 DOWNLOAD WP-ACCESSIBILITY PLUGIN
 STEP #2 SIMPLY ACTIVATE “ENABLE SKIPLINKS”
  37. 37. HOW TO CREATE A SKIP NAVIGATION IN WORDPRESS
 THE EASIEST WAY TO INSERT A SKIP NAVIGATION LINK TO YOUR PAGE IS BY MODIFYING THE CURRENT CHILD THEME YOU ARE USING BY EDITING THREE PHP FILES LOCATED IN THE CURRENT THEME’S FOLDER.  *WE ARE ASSUMING YOU HAVE CREATED A CHILD THEME ALREADY. 1. HEADER.PHP –THIS FILE IS THE BEST PLACE TO PUT YOUR “SKIP TO CONTENT” LINK <DIV CLASS="DESCRIPTION"><?PHP BLOGINFO('DESCRIPTION'); ?></DIV>. ENTER A NEW LINE BELOW IT TO TYPE IN YOUR SKIP-NAVIGATION LINK TAG. <A HREF="#SKIPHERE">SKIP TO CONTENT</A>. YOU THEN NEED TO FORMAT YOUR SKIP-NAVIGATION LINK USING YOUR CURRENT CSS IN ORDER TO BLEND IT WITH THE CURRENT THEME.
  38. 38. HOW TO CREATE A SKIP NAVIGATION IN WORDPRESS 2. INDEX.PHP - HAS THE CONTENT OF YOUR MAIN PAGE. 3. PAGE.PHP - HAS THE CONTENTS FOR ALL THE OTHER PAGES.
 OPEN THESE FILES AND BY DEFAULT THE CONTENT AREA IS UNDER A CSS <DIV> BELOW: <DIV ID="CONTENT" CLASS="NARROWCOLUMN" ROLE="MAIN"> ENTER A BLANK LINE BELOW IT AND TYPE THE <A NAME> TAG. THEN IT SHOULD LOOK LIKE THIS: <DIV ID="CONTENT" CLASS="NARROWCOLUMN" ROLE="MAIN"> <A NAME="SKIPHERE"></A> <?PHP IF (HAVE_POSTS()) : ?> THERE IS NO NEED TO MODIFY A STYLE FOR IT IN THE CSS, BECAUSE IT’S NOT VISIBLE IN THE PAGE.
  39. 39. Questions?
  40. 40. 11 EASY STEPS TO HELP WITH COMPLIANCE
 Here are some easy steps to add to your development process while building your site. 1. Provide alternative text for non-text content 2. Label form elements 3. Add manuscript or closed captions of audio for videos. Add audio description for all animations. 4. Ensure color contrast meets minimum thresholds 5. Make link text descriptive 6. Do not use color as the only indication of meaning 7. Make sure your font size is at least 18+ 8. If there is an input error by the user, it must be identified and described in the text to the user. (error handling) 9. Your entire website should be able to be navigated by using only your keyboard (tab navigation) 10. Use flexible time limits for your site, add an option for users to click for more time. 11. Provide skip navigation links so that users can skip repetitive content such as nav menus, widgets (recent posts) etc.
  41. 41. TOOLS FOR DEVELOPERS • Userway.org - This software helps your site get closer to being ADA Section 508 compliant by adding a widget on the frontend of your WordPress site. This widget allows users to better navigate your site much better if they have any visual disabilities. • wA11y – The Web Accessibility Toolbox – This plugin helps developers know where they have accessibility issues on their site • Contrast Ratio Checker - https://contrastchecker.com  This tells you whether your page has the proper contrast ratio  • Loop11 - for remote usability testing. Actual users with disabilities test your site and give you feedback
  42. 42. TECHNOLOGY THAT HELPS • NVDA - NVDA (NonVisual Desktop Access) is a free “screen reader” which enables blind and vision impaired people to use computers. www.nvaccess.org • ChromeVox - The ChromeVox (Classic) screen reader is an extension to Chrome that brings the speed, versatility, and security of Chrome to visually impaired users.
  43. 43. Questions?
  44. 44. ONE WEBSITE AT A TIME!  •StPeteDesign.com •Steve@StPeteDesign.com •Joe@StPeteDesign.com

×