508 Compliance Checklist for your Credit Union Website

Let’s talk 508 compliance! If you need a refresher on what exactly 508 compliance is, click here and take a few minutes to refamiliarize yourself.

Refreshed? Alright! Now that you have a solid foundation of what it is and why you need to make sure your website is compliant, let’s jump into the below 508 compliance checklist to go over the basic necessities for your website.

508 Compliance Checklist

1. Compliance isn’t a one-and-done thing. You need to continuously update your site to align with compliance requirements. 

A website is constantly evolving. If you’re properly maintaining your site, you should be making updates and changes over time (and if you’re never updating your site – you need to start doing that!) Remember, any change to your website also must follow the WCAG guidelines.

Did you include alt-text for any functional images that were added? Did you make sure attachments, like PDFs, Word Docs, Videos, or PowerPoints, are compliant? Did you consider any new regulations around compliance? For example, if there’s new increased regulation when it comes to mobile, you’ll want to double-check if your content meets the standard. If your site is WCAG 2.1 compliant, when WCAG 2.2 (or any other future iteration of the standards) becomes the new standard, you’ll have to make your site compliant again. There are several factors that need to be considered for compliance on an ongoing basis. 

2. Get to know how to add alt (alternative) text to images.

Alt-text is used for a few different reasons. Some individuals with disabilities need to turn off images to comfortably maneuver through a website. Some visually impaired users don’t consume a website the same way that a user without that disability would. Without alt text, a person with a disability may not receive the message the image is trying to relay.

An easy example of this is if the image itself has text. A sighted user will be able to read that text, but a user with a visual disability may not be able to. Those users need to rely on alt text to tell them what that image says. Imagine a graphic that says, “Apply for our Auto Loans today”, which leads to a call or loan application conversion for your credit union. If the alt text isn’t there, the user won’t know it exists and might move on without taking any action. Let’s keep it simple – if the image has a purpose or a function, you need alt text. If it’s decorative and has no reason other than aesthetics, you don’t need to add alt text.

3. Accessibility applies to every resource your website touches. It isn’t just for web pages.

Content or features such as PDFs, Word Documents, PowerPoints, third-party chatbots, videos that require closed captioning, third-party login functionality, and other items all need to be accessible as well. Even if your website is pointing to a PDF or another type of resource from another website. That is still YOUR responsibility to make sure it is compliant because it is on YOUR site. You either need to make a compliant version of it and host it on your site (be aware of any potential copyright infringements) or connect with the site you want to use that document from and have them make the accessibility changes required.

Everything that makes it onto your site has to follow the same accessibility guidelines.

4. Give a warning to users when a link takes them to a new website.

The best practice for outbound links like this is to open them up in a new tab. When this is set up and the link is clicked, there’s a visual cue that you are no longer on the same site. To a non-sighted user, that visual cue is gone. If that same link were to be clicked and a new tab was to open, how would that user know that they are no longer on the same website? The things that they came to your website to find won’t be there. They may get frustrated and move on to another company.

5. Color contrast, color contrast, color contrast.

This is actually one of the easiest things for lawsuit-hungry people to flag and is one of the easiest items for you to change. Color contrast is the difference between a foreground color (typically text) and the background color. Color contrast applies to a variety of disabilities from color blindness to just really bad eyesight. If a user has a hard time reading something on your website, they WILL move onto another site. Another type of color or potentially visual contrast is the difference between a link and items that do not link. This is one reason why using underlines for links is a common practice.

One sticky situation is with company colors. Using your company colors is important as it is all about your brand. However, you need to consider the color contrast issues that could be presented when using them. 

Allowing all users to view and successfully navigate your site is far greater than any brand guidelines. How effective is your brand if someone can’t purchase from you because they can’t read content on your site?

6. There are a variety of ways that users navigate sites other than clicking a mouse or with a finger on a touchscreen.

Users need to be able to navigate your site in a variety of ways. Making sure your site can be navigated in an understandable manner is incredibly important. 

Keyboard accessibility in accessing a site is hugely important. There is a variety of software that mimics keyboard accessibility, as well. Joysticks, breath-powered apparatuses, braille keyboards that can actually read your website to a user, and others.

If a user can’t successfully use their method of navigating sites, they will move on to another site that they can.

7. The order of your Headings matters.

This is a code thing, so if you don’t know what I’m talking about, that’s okay. However, it’s just as important as all the other items. Talk to your web dev team to make sure your site follows the Heading hierarchy described below. 

Headings are typically used to break up your web page into specific sections. Many times, it’s used for aesthetic purposes, as well. However, the functionality of the headings is far more important than the aesthetics.

Heading should follow in order from top to bottom. H1 -> H2 -> H3 -> H4 -> H5 -> H6. You don’t need to use all of them, and you can go back up in whatever order you want like skipping back up from an H4 to an H2. But you shouldn’t skip from an H2 to an H4. That can make users with a disability feel like they missed something in between and may try to back things up to figure out what was missed. This is not a good user experience for them.

An example of a website following a good structure for headings would be in the following image:

Notice the order of things H1 -> H2 -> Paragraph Text -> H2 -> H3 -> H4 -> H3 -> H4 -> H2.

How to use headings for true reading order: 

H1: Every page, no matter what, should have an H1 on it. That’s usually (as it should be), the large text at the top of your page. This is like a book title. Every book has one and would be confusing without it.

H2: An H2 is like a chapter title. Your web page can have several H2’s (chapter titles) on it. This is used as a differentiator between sections of your web page. An H2 should be used if the next content does not directly relate to the previous H2. An example would be a services page where you talk about three different services. Those services are separate from each other, so each should use an H2 as its heading.

H3: An H3 is a great way to section off an H2. Think of them as sub-chapters. Going back to my example, say you are a web development company and you offer three services as mentioned above. Within your “Content Writing (the H2)” service, you offer three services. “Blog Writing”, “SEO Content Writing”, and “Web Page Content Writing”. Each of these could be sub-services of the overall H2.

I don’t need to go all the way down to H6, as you likely get the picture of what I’m getting at. In the grand scheme, just make sure your Headings are going down from H1 to your lowest Heading you have on the page in order without skipping one in between.

8. There are more disabilities to think about with a website than you realize.

Color blindness, blindness, hearing impairment, visual impairment, age-related impairments, autism, ADD, paralysis, combinations of impairments, and more. This makes 508 compliance really complicated. The hardest part is that some of the things you would fix for one disability may make it harder for another disability to maneuver through your website. This isn’t the case in most instances, but it can play a role in what you do for your site!

There are tools out there, like one that we offer through a partnership with accessiBe, that can really help individual users to tailor your site to their specific needs. We personally like to recommend website owners to fix and update their site to be as close to 508 compliance as they can. Using a tool like accessiBe is just the icing on the cake that makes your website that much more user-friendly for all.

If your credit union needs help implementing the above 508 compliance checklist, consider partnering with Ironistic! Contact us to learn more about our digital services.