Have you ever wondered how people who are blind use the internet? You might not realize it, but many people with disabilities use assistive technology to navigate the web. For example, screen readers allow those with blindness or low vision to access web content by scanning a site’s content and turning it into synthesized speech. Other assistive technologies, like braille computers and voice recognition devices, make the web accessible to people with disabilities.

Optimizing your website for accessibility requires attention to detail in everything you do, from the on-page content to the back-end code. Even if you aren’t required by law to have an accessible website, taking the time to do so is a smart decision. That’s because there are two other benefits of optimizing your website for accessibility you may not have thought about: improved rankings in search engine results and functionality with future web-browsing devices.

 

How Accessibility Helps SEO

Many of the same practices that help improve a website’s accessibility also help with search engine optimization (SEO). That’s because both assistive technology and search engines rely on properly coded HTML to decipher what’s on the page and how it’s formatted. For that reason, pay attention to these three things in particular:

Image File Names and Alt Text

When you choose an image for your website, it might have an automatically generated name like “IMG-8769.png”. Before you upload that image to your site, change the file name to something that truly describes what’s in the image. Doing that is smart from an accessibility standpoint because a screen reader would say out loud what the image is called. And it’s also smart from an SEO standpoint because the search engines don’t just crawl the visible text on the page – they also crawl the image file names.

For example, if you want to use a picture of your warehouse in eastern Tennessee, your image file name could be “warehouse.png”. That would help a person using a screen reader understand that it is a picture of a warehouse. However, you can (and should) take it a step further for SEO purposes. If you name the image “warehouse-eastern-tennessee.png” instead, you’ll give the search engines one more clue that you’re in eastern Tennessee. (Note that we used dashes to separate the words. The search engines know that dashes are used as word separators.)

After you’ve uploaded the image, take a moment to fill in the “alt text” field in your content management system. The alt tag field allows you to provide a text alternative for an image. While alt text is not required, it is an SEO and accessibility best practice to include one. Your alt text should describe what the image conveys, not just what the image is of. For example, if you use a picture of your warehouse to show how organized and clean it is, your alt text should be “our warehouse is clean and tidy” not “warehouse picture.” Again, the alt text provides valuable information to both people using assistive technology and search engines scanning the content.

Alt text for an image of Cyndi Masters - Founder and CEO of DBS Interactive

How alt-text appears in code

Finally, for both accessibility and SEO reasons, don’t put text in an image. Text within an image completely disappears for both screen readers and search engines. If you absolutely must put text in an image, ensure the entire text is placed in the alt text field.

Neither a screen reader nor a search engine can read the text in this image.

Text placed in an image is unreadable to a search engine and a screen reader

Descriptive Link Language

If you write a link as “our warehouse locations,” a person browsing the site with a screen reader could easily determine where that link goes without relying on other words before and after the link. Similarly, if you write links clearly, you give the search engine a better hint that you have warehouses. In some cases, a linked text might have more value in the search engine’s eyes versus regular body copy. Now think about if you were to write that link as “click here” instead. The person using a screen reader would need to study the words before and after to understand where they’ll go when they click. And a search engine won’t give you value for having the word “warehouse” in a link.

Proper Use of Heading Tags

Headings tags are a bit of back-end code that tells a website how to style the text. For example, on this page:

  • The words “How Accessibility Helps SEO” are styled as an H2 heading.
  • The words “Proper Use of Heading Tags” are styled as an H3.

It’s a common mistake to choose heading styles based on your desired appearance for content. You should actually choose them to indicate structure and importance of content. Think of it like the outline for a document:

  • An H2 is more important than an H3. An H3 is more important than an H4.
  • If you have several H3s under an H2, they are subtopics of the H2.
H1, H2, and H3 headings in outline form showing how multiple H3s are subtopics of the H2 topic

Headings should be used to indicate structure and importance, not just appearance

Video captions and transcripts

There are approximately 1 million people in the United States who are classified as functionally deaf. If you provide video content, include both on-screen captions and separate transcripts for optimal accessibility. Most video on the web provides “closed captions” which can be turned on and off. For example, in YouTube, you can turn on captions with the “CC” button. Not only are captions incredibly helpful for people who are deaf or hard of hearing, but they also allow people to follow along if they’re viewing your site with the volume turned off. Like the millions of people who check their phone at work.

In addition to captions, consider including a full transcript for video content. A good transcript includes, at a minimum:

  • Any spoken words
  • Descriptions of sound effects
  • Descriptions of visuals

Not only is a transcript incredibly helpful for people who are deaf or hard of hearing, but it has an added benefit: the text is accessible to search engines.

 

The Future of Assistive Technology

Optimizing your website for accessibility not only allows search engines to more easily scan website content but also prepares your website for future technology. Google’s home (opens in new window), Amazon’s Dot (opens in new window) and other technology like artificial intelligence function better with websites optimized for accessibility. New technology aims to access the internet in innovative ways through a standardized website language. Making sure that your website is optimized for accessibility through proper back-end development is a sure way to make sure your website is accessible for future technology to come.

HTML code with “assistive” label applied to a Close button

Using HTML code, a website can provide information to assistive technologies that isn’t visible on screen

 

Your Website Can Remove Barriers

At DBS we believe the internet has the power to remove barriers for people with disabilities rather than create barriers. Contact us if you’d like to talk about maximizing your potential through a fully functional, highly accessible website.