How to Improve Both SEO & Website Accessibility on Your Site

*Deque Accessibility Covid Report 2021

Table of contents:

• SEO & Website Accessibility
• Website Accessibility Basics
  • Website Accessibility Technology
• The Elements that Improve Both SEO & Website Accessibility
  • Website Accessibility Improving Element #1: Page Title
  • Website Accessibility Improving Element #2: Headings
  • Website Accessibility Improving Element #3: Alt Text
  • Website Accessibility Improving Element #4: Links/Anchors
  • Website Accessibility Improving Element #5: Sitemaps, Breadcrumbs & Clear Navigation
  • Website Accessibility Improving Element #6: Multimedia
  • Website Accessibility Improving Element #7: Readability & Usability
  • Website Accessibility Improving Element #8: Schema
• Website Accessibility: How to Check If Your Website Works for Everyone
  • Website Accessibility Testing Tools: WAVE
  • Website Accessibility Testing Tools: Screen Reader
• Website Accessibility Improving Tools: WordPress Accessibility Plugins
• Benefits of Doing SEO Minding the Website Accessibility Principles

Due to the pandemic, many entrepreneurs were forced to move their business to the Internet, increasing at the same time the number of customers that interact with their brand through the screen.

Does it seem pretty normal? Maybe it does until you see the reports showing that more and more people with disabilities complain about being digitally excluded. What does that mean? It means that websites aren’t accessible for those people – they simply can’t use those sites.

The issue of website accessibility is now burning as it has never been before, and therefore should be taken seriously by every website owner. That is why today I’m going to tell you what design elements influence website accessibility, how to verify them for being easy to use for everyone, and what SEO aspects have a direct effect on website accessibility.

SEO & Website Accessibility

Undoubtedly, SEO and website accessibility are interconnected. After all, one of the prime principles of search engine optimizations is to focus on making a website usable and easy to understand not only for bots but also for all visitors regardless of their age, the quality of their internet connection, or health condition. This means that a well-optimized website benefits digital accessibility.

It’s worth realizing, however, that there is more to website accessibility than nailing your SEO game. I’d say that it’s more about minding the best UX practices and adopting a crafted SEO strategy while designing your website. Only in this way will you make your site easy to navigate, read and use. And once it has all of these three features, you significantly reduce frustration in your visitors who encounter difficulties with interacting with the website.

When exploration of your website triggers positive emotions in the visitors, they feel more satisfied and confident, thus are more likely to:

• recommend your website to others
• become a returning customer
• and convert

Today I’m going to show you which website elements you should consider polishing to benefit both SEO and accessibility. I’ll also give you a few actionable tips for increased visibility and improved website intuitiveness.

However, before that, let’s talk a little bit more about what website accessibility really is, and why it’s important for you – an online business owner.

Website Accessibility Basics

The term website accessibility refers to the practice of facilitating effortless and intuitive interaction with a website regardless of the user’s physical, cognitive, or technical abilities.

Even though it may sound pretty obvious, this term is far broader: Website accessibility is more than making sure your pages are easy to navigate, the buttons are big enough, or the font is legible.

When your website is accessible, it means literally everyone can use it, and by “everyone” I mean people who live with all kinds of disabilities, such as:

• auditory disability
• speech disability
• cognitive disability or
• physical disability;

as well as people that don’t suffer from disabilities but can’t use your website as intended due to factors like:

• poor internet connection
• surfing the Net on obsolete or small-screen devices
• being elderly, thus struggling with computers
• being in a place or situation that impedes them from using your website (e.g. can’t listen to the audio inserted into a video, can’t interact with the site using just one hand, or are having problems with reading an article due to bright sunlight).

Isn’t it shocking how many people – aka your potential prospects – may be discouraged from using your website when it’s inaccessible to them?

Now you’re probably wondering what factors make a website accessible. Let me put it the following way: To make your website accessible to everyone, you need to POUR four qualities into it.

The first one begins with P, and it stands for PERCEIVABLE. This means that a user is able to receive information published on your website through a preferred sense. From what I’ve noticed this applies mainly to providing the possibility to use a screen reader to those experiencing problems with their eyesight.

