Spring Cleaning: the accessibility benefits of a little spring cleaning on your website

When you dedicate some focussed spring cleaning attention on accessibility problems that have creeped in over the past year, you can end up with a vibrantly accessible site that sparkles with inclusion.

After a long winter of stagnation and the slow buildup of grime, there’s something kind of magical about the transformation some good spring cleaning can bring about in your home. Getting a handle on the general clutter you wage war against every couple of weeks throughout the winter, and indeed all year long is important, but it’s the removal of the underlying grime that you usually don’t get around to that really makes it magical. By the same token, you can come to have a vibrantly accessible site by focussing on it more deeply every spring with an in-depth accessibility review or audit.

Your site was accessibly clean… a year ago

As you’ve read through our series on accessibility, and applied it to your site, you’ve done many things to establish a pretty good baseline. You established procedures to make sure your staff knows how to add alt text to images and properly use headings. You’ve made sure every part of your site is keyboard accessible, and made sure your focus styles are flashy and easy to follow.

You did some basic screen reader testing and are even using continual monitoring on your site. You made sure your site’s accessibility statement clearly states your intent to be fully accessible, and gave an easy method for people to contact you with their concerns. In short, you’ve taken all our advice since we started posting on accessibility issues several years ago, and even got a full audit a year ago. You should be set, right?

We’re glad to hear of your efforts, and it’s true you’re off to a great start! You need to know, though, that just as grime throughout your house builds up in those out-of-the-way corners that you don’t notice or think about all the time, accessibility grime tends to build up in your site, too.

That’s why accessibility monitoring is so valuable, like that done by our partner Accessible Web, with their web accessibility checker and monitoring service. We here at SeaMonster Studios can get you set up with the lite version of that for free. Remember, though, that automated tools generally only catch about 30% of potential errors. They’re some of the most egregious and limiting errors, so automated scanning and monitoring is tremendously valuable, but they can’t take the place of a thorough manual review.

If you’ve already had a comprehensive review by us or some other agency that specializes in web accessibility, successive reviews will go more quickly since the reviewer will know the site and where to look for new grime, so it may cost less than the initial review. Even if it doesn’t, though, it’s surely a bargain compared with the costs of any lawsuit you might be called to answer for because of inaccessibility. Besides, the federal government will cover half of your costs through the Disabled Access tax credit that we wrote about earlier.

Time for some Spring Cleaning you can do yourself

Even before you get another manual review, though, there are some things you can begin to look at and fix. Doing some spring cleaning will reduce the lift the reviewer will have, as well as the remediations you’ll have to do later.

There are various types of accessibility grime you’ll want to focus your spring cleaning attention on, but we’ll look at three areas especially: new content, dynamic media, and tech updates. If you hit these three areas, it’s likely your reviewer will sail through your site, and may turn up a few things that need attention, but will be able to skip a bunch of the little errors that often fill up the review reports and make them look so daunting.

New Content

The first area prone to grime buildup is new content. This may take the form of new posts, new pages, or even updates to existing posts and pages. If there’s content that has been added to your site since the last time it had an accessibility review, there’s a chance that accessibility problems have crept in with it, so you should figure out which content is new, and check several aspects of it.

Images

One of the most common things that people working on your site forget to add is the alt text that lets screen readers read out the description of an image to their blind or visually-impaired users. Remember all we said about alt text in "Seeing is Believing 3", but simply remembering to add something as alt text is the most important thing here.

Any alt text is better than none, because the best that can happen when you leave it blank is that the screen reader will skip the image entirely, and the worst that can happen is that it will break the validity of the page entirely. Neither are good outcomes, so you should just add the alt text!

Links and Buttons

A couple things can go wrong with your links and buttons. The most common is that their text may not be a good indication of where the link or button is leading. To help screen reader users to navigate the page more efficiently, screen reader software can give its users a list of links on the page and read them out one after another, as we explored in "Reading to Sharks." This can be pretty helpful, but about the third time they hit a “click here” or "learn more" link with no indication of what it’s going to do, you can imagine it would seem pretty useless to go through the other links in the page.

