Top 10 Accessibility Mistakes by Content Authors

Top 10 accessibility mistakes by content authors

Hoping to avoid accessibility mistakes? Check out our top 10 things to avoid.

Original article at Navigator: OSU Extension Digital Strategy
Big thanks to Amerie Lommen

Accessibility means all visitors can access and use content regardless of disability.

As a federally-funded institution, it is legally required that all our web content be fully accessible. We all have a part to play in fulfilling this obligation.

These are the top ten mistakes we see on the Extension website that hurt accessibility.

10: Writing with the assumption visitors are using a certain device

Examples

Instructing users to right click on a link, scroll down a page, press a specific key on a keyboard, etc.

Why this is a problem

You can never know what kind of device visitors will be using to access your content. Many will not be using a mouse or keyboard because they are on mobile devices. Others will be using screen readers or voice commands.

How to fix

Use more generic terms for actions you want visitors to take. For example:

  • Instead of “click on the x option”, use “select the x option”
  • Instead of “right click on the file name and select ‘save’”, use “download the file”

 

9: Referring to the appearance or position of elements on the page

Examples

“Use the gray links to the left to explore options”, “click the orange button above to register”.

Why this is a problem

Elements on the page appear in different places depending on the type of device the visitor is using. Some visitors will not be able to see them at all.

How to fix

Avoid referencing other elements on the page. For example, include a link instead of pointing visitors to where it is already on the page. If this isn’t possible, use a label that doesn’t rely on appearance or position.

 

8: Writing in all-caps

Examples

“This event is FREE to the public”, “ALWAYS WEAR GLOVES WHEN DOING THIS”

Why this is a problem

Screen readers may assume a word in all-caps is an acronym and read each letter individually.

How to fix

Don’t type words in all-caps unless it is actually an acronym. To emphasize text, make it bold.

 

7: Relying on YouTube’s automatic captioning for videos

Why this is a problem

YouTube’s automatic captioning does not include capitalization or punctuation. Remember, many people using captions can’t hear the pauses where punctuation would be. They also can’t tell when a new speaker starts talking. YouTube also has trouble recognizing proper nouns and specialized terms (such as “agritourism”).

How to fix

Use YouTube’s automatic captioning for a starting point, but be sure to check them and clean up as needed.

 

6: Opening links in new windows/tabs

Why this is a problem

Screen magnifiers are some of the most common assistive technology used on line. People with low-vision use these to zoom in very closely on a small section of the screen. In these situations, it is difficult to determine when a new window/tab opens. They may think they are still in the same tab and be confused why they can’t use the back button. It also takes more time for them to close out of the new tab/window and get back to where they were.

How to fix

Avoid creating links that cause new windows/tabs to open (the most common are file download links).

 

5: Uploading content as a PDF when not necessary

Why this is a problem

Web browsers include accessibility features which programs that open files often lack. It requires more training to create accessible PDFs than web pages. Additionally, PDF files are generally larger than web pages. They are often slower to download, especially on a slow connection.

How to fix

Whenever possible, enter content into the website as text instead of (or in addition to) a file upload. E.g. articles instead of educational documents, subpages instead of program resources.

 

4: Using unclear link labels

Examples

Why this is a problem

Almost all visitors to a website will prefer to scan rather than reading everything on the page in order. Sighted people do this by looking at headings or section breaks. People using screen readers have other methods. They often have the screen reader pull out all the links on the page so they read through only those initially. If the links that get pulled out only say “click here”, “learn more”, or a raw URL, this functionality isn’t useful. Additionally, voice command software may allow people to “click” on a link by saying the label. If there are links that are unpronounceable, this functionality doesn’t work.

How to fix

Use link labels that describe what the visitor will go to if they click that link. For example, a link saying “download registration form” makes it clear what you’ll get when you click. On the other hand “click here” doesn’t provide any context for the link.

Also see Writing Hyperlinks: Salient, Descriptive, Start with Keyword.

 

3: Not providing alternative text for images

Why this is a problem

Screen readers can only read “true text” (i.e. text you can highlight with a mouse). Therefore, any text included in an image is invisible to screen readers and the people who use them.

How to fix

When you upload an image on the Extension website, there is an “Alternative text” field. You should include all text and other content in the image in this field. If an image contains a significant amount of text, it is better to convert it to an accessible PDF or web page.

 

2: Not checking the reading level of content

Why this is a problem

Hard-to-understand text content is the #1 accessibility problem over the entire internet. It affects everyone who accesses web content. This includes:

  • people with learning or other disabilities
  • people who don’t primarily speak English
  • young people
  • people with low literacy
  • people in stressful or frustrating situations which may impair their reading comprehension temporarily.

How to fix

Put all your content through a reading level checker such as Readability Test or Hemingway Editor. You should aim for a grade level of 6-8.

It is, generally, a myth that more complex subjects require a higher reading level. There are two methods that can improve readability without changing the actual contents.

Shorter/simpler sentences

Avoid run-on sentences at all costs. Every comma can be a point to at least consider splitting one sentence into multiple.

Breaking up chunks of text

Use headings, short paragraphs, bulleted lists, etc. to break up longer chunks of text. This makes the content easier to read and helps people skim to find what they need more quickly.

 

1: Using (or not using) headings appropriately

Examples

Using the “Format” dropdown on entire paragraphs. Separating sections of text with bold section titles without using the “Format” dropdown.

Why this is a problem

Incorrect use of headings is a huge accessibility issue for screen readers. More often than not, visitors using screen readers will pull out all the headings from a page first thing. This allows them to skim rather than read everything on the page in order. Formatting text as a heading when it isn’t gets in the way of this technique. Not formatting text as a heading when it is one will cause the technique not to work.

How to fix

Only use the heading options in the “Format” dropdown of the text editor for actual headings. However, be sure you do use them for all actual headings in the text.

Read more about headings on OSU web accessibility page on headings.

 

Image
screenshot of ckeditor text format selector

Bonus tip

Oregon State University Disability Access Services' accessibility resources.