Purpose

Website accessibility is a design concept for permitting computer users with physical limitations to use and enjoy a website’s entire services. Often, web accessibility is associated with disability, but disability does not have to be understood to be a strictly chronic state (e.g. blindness). Accessibility also helps people with conditional disabilities, such as those recovering from surgery.

Disabilities do not have to be medically related. Someone accessing a website under direct sunlight (which washes out colors of an LCD display), or maybe someone is using a lab terminal that happens to have a malfunctioning mouse, also benefit from web accessibility. And finally, even users who have no limitations can also benefit as keyboard navigation can be much faster than mouse navigation.

What is “VPAT”?

At times, you may come across the phrase “Voluntary Product Accessibility Template” or “VPAT”. For the purposes of Submitty development, VPAT refers to website accessibility.

In actuality, a VPAT is a report that explains how an information or communications technology conforms to accessibility standards under Section 508 of the Rehabilitation Act of 1973. Within the United States, web accessibility is also compelled by the Americans with Disabilities Act of 1990.

As such, many United States universities have policies requiring web accessibility, which makes this important to Submitty.

Beginning Guidelines

This is not a complete list of web accessibility standards, but rather a selection of guidelines to help you get started. Please refer to articles at WebAIM.org and The A11y Project for greater detail on web accessibility.

  1. Examine your interface design with WAVE
  2. The Most Important Concept
  3. HTML, CSS, and Javascript
  4. All interactive controls must be usable by the keyboard
  5. All interactive controls require a textual description
  6. Layout tables versus data tables
  7. All visual elements need to adhere to a minimum contrast ratio

If you have any questions on web accessibility, please post them in Submitty’s slack channel and tag @pbailie.

Examine Your Interface Design With WAVE

The Web Accessibility Evaluation (WAVE) tool is a browser plugin that can analyze your UI design and point out accessibility problems.

DO

DO NOT

The Most Important Concept

The most important word used to summarize web accessibility is “context”.

DO:

DO NOT:

HTML, CSS, and Javascript

DO:

DO NOT:

All Interactive Controls Must Be Usable By The Keyboard

Keyboard users navigate forward through a website with TAB and backwards with SHIFT+TAB.

DO

DO NOT

Layout Tables Versus Data Tables

Tables are supposed to be used to display tabulated data, but they are also useful to easily layout other elements, such as a user interface.

Tables whose primary purpose is to display tabulated data are called “data tables”. Those tables used to primarily layout other elements are “layout tables”. When tables have a mixture of data and other elements, the developer should use their best judgment as to which has a higher precedence within the table.

DO

DO NOT

All Visual Elements Need To Adhere To A Minimum Contrast Ratio

A minimum amount of contrast should exist between the text and background, known as “contrast ratio”.

DO

DO NOT