2 min read
Build it semantically
<form aria-label="Business finance quote">
<label for="amt">Amount</label>
<input id="amt" type="number" min="1000" max="150000" />
<button type="submit">Get quote</button>
<output id="result" aria-live="polite"></output>
</form>Use a real <form>, <label>, <button> and <output>. The aria-live="polite" region announces the quote to screen readers when it updates.
Focus and contrast
Keep a visible focus ring, ensure text meets contrast ratios, and never trap keyboard focus. The apply link must be a real <a href> to apply so it works without JavaScript.
Frequently asked questions
What's the most-missed accessibility issue?
Announcing the quote result. Put it in an aria-live region so screen-reader users hear the figure update, not just sighted users.
Does the widget need JavaScript to be accessible?
The apply link should work without it. Progressive enhancement means the core action degrades gracefully if scripts fail.
Related reading
Quickstart: embed a product picker with the public API
A product picker is the simplest high-value embed: fetch the catalogue, render options, link to apply…
Read →
Quickstart: Build a live repayment illustration
A live illustration that quotes as the user moves a slider feels great — debounce it so you respect the rate…
Read →Quickstart: call the public API from the browser safely
The public ring sends permissive CORS headers for read endpoints, so you can call it straight from the…
Read →
Quickstart: Format amounts as GBP for UK readers
Amounts come back as plain numbers in GBP; format them with the platform's own number formatter, not string…
Read →Funding for UK limited companies
Credicorp lends to your company, not to you personally — short-term working capital with no personal guarantee. See what your business could access.