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.

8 Dos and Don'ts for Web Accessibility

  1. Don't upload images with text inside

    The text inside of an image is completely hidden to screen readers. That means if you upload an image or screenshot of a flyer, for example, a visually impaired or blind visitor will receive none of the information you are providing.

    In addition, you should not use graphics/designed images to take the place of headings, tables or other elements on your page. Photo uploads are for just that photos. There are very limited exceptions.

  2. Do add quality alt text to all photos

    The Alternate Text field is required for all photos you upload to the website. You may not leave this field empty. The alt text is read to someone using a screen reader because that user can't visually process your photo. You need to include a short description of what's in it.

    One or two words are usually not enough, but full paragraphs are not helpful. We recommend less than 120 characters generally, including the most important information needed to understand the content of the photo. You should not include "Photo of" or similar phrasing – the screen reader will already announce that it's a photo before reading your alt text. Additional information is provided below.

  3. Don't upload a PDF unless absolutely necessary

    PDF files have been around since 1993. They may have served us well when websites were in their infancy, but we have better ways of presenting information online in most cases. What's wrong with a PDF? First, those files are not "responsive" – meaning they are not resized or reconfigured based on the size of your screen the way modern webpages are. Try looking at a PDF on your phone. It's probably quite small and requires a ton of zooming and scrolling. Second, PDFs tend not to be accessible for screen readers. It is possible to create an accessible PDF, but it requires much more work than simply saving from Word or Canva.

    If there is another option, such as copying the text directly onto your page, do that. Cases where a PDF may make sense include documents that you intend for people to print out (which is becoming less common), or long documents where the layout and formatting are essential.

  4. Do use headings correctly

    Headings are for page structure, not for design. In other words, use a page heading to let your visitor know where they are on the page rather than to make text large, bold, or otherwise stand out. Think of headings as forming a table of contents on your page. Your page title is the Heading 1 for that page. You can and should set Heading 2, Heading 3, and so on to divide up your content as appropriate. Main sections on your page will be Heading 2, subsections under each will be Heading 3, and so on. Do not choose the heading level based on how it appears visually – this is an easy way to create accessibility problems. Keep in mind that headings are how those using screen readers jump to parts of your page, rather than having every word read aloud. Additional information is provided below.

  5. Don't use headings to make "cool" designs

    We get it. You want your page to look good. And if Drupal lets you do it, it can't be that bad, right? Unfortunately, that way of thinking can lead to problems. That's particularly true of headings, which are for structure, not design. A Heading 2 is larger text with a horizontal line, for example, but you should never set something to Heading 2 just to make it larger or to generate a line. Setting headings inappropriately creates a terrible (and non-compliant) experience for visually impaired and blind users.

    If you're interested in a more sophisticated layout, contact Institutional Advancement for options. Avoid "hacky" solutions like setting headings to create lines or larger fonts.

  6. Do use meaningful link text

    Hyperlinks are everywhere, but making them accessible requires some thought. To meet the needs of visually impaired users, a link should tell the user what information they will get by following the link, without needing to read anything else on the page. For example, if you write a paragraph about places to go on campus, then add a link with the text "Learn more," your link is not accessible. The user would have to read the rest of the paragraph to understand where the link will take them. On the other hand, "Learn more about places to go on campus" provides enough information to know what the link is for.

  7. Don't use links with "click here" or the URL

    A common mistake is to add links to words like "click here." There are several problems with this approach. First, not everyone is "clicking" on your links. With the wide range of devices today, users may be "tapping" or "tabbing" or "telling" to visit your link. Use a verb that's not specific to one device, such as "view" or don't include one at all. Second, "click here" gives the user no information about where the link goes. Remember that the link itself should provide that information without the need to read your other text.

    Similarly, copying and pasting the URL into your page is not a good practice. First, because it does not tell the user what to expect if they follow the link. Second, because a screen reader will read aloud, individually, every letter of that URL. Imagine listening to the following:
    H-T-T-P-S-COLON-FORWARD SLASH-FORWARD SLASH-W-W-W-DOT-M-E-S-A-C-C-DOT-E-D-U-FORWARD SLASH-A-B-O-U-T-FORWARD SLASH-I-N-S-T-I-T-U-T-I-O-N-A-L-HYPHEN-A-D-V-A-N-C-E-M-E-N-T. Link from words instead.

  8. Do ask for help before uploading videos

    All videos on our website require closed captioning for the hearing impaired. The best practice is to work with Institutional Advancement staff to upload your video to the official college YouTube channel, set up captions, then embed the video on your webpage. We do not caption videos but can connect you with campus and outside resources.

    If your video does not have closed captioning, you may not put it on your webpage. That includes videos from other YouTube channels or services. In general, avoid embedding videos that you or the college did not create.

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: