Keep Your Site ADA-Compliant and Strengthen Your SEO
Thomas Bendel
Thomas Bendel
In 1990, The Americans with Disabilities Act (ADA) was signed into law. This civil rights law helps protect the one in four Americans with disabilities from being discriminated against in all places that are open to the general public.
Since the ADA was passed, technology has advanced rapidly, and the internet is now deeply ingrained within our daily lives. As the line between our digital and physical lives began to blur, websites needed to be accessible to people with disabilities.
The Department of Justice responded accordingly in 2010, publishing revised regulations to cover everything from webpage usability to website design. These new rules have raised standards for businesses to ensure that their sites and pages pass ADA compliance.
ADA compliance requires all electronic information be accessible to those with disabilities. As such, web development needs to take into consideration the unique manner in which visually impaired audiences navigate online content.
Screen reader applications make it possible for visually impaired users to have text-based web content presented in an audio format. Through Text-To-Speech (TTS) functionality, these tools read aloud all on-page text, including navigation elements so that users can easily find the information they seek. When properly tagged, the content read to the user can include image descriptions as well.
BrainDo prioritizes ADA-compliance when developing websites. Writing Alt text that describes on-page images can aid user comprehension of both content and context.
A great way to build webpages with ADA compliance in mind is to think about how you would explain the content on the page to your friend over the phone. For example, when staring at picture of a frog, you wouldn’t just tell a friend that you’re looking at an image. Instead, you would explain that the photo is of a frog extending its tongue to catch a fly. You’ve used descriptive language to properly convey the image’s content.
From a business perspective, writing solid Alt text for on-page images also naturally benefits search engine optimization (SEO) by adding complementary context.
Image descriptions represent just one area in which ADA compliance and SEO overlap. ADA-compliant content naturally provides a direct benefit to indexation.
User agents like Googlebot rely entirely on text to index, sort, and rank online content within Search Engine Results Pages (SERPs). Search spiders cannot “see” content without associated text – whether on-page copy, Meta data, or source code. Both user agents and screen readers require additional context for non-text content to properly present webpages and search results.
Within SERPs, a listing’s clickable blue title link is commonly populated by the webpage’s Title tag. The Title tag helps the reader and search engine understand what the page is about before the page is even opened. As the first point of interaction, this title will set the user’s expectation regarding what information they’ll receive when clicking a listing.
Make sure your Title tags are descriptive, accurate, and include a compelling reading to click the listing.
In addition to Title tags, on-page headings and subheadings help describe the text that the user is about to view below. For search engines, headings provide search engines with a sense of content hierarchy that aids their understanding of the topics covered.
Think about fast food dining. Quick service restaurants lay out their menus by product category, and products are listed by name with addition details included below. It wouldn’t be as helpful if they told you the ingredients first and then the name of the product.
Similarly, content hierarchy is also valuable to ADA compliance. Screen reader users typically navigate a webpage by its headings. They can listen to a list of all headings and skip ahead to a desired content area.
Aside from descriptive text, design also plays a role in developing fully compliant webpages.
Although the ADA ensures accessibility, it falls short of providing specific technical standards. For instance, the Biden administration’s March 18, 2022 update, “Guidance on Web Accessibility and the ADA,” provides examples of accessibility barriers but lacks specific rules for compliance.
To ensure ADA-compliance, we rely on the Web Content Accessibility Guidelines (WCAG) developed by the World Wide Web Consortium (W3C). The WCAG sets the international standard for website accessibility and includes specific criteria around visual accommodations. It’s four main principles are that content must be perceivable, operable, understandable, and robust. Success criteria is defined by three “levels of conformance” represented by A (lowest), AA, and AAA (highest). As of WCAG 2.1, there are 78 Success Criteria one must meet in order to be compliant with Level AAA – covering design standards for everything from adequate font size to animation from interactions.
When designing web assets, the BrainDo creative team aims for Level AAA accessibility. This helps ensure that the content we develop will to be easily digestible by all users.
As an example, color contrast is an important consideration for WCAG-compliance, measured as the perceived difference in brightness between two colors. One useful tool our team uses to check our text contrasting and sizing is the Contrast Checker tool from Webaim. Interestingly, text that is part of a logo has no contrast requirement.
As of Q2 2022, roughly 59% of global website traffic was generated by mobile devices (excluding tablets). adds an additional layer of focus for our developers.
A mobile phone is significantly smaller than most desktop screens. Visually impaired users will need apps and webpages to function properly with larger text.
Site visitors that view the web with larger text settings might experience phrases and content being cut off on a page. Some of these users might even turn their phone sideways to view your page or app in landscape mode to gain additional screen width. For mobile applications, this translates to vital design considerations.
Building your mobile app to support landscape mode helps improve accessibility. When developing a new app, check that all test displays correctly in both portrait and landscape mode, and ensure that content does not get cut off when font size is increased.
Ensuring your website and mobile apps are compliant with ADA guidelines and WCAG standards does more than strengthen your SEO and page useability. It enables traffic to your website from all users, regardless of how they consume online content.
While it may seem daunting, proper ADA compliance provides a better online experience to more people and helps you reach more prospective customers.
We hope that our examples help your team get on the right track. And if improving your website’s accessibility seems stressful, BrainDo can help. Our team of experts have years of design and development experience making powerful, accessible websites.