Why should you care?

MarkupVerse banking flows must pass tab order and live region announcements.

See it live — copy this example

Save as demo.html and open in your browser, or use Run Example below.

<button type="button" id="otp-send" aria-describedby="otp-hint">Send OTP</button>
<p id="otp-hint">We text a 6-digit code to your registered mobile.</p>
<div role="status" aria-live="polite" id="otp-status"></div>
<script>
document.getElementById('otp-send').onclick = () => {
  document.getElementById('otp-status').textContent = 'OTP sent at ' + new Date().toLocaleTimeString();
};
</script>

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

What happened?

• Tab to every control.
• aria-describedby links hint text.
• Live regions announce async updates.

Practice next

1. Tab through OTP flow.
2. Run axe or Lighthouse a11y.
3. Verify live region announces.
4. Test with NVDA/VoiceOver once.
5. Add aria-busy during send.

Remember

Keyboard test manually. aria-describedby hints. Live regions for async.

MarkupVerse OTP a11y

SR user sends OTP on login.

Outcome: Status region announces OTP sent time.