Author: Rejoice Ojiaku
Even if your website attracts thousands of potential customers daily (thanks to your search engine optimization efforts), those customers can't buy from your business if they can't locate your products/services.
The same is true for your differently abled audiences—except that the challenges they face may not be obvious to you. Nevertheless, if you can't resolve those challenges to serve those customers, they'll move on to someone who can and will (your competitors). That's just one of many compelling reasons to consider website accessibility each time you create content:
Many countries have implemented legislation to guarantee digital content accessibility, meaning that non-compliant site owners may be vulnerable to lawsuits.
Approximately 27% of adults in the United States have some type of disability, according to the CDC.
Improving website accessibility also improves user experience (header tags, anchor text, alt text, navigation, etc.), which can ultimately help increase conversions.
There are even more reasons to invest in website accessibility, and while some of those reasons are complementary with your SEO efforts, you must remember that they are two distinct disciplines. This is because general website accessibility is not a Google search ranking factor—even though some accessibility features (like anchor text) are also used by search engines to inform rankings.
In this blog post, I'll show you how website accessibility affects SEO, resources to make your site more accessible, and best practices to ensure that your website is ready for all audiences.
Table of contents:
What is website accessibility?
Website accessibility is the practice of designing and developing websites that are inclusive and suitable for individuals of all abilities. It's about removing barriers and ensuring that every visitor—regardless of their physical or cognitive challenges—can navigate and interact with your website seamlessly.
By prioritizing accessibility, you demonstrate a commitment to inclusivity and empathy, making a positive impact on your customers. But accessibility is not just a moral imperative—it's a legal one too. Various laws and regulations exist globally to ensure equal access to digital content for all individuals:
In the US, the Americans with Disabilities Act (ADA) and Section 508 of the Rehabilitation Act set guidelines for accessible websites.
In the UK, the Equality Act 2010 requires organizations to make reasonable adjustments to ensure accessibility for people with disabilities.
In the EU, the Web Accessibility Directive mandates that public sector websites meet specific accessibility standards.
By understanding and adhering to these laws, you not only meet your legal obligations but also tap into a broader customer base. Investing in website accessibility is an investment in your customers and your business. It's an opportunity to create an inclusive digital environment that fosters trust, loyalty, and brand advocacy.
How web accessibility affects SEO
Let's zoom out for a moment and consider the bigger picture for your brand:
When you prioritize accessibility, you’re not only catering to individuals with disabilities but also addressing broader concerns that impact user experience and conversions.
Elements like clear and descriptive headers, meaningful and well-crafted alt text for images, and intuitive navigation are all essential aspects of accessibility that directly contribute to a positive user experience. After all, SEO isn’t just about getting traffic to your pages—it’s also about how you satisfy those visitors and guide them along their customer journey.
Now, let’s zoom back in and look at a few examples of overlap in terms of implementing website accessibility and SEO:
Header tags help you create an intuitive, user-friendly structure for your content. Users that rely on screen readers can use headers to skip to the desired section of your content, or skip repeated content (like menus, for example). Both human users and search engines look at these headers to help them understand your content.
Alternative text (alt text) helps individuals with visual impairments understand the content and context of images through screen readers (or other assistive technologies). Search engines also use alt text to help identify the content within an image, which could help them show up in image search results.
Anchor text helps to describe the purpose of a link and contextualize the destination page for users and search engines. For users that rely on screen readers, this text distinguishes the link from other links on the same web page.
There’s far more overlap, including title tags, readability, breadcrumbs, site navigation, etc. While I do cover some best practices later on in this blog post, it’s by no means a comprehensive guide on accessibility. For that, you’ll need to reference the Web Content Accessibility Guidelines (more on that below).
It's important to note that while not all accessibility considerations directly impact SEO, those that do can influence conversions. When you invest in making your website accessible and user-friendly, you create an inclusive and welcoming environment in which your audience can actually achieve what they went there to do—whether that’s reading a blog post, making a purchase, or just checking the forecast. This fosters trust and credibility, and encourages users to take the desired actions.
Web Content Accessibility Guidelines (WCAG) and best practices
The World Wide Web Consortium (W3C) is a widely recognized organization that develops standards to help people build websites based on sound accessibility, internationalization, privacy, and security principles.
The W3C publishes the Web Content Accessibility Guidelines (WCAG) “with a goal of providing a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally.” These guidelines are considered the definitive reference for web accessibility.
So, what can the WCAG offer you as a site owner or SEO? The WCAG comes with a comprehensive set of standards and success criteria, empowering you to create highly accessible websites and digital content. Its flexibility and adaptability cater to various types of content, including multimedia and mobile platforms. By embracing the WCAG, you demonstrate your commitment to providing an inclusive online experience for all users.
The WCAG is based on four key principles:
Perceivable: Information and user interface components must be presentable to users in ways they can perceive.
Operable: User interface components and navigation must be operable.
Understandable: Information and the operation of the user interface must be understandable.
Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
These guiding principles are then broken down into detailed directives, each with its own set of success standards. Color contrast, keyboard navigation, multimedia accessibility, and alt text for images are only a few of the subjects covered.
Let's dive into an example scenario where you, as a savvy marketer or business owner, can follow the WCAG to drive success:
Imagine you’re launching a new website for your online store that sells fashion accessories. You understand that an intuitive user experience is vital for customer satisfaction and conversions. By following the WCAG , you can ensure your website is accessible to users with diverse abilities and needs.
One particular area you can focus on is website navigation, a critical element for user engagement. The WCAG 3 (the forthcoming version of the WCAG that’s currently available as a working draft) provides best practices in its ”Navigation” section (3.2.1) for creating intuitive and inclusive navigation structures. By following these guidelines, you can enhance usability and help users effortlessly explore your site.
Legal requirements and penalties for non-compliance
While following these specific guidelines may not be legally mandated, adhering to them is crucial if you want to reach as wide an audience as possible—which includes individuals with disabilities. By making your websites accessible, you not only comply with regulations but also unlock new opportunities to connect with this diverse audience.
As I mentioned earlier, legislation designed to guarantee digital content accessibility has been passed in countries all over the world (the US, UK, Canada, Australia, and the EU, just to name a few). So, that means that you have an additional incentive to prioritize web accessibility: avoiding the consequences if someone reports your site to a governing body or files a civil lawsuit.
Non-compliant sites are vulnerable to lawsuits. These repercussions are not to be taken lightly: Think hefty fines, exorbitant legal fees, and irreparable damage to your company's reputation. It’s a nightmare scenario, and small businesses may be particularly vulnerable as legal fees are likely to account for a disproportionately large slice of their budget, making it even more important for you to avoid this potential pitfall.
Accessibility lawsuits in the news
Now, let's dive into some real-life cautionary tales:
Domino’s Pizza filed a petition to the U.S. Supreme Court in 2019 to challenge a case it lost in a lower court revolving around its inaccessible website and mobile application, which were found to be in violation of ADA guidelines.
The Supreme Court’s “decision not to grant the case is a loss for the company and a win for disability advocates, who have argued that if businesses do not have to maintain accessible sites, disabled people could be effectively shut out of substantial portions of the economy,” Tucker Higgins wrote for CNBC.
That same year, 32-time Grammy Award-winning artist Beyoncé’s Parkwood Entertainment company was sued for neglecting to create a user-friendly website for individuals with visual impairments.
Amazon and Nike have also had class action lawsuits filed against them by users with visual impairments.
These high-profile cases serve as a stark reminder that compliance is not just an ethical obligation—it’s a legal necessity to protect your business.
Web accessibility best practices
While the WCAG standards serve as a solid foundation, there’s a treasure trove of additional best practices awaiting your exploration. Let’s explore each practice in detail, with examples of good and bad implementation, and discover how they relate to creating accessible websites.
Guidelines for creating accessible content
01. Use clear and concise language: When crafting your content, opt for language that is straightforward and easy to understand.
Good: A travel website describing destinations in plain language, making it accessible to users with cognitive disabilities.
Bad: Using industry jargon and complex terminology that alienates users, leading to confusion and frustration.
Let’s evaluate the language of some real marketing copy with clarity and concision (for accessibility) in mind:
“Discover our new collection of sustainable sneakers, crafted from recycled materials and designed for both style and comfort."
In this example, the sentence uses simple, straightforward language to convey a clear message. It highlights the key aspects of the product (sustainable sneakers, recycled materials, style, and comfort) without unnecessary complexity or jargon. This approach ensures that the information is easy to understand for all users, including those with cognitive disabilities or language barriers.
By employing clear and concise language, marketers and website owners make their content more accessible and user-friendly. It eliminates confusion and enables users to quickly grasp the message or offer.
Conversely, using convoluted or overly technical language can create barriers for users, causing frustration and hindering comprehension. It may result in users abandoning the website, impacting conversion rates, and diminishing the effectiveness of marketing efforts.
02. Provide alt text for images: Images play a significant role in visual storytelling, but they must be accessible to all. By including alt text, you describe the image to users who rely on screen readers or have visual impairments.
Good: A clothing retailer providing alt text that describes the color, style, and key features of each product image.
Bad: Failing to provide alt text or omitting relevant information, leaving users with visual impairments unable to comprehend the image’s content or context.
The alt text for the image above is:
“Decadent chocolate cake with a rich ganache frosting, garnished with fresh raspberries.”
In this example, the alt text provides a clear and concise description of an image, conveying the essential details of the chocolate cake. It includes relevant information such as the cake’s appearance, frosting, and garnish. This alt text ensures that individuals who are visually impaired or rely on screen readers can understand the image, even without being able to see it.
03. Use descriptive headers and subheaders: Headers and subheaders help organize your content, enabling users to navigate and comprehend it more easily. This is an especially important consideration for some websites as it may also enable users to skim your pages and quickly identify the content they’re looking for.
Good: A blog website’s homepage using clear and descriptive headers that assist users in quickly finding relevant content across blog categories (as shown in the example above).
Bad: Presenting content without proper headers, resulting in a wall of text that overwhelms users and makes it difficult to locate specific information.
For example:
H1: "Our Services"
H2: "Website Design and Development"
H2: "Digital Marketing Strategies"
H3: "eCommerce Solutions"
In this example, headers and subheaders are used to create a clearstructure for the content on a services page. The main header ”Our Services” sets the overall theme and establishes a hierarchy. The subheaders provide specific categories or topics related to the services being offered.
By writing descriptive headers and subheaders, SEOs and website owners enhance accessibility for all users. Users with (or without) visual impairments and those who rely on screen readers can navigate the content more easily, understanding the overall structure and finding relevant information efficiently—including how to transact with your business.
04. Avoid using color alone to convey meaning: Color should not be the sole means of conveying information on your website. Consider users who are colorblind or have visual impairments.
Good: A financial website using both color and icons to distinguish between positive and negative trends in a chart, ensuring accessibility for all users.
Bad: Using red text to indicate errors without additional visual cues or text explanations, leaving colorblind users unable to perceive the error message.
For example:
On an eCommerce website, a product listing displays different stock statuses for items: “In Stock,” “Low Stock,” and “Out of Stock.”
In this example, color is used in conjunction with other visual cues to convey the stock status. Here's how it can be implemented:
Color: The text for “In Stock” is displayed in green, “Low Stock” in orange, and “Out of Stock” in red. Color is not the sole method of conveying the inventory status, but it serves as an additional visual cue.
Icon or symbol: Each stock status is accompanied by a small icon or symbol next to the text. For example, a checkmark icon (✅) for "In Stock,” an exclamation mark (❗️) for “Low Stock,” and an X mark (❌) for “Out of Stock.” Like color cues, these icons also provide an extra layer of visual communication.
Text labels: The descriptive text labels of “In Stock,” “Low Stock,” and “Out of Stock” are also present, ensuring that the meaning is communicated clearly through text, regardless of color perception.
By combining color with other cues, such as icons and descriptive text, marketers and website owners create a more accessible experience. Users with color blindness or visual impairments can still understand the stock status without relying solely on color.
Remember, accessibility isn't just about compliance—it’s about unlocking new possibilities, reaching a wider audience, and creating meaningful connections. Embrace these practices to build trust, drive traffic, increase conversions, and foster a user-centric digital environment. Your commitment to accessibility will help set you apart as a leader in your industry, driving success, and making a positive impact.
Techniques for designing accessible websites
Let’s delve into the realm of accessible website design and explore these essential practices. We’ll illustrate the significance of each practice with an example that provides actionable insights:
01. Use responsive design: Embrace responsive design to ensure your website adapts seamlessly to different devices and screen sizes. Digital marketers, ensure that your content is displayed in a user-friendly manner across desktops, tablets, and mobile devices. This allows your audience to access and navigate your website effortlessly, regardless of the device they're using.
Scenario: Imagine a customer browsing an online store on their smartphone. With responsive design, the website automatically adjusts its layout and content, optimizing the shopping experience by ensuring clear visibility, easy interaction, and smooth navigation on the smaller screen.
02. Use clear and consistent navigation: Craft a navigation menu that is intuitive, well organized, and consistent across your website. Digital marketers, aim to provide a seamless user experience by ensuring that visitors can easily find the desired information or navigate between pages.
Scenario: Picture a potential customer exploring a travel agency’s website. Clear and consistent navigation enables them to effortlessly locate sections like “Destinations,” “Tours & Packages,” and the “Contact Us” page. This consistent structure allows users to confidently browse through the site, increasing the chances of bookings and conversions.
03. Provide descriptive anchor text: Make your links descriptive and meaningful, providing users with clear expectations for the linked web page. Digital marketers, ensure that your links convey relevant information to enhance user understanding and streamline navigation. Follow these guidelines for both navigational and in-text links.
Scenario: Consider a blog post about sustainable fashion. Instead of using generic anchor text like “Click here,” opt for descriptive text, like “Learn how to embrace sustainable fashion practices.” This enables users, including those using assistive technologies, to understand the purpose and destination of the link without ambiguity.
04. Use color contrast: Select color combinations that provide sufficient contrast to ensure readability and legibility for all users. Digital marketers, prioritize accessible color choices to accommodate individuals with visual impairments or color deficiencies.
Scenario: Imagine a news website featuring articles with clear color contrast between the text and background. High contrast allows users with visual impairments to easily discern and read the content, enhancing their overall experience. Marketers, ensure that your website follows WCAG guidelines for color contrast ratios to cater to all users.
Example:
Foreground Color: # 000000 (Black)
Background Color: # FFFFFF (White)
Accent Color: # 0078D4 (Blue)
In this example, the color palette maintains a high level of contrast between the foreground (text) and background colors, making the content easily readable for all users.
Black (# 000000) for the text ensures strong contrast against the white background (# FFFFFF), creating a clear distinction between the content and the surrounding space. This high contrast allows users to read the text without strain or difficulty. Additionally, the accent color of blue (# 0078D4) can be used sparingly to draw attention to specific elements or interactive elements on the website.
You should ensure that the color palette used throughout the website meets or exceeds the WCAG contrast ratio requirements. Under the “Visual Presentation” guidelines, there are specific success criteria related to color contrast, including:
Success Criterion 1.4.3: Contrast (Minimum): This criterion outlines the minimum contrast ratio required between text and its background for standard-sized text. It provides specific contrast ratio values that must be met to ensure readability.
Success Criterion 1.4.6: Contrast (Enhanced): This criterion addresses the contrast ratio requirements for large-scale text and provides higher contrast standards to accommodate users with low vision or other visual impairments.
By implementing these design practices, you create a welcoming and inclusive digital environment because you are ensuring a seamless access on different devices for all users.
Techniques for testing website accessibility
As an SEO, you may already be familiar with the value of testing and measurement to help you identify what works for your brand and its target audience. In that sense, testing your website accessibility is no different—it’s about learning whether what you’re doing is working and identifying more opportunities to help you cater to the largest possible customer base.
Use automated testing tools
You are overseeing the launch of a new eCommerce website. To ensure its accessibility, you've incorporated various accessibility features, followed best practices, and implemented WCAG guidance. Even so, it’s crucial to verify that your accessibility optimizations are actually working for your site users.
This is where automated testing tools come into play. These tools—specifically designed for accessibility testing—scan your website’s code, structure, and content to identify potential accessibility issues and provide valuable insights.
By using automated testing tools, you can:
Identify accessibility gaps
Ensure compliance
Improve user experience
Streamline the testing process
Examples of automated testing tools
WAVE: A free community service by WebAIM at Utah State University, WAVE examines web pages for accessibility issues, providing detailed reports and features like color contrast analysis and alt text suggestions.
What to know first: I, personally, have a shallow amount of experience with this tool, but the general consensus from different talks I have listened to is that it may generate false positives or false negatives, meaning it can sometimes incorrectly identify accessibility issues or miss certain issues, requiring manual verification to ensure accurate results.
Tenon: This tool scans websites for accessibility violations, offering features such as comprehensive reporting and integration with development workflows, enabling digital marketers and business owners to identify and resolve accessibility issues efficiently.
What to know first: Tenon may not provide as detailed or comprehensive reports compared to some other tools, requiring additional analysis and interpretation to fully understand the accessibility issues identified.
Axe: Also available as a free Chrome browser extension, Axe assesses web pages for potential accessibility barriers, offering features like in-depth issue descriptions and integration with popular browsers and development tools.
What to know first: Axe may have limited support for certain programming languages such as Swift, PHP, and Ruby as well as frameworks, which could restrict its effectiveness for websites built using less common or niche technologies, requiring alternative tools or approaches for thorough accessibility testing.
Conduct manual testing
While automated testing tools are valuable, they have limitations in fully capturing the user experience and identifying nuanced accessibility issues. This means automated web accessibility testing tools are better when you use them in tandem with manual testing methods.
Manual testing for website accessibility can offer you the following benefits:
User-centric evaluation: Manual testing allows you to put yourself in the shoes of users with disabilities, experiencing your website firsthand. By navigating through the site and interacting with its elements, you gain valuable insights into the usability and accessibility challenges your users may face.
Comprehensive assessment: Manual testing goes beyond automated scans as it evaluates considerations such as keyboard accessibility, screen reader compatibility, and usability for individuals with different disabilities. This holistic evaluation can ensure a thorough examination of your website’s accessibility across various user scenarios.
When conducting manual testing, focus on the following aspects:
Keyboard accessibility: Ensure that all interactive elements, menus, and navigation can be accessed and operated using only the keyboard, without relying on mouse or touch input.
Screen reader compatibility: Test your website using screen reader software to ensure that it accurately reads out the content, including alt text for images, headers, and other important information.
Visual and interaction design: Evaluate the visual design and layout of your website, ensuring that text is readable, color contrast is sufficient, and interactive elements have clear focus indicators or visual cues.
Usability for different disabilities: Consider how users with different disabilities (such as visual impairments, hearing impairments, or motor disabilities) would experience and interact with your website. Look for any barriers or challenges they might encounter and seek ways to improve their experience.
Conduct user testing
User testing plays a crucial role in achieving better website accessibility because it involves observing and gathering feedback from individuals with disabilities as they interact with your website. It differs from the manual testing process I mentioned above in that end-users perform the testing activities. The testers follow a predefined set of test cases or scenarios to evaluate the accessibility of a product or system.
Here’s why user testing is essential for website accessibility:
Real user perspectives: User testing helps you gain valuable insights from individuals with disabilities who represent your target audience. By directly involving them in the testing process, you can understand their unique challenges, preferences, and needs when accessing your website.
Usability and accessibility validation: User testing helps validate the effectiveness of your accessibility measures. By observing users with disabilities navigate your website, you can identify any barriers, difficulties, or areas of improvement that may have been overlooked during the implementation process.
Iterative improvements: User testing provides an iterative feedback loop for continuous improvement. By incorporating user feedback, you can refine and enhance your website’s accessibility features, ensuring it aligns with the real-world needs and preferences.
To conduct user testing for website accessibility, follow these dos and don’ts:
Do:
Recruit a diverse group of users with different disabilities and abilities relevant to your target audience.
Create realistic testing scenarios that mimic common user tasks and interactions on your website. One way to approach this is to follow the path laid out in your user journey map, if you’ve already developed one.
Encourage participants to provide honest feedback and insights about their experience, including any challenges they encountered.
Don't:
Rely solely on your internal team’s perspectives. Seek external users with disabilities to provide unbiased insights.
Intervene or guide participants excessively during the testing process. Allow them to explore and interact naturally with your website.
Dismiss or overlook feedback from participants. Even if it challenges your assumptions, all feedback is valuable for improving accessibility.
Remember, accessibility is an ongoing process, and user testing provides a valuable opportunity for continuous enhancement.
Working with developers to improve accessibility
You are responsible for ensuring website accessibility for your brand. But to achieve this, it’s crucial to work closely with your web developers to make accessibility a top priority.
Here are some actionable tips that can assist you in fostering a strong partnership with web developers to improve accessibility:
Engage in collaborative discussions: Initiate open and regular discussions with your web developers about the importance of accessibility. Share the significance of inclusive design and its impact on user experience, conversions, and SEO. By fostering a mutual understanding, you can collectively prioritize accessibility in the development process and share victories.
Provide accessibility guidelines and standards: Equip your web developers with clear accessibility guidelines and standards, such as the WCAG. By providing these resources, you empower developers to implement best practices and ensure compliance with accessibility standards.
Conduct accessibility audits and testing: Collaborate with web developers to perform thorough accessibility audits and testing. This involves evaluating your website for potential barriers and ensuring that it meets WCAG standards. By working together, you can identify and resolve accessibility issues early in the development phase, resulting in a more inclusive and user-friendly website.
If you’re not getting buy-in from your stakeholders to grant you the development resources to implement your accessibility recommendations, remember that it’s not just about improving the user experience for differently abled individuals—it’s also about keeping your business compliant with legal requirements.
Website accessibility isn’t about SEO—it’s about real people
Achieving website accessibility is an ongoing mission that demands continuous dedication and progress. Even so, forgoing these efforts means that you’re also giving up on making the most out of your content—after all, you’ve already created it; all that’s left is to make it more accessible.
For SEOs, the low-hanging fruit lies in overlap areas (alt text, headers, anchor text, etc.), but stopping there means that your site visitors will be met with an inconsistent user experience, effectively undermining the efforts you have made. Certainly, you should not approach website accessibility with an all-or-nothing mentality, but consider how your potential customers will respond when they rely on your accessibility features to transact with your brand.
Rejoice has worked in SEO as a content specialist and account manager. Her passion for diversity in the workplace inspired her to co-found the B-DigitalUK network for Black marketers. As an award-winning diversity and inclusion advocate, she is a frequent speaker about all things D&I, as well as SEO content.
Comments