Credit Union Website Accessibility

Why do credit union websites need to adhere to accessibility standards?

There is a civil rights law that says private and public businesses must make accommodations for Americans with Disabilities. This is called the Americans with Disabilities Act (ADA).

However, there is a gray area in the law that creates a battle between credit unions and lawyers out to make a dollar. This gray area allows lawyers to take credit unions to court where they try to prove that the credit unions website is not accessibility friendly. Meaning certain people with disabilities might not be able to use the website properly. However, currently there is no (internet) law that forces business to make their online presences an accessible place. If lawyers can pick on credit unions, they could essentially pick on everyone. Here is the ADA Website Accessibility Checklist.

As a web designer, this can be a very high risk responsibility to take on. There are developers willing to take those risks and make an accessible website, however, they are extremely expensive. So much so, that the penalty for not having an accessibility friendly website is cheaper than paying for the service itself.

What do people with disabilities need online?

People who have disabilities all have different ways they need to access the information online.

Visually impaired people such as Blind individuals might need to feel the braille keyboard and hear the words of the website read out loud to them thru a screen reader application. They typiclaly use keyboards and screen readers.

Photosensitive individuals can’t be irritated by certain colors that could invoke a seizure. Or individuals who have color blindness might not be able to see some of your content the way it was meant to be seen. Making sure to make color friendly, high contrast web design will make reading easier for everyone.

1. Do not use sliders

Sliders are not accessible friendly because they generally are image driven and the information cannot be read by some screen readers. Which means, if there is text inside your image, screen readers won’t be able to tell your disabled customers about it.

2. Use semantic code

Semantic HTML allows us to more properly organize our content by type for web browsers. Making sure you use semantic code is also very SEO friendly. It allows you to separate a blog post from a page by tagging it as an ‘article’. Headings, paragraphs, quotes,  citations, code and italicized elements are properly structured for development.

If you are using the divi theme, out of the box, the divi theme utilizes semantic code.

3. User proper website structure.

Use headings and paragraphs with clean hierarchal organization. Heading 1, Heading 2, and Heading 3 respectively. Randomly adding these headings outside of the normal DOM structure is not good development or design.

4. Include Alt Tags in Images

Screen readers can’t read images. So we must make sure we fill out the ALT tag so that we explain what the picture actually is for those screen readers. Explain what the picture is, so that it sounds natural to a person who is blind.

Although, there is special software created called (OCR) Optical Character Recognition. It can attempt to read the text that is embedded in a picture. Such as taking a photo of a hand written letter. It’s picking up quickly and hopefully in the future, it becomes a standard.

5. Set Tab Index to Forms

Adding a tab structure to your forms helps those using a keyboard easily scroll thru each input in the form and navigate the way you intend them too. Here is a way to add a tab index to Gravity Forms.

Check your entire website by using the tab key. Where does it navigate? Is it naturally going thru your website navigation menu properly? Or is it jumping all over the place? If you see problems, that means your disabled visitors are going to have a tough time too and might not bother using your website at all.

6. Be mindful of colors

High contrast websites are typically easier to read. The use of white space and text should be utilized universally for all visitors. Refrain from making websites that have too much red or green and are made entirely of those colors as there are individuals who suffer from red/green color blindness and they might not get your message the way you intend.

7. Be mindful of AJAX and Infinite Scrolling

Any code that doesn’t create a page refresh will make it difficult for screen readers to understand what is going on. You can use ARIA attributes to modify your content so it’s more accessible. It allows you to apply roles to different elements of the website so that you can identify and organize content for disabled individuals.

8. Do not autoplay videos or music

This is a common design no-no that should be beneficial for all visitors. We do not want websites to interact with us unless we allow them. Having a website blast music or sound that we do not want to hear is annoying for everyone. Especially someone with disabilities who might have trouble navigating a way to turn this off.  Just don’t do it.

9. Google AMP Pages for Accessibility

AMP pages are generally used for speed purposes. But, because the AMP is modified for speed, naturally that specific design interface is simplified for your Accessibility readers. The text is usually very contrast friendly and when designed right, removes unnecessary elements that aren’t needed when reading an article on your website. AMP  can also be applied to pages and you can retain your themes original design, so when I mention this, I’m leaning more toward simplifying your articles for optimal reading.

There is some controversy with Google AMP and SEO. So please be mindful of this before digging into that wormhole.

Accessibility Plugins for WordPress

If you are a Divi theme users, there is a plugin that will help with making your website ADA accessible. It’s called Divi Accessibility and is free to use.

Other free plugins that can be used with any WordPress theme include:

• WP Accessibility 
• Genesis Accessible
• One Click Accessibility 
• Accessibility by UserWay
• Contact Form 7 Accessibility 
• Accessibility Poetry
• Accessibility Helper
• Screen Reader Accessibility Tool

Resources

• Overview of the W3C Web Content Accessibility Guidelines (WCAG): http://bit.ly/2Vqihsf
• WCAG 2.1 recommendations: http://bit.ly/2ArceuL
• Free accessibility Udacity webinar by Google: http://bit.ly/2SzYzZ6
• Accessibility guides on web.dev: http://bit.ly/2VqzjXe
• Accessibility report on HTTP Archive: http://bit.ly/2s6Jkvq
• The importance of accessibility in product design: http://bit.ly/2VjoiXA
• 3 tips when designing for accessibility: http://bit.ly/2R5xMan
• Tools for surfing the web fro people with disabilities
• Web Accessibility Tools for Analyzing your Site