Altwise

Cost calculator and instant quote tool accessibility for small businesses

How to make your price calculator, instant quote or estimate tool usable for keyboard, screen reader and phone visitors: labelled inputs with units, sliders that don't need dragging, announced prices, clear errors and no retyping in the quote form.

Roofers, cleaners, movers, landscapers, solar installers, painters, credit unions and insurance agents often put a cost calculator or "instant quote" tool on their site: pick a home size with a slider, tick a few options, and see an estimated price. It's often the step right before someone books or asks for a quote, so if the slider can't be moved with a keyboard or the price changes silently, those visitors leave. This guide covers what to check, whichever website builder or calculator tool you use.

1. Every input needs a visible label and its unit

Each field should say what it asks for and in what unit, for example "Home size (square feet)" or "Number of bedrooms", in a visible label, not only in placeholder text that disappears (WCAG 3.3.2). Group related choices, like "Extras" check boxes or "How often?" radio buttons, in a fieldset with a legend so screen readers hear the question with each option (WCAG 1.3.1).

<label for="sqft">Home size (square feet)</label>
<input id="sqft" name="sqft" type="number" inputmode="numeric"
       min="500" max="6000" step="100" value="1500">

<fieldset>
  <legend>How often?</legend>
  <label><input type="radio" name="freq" value="once"> One time</label>
  <label><input type="radio" name="freq" value="monthly"> Monthly</label>
</fieldset>

<button type="submit">Show my estimate</button>
<p role="status" id="estimate"></p>

2. Sliders must work without dragging

A slider you can only drag with a mouse or finger blocks keyboard users and people with tremors. A native range input moves with the arrow keys; a custom slider needs the same, plus a name and its current value read out, such as "Home size, 1,500 square feet" (WCAG 2.1.1, 4.1.2). Also offer a way that doesn't need dragging at all, such as a number box next to the slider or plus and minus buttons (WCAG 2.5.7). See drag and slider controls.

3. Say the new price out loud

When the estimate updates, sighted visitors see the number change, but screen reader users hear nothing unless the result is in a status message (WCAG 4.1.3). Put the result in an element with role="status", as in the example, and write it as a full sentence: "Estimated cost: $2,400 to $2,900 for a one-time clean." If the price updates on every key press, announce it once the person stops typing, or use a "Show my estimate" button, so it isn't read out ten times.

4. Don't jump to a new page or step on its own

Choosing an option shouldn't send people to the next step, open a pop-up or reload the page by itself (WCAG 3.2.2). Let them change their mind, then press a clear button to continue.

5. Clear errors and limits

If someone types 50,000 square feet or leaves a required field empty, say which field and what to enter, for example "Enter a home size between 500 and 6,000 square feet", in text next to the field, and keep what they already entered (WCAG 3.3.1). See form error messages.

6. Price breakdowns in words, not only colours

Bar charts, green "savings" numbers or a red "most expensive" option need the same information in text (WCAG 1.4.1). A short line list such as "Base clean $120, inside the fridge $25, total $145" works for everyone. If you show monthly payments, put the terms you rely on next to the number as text, not in a tooltip only. See info icons and tooltips.

7. From estimate to quote request without retyping

Many calculators end with "Get my exact quote". Carry the answers into that form, or show them so people can check them, instead of asking for the home size and options again (WCAG 3.3.7). Keep a phone number or a plain contact form next to the tool for anyone who would rather ask.

8. Phones and zoom

Calculators are often a two-column layout with options on the left and a sticky price box on the right. Check at 200% zoom and on a narrow phone screen that nothing needs sideways scrolling and the price box doesn't cover the fields (WCAG 1.4.10).

Built-in form vs. calculator plug-in or embed

Website builders, calculator plug-ins and embedded quote tools build sliders and results very differently, and they change over time. Whichever you use, test the live page with a keyboard, a screen reader and a phone rather than relying on a feature list. If the tool can't be fixed, a short text price guide ("Most 3-bedroom homes cost $X to $Y") and a contact form are a good fallback, as long as the prices are your real ones.

Common mistakes

A 5-minute check you can do today

  1. Use only the Tab and arrow keys. Can you set every option, including the slider, and get an estimate?
  2. Can you type an exact number instead of dragging?
  3. Turn on VoiceOver or TalkBack and change an option: do you hear the new price? See the 10-minute screen reader test.
  4. Type an impossible value. Does the page say what to enter, next to the field?
  5. Zoom to 200% on a phone and check the price box doesn't cover the form.

What a scan can and can't check here

Automated scans find only part of the barriers on the pages they visit. Our scan can flag unlabelled fields, sliders and buttons with no name, missing fieldset structure in some cases and many contrast problems. It can't move a slider, check that the new price is announced or judge whether the steps make sense, and it can't tell whether your site meets any law. Our Fix-Pack checks up to 10 pages, which can include your calculator page and quote form, and gives copy-paste fixes for your platform.

Building quote calculators for clients? The agency 5-pack gives you five white-label reports ($499, use within 12 months).

This is general technical guidance, not legal advice, and it doesn't certify compliance with the ADA or any law, or protect against claims. It doesn't cover pricing, lending or insurance disclosure rules; ask your adviser about those. Altwise isn't affiliated with any calculator plug-in, form tool or website builder.

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

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.

Check your own site, then decide

  1. Free homepage snapshot. Your top 3 issues in about a minute. No signup, no card.
  2. $149 Fix-Pack, if you want the full list. Up to 10 pages scanned, issues ranked by impact, copy-paste fixes for your platform, delivered within 48 hours, plus one re-scan after you apply them.

Get my free snapshot Order the Fix-Pack – $149

14-day refund promise. See a sample report first. A technical report, not legal advice; automated checks find only part of accessibility barriers.