Common Accessibility Issues

Links that look like this are common:

This is problematic for the same reason as the URL as a link — the text in the link isn’t enough to understand where the link goes. A screen reader user will just hear “Click here Click here Click here” when they have the links on the page read to them.

How do I fix this?

The solution is to rewrite the link, removing the extra words and making the name of the page or site the link text.

It’s common for people to create links like this:

This is an accessibility error because screen readers often read a list of all the links on the page, out of context. Even worse, it will also spell out the link letter-by-letter (“h-t-t-p-s-colon-slash-slash-w-w-w…”), which will certainly frustrate a blind user.

It’s also a problem for sighted users, as visible URLs are both unsightly and unnecessary. The example above also uses a lot more words than are needed.

How do I fix this?

The correct way to link to a website is by removing the extra words and applying the link to the key words in your text.

A link that doesn’t have any content is invisible. However, a screen reader will still tell users about it. It’s very easy to accidentally create empty links in a visual editor by deleting the content of the link without deleting the link itself.

For example, If we have text that looks like this:

The HTML looks like this:

<a href="http://example.com">Here's a link!</a> 

If we select this text and delete it, it may look like the link is gone…

But under the hood we have:

<a href="http://example.com"></a>

Unfortunately, this is still read by screen readers as a link.

How do I fix this?

The easiest way to fix this is by editing the HTML itself. If you have the ability to edit the HTML directly, just select and delete the link text; if you don’t, submit a ticket for help.

People with visual impairment may not be able to see the images you place on your site. Because being accessible means that all communications — textual or visual — can be understood by all visitors, we need to provide a textual description of every image on our sites. This is called “alternative text” or “alt text”.

Sometimes we give images alternative text that is not helpful for screen readers.

Examples of poor alternative text include:

None of these provide a user with enough information to know what the image depicts.

Instead, we should provide informative alternative text, like:

How do I add or edit alt text?

Alt text can be added when uploading images to your Media Library. When editing the image details there is a field at the top for alternative text.

You can edit the alt text anytime by editing the page where the photo is embedded, clicking the image block, and editing the alt text field in the block settings. Or, alt text can be edited in the media library.

It’s pretty common to bold a line of text when you want a heading in a page, like this:

In most cases this results in bold text that’s just black and the same size as other text on the page.

However, this is not good for accessibility. Screen readers don’t indicate when text is bold, so a screen reader user can’t tell that there is a heading there.

Instead, accessibility guidelines require the use of proper headings, like this:

In most cases this results in larger text that is also different color than other text on the page. It is also announced as a heading for screen reader users.

How do I fix this?

How you insert proper headings depends on which editor your site uses.

• If you see an “H” button, this creates a heading. Select the line and click the “H” button.
• If you see a dropdown with the words “Paragraph”, click on this and choose “Heading”.
• Make sure to follow the heading hierarchy!

Sometimes we make entire sentences or paragraphs bold. This prompts accessibility concerns for one of two reasons:

We may be indicating a heading, in which case we should follow the steps outlined for Entire Lines of Bold Text.

Alternatively, we may want to emphasize an important section of text. Using entire sentences or paragraphs of bold text is an accessibility no-no because it can be hard to read large quantities of bold text for people with visual impairment.

How do I fix this?

1. Unbold the text.
2. Consider using a different style element in the WordPress toolbox such as a Wrap Block.

Underlined text (as long as it is not a link) can cause trouble for people of all abilities because it suggests that there is a link where there isn’t.

If you want to emphasize text, it should be italic, bold, or (for entire paragraphs) it should be placed in a wrap block.

Note that when copying and pasting content from a Google or Word Doc, it often copies the formatting, including underlined text.

How do I fix this?

The text editors in WordPress don’t have an underline button (for the reasons given above!) This makes it challenging to remove underlined text, since you don’t have a button for it.

If you have the ability to edit raw HTML, you can remove the tag there; if not, submit a ticket for help.

Color contrast applies to the text color and its level of visibility against the background color. If the contrast does not pass WCAG standards, the text can be difficult to read for users with low vision or color blindness.

In this example, we see Carleton’s Maize text on a white background. You can see it fails all levels of WCAG compliance, for both the large and small text. You can also visually see this matchup in the preview box, and it’s incredibly hard to read!

Now, we’ve changed the white background to Carleton Blue, and it passes all levels of WCAG compliance — both small and large text. Additionally, the preview is much easier on the eyes!

How do I fix this?

Check the level of contrast by using an online tool (Color Contrast Checker by WebAIM). Additionally, avoid using colors to convey meaning as those who cannot see color won’t be able to comprehend these differences.

Carleton’s institutional WordPress does not allow editors to change the text or background colors, so you likely won’t run into this on the web. However, you should still be mindful of color contrast within emails and linked documents.