← Resources

ADA Guidelines

Banno Knowledge

For client-facing ADA Best Practices, please reference the links below to access our online Banno Knowledge resources:

Resources

Color Contrast - See W3C Contrast (Min)

  • Reference Contrast Checker Resource

  • Do not rely on color alone to convey information users need to navigate throughout the site

  • “Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.”

  • WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text.

  • Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.

  • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

  • Incidental: Text or images of text that are part of an inactive user interface componentuser interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

    • Ex. icons used for subads do not need to meet min contrast ratio because the ad heading/links convey the information for users

Calls to Action (Links & Buttons)

  • Users should be able to identify/differentiate a link from the body text – links should have a visual cue besides color.

  • “Links should look like links, and nothing else should. Users may get frustrated if they try to click on textual phrases or graphics that look like links but are not. They will also be frustrated if they have to move their mouse all over the page trying to discover links that do not look like links.” (WebAim)

  • Color alone should not be used to distinguish links from surrounding text unless the luminance contrast between the link and the surrounding text is at least 3:1 and an additional differentiation (e.g., it becomes underlined) is provided when the link is hovered over or receives focus.

    • To give you an idea of how limiting that 3:1 ratio is for color, here are 26 web-safe colors that pass at 3:1 vs. black paragraph text (see article)

  • An underline is the most common, recognizable link indication.

  • Use descriptive links, calls to action: The purpose of each link can be determined from the link text alone. See W3C Link Purpose (In Context)

    • Example Link: “Compare Checking Accounts”

  • Link (or button) text should not be longer than 80 characters in length. (CrownPeak DQM)

    • Shorter links are easier for screenreaders to scan. They are also easier for assistive technology to use.
    • Links opening a new window should be less than 55 characters.

  • On hover, a visual state change (that is not reliant on color change) should be present to indicate to the user that the element is actionable.

    • Ex. if a link has an underline on initial view, remove the underline on hover. If a link is bold on initial view, on hover it changes to bold italics

  • “It’s important to note that according to G183, focus/hover states for links must have a non-color designator. This typically means that you would add the underline style to the link when it is hovered or tabbed to.” (Source)

Button Hover

  • “The :hover state is perhaps the most important feedback indicator of them all. It shows the user when an element is actionable—a crucial piece of information. Traditionally the :hover state has been largely neglected, or else a rather shocking design difference has been applied. But there’s no need to shock our users—we can maintain the integrity of our brands, design and user experience by offering subtle‑but‑noticeable indicators.” (Source)

  • On hover, a visual state change (that is not reliant on color change) should be present to indicate to the user that the element is actionable.

    • Ex. a button could grow on hover. A button could be outlined on initial view and on hover (inverse) become a solid button style.

Images

  • All images need to have a description that a screen reader will read for a visually impaired user.

    • You can do this by going to “Assets” within the CMS, clicking on the title of the asset and adding a description.

  • The image description cannot duplicate the filename of the image. In other words, if you want the description text (read aloud by screen readers) to say “checkmark,” the filename cannot be “checkmark.jpg”. Change the filename to something else, like “green-checkmark.jpg.”

  • When naming asset files names do not use space characters. Use hyphens to indicate spaces, if needed.

    • Example file name: “mobile-banking.jpg”

Forms

  • " * indicates required fields " message should always be placed at the top of a form, not at the bottom

  • Form field labels should be placed above input fields and be present at all times, should not disappear when fields is filled.

  • Buttons to submit forms need to be descriptive

    • Ex. “Send Message”, “Submit Form”

  • Input field colors should meet contrast requirement (3:1) as “Graphical Objects and User Interface Components” (Contrast Checker)

Slider / Carousels

  • Add dots or arrows to design as a visual indication that there is “more to see”

  • Auto-Rotation of slides: the design needs to have play/pause buttons in addition to dots/arrows