Common Content Accessibility Problems, Part 1: Headings and Links

Listen to this article

Part 2 covers Images and Text Alternatives

With the passage in 2021 of new accessibility laws for Colorado, website administrators have been steadily working to improve the websites they are responsible for. But what about non-admins, the regular content-creators writing pages and posts for websites they may not have admin access to? What can they do to improve the accessibility of their content? I administer, or help administer, more than 80 sites for the State Library and its clients. Here are some of the most common content problems that I see, and how you can fix them, or avoid them altogether.

Only a few of these issues are covered by the WCAG 2.0 AA minimum required by the state’s new laws. Some of these issues are subject to AAA guidelines or other best practices. Still, why not try to reach those higher standards if you can?

Here are my top six tips for improving the accessibility of your web pages:

Use headings to organize your content logically
Put some thought into how you use links, and be sure to format them correctly
Make sure all your images have a good text alternative
Use semantic HTML elements, like headings, block quotes, etc., for their intended purposes, and not just for design or layout
Don’t use too many custom styles in your content, like italics, bold text, different colors, or underlines
Be careful you’re not inadvertently posting a lot of excess HTML in copied and pasted text

This post will look in more detail at the first two tips. Subsequent posts will cover the others.

Use Headings to Organize Your Content

Think of headings as the main structure of your text—a table of contents that will tell your readers what information they can expect to find in each section of the page.

Visually impaired users may be using screen readers to read the text of your website, and these screen readers will often read headings and links first, rather than delving right into the paragraphs of text. Users who are not visually impaired will also benefit from nice, logical, headings, as it makes it easier to scan a page for the information they’re looking for. So use your headings to give quick summaries or signposts for your paragraphs.

A page should only have a single H1 heading—and that is the page title. Sections of the page should start with H2, and then descend from there. It’s best to keep the sections in order. So don’t skip from level 2 to level 4.

Don’t use too many headings, or too complicated a structure. If you find yourself using a lot of headings, especially if you’re delving into the H5 and H6 levels, chances are that you should rethink how your content is organized. It’s best to keep the organization simple, and have fewer, clearer, headings.

Bold paragraph text is not a substitute for a heading. Bold text might look like a heading to fully-sighted readers, but to a screen reader it is just paragraph text, and it won’t be read out as a heading.

Finally, use headings only for their intended organizational purpose—not just because you want larger text here, or more spacing there. Headings should be meaningful to your content, not just a design element.

Link Carefully

Links are the heart of the Internet—the very foundation of hypertext. A good link will have text that clearly identifies what your readers can expect to find when they click each link.

Clearly Describe Link Destination in Link Text

For creating accessible links, it’s helpful to know something about how a user with a screen reader might encounter your link. Some screen readers will skip your content, and just read out the links found on the page. So, you can’t rely on the surrounding text to explain where your link goes—all the necessary information has to be in the link text itself.

For example, let’s say we had this in our article: “To visit the Colorado Virtual Library, click here“, with the words “click here” a link to this website. For a visual reader, the destination of the link might be reasonably clear, because the text preceding the link makes clear the link’s destination. But a screen reader may not read the surrounding text. It will just say: “Link; click here,” which is not very informative.

Or alternatively, you could make the link destination really clear, by just using the whole URL as the link, like: “Visit the Colorado Virtual Library at https://www.coloradovirtuallibrary.org.” But don’t do this, either. A screen reader will dutifully read out the entire URL, which might be confusing, and will certainly be annoying.

Best practice is to use clear text for your links (not urls) that, when read alone, apart from any surrounding text, gives a good idea of the destination of the link. So in the examples above, something like “Visit the Colorado Virtual Library” would be better.

Don’t use generic phrases like “click here” or “read more” for your links. The link text is not informative.

Links that will download or open a document, like a PDF or a Word file, should be clearly labeled with the document type as part of the link, like: “Download the presentation slides (PDF)“.

Don’t Repeat Yourself

Avoid redundant links. Imagine how annoying it is to have someone tell you the same thing three or four times in a row. That’s how someone using a screen reader will feel about your redundant links.

Link text should be unique to each link destination. Don’t repeat link text (like “click here” or “register online”) where the links don’t go to the same place. Remember that a screen reader might just be reading the links, and ignoring the surrounding text, so you can’t rely on the non-link text to explain where the link is going.

Make Links Look Like Links

Finally, it is helpful for all users—not just those with impairments—if links are consistently styled, and that only links look like links. Try not to use a lot of custom styles in your content, especially if it’s applied to links.

TL;DR version

Headings

Use headings to logically organize your content
Headings should tell the reader what to expect in each section of the page
A page should have only one H1 heading–the page title
Keep headings in order; follow an H1 with an H2, etc. Don’t use too many headings or too complicated a structure; keep things simple
Bold paragraph is not a substitute for a heading
Think carefully about your links