The second letter, which is O, represents the quality of being OPERABLE. If I asked you what devices you make use of to access a website, you would probably say: a keyboard, a mouse, or a touchpad. People with disabilities, however, may answer this question differently as the range of their assistive technology includes joysticks, a Braille keyboard, or a head mouse – to name just three. That being said, an operable website is a website that can be interacted with regardless of the input deceive used.

The third quality, which starts with U, implies that the content published on an accessible website is UNDERSTANDABLE. The understandability principle matters a lot to visitors with visual disabilities, people with learning disabilities (e.g. those who aren’t good at comprehending long sentences and advanced vocabulary), and those with cognitive impairments (e.g. those who find it difficult to stay focused on long chunks of text). The website is also understandable when its layout follows standard reading patterns (e.g. standardized use of headings) and offers input assistance (e.g. autocorrect for writing comments).

Finally, the letter R stands for ROBUST. Unlike the above qualities that revolve around web design and content, the last one deals with compatibility and adaptability of a website to new technologies – not necessarily web assistance technology, this time. In other words, a website is robust when it works smoothly with a broad range of devices like tablets or cell phones and application programs, and will continue doing so for years to come.

Website Accessibility Technology

To access online resources, people with certain impairments use website accessibility technology. Naturally, the number of those facilitators is growing year by year, which is absolutely great. Now, however, I’m going to show you 4 most popular devices that support website accessibility:

1. Screen Reader – this assistive technology helps visually impaired people not only access but also interact with web content. In most cases, these are software programs that read out the texts, images, and buttons. However, there are also notebook-sized devices that convert web content into braille.
2. Braille Keyboard – as the name suggests, this device is designed for people familiar with and actively using the Braille reading and writing system. Those keyboards look almost identical to regular keyboards except that each key has Braille dots on its surface, representing a given character.
3. Screen Magnifiers – this one is also pretty self-explanatory. Screen magnifiers zoom in on selected sections of web content for improved readability. What is not so obvious, this assistive technology also offers other visual modifications: increase color contrast, emphasize shading, and smooth out the edges of the font.
4. Voice Controls – voice control technology makes it possible to navigate a website hands-free. It’s useful not only for people who can’t use a keyboard or mouse but also for those with learning disabilities (e.g. dyslexia). It works in a similar manner to Google’s Assistant or Apple’s Siri (voice search SEO applies here) with just one difference – voice controls don’t respond vocally to the user.

Now, you fully understand the concept of website accessibility and know basic assistive technology devices. Let’s move on and learn what website elements you may consider tweaking to improve both SEO and website accessibility.

The Elements that Improve Both SEO & Website Accessibility

Right at the beginning I need to state one thing clearly: We, as SEOs, don’t always have a full impact on all the elements that make a website more accessible to everyone. There are some purely technical and design-related factors that mostly certified professionals in web accessibility and web developers are supposed to work on.

What we do have an impact on, however, are some website elements that when fixed, help achieve two aims at once: improve the ranks of a website and make it perceivable, operable, understandable, and robust.

I’m going to walk you through 8 SEO elements that have a positive effect on website accessibility. Whenever possible, I’ll use some of our clients’ websites as examples so that you can see how we, at Delante, combine search engine optimization with website accessibility standards.

Website Accessibility Improving Element #1: Page Title

Page titles are those small elements that are shown as the main headline in search engine results, and appear in browsers’ tabs – that’s SEO, obviously. Page titles are also the very first thing read by screen readers.

The main function of a page title is to provide context so that the users get a gist of the main topic covered on a given page. This means an assistive device searches for title tags to – in a sense – describe the main theme of a page to the user.

TIP I advise against putting your brand at the beginning of a page title. Why? Imagine returning to one page while 10 of them are still open. You click on each one, and every time the reader starts from saying the brand name before getting to the point – wouldn’t that ruffle your feathers a bit, especially when the brand name consists of 3 or more words?

Would you mind taking part in a short quiz? Here’s the question:

What do you think, which of the following is an example of a well-optimized page title?

A SEO/SEM Blog – Delante

B Welcome to the blog section | Delante

C Delante blog – Read our posts!

What’s your answer? If it’s A, then congrats! It doesn’t start with the brand name (like C) and indicates the main idea/topic discussed on the blog (unlike B).

You know how to create page titles that serve bots and humans.

