Title III of the Americans with Disabilities Act (ADA) requires that some businesses and nonprofit services providers make accessibility accommodations to enable the disabled to access the same services as clients who are able. This includes electronic media and web sites. While the ADA applies to businesses with 15 or more employees, some smaller businesses web sites can benefit from being ADA compliant. Doing so opens your company up to more potential clients and limits liability. Web developers should consider including ADA compliant features in the original site.
This is particularly important when working for a government agency or government contractor, as these organizations must follow web accessibility guidelines under Section 508 of the Workforce Rehabilitation Act of 1973. Although ADA and Section 508 compliance are different, the published checklist for Section 508 compliance offers insight into ways to make websites accessible for people with disabilities, and thereby work toward ADA compliance.
RWD Client Examples
To check your website for accessibility, use the accessibility checklist published by the U.S. Department of Health and Human Services (1194.22 Web-based intranet and internet information and applications):
- Every image, video file, audio file, plug-in, etc. has an alt tag
- Complex graphics are accompanied by detailed text descriptions
- The alt descriptions describe the purpose of the objects
- If an image is also used as a link, make sure the alt tag describes the graphic and the link destination
- Decorative graphics with no other function have empty alt descriptions (alt= “”)
- Add captions to videos
- Add audio descriptions
- Create text transcript
- Create a link to the video rather than embedding it into web pages
- Add a link to the media player download
- Add an additional link to the text transcript
- The page should provide alternative links to the Image Map
- The <area> tags must contain an alt attribute
- Data tables have the column and row headers appropriately identified (using the <th> tag)
- Tables used strictly for layout purposes do NOT have header rows or columns
- Table cells are associated with the appropriate headers (e.g. with the id, headers, scope and/or axis HTML attributes)
- Make sure the page does not contain repeatedly flashing images
- Check to make sure the page does not contain a strobe effect
- A link is provided to a disability-accessible page where the plug-in can be downloaded
- All Java applets, scripts and plug-ins (including Acrobat PDF files and PowerPoint files, etc.) and the content within them are accessible to assistive technologies, or else an alternative means of accessing equivalent content is provided
- When form controls are text input fields use the LABEL element
- When text is not available use the title attribute
- Include any special instructions within field labels
- Make sure that form fields are in a logical tab order
- Include a ‘Skip Navigation’ button to help those using text readers
(Courtesy U.S. Department of Health and Human Services)
If the site meets all these criteria, it is likely ADA accessible. The best test is to obtain feedback on the site’s ease of use from people who are blind, deaf, and have mobility disabilities, then address their feedback with site improvements.
Web developers need to keep this in mind when creating websites. The best screen readers use naturalized voices and alter tone and inflection based on HTML tags, so choose layout elements carefully. It is also important to keep in mind that navigation is significantly slower when using a screen reader than it is for sighted people. Sighted people don’t have to wait for the reader to get to the link we want, unlike an ADA compliant menus. Minimizing graphics also helps shorten reading times and speed navigation for disabled users.
WPEngine Webinar – Feb 2018
Section 508 – Added to Rehabilitation Act of 1986 / 1998 – Mandatory for Federal Web SIte
ADA – American Disabilities Act (1990) – Public Accommodation – 2017 is set as ‘Inactive Action’
WCAG – 3 levels of compliance A, AA, AAA – Perceivable, Operable, Understandable & Robust
Common Pitfalls –
PERCEIVABLEs – Not using alt tags, not using subtitles / audio descriptions for videos, poorly created PDFs,
OPERABLE – Keyboard functionality, links should be more than ‘Learn More’
UNDERSTANDABLE – Missing HTML language attribute, Forms missing labels / ARIA ties.
Simply have an Accessibility Plan – Good color usage, Forms, Audio descriptions, captions, etc.
KISS – Test, Test, Test (SiteImprove, WAVE) – IMPROVING
Web Design should be usable by ALL people, ALL browsers, ALL screens.
Long lasting benefits of usability – Ease of Mind for all people – Increase User Base – Good for SEO (Tags, transcripts, etc.) – Increased Conversions
Accessibility & WordPress – ‘Enable Accessibility Mode’ tab in Widgets –
PLUGINS – wA11y -> Tota11y / WAVE WebAIM … Amazon Polly -> (high quality audio versions of Blog posts) … WP Accessibility Plugin -> ads & removes features.
Accessible Themes – Found in the Repository (Very Good)
Premium Themes – The closest in the Genesis framework.
4 Principles of ADA Compliance
The four principles involved are that websites must be perceivable, operable, understandable, and robust, or POUR. Within each principle are guidelines, and within each guideline are techniques and failure examples.
Here’s a list directly from W3C and WAI:
Perceivable – Information and user interface components must be presentable to users in ways they can perceive.
- This means that users must be able to perceive the information being presented (it can’t be invisible to all of their senses)
- Provide text alternatives for non-text content.
- Provide captions and other alternatives for multimedia.
- Create content that can be presented in different ways,
including by assistive technologies, without losing meaning.
- Make it easier for users to see and hear content.
Operable – User interface components and navigation must be operable.
- This means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform)
- Make all functionality available from a keyboard.
- Give users enough time to read and use content.
- Do not use content that causes seizures.
- Help users navigate and find content.
Understandable – Information and the operation of user interface must be understandable.
- This means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding)
- Make text readable and understandable.
- Make content appear and operate in predictable ways.
- Help users avoid and correct mistakes.
Robust – Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
- This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible)
- Maximize compatibility with current and future user tools.
What Businesses Need to Have an ADA Compliant Website?
Any business that is considered a “place of public accommodation” is required to provide equal access to services under the nondiscrimination requirements of Title III of ADA. When you look at the guidelines closely, this includes hotels, entertainment venues, legal and accounting firms, retail stores, and virtually every business that is not a private club, including businesses that exist solely on the web.
The Department of Justice (DOJ) has specifically stated in rulings that websites should be designed so they are accessible to individuals who have vision, hearing, and physical disabilities. There’s a growing body of case law where the DOJ required companies to provide an ADA compliant website and levied hefty penalties when sites failed to measure up.
And ADA compliance isn’t limited to websites. A recent ruling against an online grocery delivery company established the need for mobile apps to meet similar accessibility standards. Businesses need to consider every aspect of their web presence to ensure they are providing an exceptional user experience with access for all.
While there are legal considerations that make having an ADA compliant website a solid business decision, it’s also just a matter of good customer relations.
Accessibility Testing Tools –
Accessibility Testing Tools
- WP Accessibility — provides features that fix accessibility issues in your site.
- Contact Form 7: Accessible defaults — generates accessible contact form defaults in Contact Form 7
- Accessibility Widget — add a sidebar widget to change text size in your site.
- Zoom — enable site visitors to resize the predefined areas of your site.
- WAVE – run the WAVE accessibility evaluation tool within Firefox.
- Total Validator — an (X)HTML validator, an accessibility validator, a spell checker, and a broken links checker all rolled into one tool. Free & commercial versions available.
- Gravity Forms – WCAG 2.0 form fields
- Accessibility Poetry – WordPress Accessibility Plugin that provide solutions to common accessibility issues in websites. can help you keep your website more in line with the WCAG 2 and to expose your website to people with disabilities. What does the plugin include? Accessibility Toolbar with buttons to change the font size, contrast, etc.
Website Accessibility Under Title II of the ADA – Link
- Problem: Images Without Text Equivalents
Solution: Add a text description to every image using the img alt tag.
- Problem: Documents Are Not Posted In an Accessible Format
Solution: Adobe PDF files are screen reader compliant – IF they are in text format. You should avoid using documents that have been scanned, if at all possible. Those that have been scanned need OCR to convert content into text format. A few resources to help with that are here and here.
- Problem: Specifying Colors and Font Sizes
Solution: Allow your font size and color to be adjusted within a user’s browser or use universal not specialty fonts.
- Problem: Videos and Other Multimedia Lack Accessible Features
Solution: Include detailed descriptions of all non-text resources on your websites, captions for your videos and when possible full transcriptions.
- Problem: Forms and Site Navigation are Hard or Impossible for Impaired Users to Navigate
Solution: Make each field accessible by labeling each website element with a descriptive HTML tag. If the link is image based, be sure to describe it using the title=”description” variable on the anchor tag.
- Problem: Users Need Alternatives to Essential Web based Information
Solution: Clearly post alternative contact details your website visitors can use to gain access to all essential information in an ADA friendly way.
Other ADA Accessibility Notes
YouTube – Subtitles / Transcripts are also required.
Use good design practices and structure – H1s/ H2s, etc. Alt tags, etc.
Chrome Extension – Ally and Chrome Vox Screen Reader
Safari – Screen Reader