Four Accessibility Mistakes Your Credit Union is Probably Making

Although website accessibility is a hot topic, many credit unions and web developers are still not very familiar with best practices for website accessibility. We continually examine a large pool of credit union websites for accessibility and have found that there are some common mistakes found in HTML, CSS, and JavaScript code that are often overlooked. Here are four of the most common accessibility issues found on credit union websites and how to solve them.

Mistake 1: Contrast Compliance
Contrast is defined as the perceived brightness between two colors. The brightness, or luminance, difference is expressed as a ratio ranging from 1:1 (white text on white background) as worst, to 21:1 (black text on white background) as best.
Many web designers believe that if they can read text or see a link clearly that everyone is able to do the same. However, even if the contrast difference is significant, the contrast must be tested for WCAG (Web Content Accessibility Guidelines) compliance.
Contrast ratio minimums exist for people who are not only colorblind, but have blurred or low vision. As the population ages, technology will see an increase in internet users with low vision, which means that designers should pay extra attention to contrast ratio. Don’t make this mistake!

  • Quiz yourself:

Q1: Is the above text accessible by WCAG standards? A1: No, the contrast ratio is only 2.60:1 while it needs to be at least 3:1 for large text.

Q1: Is the above text accessible by WCAG standards?
A1: No, the contrast ratio is only 2.60:1 while it needs to be at least 3:1 for large text.

Mistake 2: Keyboard Focus Indicator
Because most websites are surfed with a mouse, it is easy to forget that internet users with mobility disabilities may opt to use a keyboard instead of a mouse. These users typically use the Tab key to navigate interactive elements on the page such as links, buttons, or input fields.  This means that websites must be designed so that any clickable element (such as a link or button) must be visually different when in “focus” via keyboard navigation.

  • Quiz yourself:
    Q2: Can I make sure a clickable element is compliant by visually seeing a color change if I hover over it?

    A2: No, the best way to check clickable elements for compliance is to use the tab key to navigate the page and check for a ‘focus indicator’ - visually specifying the element is clickable.

Mistake 3: Accessible Popups/Expandable Buttons
When considering keyboard accessibility, another concern is the usability of popup and expandable buttons. Some examples of these elements include mobile menus and dropdown menus that appear or enlarge when clicked.  
This requires specific code within these features so those using screen readers are able to understand the functionality of elements they are interacting with.

  • Example:

This screenshot is how one would expect a screen reader to identify a collapsed menu button.

This screenshot is how one would expect a screen reader to identify a collapsed menu button.

Mistake 4: Clarity in Hyperlinks
It is important that hyperlinks are easy to understand and make logical sense. Many websites use terms like, “Click here!”, “Learn more”, or “Follow this link” for their hyperlinks with little-to-no context of where that link is directing to. With this, a screen reader user will not know where the link is heading and whether the link leads to a page internally or to a different website. This is one of the most frequent mistakes we see on a daily basis.

  • Quiz yourself:
    Q: Rank each link example from best to worst on a scale of 1 (most accessible) to 3 (least accessible).
    a: Click here!
    b: Click here to go to our home page!
    c: Visit our home page for more information.

    A:
    1:C
    2:B
    3:A

While these may be the top 4 common mistakes we see on websites, they are not the only ones. If you are unsure if your website is fully ADA Compliant adhering to the WCAG 2.1,level AA you should reach out to a credentialed expert to find out. Look for a firm that employs folks with a CPACC (Certified Professional in Accessibility Core Competencies). The IAAP (International Association of Accessibility Professionals) website is a great resource as well to learn more about ADA compliance.