In case you’d like to rewrite your page titles to make them more accessible, you can do this in your CMS. Let’s assume you use the most common content management system, which is WordPress, and have a Yoast SEO plug-in installed.

STEP 1 Click on the page you want to edit.

STEP 2 Introduce the new title in Yoast SEO Title.

Image Source: Delante’s own screenshot

Website Accessibility Improving Element #2: Headings

Just like in SEO, assistive technology uses headings to get an overview of the main topic covered on a page and to understand the page structure. This allows them to easily jump from one website section to another.

For improved SEO and website accessibility, use only one H1 at the top of the page to present its main topic. Later expand it by adding H2-H5 tags, if necessary.

Headings should always follow the hierarchy. That’s why I suggest reading out loud just the headings (skip the text) to see if they flow logically. Take a look at the example below:

Image Source: Delante’s own screenshot

When you set the headings correctly, then a website accessibility testing tool (more on that below) will show you a properly devised heading structure.

Screen readers present the content of a page following the heading hierarchy. Therefore, I advise against mixing the headings. Even if this looks better, the screen reader will get lost and present the page content in the wrong order, messing up the message you want to get across. Feathers ruffled again, right?

The last thing I need to address is that there is no universal number of how many H2s or H3s to use. The structure depends on the web content and the way the website is built: whether it’s a landing page with many sections or just a regular blog.

If you need to learn the best practices for creating a heading hierarchy, read our: Website Headings Guide.

Website Accessibility Improving Element #3: Alt Text

When looking at the alternative text from the SEO perspective, this element carries 3 functions:

• helps crawlers understand the website content
• is displayed when an image doesn’t load (e.g. due to a poor internet connection)
• increases chances of being displayed in Google Images

Basically, it’s all technical and improves web ranking.

However, from the website accessibility standpoint, it seems that alt text fulfills a completely different purpose – it describes the contents or functionality of the graphics published on a website so that those visually impaired can visualize this image in their minds.

In other words, screen readers use alt texts to describe the picture to the people who can’t look at it. That’s why it’s advised to be accurate, contextual, and succinct while crafting alternative texts. Naturally, that’s just a general rule, so if you would like to learn more techniques for writing good alt texts, go to Does Image Name Affect SEO?

Okay, let’s have a quick quiz again, shall we?

Imagine, you’re selling headwear. How would you name this image so that people living with vision disability understand its content?

Image Source

A yellow-and-blue-hat

B woolen-knitted-hat-yellow-and-blue-unisex

C knitted-wool-hat-winter-unisex

D bobble-beanie-super-fashionable-hat

Which alt description matches the item best? To me it’s B, but C also does the job.

Let’s analyze another example, but this time I suggest reading the alt descriptions before looking at the image – just to be in a visually impaired person’s shoes for a second.

Which answer helps you visualize the graph more easily?

A graph-with-data

B graph-showing-growth

C graph-with-data-from-Google- Search-Console-showing-453% increase-in-the-number-of-total-impressions-in search-after-6-months

D screenshot-from-Google-Seach-Console

Now take a look at the screenshot:

Image Source: Delante’s own screenshot

Which alt text helped you create an image resembling the data shown on the graph? I bet it was C, wasn’t it?

Moreover, creating alt texts goes way beyond describing product items. You shouldn’t forget to add those elements to buttons – otherwise, the screen reader will read your “See the new arrivals” or “latest articles” buttons as “link”.

Furthermore, if you publish an image purely for decorative purposes, it’s better to leave the alt text box empty.

When it comes to adding alternative texts to images, then – again – it depends on your CMS. WordPress, for example, gives the possibility to add alt text right after uploading an image.

Image Source: Delante’s own screenshot

In case you would like to improve or add alt texts to an image that is already published on your website:

STEP 1 In WordPress, open a page the image is published on.

STEP 2 Click the image and choose Edit (pencil icon).

Image Source: Delante’s own screenshot

STEP 3 Add or rewrite your alternative text.

Image Source: Delante’s own screenshot

Website Accessibility Improving Element #4: Links/Anchors

Anchor links are those elements that link and direct users to another page or website. They can also take you to a specific part of the page without you scrolling. Basically, links take you somewhere, that’s why they must be accurate and succinct enough so that a user decides whether they want to go to that section/page, or ignore the link and continue reading.

