On-page search engine optimization (SEO) and web accessibility are two crucial components of a successful website. But what many people don’t realize is that web accessibility and SEO have a lot more in common than you might think. Both aim to make websites more usable and understandable, whether for human users or search engines. By making your web pages accessible to everyone, you’re also boosting your chances of being found on search engines. Below, we will examine how web accessibility and SEO work hand in hand when it comes to:
- Meaningful Page Titles
- Headings
- Lists
- Descriptive links
- Breadcrumbs
- Alternative Text for Images
- Audio and Video Transcriptions
1. Meaningful Page Titles
A page title is a short, concise name of a web page. It appears in the HTML code as a <title> tag and is usually visible at the top of the user’s browser bar. Page titles help improve web accessibility and SEO by determining the content of a page.
How Do Meaningful Page Titles Help Web Accessibility?
Web accessibility requires page titles that provide a brief and accurate description of the page’s content. For example, Success Criterion 2.4.2 of the Web Content Accessibility Guidelines (WCAG) 2.1 says that users should be able to quickly understand the page’s purpose without reading the content.
The title tag should be concise and should be at most 60 characters. Short and snappy page titles provide a better user experience, especially for users with a screen reader that hear content. The title should also be unique to each page on a website, and it should be relevant to the content. Good page titles help users identify content quickly and reliably.
How Does a Meaningful Title Tag Help SEO?
A page’s <title> tag is a clickable link displayed on a search engine’s results page. The information gathered from a page’s title determines its relevance to a user’s search query and placement within their search results. After all, web accessibility and SEO are about getting relevant content to users.
For example, suppose you were to use the search query “web accessibility” and “SEO.” In that case, the results will include titles with the exact terms included. If your <title> matches the content of your page, it is more likely to be found in search engine results and keep users engaged.
2. Headings
Headings, or <h> tags, give structure and hierarchy to the content on a web page. They appear more prominent than other text through font size or weight, making scanning and navigating the page more accessible for users.
How Do Headings Help Web Accessibility?
UHeadings help users navigate and understand the content quickly. They are typically formatted using HTML code, ranging from the main title, <h1>, to <h6> subheadings within the content. Each heading level serves a specific purpose in organizing the content. According to the Web Content Accessibility Guidelines (WCAG) Success Criterion 1.3.1, it is essential to use headings in a logical and sequential order. Starting with the <h1> heading and using subsequent headings in order, like so:
- <h1>Main heading</h1>
- <h2>Section heading</h2>
- <h3>Subsection heading</h3>
- <h4>Sub-subsection heading</h4>
By formatting the heading correctly, individuals with disabilities can navigate content logically and meaningfully.
How Do Headings Help SEO?
In addition to accessibility, headings are also critical for SEO, as they help search engines understand the content of a page. Search engines use headers to determine the relevance to a person’s search based on the keywords used and the significance of the content to their search.
3. Lists
As you know, lists containing text, images, and multimedia content can be ordered or random. However, using lists on a website can make the content more organized and scannable, helping to improve the user’s experience. But what you might not realize is that for the benefits of web accessibility and SEO.
How Do Lists Help Web Accessibility?
Lists can be a valuable tool for web accessibility because they help users navigate content logically and efficiently. For example, sight users will recognize lists with indentations or icons such as bullets or numbers. However, lists must be appropriately marked up within the website’s code to stand out from other content.
List markups define a group of related items or information presented in a particular order. For instance, <ul> is used for unorganized lists, <ol> for ordered lists, and <dl> for definition lists. By defining and using list markups correctly, your website will meet several WCAG success criteria, including:
- Success Criterion 1.3.1: Information and Relationships – Lists help to organize information and create relationships between related items.
- Success Criterion 2.4.3: Focus Order – Lists help to create a logical reading order, which is essential for users who rely on keyboard navigation.
How Do Lists Help SEO?
Search engines crawl a website’s content using complex algorithms to determine the relevancy and quality of a user’s query. Using lists can highlight the content’s critical points and make it easier for the algorithm to identify them.
Moreover, lists can help users navigate content logically and efficiently, improving the user’s experience. When users have a positive experience on a website, they are more likely to stay longer, share the content, and come back. This can significantly increase the overall traffic and engagement on the website, improving its ranking on SERPs.
4. Descriptive links
Interlinking content is an integral part of our customer journey. Being descriptive in the text you use to link to a new page is helpful for the user’s experience. It’s also beneficial for web accessibility and SEO.
How Do Descriptive Links Help Web Accessibility?
Descriptive links are hyperlinks that help users understand the link’s destination or purpose before they click. Rather than using vague or generic terms like “click here” or “read more,” descriptive links provide context for users and search engines. A screen reader user might navigate through all the links on a page to find where they want to go. Being descriptive helps them find what they’re looking for more easily.
Descriptive links also help meet essential web accessibility guidelines. For instance, WCAG 2.4.4 requires a descriptive title to provide the link’s destination context. Additionally, WCAG 2.4.9 states a process or technique should be available to identify each link’s purpose from the link text alone.
How Do Descriptive Links Help SEO?
Descriptive text, or anchor text, as SEO professionals call it, helps search engines understand the content and purpose of a link. However, when links use generic or vague text, search engines cannot accurately categorize the page and rank it appropriately in search results.
Using descriptive links that include keywords related to the page’s content can help search engines understand the purpose and context of their pages—as a result, leading to higher search rankings and visibility.
5. Breadcrumbs
Breadcrumbs are a navigation aid that appears at the top of a page and shows a user’s path to the current page. The name “breadcrumbs” comes from the story of Hansel and Gretel, where the characters leave a trail of breadcrumbs to help them find their way back home. Similarly, website breadcrumbs help users navigate to the homepage or higher-level pages.
Breadcrumbs typically appear as a horizontal menu bar showing the user’s website location. For instance, a breadcrumb trail might look like this:
Home > Category > Subcategory > Product
How Do Breadcrumbs Help Web Accessibility?
Breadcrumbs provide clear and consistent navigation to help users find necessary information, as outlined in WCAG 2.4:8: Location. They help to improve the user experience for everyone. But are particularly helpful for people with disabilities.
For example, they help people with memory problems or low attention span from becoming confused as they flow through pages. They also help screen reader users go back through a set of grouped pages much quicker.
How Do Breadcrumbs Help SEO?
Breadcrumbs can also help with SEO by providing additional contextual information to search engines. For example, breadcrumbs help search engines understand the structure and hierarchy of a website, allowing them to index and rank pages.
When implementing breadcrumbs for SEO purposes, it’s important to use structured data to help search engines understand the breadcrumb structure. Structured data is a standardized format that allows search engines to understand the content and design of a website.
6. Alternative Text for Images
When most web developers or digital marketers think of the overlap between accessibility and SEO, alternative text is usually one of the first elements that come to mind. Alternative text or alt text is an HTML attribute value used to describe an image. It’s beneficial for users with visual impairments that rely on screen readers. Screen readers read the alternative text, describing the image to the user and providing context they might have missed otherwise.
How Does Alternative Text Help Web Accessibility?
Alternative text is crucial in web accessibility because it provides a non-sighted visitor with the same experiences as a sighted visitor. Therefore, it should be accurate, clear, and provide meaningful information.
All non-text content is required by WCAG 1.1.1, “Non-text Content,” to have a text alternative that serves the equivalent purpose. However, there are exceptions for non-text content that is pure decoration, only for visual formatting or is not present to users. In that case, alt text is not required. However, images need to be implemented in a way that assistive technologies can ignore.
How Does Alternative Text Help SEO?
Search engines recognize the information in alt attributes. While it’s not a significant ranking signal, it does contribute. After all, it adds more context to your page’s content, especially if you want the images on your website to appear high in Google Image searches.
Google’s Image Publishing Guidelines state, “alt text along with computer vision algorithms and the contents of the page to understand the subject matter of the image.” However, don’t feel tempted to stuff your keywords into alt text. This is bad practice for both accessibility and SEO.
7. Audio and Video Transcriptions
In the same way, alternative text for non-text content opens up visual content. Transcripts and captions do the same for audio and video content. They capture the spoken words, sounds, and other audio elements and transcribe them into text format. The text can make the content accessible to people who are deaf, hard of hearing, or prefer to read instead of listen.
How Do Audio and Video Transcriptions Help Web Accessibility?
Users who are deaf and hard of hearing rely on accurate video and audio transcriptions to access any non-visual content in video or audio format. By providing transcriptions, you can ensure that all visitors to your website can access and understand the content you present.
If you use audio or video content on your website, adding captions to the video or transcribing the content helps you meet these success criteria in WCAG 2.1, including:
- 1.2.1: Audio-only and Video-only (Prerecorded)
- 1.2.2: Captions (Prerecorded)
- 1.2.8: Media Alternative (Prerecorded)
How Do Audio and Video Transcriptions Help SEO?
Although search engines are getting smarter, they are not listening to your videos and indexing what’s said, so they rely on the surrounding text to understand the content. By providing accurate transcriptions, you provide search engines with a complete understanding of the content in your audio and video files, which can help boost your website’s SEO. When videos have engaging and exciting content, providing a transcription on the same page or within the video is critical.
In Summary
Despite being separate disciplines, many of the same practices we use in web accessibility also open the doors for search engines. By working on one, we enhance the other. After all, a better user experience for your visitors also offers a better understanding to search crawlers.
That being said, If you’d like to talk further about your web accessibility initiative, schedule a complimentary ADA Strategy Briefing today with the experts at 216digital. We will help you take the steps towards web accessibility on your terms by developing a strategy to integrate WCAG 2.1 compliance into your development roadmap as part of the development process.