Credit union and community bank website accessibility: logins, rates, applications and branch details

Credit unions and community banks run membership, loans, rates, branch hours and the online banking login through their website. Many members are older, have low vision, or use a screen reader, magnifier or voice control, and a login that times out without warning, a rate table posted as an image, or a loan form with placeholder-only fields sends them to the branch or the phone queue. Much of this lives on vendor platforms (online banking, loan origination, chat), so part of the job is knowing what to ask your vendors for. Here's what to check.

1. Online banking login and timeouts

The login box on your home page should have visible labels and autocomplete so password managers can fill it, and must not block paste. Don't make a picture puzzle or a memory test the only way in, and let people paste one-time codes. Session timeouts should warn people before they're signed out and let them extend, because filling in a transfer with assistive technology takes longer. (WCAG 3.3.2, WCAG 1.3.5, WCAG 3.3.8, WCAG 2.2.1)

<form action="/login" method="post">
  <label for="user">Username</label>
  <input id="user" name="username" autocomplete="username">
  <label for="pw">Password</label>
  <input id="pw" name="password" type="password" autocomplete="current-password">
  <button type="submit">Sign in to online banking</button>
</form>
<label for="otp">6-digit code we sent you</label>
<input id="otp" name="otp" inputmode="numeric" autocomplete="one-time-code">
<div role="alert" hidden id="timeout-warn">You'll be signed out in 2 minutes. <button type="button">Stay signed in</button></div>

See login and CAPTCHA accessibility. If the login form or the banking app comes from your core or digital banking provider, ask them for their accessibility conformance report (often called a VPAT) and their plan for any gaps; see VPATs explained.

2. Rates and fees as real tables

Savings, CD and loan rates are often a screenshot or a PDF. Put them in a real HTML table with a caption, header cells and the "as of" date in text, so screen reader users hear which rate goes with which term and everyone can zoom without blur. (WCAG 1.3.1, WCAG 1.4.5)

<table>
  <caption>Share certificate rates, as of November 1 (example values)</caption>
  <tr><th scope="col">Term</th><th scope="col">Minimum deposit</th><th scope="col">APY</th></tr>
  <tr><th scope="row">12 months</th><td>$500</td><td>4.00%</td></tr>
  <tr><th scope="row">24 months</th><td>$500</td><td>3.75%</td></tr>
</table>

See accessible tables.

3. Membership and loan applications

Every field needs a visible label, required fields marked in words, and autocomplete on name, address, email and phone. Errors should say which field and how to fix it in text, not just a red border, and keep what the person already typed. Don't ask again for an address they gave two steps ago, and warn before a long application times out, or save progress. (WCAG 3.3.2, WCAG 3.3.1, WCAG 1.4.1, WCAG 3.3.7, WCAG 2.2.1)

<label for="income">Gross monthly income (required)</label>
<p id="income-hint">Before taxes. Numbers only, for example 3200.</p>
<input id="income" name="income" inputmode="decimal" required aria-describedby="income-hint income-err">
<p id="income-err" class="error">Enter your monthly income in dollars, for example 3200.</p>
<fieldset>
  <legend>Mailing address</legend>
  <label><input type="checkbox" name="same_addr"> Same as home address</label>
</fieldset>
<!-- example values -->

See form error messages and accessible contact forms. Ask your loan or account-opening vendor for its VPAT too.

4. Loan and savings calculators

Calculators often use sliders that only work with a mouse and show the result in a chart. Give each input a label and a typed alternative to any slider, make the "Calculate" control a real button, and announce the result in text so screen reader users hear it. (WCAG 2.1.1, WCAG 4.1.2, WCAG 4.1.3)

<label for="amt">Loan amount in dollars</label>
<input id="amt" name="amount" inputmode="decimal">
<label for="term">Term in months</label>
<input id="term" name="term" inputmode="numeric">
<button type="button">Calculate payment</button>
<p role="status">Estimated payment: $312 a month for 60 months.</p>
<!-- example values -->

5. Branch and ATM locators

A map with clickable pins isn't enough on its own. Offer a text list of branches and ATMs with addresses, lobby and drive-through hours, holiday closures and phone numbers, and a labelled search with an announced result count. Say factually what each location offers, such as a step-free entrance, accessible parking, audio-enabled ATMs with a headphone jack, or a lowered teller counter, if you have them. Avoid "fully accessible" with no detail. (WCAG 1.3.1, WCAG 4.1.3)