Besides, crawlers also like it when the anchor is descriptive, instead of being just this overused “click here” or even worse “link”. Actually, let’s run a quick test so you can see for yourself, which option feels more welcoming.

Which option sounds better to you?

A If you want to find out more tips on adding and naming anchor links, click here.

B If you want to find out more tips on adding and naming anchor links, check our Internal Links Structure article.

C For more tips – link.

I bet you’d be more eager to click on the second link, wouldn’t you?

Another issue is that anchor links should be easy to distinguish, so that everyone recognizes them for being the actual links, just like here:

Image Source: Delante’s own screenshot

TIP If you want to check if your anchors are easy to distinguish from the rest of the text, move away from the screen – two, or three steps back should do – and check if you still can find the links.

Finally, when you add anchors, the mouse arrow cursor changes its form to a hand or pointer, which is another website accessibility-improving feature.

Website Accessibility Improving Element #5: Sitemaps, Breadcrumbs & Clear Navigation

I’ve gathered those three elements together because their main purpose is to reduce confusion in visitors/bots while browsing/crawling your website.

Basically, there are two types of sitemaps: HTML (for humans) and XML (for bots). Both facilitate navigation, no matter the “receiver.” The former helps regular visitors get the general overview because it shows a list of things that can be found on a website. The latter, however, is critical for SEO and assistive devices – machines rely on this file to understand the web content and its structure, generate accurate results, and take the users to the given sections.

Breadcrumbs work almost identically, as this element helps crawlers and screen readers see how a website is structured. In the same way you look at a regular map to find the “You are here” point to get a sense of your location, breadcrumbs provide your users with exactly the same piece of information – their location on your website. It’s also supposed to help your visitors take a few steps back in case they wish to return to higher-level pages.

Here’s an example:

Image Source: Delante’s own screenshot

Delante > SEO SEM Glossary > Bookmarking Sites

Have you just read what Bookmarking Sites are but you want to look up another SEO- and SEM-related term? Head back to SEO SEM Glossary by just clicking on the breadcrumb navigation. Easy.

Finally, navigation. To improve website accessibility, make sure your navigation bar is clear and well-thought-out. When this element is structured properly, screen readers are able to, for example, inform the user about the number of items the navigation is made up of.

Image Source: Delante’s own screenshot

Last but definitely not least, words used to describe categories in the navigation bar and breadcrumbs must be again – yes, you’re right – accurate and succinct.

In case you would like to dive deeper into the topic of sitemaps and breadcrumbs, feel free to read those two articles that I wrote some time ago: Breadcrumb Navigation – What Is It? and How to Update Sitemap Automatically.

Website Accessibility Improving Element #6: Multimedia

The basic principle of media accessibility is to deliver the content presented in audios and videos to the internet users who can’t watch or listen to it – and it doesn’t only serve people with disabilities.

Closed captioning, which is the term for a time-synchronized text that appears on the screen and can be read while watching or listening to multimedia content, benefits many people. How many? Let’s check:

• those who live with hearing impairment or are deaf
• those for whom the language used in the video/podcast isn’t their Mother tongue
• those with cognitive and learning disabilities
• those who want to kill time watching/listening to your content but are in a noisy environment (e.g. on public transport)
• those who wish to check your content but can’t play the audio aloud (e.g. not to wake up a baby or are at a bit-too-boring lecture/meeting)
• simply everyone

image source

Quiz time!

Are subtitles and closed captions the same?

A Yes, these are the exact same things.

B No, they are designed for two different types of audiences.

The right answer is B. In short, subtitles are designed for those who CAN hear the audio, whereas captions are designed for those who CAN’T hear the audio.

This means, when preparing captions for your audio/visual content, remember to describe sounds – e.g. loud bangs, the sound of footsteps, knocking at the door. Just like here:

Image source

Synchronized captions, audio descriptions, and text transcripts – this is what the multimedia posted on your website should feature. Oh, and those absolutely need to be synchronized well.

Image Source: Delante’s own screenshot

How are you supposed to add them to your multimedia? Well, it depends. For example, if we’re talking about YouTube, this process is almost automatic:

STEP 1 Open YouTube Studio.

STEP 2 Click Subtitles (left sidebar).

STEP 3 Choose the video you want to add the captions to.

STEP 4 Select the language after clicking Add Language.

STEP 5 Click Add.

Alternatively, watch this tutorial on using a captions editor: How to Add Captions While Uploading & Editing Your Videos

Currently, this option works well for English-language content because YouTube is able to generate captions automatically. Probably you will need to do some editing, but in general, this option serves its purpose surprisingly well. If you want to get hold of non-English subtitles, you need to create them beforehand. You can do this in any text editor – just make sure you save the file as .srt.

In case you’d prefer to upload a video/audio to your server, you may need to use some subtitle tools such as Happy Scribe.

Website Accessibility Improving Element #7: Readability & Usability

Again, I’m combining those two together because the crux of both – readability and usability – is to make the interaction with the website pleasant, effortless, and enjoyable.

That’s why the texts you publish on your website should be easy to read. And by that I mean you should follow these readability guidelines:

• try not to exceed 100 words per paragraph and 35 words per sentence
• whenever appropriate adjust your writing to the reading level of an 8th grader
• use bullet points and numbered lists
• steer clear of complex vocabulary and professional jargon
• use text formatting generously, yet wisely

By doing so, you make it way easier to interact with your website not only for those who suffer from cognitive disabilities but also for non-natives and people who happen to be in an easily-distracting environment while browsing your site.

TIP To check if your piece of writing is easy to read and understandable, use the good old Hemmingway App. This tool checks your copies for readability and points out the fragments that need some rewriting. And the best part is that the Hemingway App is totally free.

Image Source: Delante’s own screenshot

When it comes to usability, it’s advised to think the issue through while the website is still under construction. Consult your ideas with a UX expert, website developer, and SEO specialist. I’m sure, together you will come up with a design that promotes usability and makes it easy to interact with your website for literally everyone. I can’t stress enough how important this issue is.

Naturally, we offer such consultations at Delante too, so if you need some assistance with website usability, feel free to get in touch with us.

Website Accessibility Improving Element #8: Schema

Schema, also known as schema markup or structured data, is a line of code that tells crawlers what each element on a website is: e.g. a price, breadcrumb navigation, FAQ, or product markup. It helps search engines and assistive devices understand the content of a website.

It’s worth realizing that the easier it is for bots to comprehend what a page is about, the higher the chance of it being qualified for rich results and voice search.

Once the content published on your website is used as a result of a voice search, it also works well for screen readers and other sorts of assistive devices. Simply put, schema simplifies the search process for both search engines and assistive technology. With implemented schema markup, assistive technology is more efficient at navigating the website.

TIP To improve SEO and website accessibility I advise you to add schema on every single website element that structured data can be implemented to.

Website Accessibility: How to Check If Your Website Works for Everyone

If you’re still reading this article, it means you’ve just learned 8 website elements that improve your website’s SEO and accessibility. Now it’s time for me to show you how to check your website for being accessible.

DISCLAIMER: I need to mention that none of those tools are perfect. You can expect them to flash some green and red lights that indicate the elements of your website that need or don’t need fixing. However, those tools can’t understand some elements, therefore it’s you who must decide whether or not a particular constituent is okay.

Let’s take alt texts, for example. Web accessibility evaluation tools aren’t capable of verifying whether a given graphic carries some meaning or is it added just for decorative purposes. In other words, it’s you who needs to verify whether an image is an integrated part of an article that once ignored impedes understanding of the described issue by those using a screen reader. What for?

You may expect a web accessibility evaluation tool to give alt=”this is a picture” a green light. However, does this information carry any meaning to the visitor? I highly doubt it.

That’s just one of many things that have to be considered while using popular web accessibility evaluation tools. In case you would like to dive deeper, I suggest reading the article written by Web Accessibility Initiative: Selecting Web Accessibility Evaluation Tools.

Website Accessibility Testing Tools: WAVE

The first tool that I’d like to recommend is WAVE. It’s super easy to use.

Image Source: Delante’s own screenshot

BASIC INFO

Licence:

Free

Access:

https://wave.webaim.org/

How to use it:

STEP 1 Insert an URL of a website you want to check for accessibility. I’m going to use the Delante website to show you how it works.

