Three requirements besides alt text to consider for an ADA accessible school website

As Section 504 schools are seeing website accessibility become more and more enforced state by state, we are learning there are more important things to look for besides just having all your photos alt texted. (Alt text describes the image to someone who is unable to see the image because they are visually impaired or because the image was unable to load.) Having a school website that’s accessible means everyone—no matter their ability, language, or device use—will be able to have a similar experience with the information you are sharing with your community. Here are a few items that sometimes get overlooked when trying to create digital equity for your school.

1. Mobile-responsive vs. mobile-friendly

Part of being ADA accessible means the information on your site is available to your community no matter what type of device they are using to navigate the site. You may be thinking, we have an app, it doesn’t matter if the website is mobile-responsive—but remember Section 504 in schools. The truth is that now mobile platforms support accessible features, so if your site is not mobile-responsive, not only will your site not be available on all platforms, those accessibility features may not work on mobile devices. 

How do you tell if you have a mobile-friendly or mobile-responsive website? Both sites will pull up if you type the URL into your phone browser. However, if you access the site on your desktop, an easy way to tell is to take your mouse and drag the window smaller. Does the site shrink down as your screen becomes smaller? Make your screen the size of a phone screen, how does it look? Sometimes the site will shrink to tablet size but then not all the way down to mobile. Another way to tell if your site is truly mobile-responsive is when you access it on your mobile browser, the URL should change. 

Example:
We remember North High School from a previous blog. They have a site that is mobile friendly, not mobile responsive. When you type https://www.NorthHighSchool.org into your mobile browser and hit search, you get a “/m”. If you access https://www.NorthHighSchool.org/m/ on your desktop, it’s a completely different user experience. You now know the site is not mobile-responsive because you are viewing a different version of the site. This is also confusing to search engines because you have two competing sites. Accessibility aside, you can imagine that this could be impactful on your SEO as well as not being equitable to all users and all devices.

What is a mobile-responsive site? A mobile-responsive site means all design aspects on the desktop version come over to the mobile version. To create a truly equitable experience for all your users, have your site coded to be mobile-responsive, not just mobile-friendly.

2. Closed captioning tool vs. YouTube closed captioning

Section 504 in schools requires auditory help in the classroom. Don't forget about your school community outside of the classroom. Closed captions are required for ADA friendly websites. They also help people with situational accessibility. Picture this: you are on an airplane and you forgot your headphones. Instead of being like the couple in front of me who watched five hours worth of episodes of The Office on full volume, you could turn on the closed captions. This applies to school websites as well. Many schools do a weekly or even daily video announcement from the principal. If there isn’t a closed captioning feature built into your website platform when you upload videos, the video won’t be accessible. Even if you are a school not concerned with accessibility, having closed captions and a transcript feature is great for SEO—it’s more content for Google to find on your website. 

Of course you can always use YouTube and their captions. The content of those captions will be housed with YouTube. The deterrent with not using your own video player is you never know what ad or suggested video will display after the video has played. That’s not a fun game to play when district leader contracts are being renewed. 

3. Integrations vs. embedding: which one is better?

Embedding anything onto a website, you are relying on another company for the code—and the accessibility settings of that code. To ensure true accessibility, integration or uploading something directly onto your site is more reliable.₁ If you’re tabbing through, the keyboard rules could be different if something is embedded vs. a built-in video player. This means the play button would, or could be different every time. Most schools are not in the position to have someone take the time to read the code to find out what the accessibility settings are. 

Language translation plays an important role in accessibility. Did you know that alt text translates when you are translating the webpage? A way to ensure all of your content can be translated is to have it integrated on the site instead of just embedding it. Embedding means you have just copied and pasted the source code on your website. Not all source code is coded correctly for mobile responsive and also for accessibility and translation. Also, some screen readers may have trouble reading embedded code.  

See the example below the embedded Google Calendar doesn’t translate, when the rest of the page is translated into Spanish.

Integration means the information you are sharing looks like the website itself. See the two calendar examples below for an embedded Google calendar and an integrated Google calendar.

The integrated version is easier to read, translatable, mobile-responsive, and you can tab through it. You are also able to connect it to your own personal calendar, or even subscribe in this case. 

ADA friendly websites do not recommend posting a PDF as a calendar: it won’t translate or be mobile-responsive. Although it may be cute on your families’ refrigerator doors, it will not be easy, equitable engagement for everyone.

Website accessibility spans beyond using alt text. Always confirm with your provider that your site is mobile-responsive, not just mobile-friendly. If you are using videos, try to upload the video directly instead of embedding through a video player and confirm that there is a built-in tool for closed captions. Isn’t it nice when everything works together? Integrations are always easier because you do not need to update a widget, or trust the accessibility settings of a third party. 

Section 504 schools are working to eliminate discrimination, that includes your school's website experience. In the words of Stevie Wonder, “we need to make every single thing accessible to every single person with a disability.” In our goal to be inclusive, create digital equity, and be compliant—let’s start with making your school’s website more accessible. 

_{1 https://webaim.org/blog/future-web-accessibility-html5-video/}