<h3>Main Street branch</h3>
<p>123 Main St, Example City. Lobby: Mon to Fri 9 AM to 5 PM. Drive-through: Mon to Sat 8 AM to 6 PM.</p>
<p>Access: step-free entrance from the side parking lot, 2 accessible parking spaces, audio-enabled ATM.</p>
<!-- example wording, list only what is true for your branch -->

See accessible maps and location pages.

6. Disclosures, fee schedules and PDFs

Truth-in-savings disclosures, fee schedules, membership agreements and newsletters are often scanned PDFs. Put the key facts on a web page with headings, and make any PDF you still post a tagged, text-based file with a real reading order. Images like "Skip-a-pay is back!" banners need alt text that says the offer, or the text should be live text. (WCAG 1.1.1, WCAG 1.4.5, WCAG 1.3.1) See accessible PDFs and alt text examples.

7. Chat, pop-ups, fraud alerts and videos

Chat widgets and promotional pop-ups must be reachable by keyboard, close with Escape and not cover the login box on a phone. Fraud and outage alerts should be real text near the top of the page, not a moving ticker, and any carousel must have a pause button. Caption videos and financial education webinars. (WCAG 2.1.1, WCAG 2.2.2, WCAG 1.2.2) See the pop-up and chat widget checklist, accessible carousels and video captions.

8. Contrast, zoom, tap targets and help

Brand-colour buttons and white text over photos often fail contrast. Body text needs at least 4.5:1, pages must work at 200% text size and on a narrow phone without sideways scrolling, and buttons like "Sign in" and "Apply" should be easy to tap. Put the way to get help (phone, chat, "Contact us") in the same place on every page. (WCAG 1.4.3, WCAG 1.4.4, WCAG 1.4.10, WCAG 2.5.8, WCAG 3.2.6) Try our contrast checker.

Common mistakes

• A home-page login box with placeholder text instead of labels, or one that blocks paste.
• Sign-outs with no warning and no way to extend.
• Rates and fee schedules only as images or scanned PDFs.
• Loan calculators with mouse-only sliders and chart-only results.
• A branch map with no text list of locations and hours.
• Errors shown only as a red border.
• An overlay widget instead of real fixes. It won't fix vendor platforms or forms, and the FTC fined one overlay vendor $1 million in 2025 over compliance claims; see overlays vs real fixes.

A 15-minute check you can do today

1. Using only Tab, Shift+Tab, Enter and Space, get from the home page to the online banking login and the "Become a member" form. Can you always see where you are?
2. Check a password manager can fill the login.
3. Submit the membership or loan form empty. Do the errors say what to fix, in words?
4. Find your current CD or certificate rates. Can you select the text?
5. Use a loan calculator with the keyboard only.
6. Zoom to 200% on a phone-width window. Are the login, rates and phone number still usable without sideways scrolling?
7. Run the free homepage scan for code-level problems.

What a scan can and can't check here

Our scan is automated, so it finds only part of the barriers on the pages it visits: missing alt text, unlabelled fields and buttons, low contrast, missing page language and similar code problems. It can't sign in to online banking, submit a real application, test a vendor's mobile app or check that branch details are accurate, so manual checks and vendor reports are still needed. Our Fix-Pack scans up to 10 public pages and gives copy-paste fixes for your platform; your web team or vendor applies them. Platform steps: WordPress, Squarespace, Wix, Webflow. Related: insurance agency and financial advisor websites, accountant and CPA websites, accessibility statement template, WCAG 2.2 explained.

This is general technical guidance, not legal advice, and it doesn't certify compliance with the ADA or any law, or protect against claims. Ask your attorney about your institution's obligations.

Want the fixes written for you?

Start with a free homepage snapshot. The $149 Fix-Pack scans up to 10 pages and gives copy-paste fixes for your platform within 48 hours, with a 14-day refund promise. See a sample report first.

This is general technical guidance, not legal advice, and it does not certify compliance with the ADA or any law.

Related guides

• Med spa and aesthetics clinic website accessibility: consult booking, treatment menus, before-and-after photos and intake forms
• Careers page and job application accessibility: job listings, application forms, resume uploads and applicant portals
• WCAG 2.2 explained for small-business websites
• Squarespace accessibility fixes: alt text, contrast, forms and more

All guides

This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.