Walter Scott, Jr. College of Engineering

Style Guidebook: Web Accessibility Standards

The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect.

– Tim Berners-Lee, W3C Director and inventor of the World Wide Web

Why we want to make our sites accessible

One of the highlighted values that the College promotes is inclusiveness, and to ignore any segment of our population means we are not living up to our own expectations. The University not only expects us to follow a policy of accessibility, we want to make sure that we are making it easier for all people to interact with us. Through a process of working with accessible technologies and techniques, we can offer our content to more people in better ways.

UN emblem

The UN Convention on the Rights of Persons with Disabilities:

"To enable persons with disabilities to live independently and participate fully in all aspects of life, States Parties shall take appropriate measures to ensure to persons with disabilities access, on an equal basis with others, to the physical environment, to transportation, to information and communications, including information and communications technologies and systems, and to other facilities and services open or provided to the public, both in urban and in rural areas."

What disabilities are affected by accessibility issues?

  • Colorblindness or color deficiencies
  • Visual impairments
  • Deafness and the hard of hearing
  • Learning disorders
  • Users with impaired mobility, including problems with mice and/or keyboards
  • Neurological issues, such as migraine sufferers, or the possibility of triggering seizures

How do we make our content more accessible?

Color plays an important role in how useful a site is for many people, especially those with color vision disabilities. We have adopted a standard of using colors with accessibility in mind for all users.

For further information on how we use color, visit the Color Accessibility section of the guidebook.

full color, normal vision
full color, normal vision
Red-green color blindness, protanopia
Red-green color blindness, protanopia

Always Use Alt Tags for Images/Media

"Alt tags" are used in HTML to add descriptive text to images, and can aid in navigation. Alt tags can be used with braille, or read aloud on screen readers and other assistive technologies.

Alt tags, and secondarily title and description tags, are required for those with accessibility issues to use our websites easily and without issue. Alt tags should be consistent, concise, and informative as to the image's function.

WordPress has built-in functionality to add title tags, alt tags, and descriptions to any image on the page or in the Media Library.

Alt Image sample

Headings are always in descending order

HTML headings are designed to work in descending order, from a larger H1 header at the top of the page down to H3 or H4 for smaller subheaders. Screen readers will often use the order of the headings to navigate a page.

H1 is almost always the page title/header.

H1 Header

H2 Header

H3 Header

H4 Header

Paragraph text

Headings can also be grouped under particular headers, as long as the descending order is respected.

H1 Header

H2 Header

H3 Header

H3 Header

H2 Header

H3 Header

H3 Header

Designing for easy text recognition

Design recommendations for accessibility are often similar to those for good design, including:

  • good color contrast
  • font sizes that are not too small (min. 9 pixels)
  • text not embedded in images
  • text that is not the same general color as a background.

Refer to our best practices on Design, Readability, and Color Accessibility standards in this guidebook.

Pages That Are easy to navigate

Using proper design with strong, descending heading text is a good way to help make pages more readable for those with accessibility issues. Titles and alt tags should always be included on links and other content, to help readers know where a choice takes them.

Browser Extensions

There are several web browser extensions available to test how much of a page's content is accessible. Two examples are:

Siteimprove Accessibility Checker (Chrome)

WAVE Web Accessibility Evaluation Tool