Accessibility for SEO
In this presentation for Pubcon, we talk about web accessibility as a component and driver of SEO in 2021 and beyond. Far from being a big thorny project that requires a ground-up site rebuild, accessibility can be easily worked into existing sites and builds. We’ll cover three concrete examples of quick, high-impact wins that you can check for and implement, even without deep technical capabilities.
Web accessibility is a critical driver for SEO in 2022 and beyond. Aside from the increased algorithmic importance of things like viewport, text sizing, and more – contributing to an accessible web also matters to your users. You’re investing a lot of time and effort into bringing people to your website. It only makes sense to make sure that all of those people can use it.
Below, I’ll expand a bit on the three accessibility topics from the presentation. These are quick wins that don’t require a huge investment of time or money to implement. They’re also a great jumping-off point if you’ve just started working on your site’s accessibility, though it’s worth checking on every site.
Meta Viewport Zoom
The first item is your viewport, which is the visible “window” inside the browser in which your page content displays. Often times, even though your text may be of an appropriate size on mobile devices, users will still try to zoom in for a better read. This can be for many reasons – eyesight, poor quality mobile device screens, or simply to have a relevant passage focused on the screen. Mobile web browsers are all built to allow pinch-to-zoom by default
Unfortunately, many sites disable pinch-to-zoom unintentionally. Developers often place zoom-disabling meta directives while they are still fine-tuning a page’s layout: “user-scalable=no” and/or “maximum-scale=1”. In fact, many downloadable templates contain this code.
Inadvertently, this code is often left on the site when pushed live. Developers may not realize it’s significance, or may not review all default template code and miss it. Then, users are unable to zoom in on the pages, bounce rate is inflated, and the business owner is often completely unaware.
Fortunately, the fix is simple: look for the “viewport” section of your page’s source. If it contains user-scalable=no” and/or “maximum-scale=1” – delete these.
Aria Labels
Second, we go into aria-labels. Although you can go very deep into ARIA labeling, many sites don’t even take the most basic approach. ARIA labels are basically cheat-codes to introducing accessible terms for screen readers into your site, without requiring any visual change to a page.
With static components, like buttons, screen readers rely on text data included to announce the component and convey its function to the screen reader user. For example, a button marked “Submit” may be read as “button, submit” to the user.
However, many times we sacrifice text for images or icons to liven up a design. The problem is that screen readers aren’t smart enough read an picture. Multiple elements without any text can leave a user confused, just hearing spoken lists of elements like “form field, form field, form field, button” without any clues as to what goes in the form fields, or what the button does.
Aria labeling allows a page to embed text that is not seen by visual users of the page, but only read by screen readers. These labels do not impact the look and feel of the page at all – they simply add text to be read by screen readers. Aria labels present a usability gain with no downside or tradeoffs, and are always worth implementing.
Text Contrast Ratio
Last, we talk about accessible contrast ratio for readability of text. The colors of your text and background may seem like a small decision, but they have a big impact on readability – especially for people with various types of vision or low-quality screens.
For example, many sites choose to keep the background a soft neutral gray, and the foreground a dark, but not black shade of gray. This can lead to an elegant look on desktop computers, but on low-cost mobile devices with poor viewing angles, this can cause the text to be nearly unreadable.
In another example, a brand may use shades of blue, yellow and green to lend a healthy or “farm fresh” feeling to their design. However, people with tritanomaly or tritanopia can see some of those colors as a single color, which in turn can render elements nearly invisible to them.
Google requires 4.5:1 or better for text versus that text’s background color, and will call out failing elements as errors on a page. In addition to meeting this metric, it is also a good idea to run your pages through colorblindess testing tools like Colorblindly in Chrome.
Conclusion
In all, we hope to show that getting started with accessibility on your site doesn’t require a huge investment of time and energy, but instead is something that you can build into your existing pages and templates – for the good of both your users, and your SEO!
