Universal Techniques for Digital Accessibility

• Contact Student Accessibility Services if any of your students are reporting accessibility issues. 
• During a synchronous online course session, ask all participants to mute microphones unless they are speaking. 
• If you’re using Teams to deliver a lecture in real time, change your status to “Do Not Disturb” and close mail and other programs that send you notifications. 
• Look for and use any built-in “Check Accessibility” functions when creating documents or presentations for students. 
• Turn captions on for videos when using them in presentations. 
• Turn on “Live Captions” if it is available (PowerPoint instructions): 
  • Live captions work best on the desktop version of PowerPoint – you can share your desktop during the presentation. 
  • Rehearse your presentation to be see how it works with captions turned on. 
  • Use an external microphone if possible (ear buds with a microphone, AirPods will work as well). 
  • Speak clearly. 

Learn more about creating a more accessible learning experience from Lynda.com (free with a Library card account)

Assistive technology helps people navigate and access content. It can be a physical device, a piece of software, or even a built-in feature of an operating system. The Digital Content Accessibility Guidelines are structured to maximize compatibility with assistive technology. 

• Screen-readers help vision impaired individuals read screen content. They read content out loud and also interpret structural information provided in documents and sites like headings.
• Refreshable braille devices help vision impaired individuals read screen content via moveable pins that create a line of braille text that can be read, then replaced with a new line of braille text. These devices often have custom input controls for navigation and text entry.
• Assistive software features come with many operating systems. Examples include screen magnifiers and high contrast modes.

Ohio University also provides some assistive technology to students.

When selecting colors to display on your webpage, it is very important to make sure the contrast between the text and the background is within a recommended ratio of 4.5:1. If the ratio is too small, users with certain visual impairments may not be able to comfortably read your page's content, or they will not be able to read the page at all. If you are unsure, a good tool to use is the WebAIM Color Contrast Checker.

Here is an example of just how close good and bad contrast can be:

When using colors to emphasize or to categorize data, selecting certain colors can result in frustration for users with various forms of color blindness if there is no other way to find the information they are looking for. An alternative would be to use better color selections. Additionally, WCAG 2.0 requires a non-color reliant way of conveying important information.

Full Color Example

Protanopia and protanomaly (red deficiencies)

Deuteranopia and deuteranomaly (green deficiencies)

Tritanopia (blue deficiencies)

Rod monochromacy or achromacy (no color)

One of the easiest ways to improve digital accessibility is to add meaningful Image Descriptions, or "Alt" text. This text is read by screen readers for non-sighted or visually impaired users. This description should generally describe the people, place, or action that is appearing in the image.

Short Example: Two students perform experiments within a lab.

Long Example: Two students, John Doe on the left, and Jane Doe on the right, perform bacterial colony counting during their Microbiology class.

Bad Example: Image_5

The amount of information placed within the Alt text should be contextual to the surrounding content. The shorter example is appropriate most of the time, using a few words that describe the function or content of the image. The longer example would be used if the people within the image, or their actions, are being directly written about within a news article, for instance.

Avoid using images to display text. Text embedded in an image, even if that text is also added to the Alt text, may be skipped or missed by the user if they decide to ignore images on the page or if they need to use high levels of zoom. There are techniques Web Services can perform on websites to display page text on top of an image if that effect is desired.

Page headings are used for outlining a page, not as a means of applying a style to your text. It is extremely important to use built-in tools to create headings on any webpage or document.

Your page outline is used by search engines and assistive technologies like screen readers to give the user, or the search engine, a better way of navigating through relevant text. If the user is looking for something located towards the bottom of a page, the page outline will allow them to skip to that section without having to listen to parts of the page that are not needed. 

A typical page might look like this:

Heading 1 (Page/Main Title)
Heading 2 (first heading in the content area)
Content
New Heading 2
Content
Heading 3 (sub content of heading 2)
Content
New Heading 2
content
Etc.

Think about headings the same way you would think about organizing a long written document - outline form. Heading One is the largest heading, heading two is smaller and less important, a heading three is smaller and a sub category of the last heading two and so on.

When labeling a hyperlink, always use text that describes the content being linked to. Avoid terms such as "Click Here!" and "read more." When someone uses a screen reader to scan a web page, they often will skip from link to link. When all of the links on a page have the text "click here" as the hyperlink text, that is all the person hears. If there are 15 links on that page, the person will hear "click here" 15 times and will not be able to understand the purpose of that page.

Please avoid this:

"To view our available programs, click here!"

A better alternative would be to rework the sentence, where the description of the link's destination is the link itself:

"We have a wide range of available programs for all interest levels!"

Labeling the link the second way will give more information to the user who will then either click the link to go to the next page, or will have their screen reader read from the start of the sentence or paragraph to learn more. This can also positively influence search engine optimization.

Adding Document Type Label

When linking to a document, be sure to add the document type within the link description. As an example, "Events Calendar (PDF)". Most documents will either need to be downloaded, such as an Excel Spreadsheet, or will send a user to a large file like a video. Providing the document type will minimize any surprises or confusion to the user about the action that will follow after clicking the link. Most browsers, when downloading a document especially, will not tell a screen reader that it has downloaded anything and will result in the user not knowing if the link is broken or if they need to go elsewhere to continue with their work.

Placing a table on your site should only be done for displaying tabular data. Tables must not be used for any other reason such as page layout. You should also try to avoid complex tables with nested tables or with header cells that span multiple rows or columns, as screen reader users can encounter problems accessing these tables.

When using a table, there are a few additions each table should have to be considered an accessible table. When adding a table using the Rich Text Editor, along with setting the desired column and row numbers, it will also ask if the first row, column, or both should be treated as a header. This is very important for a screen reader in order to know how to read the table to the user. Without headers, the screen reader will read the full contents of the table, from the upper left cell, to the lower right cell without giving any context as to what it being displayed.

Other fields provided while creating a table are the Caption and Summary fields. The Caption should title the table and will appear above the table when it is displayed. Something along the lines of, "Student Expenses Per Semester," is an example of a Caption.

The Summary, contrary to what it sounds like, does not describe the table. Instead it is used to tell the user how to properly read the physical table. The Summary is only available to screen readers; sighted users will never see the Summary. A Summary, for our tuition table example, would be, "The first-row separates the columns by semester name. The first column displays the different expenses a student may encounter."

The reading order of the content should make logical sense. When moving through the page using only the keyboard, the keyboard focus order should follow the visual order. 

Form fields need to be labeled through appropriate methods. Please make sure those who are developing forms for you are adding labels and instructions programmatically to forms. Visit the WebAIM website to learn more about creating accessible forms.