How To Improve SEO Through WCAG Accessible Web Design

HeyStack Mavericks October 16, 2019

This is a great start pointing when asking yourself How To Improve SEO Through Accessible Web Design. For more information, be sure to visit https://w3.org or contact us. WCAG is short for Web Content Accessibility Guidelines. there are 3 levels to being WCAG Compliant which are Level A, Level AA, and Level AAA each with their own requirements. Not only will having an accessible website help vision or hearing impaired customers browse your site, but it will also add a ton of organic SEO value. Search engines have one goal, and it is to deliver the best possible experience to their users as they leverage the tools provided to them. Because major search engines do not discriminate, it is important that the website they serve to their users are accessible and can be easily used in addition to providing relevant content pertaining to the user’s search query.

In this episode we cover a few of the minimum requirements needed to be Level A WCAG compliant. These include:

1. ALT Text on all images. The ALT text provides a description of an image that will be displayed should the image not load or should a screen reader be used. The ALT text should relate to the primary keyword of the page and the title of the image that the ALT text is attached to should reflect this keyword as well.
2. Videos, whether hosted on the website or through a CDN such as YouTube, should have captions enabled. This will allow vision impaired individuals the ability to consume the content within the video.
3. The website should have various features that allow it to be Navigable. This includes a wide variety of components including heading hierarchy. Heading hierarchy makes is easier for screen readers to navigate the content and makes the content easily navigable by major search engines. H2’s should be sub topics of H1’s. H3’s should be sub topics oh H1’s and so on. A user should be able to tab through all of the elements within the website without the need of a mouse. This allows for better overall UX and makes the website more accessible to a wider audience.
4. Every piece of the website should be distinguishable. The contrast ratio of text to background should always be at least 3:1. If white text is on a light yellow background, it will be very difficult to read and the website will not be considered accessible. there are a ton of contrast ratio checkers online. Enter in the hex codes of the text and background colors to see if it has a ratio of at least 3:1. The minimum font size site wide should be 16px. The minimum spacing between tap targets should be at least 8px to prevent major search engines from assuming your website is trying to trick users into inadvertently clicking other elements.

Run a surface level audit of your website right now to see if it is partially WGAC compliant by inspecting an image for the ALT tag, a title for the h tag and the body copy for the minimum font size. If any of these requirements are not met, your website was not built with WGAC compliance in mind as these are surface-level requirements for Level A compliance.