Ohio University

Universal Techniques for Digital Accessibility

The four guidelines (P.O.U.R) that form the WCAG 2.0 guidelines are a great place to start to find common themes for making content and products accessible. In addition here are some simple tactics you can begin adding to your work that will improve accessibility regardless of the tool you are using.


Assistive Technology

What is Assistive Technology?

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. Some examples:

  • Screen-readers help vision impaired individuals read screen content. They also interpret additional structural information provided in documents and sites like headers.
  • Refreshable braille devices also help vision impaired individuals read screen content through 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.
  • On the software side, many operating systems include assistive features like screen magnifiers and high contrast modes.

Ohio University also provides some assistive technology to students.

The Digital Content Accessibility Guidelines are structured to maximize compatibility with assistive technology.


Color Selection

Color Contrast

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:

Thumbnail

Color Blindness

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

Thumbnail

Protanopia and protanomaly (red deficiencies)

Thumbnail

Deuteranopia and deuteranomaly (green deficiencies)

Thumbnail

Tritanopia (blue deficiencies)

Thumbnail

Rod monochromacy or achromacy (no color)

Thumbnail

Images

Image Descriptions and Alt Text

One of the simpler actions a contributor can perform to ensure better accessibility to their website is by supplying 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.

Thumbnail

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 to display page text on top of an image if that effect is desired.


Page Headings (Outline Form)

Page headings are used for outlining a page, not as a means of applying a style to your text. Your page outline is used by search engines and Assistive Technologies, such as 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 Title)
Heading 2 (first heading in the content area)
Content
Heading 2
Heading 3
Content
Heading 3
Heading 4
Content

Think about headings the same way you thought about outlining a writing assignment - outline form. The heading number should increase as it is nested within different sections and should be used to break up the content into more meaningful chunks. Doing it this way will also improve readability of your content as well as increase your Search Engine Optimization by allowing search engines to provide better content to a user's search by using headers to match against keywords used in the search.


Click Here

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 take the user to a different program to view it, like with a PDF. 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 else where to continue with their work.


Tables

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

Thumbnail
Student Expenses Per Semester (example only)
  Fall Winter Summer
Tuition $5,872 $5,872 $2,500
Room $3,296 $3,296 $800
Board $2,838 $2,838 $1,432
Book and Supplies $515 $515 $112

Logical Reading Order

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. 


Labels and instructions for forms

Form fields need to be labelled 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.