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.
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.
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!
Sean is a developer, technical SEO, and entrepreneur with over 10 years of industry experience. Prior to Greenlane, he founded CircleRank, a successful technical SEO agency in Philadelphia. He has spoken at major digital marketing conferences around the world, including PubCon, SMX, SES/ClickZ, and OMCap. He also co-organizes Philly’s monthly digital marketing event, SEO Grail.
Before we start, I’d like to make a statement. The article you are reading is not from a digital agency owner promoting his search engine optimization agency. Instead, this article is from an agency owner who has seen many models… Continue Reading
Every year, it seems like there’s a new “next big thing” in SEO – some big release that causes a bunch of chatter – it’s the future of search! Some become an integral part of the ranking algorithm, like BERT… Continue Reading
Part 2 of a series on SEO reporting best practices (ICYMI: Part 1) Traffic data, found in Google Analytics, helps you quantify your site’s engagement level. Using this data, you can understand more than just how many users visit your… Continue Reading