Another thing that often goes wrong with links is that they’re set to open in a new window without announcing that it’s going to happen. I know the conventional thinking goes that if visitors navigate away from your site through an external link, they may never get back to it, whereas if they just flip to a new window, then they can come back to their original window and resume their visit.

Unfortunately, if you don’t announce to your visitors that the link will open a new window, some visitors, particularly those on screen readers, may be confused as to what just happened, and how to get back to your site. They might try the back button, which won’t work if they’ve just popped open a new window. Once they figure out they’re in a new window or tab, there’s the new challenge of figuring out how to get back to the other window or tab. I imagine many end up, like me, with a tab explosion and more tabs than we can easily go back through.

People, both on graphical browsers and screen readers, know how to open a link they’re about to follow in a new tab or window themselves if they want to, and then they’ll be expecting it and know how to get back to where they were before. You really shouldn’t make this choice for people, and if you do, you should alert them to the fact that that’s what’s happening.

The best way to do this is to add a parenthetical statement inside the text of the link itself, saying “(opens in a new window)”, or something like that. Alternatively, you could include an icon at the end of the link, like the ubiquitous new-window icon that is generally recognized by sighted users as an indication that it’ll open in a new window, and you can give this alt text of “opens in a new window”.

If you use the icon, you should really give it and the link unique ids, and give the link an aria-labelledby attribute equal to its id and the id of the icon. See in the code below how much more convoluted this is than just including the words “opens in a new window” in the text of the link? That’s why I prefer the simpler method unless there are design considerations that call for the icon.

Included text:
    <a href="/the-joys-of-spring-cleaning" target="_blank">The Joys of Spring Cleaning (opens in a new window)</a>

Visual icon:
    <a href="/the-joys-of-spring-cleaning" target="_blank" id="joys" aria-labelledby="joys open-icon">The Joys of Spring Cleaning <img id="open-icon" alt="opens in new window" height="20" src="../_files/new_window.gif" width="20"></a>

Dynamic media

Another thing that gets a frequent update on websites generally is dynamic media. This may come in the form of videos inside of blog posts, instagram or facebook feeds, or even dynamic ads that the website owner may not have any control over.

Videos

While videos can be very engaging, as we pointed out in last month’s post, "Shadow Puppets," they do need to be done right. You should make sure that your videos have accurate captions, and potentially transcripts, but from a compliance perspective, you may also need to make sure that they are embedded correctly.

You, or whoever put the videos in, may have just copied and pasted the video embed code from the video itself, which will usually end up being just fine. Sometimes the video service’s embed code is missing one part, though, so it’s important to double check that the codes have it.

I’m talking about the title attribute, without which the video player won’t be properly announced to screen reader users, which could lead to confusion. Just make sure that in the iframe code there’s an attribute that says, title=”YouTube video player”, or something similar.

Insta and Facebook

Embedding your social media feed can be a great way to expand your reach using those platforms, but doing that makes it more essential that you take the steps to make sure those posts are fully accessible on the platform in the first place.

If you have accessibility issues in the original posts on facebook and Instagram, it’s likely those will translate over to problems on your website, which may have a larger effect. I recommend following the California State University San Marcos guidelines on facebook posts, and their guidelines on Instagram posts.

You should double check to make sure that whatever service you’re using to embed the feed faithfully includes such things as alt text. To do this without a screen reader, you can open your browser’s inspector (usually right-click anywhere on the page and select “Inspect” from the options, or if Firefox, “Inspect Accessibility Properties”).

In addition to checking the general embed of your feed, you should also go in and look at any specific place you’ve embedded an individual post, like in your own blog posts. It’s likely, unless facebook and Instagram have changed their embed procedures by the time you read this, that the iframes they embed into will be missing the same title attribute as I mentioned above with video services, and you’ll need to add that.

This is an easy enough process with facebook, since they give you the actual iframe code to use, to which you can simply add a ‘title=”facebook post”’ attribute. Instagram has so far proven to be a little trickier, since they give you an embed code with a lot of extra information that they then turn into an iframe using some javascript they also give you to embed. The result is that you can’t directly change the iframe code to add a title to it.

