Blog

Web Content Accessibility Guidelines (WCAG), or ADA web standards, help ensure websites can be accessed and used by everyone. Disregarding these guidelines makes it difficult for users with disabilities to use your website. It also leaves your financial institution or business at risk of a lawsuit.

So what can you do? Ideally, you’ll want to have your website reviewed by a team of web designers who know how to build a website with ADA standards in mind. LKCS’ web team has gone through extensive training on this topic to make our client’s websites better. We’ve asked a few of our designers to share tips on how you can make your site ADA-friendly and keep it that way as you make updates.

A Sound Structure is Vital for your Website

Users who rely on assistive technologies need a solid, well-thought-out structure to navigate your site successfully. Proper use of header tags (H1, H2, H3, etc.) is essential. Often, people unfamiliar with ADA compliance use header tags to style a webpage visually. H3s are used before H2s or H6s are placed immediately after H2s. This can lead to confusion for screen reader users.

It’s best to think of content on a page as a table of contents. H1s describe the overall content. The main topics are then divided into sections with an H2 describing each one. These sections can be further divided into sub-sections using H3s, H4s, H5s and H6s. Keep in mind that each heading subdivides the heading immediately before it. H2 sections can be divided into H3 sections, which can be divided into H4 sections. H2 sections cannot be divided into H4 sections directly. Taking a few steps to organize your information into a hierarchy makes it easier to find important information quickly and easily. This leads to a better user experience, which benefits everyone.

– Chris Guadiana, Visual Communications Designer

Passing Text Color Contrast

One of the most important aspects to focus on when thinking about Website Accessibility, is ensuring the proper text color contrast. The reason this requirement exists, is to help those who have a sight disability such as color blindness. When choosing colors, you will need to make sure that there is a 5:1 ratio between the text color and the background color. The easiest way to test this, is by using an online tool such as WebAIM’s Color Contrast Checker.

– Ryan Simonsen, Web Designer

Writing Understandable Link Text

We’ve all seen the links on websites that say “Click Here” or “Learn More”. These types of links are serious road blocks for people that use screen readers. Not only that, they are also missed opportunities for people that do not use screen readers. Users that navigate your site using a screen reader have the option to have each link on the page read to them. If you have 8 links on a page and they all say “Click Here” they’re not going to know what link will take them to what content. Imagine your GPS telling you to “turn” but not telling you left or right. You would most likely not end up where you want to be.

Link text needs to make sense when it’s read out of context. So instead of something like “Click here to learn more about auto loans” content should be written in a way that relevant words can be linked. This example would benefit everyone, “At our financial institution we’ll find an auto loan to work within your budget.” When the words “auto loan” are linked, users that rely on screen readers would know they are going to a page about auto loans. Users that don’t rely on screen readers may skim the content on the page, reading only the links. If all your links say “click here” that would force them to read the content around the links. At that point most users would abandon the page and move on.

– James Markey, Lead Web Designer

Effective Use of Alternative (Alt) Text

The Alt Text adds a text description to an image on a web page. Its purpose is to allow screen readers to describe the images to visually impaired readers. When writing alt text, Keep these thoughts in mind:

• If the image is functional or informative, be descriptive and specific.
• If the image contains information the user would miss if removed (example: Mortgage Loan featuring a special rate) then include all of the information so the user receives the same information the sighted user would read.
• It is also recommended that the character count is around 125 characters.
• If the image is decorative (image only and does not provide content), the alt tag must still be included, but should be empty (alt=””).

– Karen Riva, Web Designer

Scanning Your Site Regularly

Using a tool to scan your site is absolutely necessary when you take your first steps into making your website accessible. What many don’t realize though, is that these scans should be an ongoing process as you move forward. The WCAG guidelines are fairly complex and it’s easy to make mistakes as you update your website (even for those who are well versed in them!). Scanning your site quarterly, or even bi-annually, will point out any errors that were made along the way and give you a chance to correct them. If you’re serious about keeping your site accessible, we fully recommend taking this kind of proactive approach to keeping your site within the WCAG guidelines.

There are many tools popping up out there to solve this problem, ranging from free to pricey subscriptions. Feel free to contact our experts! We can talk to you more about our scanning solution, or just walk you through what to look for when looking at these services.

– Tom Quesse, Web Designer