When it comes to engaging audiences with accessible websites for schools, providing an experience that allows everyone to access your content is not just a “must” — it’s a legal right.

Ensuring your site stays within the accessibility guidelines of the Americans with Disabilities Act (ADA) requires putting best practices in place, and having quick access to your content management system (CMS)'s accessibility tools. Tools like an ADA compliance checker, proper heading use, and searching for images without alt text, make it easy for your web pages' content to stay accessible and engage a wider audience — a solution that doesn’t require extensive training, meets or exceeds ADA requirements, and avoids complaints from the Office for Civil Rights (OCR).

Let’s run through some general strategies and tools that you can use to help breakdown barriers and create a better user experience for all, including those that are built directly into Finalsite’s content management system, Composer, that make web design updates easy and accessible for admins and users alike.

Image alternative text

Images may not always be accessible to people with disabilities for reasons that are out of your control, and accessibility issues apply to many more people than just assistive technology users or people with disabilities. Some users may have very slow internet speeds, or limited bandwidth each month and could choose not to load images unless they opt-in. Some users may be behind a VPN or firewall that prevents images from loading at all. 

In any case, you still want your visitors to understand what additional context or information your images would provide. That’s what alternative text (or alt text) is for! Screen readers look to the alt text property on your images when they read out the description for them, and likewise, the alt text is what is displayed to visitors when the image fails to load for any reason.

There is a bit of an art to writing proper alt text, and while it’s not difficult it may be counterintuitive at first. WebAIM has a fantastic article about alt text specifically covering different scenarios and how that changes what alt text you’ll want to write for your images.

So, how do you manage the alt text for your images? Below are two screenshots highlighting where you can change your alt text in Composer.

Above is the Image Properties panel. When using the content editor in Composer, you can right-click on an image and select Image Properties. This panel will allow you to modify the alt text for that image specifically in that location. This will not change the alt text for the image in your resources, and it will not change the alt text for that image if it is located in multiple places. You should get used to opening this panel to update your alt text each time you use an image, because the alt text needed for an image may vary depending on the surrounding context.

Above is the Resources page in Composer, filtered down to all of the images that do not have a default set for alt text. Having default alt text for the images you’ve uploaded to resources is a great way to reduce the effort needed in modifying your alt text in your content later. When you have the default alt text set in Resources and then use that image somewhere in your content, it will automatically have that alt text applied to it. This is especially useful if you plan on using images in multiple locations, like in a gallery and in the page content.

Link language

Link language is probably the second most important accessibility concern that you need to have control over. If you have good eyesight and browse websites without any assistive technology, this may not have even crossed your mind! 

When we’re talking about link language, we’re mostly concerned with words or phrases that provide no context to what the link does such as “click here,” “read more,” or “apply to volunteer.” Looking at this from the perspective of someone using a screen reader and keyboard navigation, we can really get a sense as to why this language can be a major pain point (though it can affect many other users, including those with cognitive or reading disabilities). 

Let’s take a look at an example to make this a little more user-friendly.

• Click here to volunteer at our concession stand
• Click here to volunteer at our ticket booth
• Click here to buy tickets to the football game

As a user hits their tab key to jump through all of the links on a page, they will not have the surrounding text to provide additional context for these links. This is especially frustrating when multiple links are all read aloud as “click here,” or when a frequently visited page has been updated and the order of the links has been changed. 

In the example below, if I’m used to navigating to the third ambiguous “click here” link to buy my tickets, but the page has been updated to include another option, I’d end up selecting the wrong link.

• Click here to volunteer at our concession stand
• Click here to volunteer at our ticket booth
• Click here to view our food and drink menu
• Click here to buy tickets to the football game

Not to worry though! All of these links can be made accessible very easily by simply changing the language.

• Volunteer at our concession stand
• Volunteer at our ticket booth
• View our food and drink menu
• Buy tickets to the football game

Now each of these links clearly states their purpose, no matter the order they appear on the page or the surrounding text.

Proper use of headings

Headings are used to visually and semantically break up a page between different sections. There are six different heading levels, H1 being the largest and H6 being the smallest, and should be used in a hierarchy. The picture below depicts the appropriate use of different heading levels.

Not only does the proper use of headings make your content look more professional and organized, but it also has a few other added benefits for your website. 

Search engines take your headings into consideration when indexing your webpages, and improper use of them may make the snippets that appear below your search results grab the wrong bits of text. 

Additionally, some assistive technology programs have rotor functionality that can make navigating through dense webpages much easier. This allows someone to look at a list of all the headings on the page and jump directly to the sections that they are most interested in. It’s very similar to how you might scroll through a page until you find what you’re looking for.

Accessibility checker in the editor

Probably the handiest tool in your kit is the accessibility checker in the editor, which is very similar to automated scanning tools. Once you’ve finished adding content to a page using the editor, you simply click the button to run the accessibility checker and it will scan through everything you’ve written to find common issues and suggest improvements that you can use with the click of a button. It will look for things like:

• Alternative text on your images
• Heading structure
• Tables without headers
• Link language
• Improper use of lists
• And more!

Below are a few images showing how the accessibility checker will point out issues and suggest fixes.

PDFs, videos, and third-party content

Finalsite does a lot to help you make sure that the content on your website is accessible, but what about documents you upload and embedded third-party widgets? Whether we’re talking about PDF documents, YouTube videos, or embedded social media feeds, it’s important to remember that each of these is going to have its own set of accessibility concerns that can and should be researched and addressed. 

For PDFs, you’ll need to make sure that the document is properly tagged and formatted so that screen readers are able to see the content (some screen readers simply announce “empty document” if a PDF is untagged). 

Videos require captions and should also provide descriptive transcripts for those who can’t watch your videos. Other platforms and types of content may have other requirements that you should make yourself familiar with if you are going to use them on your site.

An important note to remember here is that not all of your content needs to be directly accessible. For example, if you put a YouTube video with no captions and no transcripts on a page, you can simply include all of the information in the video in the text on the page as an alternative. However, in the long run, you will likely save yourself a lot of time if you endeavor to make all of your content accessible in the first place.

Key takeaway

Your website is the core of your digital communications and ensuring those communications and content can be accessed by all is key. With these best practices in mind and the easy-to-use tools found within the Finalsite CMS platform, you can ensure accessibility for all.

ABOUT THE AUTHOR

Nicholas Ivanovich is the accessibility engineer at Finalsite, having joined the team from SchoolPointe in mid-2021. Nicholas has worked closely with the Office for Civil Rights under both companies and has personally coded and tested many accessible solutions.