You can fight javascript with javascript, though, by adding this snippet right after the bit they give you:

    <script>
        window.onload = function() {
            setTimeout(function () {
                let instaPost = document.querySelector(".instagram-media-rendered");
                instaPost.setAttribute("title","Instagram Post");
            }, 5000);
        };
    </script>
        

If you add more than one insta in the same post, you’ll need to include the following code, to add the title to all the posts, though it will only need to be included once:

    <script>
        window.onload = function() {
            setTimeout(function () {
                let instaPosts = document.querySelectorAll(".instagram-media-rendered");
                for (let i = 0; i < instaPosts.length; i++) {
                instaPosts[i].setAttribute("title","Instagram Post")
                }
            }, 5000);
        };
    </script>
        

Ads

Another place accessibility grime can creep in is through any ads that are paying you to display them on your site. The first way that these can cause problems is by doing the same thing that some of the videos and social media embeds do, or don’t do, which is to leave the title off of the iframe code. You can fix that easily enough by using either the direct-add method per the video section above, or the dynamic javascript method per the social media section we just went through.

The second way that ads can introduce inaccessibility is more pernicious than the first since it’s more difficult or even impossible for you to fix, and would require the ad company to do it. This is that some ads use motion tactics that can be sometimes overly distracting to people with cognitive disabilities if the motion is continual and used to simply draw attention to the ad. Other tactics ads may use may be downright dangerous to some people with vestibular disorders if the motion uses parallax for the wow factor.

For these problems, about the only thing you can (and should!) do is contact the company directly and make your request that they fix their accessibility. If it’s a large firm you’re working with for your ads, they will likely understand exactly what you’re talking about, and will probably tell you that they already have plans to fix it.

Please hold them to it. Let them know that you’re working hard to make sure everything in your site is accessible, and that their ads are standing in the way of that. You could ask them to make their ads respect the prefers-reduced-motion media query, and to make sure that any autoplaying videos have a pause button.

You can ask them specifically when they intend to have those fixes implemented, and then set a task for yourself to follow up with them in the timeframe they mentioned. You don’t need to worry about being a pest about it. If you don’t call on them to make sure their apps and widgets become accessible, and you are committed to accessibility, you would need to find another vendor if they don’t, so they would lose your business as well as the business of any visitors with cognitive disabilities.

If you’re still worried about feeling like a pest, though, feel free to tell them that Captain Accessible (that’s me, Deneb Pulsipher) sent you and is willing to offer guidance on how to make their widget accessible, if they want to email me with questions.

Tech Updates

The last area I’ll briefly mention as one needing attention is one which may be beyond the lay person’s ability to really measure or do anything about in terms of errors. This is the area of tech updates to plugins, platforms, and underlying technologies. To keep your site safe, you should definitely update this sort of tech as often as updates become available. Just be aware, though, that sometimes the updates of plugins, services, or platforms that you use may include new accessibility problems.

Thankfully, the current direction things are moving is towards greater accessibility, so updates will likely include fewer accessibility problems than before, though this isn’t always the case, and any change should be met with caution and heightened vigilance on the part of the accessibility-conscious. Just mention to your dev agency, though, that you’d like to have them check the new tech updates for accessibility, and they will.

Annual Review

Once you’ve done some spring cleaning on your site and checked for and fixed as many of these problems as you can, you’re likely ready for your next manual audit or review of your site performed by your web agency, if they’re specialists in web accessibility, or by the accessibility genius of your choice. As previously mentioned, if you use the same vendor as before, this follow-up review is likely to go more quickly than before, and so be less expensive.

However much a new accessibility review or audit ends up being will really only cost you half as much as it seems, since you’ll get half of it back when you claim the Disabled Access tax credit. Even if this review carried a premium rather than a discount, though, it would still be worth doing for the avoidance of a far-costlier accessibility lawsuit. It's even more worth doing for the establishment or deepening of your brand identity as one that values accessibility. Spring cleaning can be one of the very best ways to do that!