Skip to main content

Curbcut WCAG AAA

Textfield

Label + hint + input + validation, composed — the everyday form row.

As it should appear on the certificate.

Show the markup 
<div class="cc-field">
  <label class="cc-label" for="ex-tf">Business name</label>
  <p class="cc-hint" id="ex-tf-hint">As it should appear on the certificate.</p>
  <input class="cc-input" id="ex-tf" aria-describedby="ex-tf-hint">
</div>

Enter the business name.

Show the markup 
<div class="cc-field cc-field--error">
  <label class="cc-label" for="ex-tf-err">Business name</label>
  <input class="cc-input" id="ex-tf-err" aria-describedby="ex-tf-err-msg" aria-invalid="true">
  <p class="cc-validation" id="ex-tf-err-msg">Enter the business name.</p>
</div>

Accessibility