WCAG 2.1 and what it means for school website ADA-compliance

If you are like most public schools across the country, website accessibility and ADA compliance have become a focus due to an increase in the Office for Civil Rights (OCR) complaints, investigations and even lawsuits. Schools can no longer just have a website that serves common computers and browsers, but now has to ensure all online information is accessible for everyone – including those with disabilities.

Public school websites are required to be ADA compliant through Section 504 of the Rehabilitation Act of 1973 and Title II of the Americans with Disabilities Act.

Trying to figure out what constitutes an ADA-compliant website can be difficult leaving most schools not knowing where to start. Well, it starts with understanding where your website falls short, and the best place to start is with an audit. Here's an article that addresses how to conduct a school website accessibility audit.

So what defines an ADA-compliant website? Until recently, there has been no technical standard that has been adopted for schools. Our good friend Jared Smith of WebAIM often compares this situation to being given a speeding ticket on a road that has no speed limit signs – the enforcer can determine if you’re going too fast, without a specific measurement.

Download your free 'Guide to School Website Accessibility'

The federal government adopted the Web Content Accessibility Guidelines 2.1 (WCAG 2.1 AA) as its standard for federal agency websites. Industry experts all agree it is very likely that the Department of Justice (DOJ) will also adopt this standard for public and private school websites in its forthcoming rule-making.

Introducing WCAG 2.1

WCAG 2.1 is a technical standard created by the World Wide Web Consortium (W3C) which is an international community that develops open standards for the internet. WCAG 2.1 is a standard made of twelve guidelines under four principles:

Perceivable – Web content is made available to the senses - sight, hearing, and/or touch
Operable – Interface forms, controls, and navigation are operable
Understandable – Content and interface are understandable
Robust – Content can be used reliably by a wide variety of user agents, including assistive technologies

For each guideline, there are testable success criteria, which are categorized in three levels: A, AA, and AAA. Level A is the minimum, with AA and AAA adding additional enhancements for hearing and visually-impaired users.

WCAG 2.1 in simple terms

We've put together a simple list that attempts to make the WCAG 2.1 specification a little easier to understand its guidelines and principles. Check out this resource from the WebAIM group for a WCAG 2.1 Checklist.

Contrast and colors

Some people have difficulty seeing text and colors that do not have a great enough contrast with its background. Those who are color-blind especially need to be able to distinguish text over background color. This applies to buttons, links, text on images – everything. Consideration to contrast and color choice is also important for extreme lighting conditions.

Read more: Color Contrast Checker

Using semantics to format your HTML pages

When web page codes are clearly described in easy-to-understand terms, it enables broader sharing across all browsers and apps. This ‘friendlier’ language not only helps all the users, but developers who are striving to make content more universal on more devices. Content should be properly labeled. All pages should have a headline using 'Heading 1' or <h1>. Subheads like H2, H3 and H4 establish a hierarchy so readers can better interpret content to the user.

Read more: Semantic Structure

Text alternatives for non-text content

Written replacements for images, audio and video should provide all the same descriptors that the non-text content conveys. Besides helping with searching, clear, concise word choice can make non-text content for the disabled more vivid.

Read more: Alternative Text

Ability to navigate with the keyboard

Not everyone can use a mouse. Those with motor disabilities have to use a keyboard to make their way around a website. Users need to be able to interact fully with your website by navigating using the tab, arrows and return keys. A “skip navigation” option is also required. Consider using WAI-ARIA for improved accessibility, and properly highlight the links as you use the tab key to make selections.

Easy to navigate and find information

Finding relevant content via search and easy navigation is a universal need. Alt text, heading structure, page titles, descriptive link text (no ‘click here’ please) are just some ways to help everyone find what they’re searching for. You must also provide multiple ways to navigate such as a search, indexes and site maps.

Properly formatting tables

Tables are hard for screen readers to decipher. Users need to be able to navigate through a table one cell at a time. In addition to the table itself needing a caption, row and column headers need to be labeled and data correctly associated with the right header.

Read more: Creating Accessible Tables

Making PDFs accessible

PDF files must be tagged properly to be accessible, and unfortunately many are not. Images and other non-text elements within that PDF also need to be ADA-compliant. Creating a new PDF is often easier than converting an old one.

Read more: PDF Accessibility

Making videos accessible

Simply adding a transcript isn’t enough. Videos require closed-captioning and detailed descriptions (e.g., who’s on screen, where they are, what they’re doing, even facial expressions) to be fully accessible and ADA compliant.

Making forms accessible

Forms are common tools for gathering info and interacting with site visitors. Login forms and online registrations can be challenging if not designed to be web accessible. How it’s laid out, use of labels and the size of clickable areas should all be considered.

Read more: Creating Accessible Forms

Alternate versions

Attempts to be fully accessible sometimes fall short, and in those cases, alternate versions of key pages must be created. That is, it is sometimes not feasible (legally, technically) to modify some content. These are the ‘exceptions’, but still must be accommodated.

Feedback for users

To be fully interactive, your site needs to be able to provide and easy way for someone to submit feedback of compliance issues they find on your site. Clarity is key for confirmations or errors that occurs while engaging each page.

No flashing

Blinking and flashing are not only bothersome, but can be disorienting and even dangerous for many users. Seizures can be triggered by flashing content, so avoid using any flashing or flickering content.

Miscellaneous

Timers

Timed connections can create difficulties for the disabled. They may not know a timer is running, or perhaps it could create additional stress. In some cases (e.g., purchasing items), a timer may be required, but most content on a school's website does not need them. Avoid using timers.

Fly-out menus

Menus that fly out or down when an item is clicked are helpful to dig deeper into sites content, but they need to be available via keyboard navigation, and not immediately snap back, like when the mouse moves out of the hover-zone of the clickable area.

No pop-ups

Pop-up windows present a range of obstacles for many disabled users, so it’s best to avoid using them altogether. If you must, be sure to alert the user that a pop-up is about to be launched.

Conclusion

Whether you are just sharpening your web accessibility skills to update your website or gaining a better understanding so you can better manage your website, WCAG 2.1 is here to stay. WCAG 2.1 is a practical standard that not only makes your website information accessible for everyone, it provides benefits in search-ability, mobile compatibility and other areas related to usability.

If you can provide a better experience for one more person with a disability, it is worth all the effort and is just the right thing to do. Your website is the hub of your school's communication so it should provide an equal opportunity for each unique visitor.

Topics: Communication Website accessibility School Districts

About the author

As co-founder of SchoolNow, Steve believes behind every great school is great communication. He's on a mission to continue to simplify communications for school administrators and help them boost engagement with parents and the entire school community.