A “typical” computer/tablet/smartphone setup makes a lot of assumptions about the abilities of the person using it. For example, it may assume they are able to see a screen, hear sound from a speaker, type on a keyboard, and manipulate a mouse. These assumptions are not always correct. When this is the case, people use “assistive technology” to access websites. Some examples include:

• “Screen reader” software that reads web page text out loud for people who can’t see it on a screen.
• Braille devices that present web page text for people who can neither see a screen nor hear spoken text.
• Special keyboard navigation for people who have trouble controlling a mouse.
• Voice command or eye tracking software for people who can’t use a mouse or a keyboard.

Assistive technology doesn’t only have to do with what we might consider a “disability”. It also includes, for example, automatic translators and “night modes” on cell phones.

We want our content to be available to all Oregonians. Plus, it is legally required to be accessible to all people regardless of ability. So, our website needs to work with all assistive technology.

Our team makes sure that the framework of the Extension website is accessible. This includes the navigation, search functionality, and other shared features. However, content authors need to help ensure that the content on the site is accessible as well.

For content authors, there are three main rules for accessible content:

1. Make all content available as “true text” (i.e. highlightable with your mouse).
2. Use text formatting correctly to provide structure and meaning to content.
3. Don’t make assumptions about the technology visitors are using to access the content.

True Text Content

“True text” is text that you can highlight with a mouse. Screen readers cannot read any content that isn’t true text. That content is unavailable to people using them. Therefore, all content must be available as true text in some form.

Most of the content that you enter in the Extension website will be true text. There are only three situations where you need to worry about this:

1. Images that contain text
2. PDFs that contain scanned documents
3. Videos and other multimedia

Images Containing Text

When an image contains text, it needs to be available as “true text” somewhere else on the page. The “Alternative Text” field exists for this purpose specifically if the text is not too long. Here is an article about writing alt text with some examples.

If the image conveys information without text, include a summary of that information. This can be in the page’s body text or the image’s caption or alternative text.

PDFs Containing Scanned Documents

Sometimes, when you scan a document, it comes to your computer as an image. This has all the same problems as other images. To test if a PDF contains true text, try to highlight the text inside it. If you can’t, you will need to recreate or fix the document. University of Washington has created a good article about fixing inaccessible PDFs.

Videos and Other Multimedia

In general, all videos should have captions at least and, ideally, a transcript. The transcript should include text shown in the video if it is not part of the transcribed speech.

If you use YouTube’s automatic captioning, check that it doesn’t generate anything problematic.

Text Formatting

Many people think of the text toolbar as a way to make text look a certain way. But working with that idea may make content confusing to visitors who do not see web pages the same way you do. Really, the purpose is to mark certain text as having a certain meaning or purpose. Here are the controls that can mark content this way:

• Bold (“B” icon): Marks text that is important. A screen reader might read it in a different tone/volume or single it out.
• Superscript (“x2” icon): Marks text that is superscript, such as in mathematical equations or chemical names. This is not for footnote references (there is another control for that) or making text smaller. In the latter case, screen readers might not read the text correctly if they assume it is part of an equation.
• Subscript (“x2” icon): Marks text that is subscript, such as in mathematical equations or chemical names. This is not for making text smaller. Screen readers might not read the text correctly if they assume it is part of an equation.
• Footnote (“a1” icon): Creates a reference to a footnote at the bottom of the page.
• Blockquote (“ icon): Marks a chunk of text that is quoted from another source. Do not use this just to indent text.
• Link (chain link with “+” icon): Marks text as being a link to another page. The text that visitors click on to follow the link is called the “link text”.
• Bulleted list: Marks text as making up a bulleted list. Do not use dashes, asterisks, etc. to create bulleted lists. This control encodes the text so that assistive technology can tell it is a list.
• Numbered list: Marks text as making up a numbered. List. Do not type out numbers to create a numbered list. This control encodes the text so that assistive technology can tell it is a list.
• Heading dropdown: The headings are the most important text in a piece of content. People who are able to see text on the screen are able to “scan” content by scrolling. People using screen readers do this by listening to the headings before diving into the full text. This is common behavior, so it is important to use headings correctly. Here are some tips:
  • Always start with “heading 2”. For further levels of headings, go in order. I.e. do not go from heading 2 straight to heading 4.
  • Use headings to separate sections instead of horizontal lines and/or bold text.
  • Do not use this dropdown as a way to emphasize text. This prevents the scanning functionality of screen readers from working as intended.

There are a couple of formatting controls in the text toolbar  that only create visual elements on the page. These are invisible to screen readers, so don’t rely on them for meaning or organization:

• Pull quote (next to block quote icon): Displays some text in a large, stylized font.
• Horizontal line: Creates a gray horizontal line.

Accessible Writing

There are a few things to keep in mind to ensure your content makes sense to all visitors.

Meaningful Link Text

Another common way for screen reader users to “scan” a page is by pulling out and listening only to the links. Therefore, it is important that link text is meaningful by itself. It shouldn’t rely on the surrounding text. It should describe what the user will get if they click on the link. Here are some tips for writing meaningful link text:

• Don’t use the raw URL of the link by itself. E.g. instead of “https://google.com”, use “Google”. This is particularly important for software that may let a person say the link text to “click” it.
• Avoid the phrase “click here”. When that text is read on its own, it is completely meaningless. It is also exclusionary to people who are not using a mouse. In general, instead of saying “Click here to do X”, you should say “Do X”.

Acronyms and All-caps

Acronyms are the only words that should be in all caps. Text in all capital letters is more difficult to read for visitors with Dyslexia. Screen readers may also assume words in all caps are acronyms and mispronounce them.

Symbols and Special Characters

When you need a symbol that is not on your keyboard, copy and paste it from another source. Don’t “fake it” with letters you can type. For example, don’t use a superscript letter “O” to fake a degree symbol (°). Other examples are trademark symbols, multiplication signs, and letters from other languages. Here is a site where you can copy many special characters. Note that most of these characters have special meanings and are not for decoration.

Data Tables

Tables are very visual and so difficult to encode in a way that assistive technology can make sense of. Here are some general tips:

• Don’t upload a table as an image.
• Only use tables when necessary. If possible, use lists or other ways to display the information.
• Use the simplest table possible. E.g. avoid cells that span more than one row/column.
• Contact EESC if you need help setting up an accessible data table.

Inclusive Writing

When you are writing, avoid assuming that visitors are using the website the same way you do. Particularly:

• Don’t reference the position or appearance of visual elements on the page. Not everyone can see these, and even if they can they won’t always look the same. Instead of “the orange button” or “the button to the right”, say something like “the button labeled ‘Buy Now’”.
• Don’t refer to actions that depend on the device or software the visitor is using. These include “click”, “right click”, “scroll”, pressing keys, opening a particular program, etc.

Accessibility Resources

There are many, many resources on the web about accessibility, and OSU has some of its own. Here are some of our favorites:

• IT Accessibility at OSU: Information and resources about accessible web pages, documents, and multimedia. Also includes OSU policies on accessibility.
• WebAIM: An organization that aims to improve web accessibility throughout the Internet. They have great articles and tools.
• Developing Accessible Web Content from Section508.gov:  Guidelines for creating web content that meet legal requirements for accessibility.
• W3C Accessibility: This organization developed the requirements that determine compliance with accessibility laws. They have a very in-depth guide to meeting these requirements.

A complete, searchable guide to the Extension Website is now available online: beav.es/extension-webguide

This guide contains all information and instructions you need to work with the Extension website as well as tips and tricks for advanced users. For those of you who are already familiar with the site or just need a quick refresher, it includes several quick start reference documents.

We welcome questions and feedback and hope that this will serve as a valuable resource to Extension employees who work on the website.