If you’ve taken fifteen minutes to listen to the first episode of my #LIKEABOSS podcast, you will have heard a totally different take on ADA compliance and accessibility than what you’re used to. It wasn’t about scare tactics, laws, regulations, or OCR complaints. 

It was about the importance of inclusivity, and how when we focus on making our websites accessible to everyone, we are not only helping those with disabilities, but everyone. Yes, everyone — including your school or district. 

The WCAG 2.0 (and now WCAG 2.1) guidelines were not just developed for those with disabilities in mind...but all website users in mind. This means that implementing them enhances and simplifies the website experience for everyone.

Here are six (easy!) website accessibility best practices every school should follow, even if ADA compliance isn’t a necessity.

1. Have a Responsive Website

While schools are not required to adhere to the new WCAG 2.1 guidelines as of their June 5 release, an interesting addition to these guidelines was the requirement of a responsive website. Responsive websites are built to adapt to a variety of devices and screen sizes, improving the user experience for everyone.

Finalsite launched its first responsive website in 2012 (the first in the industry!), and since then, we have urged all schools and districts to “go responsive” because of the prevalence of mobile device usage by Generation Z and millennials. 

2. Add Alt Text to Every Image

alt text (Alternative Text) is essential for website visitors who use assistive technology, such as screen readers, and is first and foremost necessary for web accessibility. Screen readers will read alt text to users who are visually impaired so that they have an experience equal to those that have sight. A visitor with sight sees a classroom with children. Without alt text, a person who is blind hears: image 345781.

I get it, this can be a very time-consuming and tedious project. (Take it from someone who just went through a comprehensive website redesign and had to add alt text to every image.) Fortunately, I got to use Finalsite’s Resources and Posts Modules, which have tools and settings in place to make this easier. For example, in Resources, when you upload an image and add the alt text, you only have to add it that first time, and it will be automatically added to any place you use that image. (YES!) Additionally, in Posts, alt text is automatically added to thumbnails to save you a step when you are quickly churning out new content!

Additionally, alt text is GREAT for SEO. Yes — adding alt text to your images can help your performance in search. Search engines and other robots cannot interpret images, but images can play a crucial part in how people interpret a particular web page. alt text solves this by providing text which is read by the search engines. When Googlebot or other search engine crawlers inspect a page, images with properly formatted alt text contribute to how the page is indexed and where it ranks.

Pro Tips for Adding alt Text:

• During the redesign process, don’t bulk-migrate images, only add new ones. Chances are, you didn’t follow WCAG 2.0 guidelines during your last redesign, and you’re going to end up with a ton of images without alt text on your new site.
   
• If ADA-related compliance is a top priority, ensure you set up admin rights to only enable super-users you trust with adding alt text to publish content.
   
• Don’t overthink it! Read this blog (and scroll to question #10) for some best practices on adding alt text.
   
• Keep in mind that not ALL images will need alt text. Not every image will need alt text. If an image is truly decorative (think of how a line might be used to divide content), then it should have null/empty alt text (alt="" or alt).

Some believe that just requiring alt text in the product is enough to "check the box", but just putting text into that field doesn't do anything unless it's meaningful. We encourage you to do things for the right reason.

3. Make Sure Your Links Provide Context

“Click here” and “view now,” have never been at the top of the list of web design UX best practices, or high-converting call-to-action buttons. However, they’re often a crutch in moments when we lack creativity and simply “need to get a link on the site.” 

If you’ve ever listened to a screen reader announce the links on a website, you’d immediately feel compelled to update your site. Most screen readers have a feature to announce the links on a given page — so a list of “click here” links isn’t helpful. This type of structure is confusing to screen reading technology and most website visitors.

Re-thinking how you present links on your website actually provides the opportunity to lower bounce rates, improve the user experience, and increase conversions because you are providing context to what will happen when they click.

PRO TIP: When structuring your links, opt to change your “click here” links with the piece of content they will receive when they click, or create a full sentence. For example, a “click here” link under a heading for the school calendar can be changed to “click here for our academic calendar,” or just “academic calendar.”

4. Follow Standard Page Structure

Screen reading technology reads pages in a logical order: H1 (Header 1), H2, H3, etc, which means appropriately structuring your page helps people relying on the use of AT, more effectively understand your content. However, in all cases, this is also a best practice for providing scannable and easy-to-digest content. No one enjoys reading paragraphs of text, especially on mobile devices. 

When building your website pages, follow this simple outline to improve the readability of your content for everyone:

H1: This is your page title. It is important for SEO and to help website visitors identify where they are on your site off-the-bat. You should only have one H1.

H2: This is your page’s subtitle, value proposition, subheader, etc. Depending on the length of your page you may have more than one (like this blog post!), but it is okay to also have just one.

H3: These are used to divide up chunks and segments of content. Having two or more on a page to break up a paragraph, lists, etc. is helpful.

H4 and H5: If you find yourself needing your H4 or H5, be sure they are used for structural purposes and not design purposes.

5. Test Your Links Before Publishing

A simple, but often a forgotten step in the content publishing process is checking out links. Broken links make content inaccessible and downright confusing (and frustrating) for all website visitors.

6. Don’t Use PDFs.

Need I say more? Use HTML whenever possible. It allows you to create more accessible content that can be easily updated as needed.

Back in 2016, I wrote an entire blog on why PDFs are never a good idea for school and district websites — from responsiveness and accessibility issues to the cumbersome nature of adding them to your site. You can read that blog here.

Key Takeaway

Web accessibility isn’t just about adhering to WCAG guidelines to avoid a fine — web accessibility is about helping all schools and districts improve the overall experience on their site.

ABOUT THE AUTHOR

As Finalsite's Content Marketing Manager, Mia shares innovative and helpful content that helps schools and districts create captivating online experiences that increase brand awareness, student and faculty retention, and school-to-home communications. With more than five years experience in the industry, Mia has written more than 200 articles, eBooks, and reports about best practices for schools on a variety of topics from social media to web design. As a former TV and news reporter, and wedding photographer, Mia specializes in sharing how to use storytelling to power your school's admissions funnel. When she isn't busy creating content or hosting her #LIKEABOSS Podcast for FinalsiteFM, you can find her hiking with her Boston terrier, running an army wives meeting at Fort Campbell, or enjoying a well-deserved savasana on her yoga mat.