The Finalsite Blog

Best practices, success stories and software updates from the desk of school experts you trust.


The Keys to ADA-Compliant Website Content
Mia Major

By January 2018 it is required that all federally-funded educational institutions adhere to level AA of the WCAG 2.0 accessibility requirements. These requirements speak to two main attributes of your website: content and design. Finalsite has invested significant time and resources to understand just what this means not only for its own deployment, but also for clients who have websites that are live.

AA Compliant Content Tips

While no single item related to compliance is complicated or even necessarily difficult, determining a path to compliance can be a lot to wrap your arms around. We strongly encourage working with an experienced web design and CMS company who can help you build a website that looks great and adheres to AA requirements.

For creating compliant content, the process lies more in your hands than in the hands of your website partner. All of the following website content needs to follow AA requirements:

  • Photos
  • Text
  • Forms
  • PDFs
  • Videos

On-Demand Webinar: How to Make Your Website Accessible by January 2018
Watch it Now


Now, let's dive into how to make this content accessible:

Add ALT Text to Every Image

Every image on your school's website needs to have ALT text. While ALT text is the text that displays when an image doesn't load — more importantly, it is the content that screen reading technology reads when reading your website to someone with a disability. Every image on your website needs ALT text, unless it is decorative.

Good example of ALT text

Here are some ALT text best practices:

  • Alt text should present the content and function. Example: Two preschool students coloring in class.
  • If an image is a link (or hotspot), the alt text must describe the link's function.
  • Avoid words like "picture of," "image of," or "link to," as the screen reader will already identify that it is an image.
  • Use the fewest number of words necessary to get your point across — meaning you don't need to identify the hair color and gender of everyone in the picture.

Clearly Structure Content

Clearly structured content makes it easier for screen reading technology to read content. In general, it also improves readability for all website visitors. In general, clearly structured content is the proper use of headings, sub-headers, paragraphs, lists, and accordions to display information in a logical format that can easily be read by screen readers.

Structured Content

Content structure best practices:

  • Organize your content using true headings and lists
  • Use white space to improve readability.
  • Use images to supplement text.
  • Check spelling and grammar.
  • When using lists or accordions, be sure to use colors and other design enhancements to signify when a list is expanded. For example, below you'll notice that the expanded accordion uses a "-" symbol and blue text to signify that the accordion is expanded.

Good example of an accordian

Use Colors Friendly to Those with Color Blindness?

While red and green are two of the most common school brand colors, they are also two colors you need to be extremely careful with when adding content to your website because of color blindness. Only about 8% of men and .5% of females are color blind — so, while the chance of a color-blind individual accessing your website may seem rare, it's essential to take their disability into consideration.

Good example of color contrast

While you don't need to have an entire black-and-white website, if red and green are part of your school's brand, you'll want to take the following few things into consideration:

  • High contrast text: When using red or green, it will best display on a white background, or another, light color that creates high contrast.
  • Don't layer red or green text on a background of the same hue: For example, placing dark green text on a light green background is difficult to read.

Ensure Links Make Sense out of Context

While using linked text in a paragraph or a button like "click here" may make sense to your everyday user, users with a disability using a screen reader will have difficulty understanding where these links navigate to. Screen reader users navigate from link to link — so, if every link on your website page is just "click here," or even just "here," it is extremely difficult for your website visitor to figure our where to go.

Making link text meaningful ensures AA compliance, so here are a few things to consider:

  • Use calls-to-action: Using calls-to-action on a page with a specific action like "apply" or "visit our school" make it easy for screen readers to understand where that exact link goes
  • Provide context: If you want to use in-line links, using a phrase like "click here to learn more about our after-school programs" provides enough context for someone using a screen reader to decide if that's where they'd like to go next
  • Avoid using school-specific jargon: While using school specific jargon may seem like a fun extension of your brand, using it out of context in a link or the navigation can be confusing to a new visitor.

