Ohio University

Web Accessibility Basics

Designing websites to be easily accessed by individuals with disabilities can seem daunting at first; however, you can make significant improvements by keeping a few basic concepts in mind:


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 have the 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:

An image demonstrating the difference of good contrast and bad contrast

Color Blindness

Another important consideration with color is for users with various forms of color blindness. When using colors to emphasize or to categorize data, selecting certain colors can result in frustration for these users 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

A set of bus routes overlaid across a map of Athens Ohio

Protanopia and protanomaly (red deficiencies)

A set of bus routes overlaid across a map of Athens Ohio missing the color red

Deuteranopia and deuteranomaly (green deficiencies)

A set of bus routes overlaid across a map of Athens Ohio missing the color green

Tritanopia (blue deficiencies)

A set of bus routes overlaid across a map of Athens Ohio missing the color blue

Rod monochromacy or achromacy (no color)

A set of bus routes overlaid across a map of Athens Ohio missing all colors

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 nonsighted or visually impaired users. This description should generally describe the people, place, or action that is appearing in the image.

Two students perform experiments within a lab

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. They should be 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.

When using images on your site, it is strongly advised that the images used are purely decorative. Placing text within the image, even if added to the Alt text of the image, may be skipped or missed by the user if they decide to ignore the images on the page. There are techniques Web Services can perform to display page text overtop of the image if the effect is desired, all you need to do is ask!


Page Headers and Outline

Page headers 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. If a style of heading is liked over another, please let us know and we can make the style change for you without sacrificing the page outline from misuse of headers. A typical page should look like this:

Header 1
Header 2
Content
Header 2
Header 3
Content
Header 3
Header 4
Content

The header 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 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, be sure to avoid using terms such as, "Click Here!" and "go to". When a user using a keyboard to navigate a page, or when they are using other Assistive Technologies, a screen reader (for example) will read the link's text when either using the Tab key or while skipping through page content. The user will only hear the link's text "click here" and not the full, contextual, sentence of:

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

 

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. By providing the document type it 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. They should never be used for any other reason such as page layout. You should also try to avoid complex tables with nested tables or with heading 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."

An example of the popup a user will see while making a table.
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 and content 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.