Demystifying Accessibility: 5 Simple Tips to Avoid Getting Burned by the Man

Most of us in higher ed are familiar with the concept that our college and university websites are supposed to be “accessible.” Acronyms like W3C, ADA, 508 and WCAG are familiar in theory…but the practical application of these guidelines can leave many of us mystified.

The purpose of this blog post is to provide a high-level overview of what accessibility means, why we should care that our websites are accessible, and share a few tips and checks you can start using today.

What is Website Accessibility?

W3C (the main international standards organization for the World Wide Web) introduced the concept of website accessibility in 1996 and launched a formal initiative with backing from the White House in 1997. Over the years, the United States government, in collaboration with W3C and domestic and international organizations, has developed several sets of standards to ensure that the majority of the world’s websites are consumable by all people.

When we talk about website accessibility, we’re referring to the practice of creating websites that are usable by all people, including those with disabilities.

Several of the most notable and commonly regarded government standards and policies include:

• Section 508 of the Rehabilitation Act
• Title II and Title III of the Americans with Disabilities Act
• Web Content Accessibility Guidelines (WCAG) 1.0 and 2.0

Why Do I Care if My Website is Accessible?

You want your website to be accessible for a number of reasons–speed, cross-browser compatibility, ease of maintenance, even organic search benefits are among the myriad benefits of building an accessible website. Above all else:

1. It’s the right thing to do. You want humans with disabilities (those who are blind, for example) to be able to consume your content. Ignoring their needs would be insensitive and discriminatory.
2. It’s required by the federal government. If you’re a public institution (regardless of whether or not you receive federal funding), the law states that you must provide equal access to all electronic communications. Those who don’t provide equal access run the risk of getting hit with government sanctions or worse, becoming the subject of a civil lawsuit.

In conducting research for this blog post, we discovered several examples of colleges and universities that found themselves on the wrong side of both civil and federal legal entanglements. One such example occurred at Florida State in 2012 when two blind students sued the university, claiming that Florida State had failed to reasonably accommodate their disability and lacked accessible technology. Specifically, the students argued that Florida State’s inaccessible technology prevented them from completing courses related to their majors. Florida State agreed to pay each of the two students $75,000 and to continue its efforts to make the university’s technology more accessible.

If the two reasons above weren’t enough to convince you of the importance of accessibility, the Department of Justice has already announced that more serious regulations are forthcoming (expected August, 2016).

How Can I Make Sure My Website is Accessible?

Before you go reading the entirety of The Rehabilitation Act, the ADA and WCAG (yikes!) there are a few relatively simple checks you can do on your own to make the content on your website more accessible.

5 Tips & Checks

1. Use Text Alternatives

“Alt text” allows you to convey the purpose of all images used in your design (pictures, illustrations, charts, etc.). People who are blind won’t be able to see the image itself. By using alt text, a blind person can hear the alt text read out loud by a device known as a screen-reader.

Make sure the alt text you create provides a user experience equivalent to seeing the image itself (conveys information that’s useful, engaging and relevant–as opposed to generic). For example, say your university home page features an image of a group of students celebrating their graduation. They’re tossing their tassels, parents are smiling, it’s a jovial mood!

Chances are, you chose that image for the homepage for a reason. Maybe you wanted to convey the sense of pride and purpose that students who attend your college feel when they complete their degrees. Maybe you wanted to show off the friendships that form on campus.

Good alt text for this image would be something like, “A large, diverse group of students celebrate their graduation by standing up, high-fiving each other, smiling and embracing.”

Bad alt text for this image would be something like, “a crowd of students.”

There are even websites like wave.webaim.org which can help us find where alt text is missing on your website.

2. Create Headings With a Meaningful Hierarchy

All of your web pages should have sections of content separated by visual headings (i.e. not just a giant wall of text). To make headings consumable to everyone (even those unable to use a mouse), your headings should have a meaningful hierarchy. This allows users to “tab” through the content using their keyboard. For example:

• Heading Level 1 <h1>
  • Heading Level 2 <h2>
    • Heading Level 3 <h3>
    • Heading Level 3 <h3>
  • Heading Level 2 <h2>
    • Heading Level 3 <h3>
      • Heading Level 4 <h4>
      • Heading Level 4 <h4>
  • Heading Level 2 <h2>

3. Be Aware of Color Contrast (Luminance)

Not everyone is able to read text on a screen if the contrast between the text and the background is either too low or too high. For example, people who are visually impaired will have difficulty reading light grey text on a white background (low color contrast). People with reading disabilities like dyslexia will have difficulty reading light grey text on a dark black background (high color contrast).

To make the text on your website accessible to everyone, your site should allow users to change the text color without compromising the functionality of your site. As a default, most web pages should have a color contrast ratio of at least 4.1 in order to be accessible to the majority of users.

4. Text Resizing

Make sure pages are still usable when text size is changed. Many people with visual impairments have difficulty reading small text. To make your site’s text accessible to these people, make sure users can resize your site’s text. And make sure they can do so up to 200 percent magnification without loss of content or functionality. This means making sure full sentences of text that can be read without horizontal scrolling and that resizing your site’s text does not force it to overlap with the rest of your site’s content.

5. Provide Alternatives for Multimedia

For individuals who are deaf or hard of hearing, having a bunch of audio content (such as a narrated virtual tour) is essentially useless. Before you pull the plug on your multimedia content, there are a few simple things you can do to make this content consumable by all:

1. Include captions or text transcripts for all audio/video content on your website
2. Make your captions in sync with spoken content
3. Make your transcript comprehensive (i.e. the transcript should include all audio information, dialogue with the speakers identified, and all important sound — e.g. footsteps approaching, doors opening, the sound of cheering when students in your video toss their tassels, etc.)

What’s next?

It’s important to note that we’ve only scratched the surface with this post. Website accessibility is a vastly complex topic–and a challenge for many higher ed marketers. Several tools exist which can help ease the burden of creating and maintaining an accessible website. Like anything else, a technology will not fix all your problems. Remember, a HUGE piece of accessibility is your content!

If you’re interested in learning more about accessibility, or would like to start a conversation about how we might be able to help your institution overcome its accessibility-related challenges, please contact us at info@visionpointmarketing.com