Provide Captions and Transcripts for Videos

Arguably the most cumbersome process to adhering to AA compliance is captioning and transcribing website videos. Captioning videos is the process of adding synchronized and equivalent and accessible text onto the video itself so that the video can be equally as enjoyable to those with and without disabilities. Transcribing videos means providing a text copy of all a video's audio.

Video Caption

To be AA compliant, all videos must have captions that are synchronized and equivalent to what's being said in the video, as well as a transcript. Because we know the process of adding captions and transcribing audio can be cumbersome, we recommend using this third party tool to caption and transcribe your videos.

Create Accessible Forms

While website visitors without a disability can easily determine how to fill out a form, users with disabilities cannot make the visual association between the form label and form control. Website forms can easily be made accessible by adding text labels that describe the function of each form box — which simply means to label each field with the type of control it is (i.e., textbox, checkbox, radio button, menu, etc.).

Labels should be positioned above or to the left of controls, however, the labels for checkboxes and radio buttons are usually to the right of the control.

Make PDFs Accessible

In general, PDFs on your website aren't a great practice for a whole slew of reasons — including slow load times, non-responsiveness, and they're not inherently accessible. If you're like most districts, you most likely have dozens of PDFs on your public-facing website.If you use Acrobat Pro to manage your PDF files, you can use their "Make Accessible" tool to easily make your PDFs accessible.

For more information on accessible PDFs, visit Adobe's website directly for step-by-step guidelines for accessible PDFs.

Before making the full commitment to making all PDFs accessible, ask yourself: Which of these can be pages on our website? In most cases, summer reading lists, calendars, lunch menus, and other PDFs can easily be turned into website content, which creates a better user experience anyway.

Maintaining Compliance: Governance and Processes

Website governance and upkeep can be the most difficult part of achieving and maintaining AA compliance, because not everyone who is maintaining your website is going to follow AA standards. However, there are some safeguards you can put in place to ensure your website maintains compliance throughout its digital life span:

  • Select a CMS/website provider that knows how to build an accessible website, and who can help you maintain accessibility throughout your partnership.
  • Hire a Chief Accessibility Officer or designate an Accessibility Coordinator whose primary role is to check content monthly to ensure it is accessible.
  • Work with a third-party accessibility specialist who can do a website check-up for you.
  • Ensure you don't have multiple admins updating content without approval — and if you do, ensure you have a documented and well-practiced publishing process in place.

To Fix or to Redesign?

At this point, you may be thinking, "this seems like a lot of work." And of course, it is. The process to creating and maintaining website content may seem cumbersome, but it is the right thing to do. In addition, these website updates have the potential to greatly enhance your brand, and overall marketing and communication strategy.

Now for the big question: to fix or to redesign?

In most cases, a redesign will be essential for almost all schools looking to meet the new January 2018 deadline, as both content and design must meet AA requirements. Most districts have hundreds, if not thousands, of pages on their website, all which may have been managed by dozens of individuals over the years — meaning it is hard to go through and fix every single image and form. Starting from scratch will save your district time and money in the long run.

So, where can you start? Finalsite's theme websites make it possible to launch a AA compliant website in as little as 14 days. Inquire today to learn how we can help.


Website Accessibility Basics: Three Steps for a Compliant Website
ABOUT THE AUTHOR

Mia Major

As Finalsite's Content Marketing Manager, Mia plans and executes a variety of inbound marketing and digital content strategies. As a former TV reporter, freelance cinematographer and certified inbound marketer, Mia specializes in helping schools find new ways to share their stories online through web design, social media, copywriting, photography and videography. She is the author of numerous blogs, and Finalsite's popular eBook, The Website Redesign Playbook.


TRENDING BLOG POSTS


The latest school marketing strategies and trends, delivered weekly.

Join 3,000+ school professionals who depend on the Finalsite Blog for what's next in school marketing, communications, and design.

Subscribe

Dive Deeper into More Posts