Optimizing for Accessibility + SEO: Formatting & Link Overlaps

Search engine optimization (SEO) evolved by search engines creating algorithms to automate the classification and ranking of websites, with SEOs manipulating the loopholes in those algos.

Accessibility, on the other hand, is born out of a desire to be inclusive; to connect humans to information through assistive technology (AT).

When we strip down both industries to where a machine is reading a web page, there are a few overlaps. Thatâ€™s what weâ€™re looking at in this series. If youâ€™re optimizing for search engines, youâ€™re also affecting how people using screen readers and assistive technologies are experiencing your site.

In todayâ€™s post on accessibility + SEO, weâ€™re digging into on-page aspects that include formatting text, colors, links, and content that we canâ€™t see see but machines can. The previous post covered structure overlaps, and weâ€™ll cover images, video, and non-text elements in the last post following this one.

Hidden text

There are times when something that can be seen on the page provides information or context that isnâ€™t able to be read by bots or screen readers, like in an infographic image. The text, graphs, and overall context are all in the image, so in this case, youâ€™d want to provide text that screen readers and bots can use for information and context â€” either visibly or hidden.

There may also be other reasons you want to actively hide text from all visible display, but not from bots or screen readers. An example might be a paragraph that expands to show more text only when clicking on a caret. In this case, the text is hidden by default from the visual experience, but you want to make sure that screen readers and bots can get it.

This table below shows how each of these different methods of hiding content is perceived by sighted users, screen readers and search engines. Iâ€™m not an accessibility expert, so if you know of anything different or additional, please do share.

*Iâ€™d highly recommend not using these hidden text techniques solely for spam, as Google may index hidden text, but doesnâ€™t give hidden text the same weight or ranking effect as non-hidden text, and if itâ€™s abused and has to be manually reviewed, you could find yourself in some trouble.

On that note, letâ€™s dig into two actual common examples: one where the primary content is in an image, so we need to make hidden content available to screen readers and bots, and a second where the primary content is hidden from users by default, and we need to make sure screen readers and bots find it.

But Ted Drake is an accessibility genius (who has been invaluable with his help in this post series and my interest in a11y in general â€” thank you Ted), and has also shown us an option to provide the information for screen readers and bots that is invisible to sighted users. The infographic is pulled into a page (or easily shared) via an iFrame and, in addition to the infographic image, that iFrame HTML has all of the descriptive text in clipped content, invisible to the sighted user reading the same content via the infographic, but fully legible and interactive for screen readers and bots that canâ€™t read the infographic.

Check it out for yourself. This page appears in Google search results for the infographic text “The days are longer, but youâ€™re still not able to find time to plan those much-needed getaways.” That text does not actually appear visually on the page.

Side note: Notice that the one with the text on the page, the example I provided above, is ranking higher than the visible text one for me.

In this hidden text example, the infographic itself is an image provided on a separate HTML page with the text information in a 1px CSS clip, pulled into that page in the search results via an iFrame.

At first glance the separate HTML page looks like it only has an image on it, but youâ€™ll see in the code that there is also text hidden in a â€śvisually-hiddenâ€ť CSS class that clips the content, and this text has semantic markup allowing screen reader users to navigate through it, copy text, etc., making it a highly usable, interactive alternative to having the text right on the page.

See it in action with the VoiceOver screen reader here:

Since I know this is going to cause a lot of excitement among the more spam-bent SEOs reading this, Iâ€™ll also mention that those who control the spam-tweaking at Google are also aware of this method, and even this specific example. While theyâ€™re confident their processes for specifically combating hidden text spam are strong, I can only show this example in good conscience by also saying donâ€™t spam. Google is watching. Do consider this method for accessibility and especially for sharing infographics along with the text content.

Hiding ancillary text

There are times when you want to show the sighted user some text, but have them click something like a caret to expand for more text content if they choose (or skim by it and move on to whatever else is on the page).

Iâ€™ve done site audits where the functionality was there (for sighted users), but the content wasnâ€™t indexed because of the way it was coded. You can use display:none for the default content thatâ€™s hidden, which will hide the extra content from screen readers and sighted users skimming through the page, but allow access to that content if the caret or link is clicked by either user.

Hereâ€™s an example where the Netflix Help pages hide content from the sighted visitor and screen reader unless the visitor chooses to expand and access the content. Itâ€™s using display:none in the CSS. Itâ€™s accessible to screen readers and sighted visitors and the caret content is indexed by search engines. Win-win-win.

Hidden text doâ€™s and donâ€™ts:

Donâ€™t use hidden text for spam. Stuffing hidden keywords into a page is not recommended if you want to keep your nose clean for SEO, and can be a terrible experience for screen reader visitors.

Do consider sighted and non-sighted audiences: If you need to hide text, consider which method is best to use depending on whether you want a screen reader to see it and a sighted user not to, or if you want all visitors not to.

Keyword stuffing

Keyword stuffing is a mostly old-school SEO practice that still lingers. It is/was very popular on pages where the site is very image-heavy, on old Flash pages, or even on pages with normal content but where the developer wants more text-based keywords on the page. This is done just for search engines, so why do we care if visitors other than screen readers come across it?

Keyword stuffing hopefully isnâ€™t as big of an issue as it was back in 2007, but itâ€™s nonetheless still an option, and itâ€™s very likely to annoy your screen reader users.

Keyword stuffing doâ€™s and donâ€™ts

Do think ahead when building: Avoid having to keyword-stuff to attract search engines to begin with, and build accessible pages with relevant, indexable text information.

Do write naturally. Itâ€™s best for everyone, and this can be done using keywords but not abusing keywords.

Size and color contrast of text

People will often use small fonts and low contrast text simply for page aesthetics. SEOs will sometimes use low-contrast small font text to add more keywords to a page without distracting from the rest of the content.

Hereâ€™s where this can be problematic beyond SEO. Colorblind or color vision-deficient readers may be unable to distinguish certain colors or only see things in black and white or gray shades, and these deficiencies can be mild or severe.

This video shows some color contrast examples that are tough even for readers without color deficiencies.

Additionally, low-vision readers may be elderly readers or may suffer from conditions that affect their vision like glaucoma or macular degeneration, and have difficulty perceiving content that is too small, that doesnâ€™t scale, or is low contrast. Here are some great low-vision examples.

To get a good sense of how assistive technologies can help in these cases, check out this demo of the very cool ZoomText screen magnifier, which can also change color contrast, create cross-hairs or a giant circle on your mouse pointer, and highlight cursor focus or active area focus.

There are a lot of font and color doâ€™s and donâ€™ts to keep in mind when youâ€™re designing your pages and/or when youâ€™re considering that extra small, low-contrast text. Check the resources section for a lot more interesting tools and details beyond the doâ€™s and donâ€™ts listed here.

Text size and color doâ€™s and donâ€™ts

Donâ€™t use text as an image. When possible use actual text rather than text graphics to avoid pixelation when these text images are enlarged.

Donâ€™t rely solely on color to portray information. Users should be able to understand the content if all colors were removed. If link text is indicated only by the fact that itâ€™s red, red-sensitive colorblind users may not see the links. Underlines on links are more visible, regardless of link color.

Do maximize the contrast of text. This includes logo text and text in images when possible. Use color contrast tools to find good foreground-to-background contrast of at least 4.5:1 for small text and 3:1 for large text. For example, #757575 is the lightest grey that is accessible on a white background.

Do use readable fonts: Try to stay away from cursive, fantasy (decorative), and monospace fonts (ex: Courier), and stick closer to native serif and sans-serif family fonts, utilizing as few different font faces as possible for continuity.

Links and anchor text

Screen reader users often tab through a page to skim the page by its links. The link anchor text is announced at each instance, also announcing â€ślinkâ€ť along with the anchor text, and the user can hit enter to follow any link in focus.

Descriptive and informative links

Links with descriptive anchor text are a win for search engines and screen readers. When the link describes what it is pointing to, it provides context to both, telling screen reader users tabbing through links what the link points to and, for SEO, providing context as to what the destination page is about and potentially helping that destination rank for that phrase or topic.

Providing context with links can be helpful for screen readers as well. Check out the video below of navigating this example of a webpage created to show bad accessibility. The first logo link is pretty amusing, but also notice the [image description] links, the MORE>> links that donâ€™t provide any context and arenâ€™t connected to the articles that theyâ€™re visually connected to on the page, and the infamous â€śclick hereâ€ť and â€śread moreâ€ť links, a familiar downer for SEOs.

And just because you have to see this one to believe it, hereâ€™s an example of navigating through the links on my favorite accessibility horror story website:

Avoid pseudo links and buttons

While this isnâ€™t necessarily an SEO overlap, itâ€™s a vast problem for accessibility that is worth calling out in this article. Using the correct markup to create links and buttons is important to make sure those links and buttons are clickable using assistive technologies. The simple rule is to use links to navigate to other places and buttons to initiate an action, and do not use <span> or <div> for these cases as they are not the proper markup and may not work.

Link anchor text doâ€™s and donâ€™ts

Donâ€™t keyword stuff your links. Letâ€™s say you have a Seattle-focused website with an article announcing the opening of a new coffee shop. You spam the article every chance possible with linked phrases like â€ścoffee shopâ€ť and â€śSeattle coffee shopâ€ť and â€ścoffee shop in Seattleâ€ť that all link to the coffee shop website. This article is no fun to read for anyone, sighted or not. Donâ€™t do it.

Do create descriptive links. When youâ€™re using a screen reader you can tab just through the links on the page. If all of the links say â€śhere,â€ť itâ€™s not very useful for someone using a screen reader who is trying to find a link on the page to something specific.

Do use proper link and button markup. Divs and spans are not links or buttons, and empty <a> anchors without an href attribute or with an empty hashtag destination <a href=â€ť#â€ť> are all potentially problematic.

Links and anchor text

Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think of it as your exclusive digest of stuff you don’t have time to hunt down but want to read!