Web Accessibility

As a public institution, we are legally responsible for ensuring our content is accessible to all visitors, including those who are differently abled. That means visitors who rely on screen readers and other assistive technology must be able to use and understand our pages.

It’s also the right thing to do. By some estimates, 20% of the population uses assistive technology to access the web. That includes screen readers, hearing aids, Braille keyboards, using a keyboard only, using eye or head movement tools, to name a few. Imagine the frustration of being unable to read, watch, listen, scroll, type or navigate on websites today. Why wouldn’t we do everything we can to make our content accessible to everyone?

What is Required?

The college is bound by the Americans with Disabilities Act (ADA). When we say all of our content needs to be ADA compliant, we mean: every page, every PDF, every image, every video, everywhere. It is required by law and is not optional. Do not hesitate to contact Institutional Advancement with any questions about our shared responsibility.

Many of our web accessibility responsibilities are built into how we’ve designed and structured the MCC website. As an editor, here are some of the key steps you should take as you build out individual pages.

Images Must Have Alt Text

Photos and images are important elements of modern websites. But for someone using a screen reader, an image is often meaningless. The screen reader can tell someone that an image is on the page, but it can’t tell them what it looks like – unless we provide that information. We do that through a text alternative, commonly called “alt text.”

In short, every image must have a description attached to it. Sighted visitors will see the image, and those using screen readers will have the alt text read to them. This allows everyone to come away understanding what the image means.

Drupal will prompt you to add alt text when you upload any image. Do not skip this field! You are responsible for taking the time to add meaningful alt text to every image.

What should the alt text be? Here are some general guidelines:

  • Do not start with “image of” or “photo of” something. This is implied.
  • Be descriptive, but do not go beyond about 130 characters. If you need to write more, you can add a caption next to the image.
  • One or two words are usually not sufficient.
  • Do not use images or graphics with text added to them (designed graphics, words over a photo). Even with alt text, this is bad practice. Consult with Institutional Advancement if you have a specific need.
    A special note about flyers: We know our flyers look great. These, however, are designed to be physically printed and posted. They should not be embedded on a webpage. Instead, take the information that appears on the flyer and add it to the page as text. You can also add the photos separately, if appropriate. If you feel the flyer adds value, you may upload it as a PDF and link to it from the text – as a secondary way of presenting the information.
  • Imagine a photo of a golden retriever catching a ball. Here are some examples of alt text for that photo:
    • BAD: A dog.
    • BETTER: A golden retriever outdoors.
    • BEST: A golden retriever catching a tennis ball with grass in the background.

Headings Must Be Used Correctly

Proper use of titles, headings and subheadings is key to making your webpages accessible and user friendly. In short, this means the page should have an outline the way a document, book or manual does. We would start a document with its title - a heading at the top (or first level). Main sections within the document have a heading at level 2. Subsections within those sections would have headings at level 3, and so on. That way you can easily create a table of contents to help readers find what they need. The same is true for webpages:

  • Every page must have a Heading 1. In Drupal, this is added for you – it is the title of your page and it appears automatically before any of your other content. Only one Heading 1 is allowed per page.
  • Other headings must appear in the correct order. The first time you add a heading to your page, it should be a Heading 2. If you need to add a subsection within that section, it should be a Heading 3. Otherwise, go back to Heading 2 for a new section of the same importance.
  • Do not skip heading levels, such as jumping from a Heading 2 to a Heading 4.
  • Headings are for page structure, not for appearance. This is critically important. You must use the right headings in the right order, even if you think a different heading would “look better” on the page.

Example: Let’s say you are creating a page about animals. First you’ll talk about dogs. You might have some introductory information about dogs, then discuss specific breeds of dogs. After that you will talk about cats. Then you’ll discuss specific breeds of cats. The outline of that page, with the correct headings, would look like this:

Heading 1: Animals

Heading 2: Dogs

Heading 3: Golden Retriever
Heading 3: Husky
Heading 3: Corgi

Heading 2: Cats

Heading 3: Siamese
Heading 3: British Shorthair
Heading 3: Snowshoe

Again, headings should be used to divide content into meaningful sections, not to format text. The headings (no matter what their styling looks like) should be used to designate content structure. If done correctly, your webpage layout will make sense to anyone using assistive technology and to sighted visitors.

Accessibility Scanning Tools

Institutional Advancement subscribes to a tool that regularly scans our website for accessibility and quality issues. We may reach out to you if the tool identifies a problem on one of your pages.

To be proactive, consider running your pages through the free WAVE tool: