Web accessibility is often overlooked by developers, webmasters, and page builder software. But accessibility isn’t just about creating a universal user experience, it’s also directly tied to your SEO ranking.
Here are a few tips and tricks that will help improve your website’s accessibility score and in turn, boost your SEO ranking.
Alternative Text in Images
Alternative text on image elements is one of the most important web accessibility standards to date. This is because screen reader software is unable to describe images without the help of alternative text. All of the images on your website should include an alt attribute as a fallback that describes the image in detail.
Tip: While optional, including both width and height attributes on your images will let the browser know what dimensions to expect before downloading the image. If the image fails to load, those dimensions are kept, allowing users to see how big the image would have been when loaded.
<img src="..." alt="A fluffy dog">Alternative Text in SVGs
Making SVGs accessible is hard, but here’s a trick that works the same way as the img element. The <figure> and <figcaption> HTML elements are new to HTML 5 and can help us with this issue. The MDN web documentation on the <figure> element states that these elements can be “…an image, illustration, diagram, code snippet, etc.” which SVG elements fall under. The “figcaption” element that follows acts in the same manner as the alt attribute used with image elements, but you’ll need CSS to hide it from being displayed and have it only viewable by screen readers.
Tip: There are various places where the .sr-only CSS class comes in handy – such as headings that you want to be shown on SEO results, but not actually being displayed on the page itself.
HTML
<figure>
<svg>...<svg>
<figcaption class="sr-only">Icon of a Building in New York</figcaption>
</figure>CSS
.sr-only {
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}Thankfully, the nice people at WebAIM have provided a helpful article on hiding text here.
The "For" Attribute in Labels
Every website has a form of some kind, whether it’s a newsletter signup, a contact page, or an inquiry form. Knowing this, it’s important to always provide a label element on every form input provided. The <label> HTML element requires a for attribute to tell users what information they should provide in the input (e.g. Text boxes, paragraph text, dropdown select, etc…). Without the for attribute, users utilizing screen readers won’t know what information belongs in that input field. To fix this issue, providing the ID of the input field into the for attribute will let screen readers jump straight to the input field right after the label is read to them.
<label for="first_name">First name:</label>
<input type="text" id="first_name">Skip to Main Content
If you’ve ever looked at a website without CSS, you’ll gain a visual sense as to what screen reader software sees when browsing your website. They read, from top to bottom, all the content on the website… on every page load. But what if the user just wants to read the content on a page, without having to read global headers or navigation links again and again? That is where the invisible “Skip to main content” link comes in. This nifty tricks lets users skip all the global mumbo jumbo, and jump right to the content they’ve been looking for. Here’s a quick example of how this works:
<body>
<a href="#main-content" class="sr-only">Skip to main content</a>
...
<main id="main-content">...</main>Learn more about this trick at the WebAIM website here.
Giving Custom Elements a Role
Often Developers will use the anchor tag to mimic the behavior of buttons without actually taking the user to a different page like that element was intended to do. We’ll probably throw in the good ol javascript:void(0) or the most common # hash into the href attribute of the anchor tag to prevent the browser from navigating to a different page. This confuses screen readers because it alters the default behavior of the anchor element; this is where the role attribute comes in. In this case, utilizing the “button” role onto our custom anchor element lets screen readers know that they’re looking at an element that behaves like the typical button, rather than a link that navigates between web pages.
<a href="#" role="button">Show pop-up</a>
...
<div role="img" style="background-image: url(...)">I identify as an image</div>Learn more about the useful “role” attribute here.
Let this be a useful guide for developers that make the web a place that’s accessible to everyone. Helping boost your user experience and your SEO ranking. Feel free to head over to Mozilla’s web documentation on web accessibility to read more about this topic.