Image Source: Delante’s own screenshot

Here is the view of what the software recognizes as an error, and what it considers to follow the general website accessibility principles. It also signalizes potential problems.

STEP 2 Check Details to see all elements evaluated by the tool.

Image Source: Delante’s own screenshot

STEP 3 When you click on a given button, you will be taken to the page the verified element can be found on.

In the Delante website case, most errors are caused by the lack of alt texts. Those are the graphics we consider irrelevant for the screen readers to process.

Website Accessibility Testing Tools: Google Lighthouse

The second tool you may want to have a go at is Google Lighthouse.

image source

Licence:

Free

Access:

Chrome browser

How to use it:

STEP 1 To use Google Lighthouse you need to open a website you want to verify. This can be literally any website, you don’t have to be its owner.

STEP 2 Use Right mouse click → Inspect.

Image Source: Delante’s own screenshot

STEP 3 From the top menu click Lighthouse and select the elements you want to verify – you can select more than one.

Image Source: Delante’s own screenshot

Image Source: Delante’s own screensho

STEP 4 After clicking on the blue Analyze page load button, you get the report. The result is expressed in digits: from 0 to 100. Likewise WAVE, this tool provides you with information on given website elements.

Image Source: Delante’s own screenshot

Image Source: Delante’s own screenshot

What’s crucial, I advise you to go through not only the elements that you selected for analysis but also through the elements the tool flagged as being OK. For example, the tool assigns “green dots” or “red triangles” to alt texts. Yet, this is not the evaluation of this element’s quality but rather an indicator of its presence. That’s why it’s better to read each alternative text to check if it matches the criteria mentioned above, even if it’s “green”.

Website Accessibility Testing Tools: Screen Reader

Finally, a screen reader. I suggest adding it to your browser to see for yourself how your website performs when interacted with through a screen reader.

image source

BASIC INFO

Licence:

Free

Access:

https://chrome.google.com/webstore/detail/screen-reader/kgejglhpjiefppelpmljglcjbhoiplfn/related

How to use it:

STEP 1 Download this plug-in and add it to your Google Chrome.

STEP 2 Browse your website using the Screen Reader. Check if everything works smoothly. In case you find some room for improvement, simply fix it to make your website as accessible as you only can.

Website Accessibility Improving Tools: WordPress Accessibility Plugins

Apart from the web accessibility evaluation tools, there are also some clever plugins you can add to your CMS. Naturally, they are designed to help you make the right changes to your website for improved accessibility.

As you can guess, each CMS has its own accessibility-verifying plugins. Since most people use WordPress, the plugins mentioned below are designed for this CMS in particular:

• WP Accessibility
• WP Accessibility Helper
• WP ADA Compliance Check Basic
• WP Accessibility Tool & Missing Alt Text Finder
• One Click Accessibility
• accessiBE
• UserWay
• wA11y
• Accessibility Widget

To be honest, I can’t tell you which plugin is the best because all of them offer various functionalities. Some of them just give you quick guidance, whereas others propose solutions. I guess you need to define which elements of your website you want to evaluate, and then choose the plugin that can do this for you.

Benefits of Doing SEO Minding the Website Accessibility Principles

Have you ever wanted to read an inscription on a sign but the letters were too small? Maybe you wanted to watch a short video to kill time in the waiting room but you didn’t have the earphones with you and the video had no subtitles?

This is how confused, dejected, or dissatisfied your visitors get when you don’t make your website accessible to them. That’s why I wholeheartedly encourage you to check your website for its all-user-friendliness. Be sure your website design doesn’t contribute to excluding anyone, no matter if they can’t browse your website just temporarily, or if they are unable to interact with your site due to their disability.

In case you notice your website might do way better in terms of its accessibility, try working on the eight SEO elements described above. When optimized correctly, the website components such as H1s, headings, alt texts, internal linking, navigation, and multimedia benefit all your visitors and improve your website ranks. The thing is to identify what elements don’t work well and later tweak them by applying the general website accessibility and SEO principles.

Hopefully, you see now how strong the connection between SEO and website accessibility really is. Naturally, if you have any questions about merging those two together, let us know. We will help you make the website accessible to everyone, improving its ranks at the same time.