What is ADA and section 508?
ADA means Americans with Disabilities Act. ADA was enforced by the US Equal Employment Opportunity Commission, or EEOC for short, and designed to prohibit discrimination against people with disabilities and provide equal opportunity. Section 508 is specific to information technology or digital accessibility. Like ADA, Section 508 puts a legal framework in place for citizens with disabilities to achieve remediation.Â
Here are some quick numbers for you to see why ADA/508 is so crucial to your website and possibly your sales if you belong in the world of eCommerce. There are over 4.57 billion internet users. In the US alone, users spend approximately $517.36 billion online; $490 billion of that is from users with a disability of some kind (no hearing, no mouse, no sight, low or tunnel vision, or cognitive disability). If your website is not accessible, you may be excluding 60 million Americans. You could be losing 69% of your customers with disabilities instantly by not meeting their needs, and 80% of customers with disabilities have stated they are willing to spend more on a website that can.
What are some guidelines for meeting compliance?
There are levels and guidelines you’ll want to meet. The best resource for detailed information, including successes and failures, on all guidelines, are the WCAG 2.1 Guidelines. Â
Here you’ll follow POUR (perceivable, operable, understandable, robust).
- Perceivable: Content is presented in an easily perceivable manner.
- Operable: Navigation is easy to operate.
- Understandable: Content is easy to understand.
- Robust: Your website content can be interpreted by various devices and platforms.
There are 3 levels of accessibility acceptance to meet customers’ needs and keep your website compliant. Â
- Level A – this meets minimum requirements
- Level AA – acceptable compliance (this is what you want to strive for)
- Level AAA – optimal compliance (while this is desirable, it is often hard to reach)
Changes you can make now to meet compliance.
Clean, semantic HTML for screen readersÂ
Screen Readers read in the order in which the HTML is written. Divide the page into page sections (H1-H6), landmarks (complementaries, navigations, etc.), and ARIA labels (an accessibility attribute, and used in cases where a text label is not visible on-screen).Â
When using images, video, or audio – create alt tags. Alt tags are used to describe content users may not be otherwise able to view. Alt tags were literally created for accessibility meaning “alternative to the image,” and to work together with screenreaders.
Include a Skip Navigation link
A “Skip Navigation Link” provides a way for users to skip over navigation entirely and go straight to the main content; they are hidden until the user hits the tab key. Without this option, you’ll leave users tabbing through numerous navigation options to be able to finally get to their main content. Can you imagine a user tabbing through Amazon’s navigation? Yikes. Weather.com does a really great job at its use of the Skip Navigation link. The best part for developers is that this implements relatively quickly with a small snippet of code you can find here.Â
Prioritize color contrast and typography
Given the number of tools that exist to help check these items, there is really not a huge case to not have these items already compliant; these items have more to do with visual impairments and are easy to check. For text, a user should be able to increase their browser size by 200% and still reliably use your website. For color contrast (including text), a contrast ratio of 4.5:1 or higher should be met for text over background (4.47:1 is not 4.5, please do not round up). Text ratio should be at least 7:1 ratio to be unmistakable legible.
Here are a few tools you can use to check color contrast (click here for a complete list):
- STARK (integrates with XD, Figma, and Sketch). This can scan your mockup to make sure everything is at least meeting Level AA requirements. Free for minimum features, $60 annually for all features (with more to come).
- If your website has a live space – check out Toptal’s color filter. This will allow you to see variations in different levels of colorblindness, and it’s free.
- Analyze color contrast ratios by using Color & Contrast Picker. It’s free.
Provide transcripts for video and audio content
With video and audio content on the rise, it’s more important than ever to make sure everyone has equal access to it. According to HubSpot, 72% of customers would instead consume learning about their new product or service through video. A couple of reasons you should provide transcripts for audio-video are not everyone can see and hear videos or podcasts, and COVID-19 raised the stakes for more people shopping online, doctor visits, and online social events. It has now become the standard to provide captions and written transcripts.
