Hoping to avoid accessibility mistakes? Check out our top 10 things to avoid.
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: “click here to register”, “download the paper here: https://oregonstate.box.com/s/jwq15kn7d5swzfma564ggzvk55cqhudg“
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.
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 Hemingway Editor. You should aim for a 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.
For help implementing any of the fixes described above, submit a support request with the EESC web team.