Common Content Accessibility Issues (and How To Fix Them)

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, contact someone in Web Services for assistance.

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".

As long as you upload your image to Reason and then embed it using the standard tools Reason provides, your images should already all have alternative text.

However, if you have placed images in HTML mode, or if you have copied and pasted entire chunks of content — images and all — into Reason, you may have some images without alt text.

How do I fix this?

Click on the image, then click on the image button in the editor, and enter a description into the description field.

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 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 a 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 "Header 1".

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 above.

Alternately, 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. Highlight the section using the "Highlight" button in the editor.

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 fix this?

1. Edit the content of the page
2. Select the photo and click the photo button
3. Edit the image description

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 a highlight box.

How do I fix this?

The text editors in Reason 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, contact Web Services for help.