Many people with visual or cognitive disabilities can recognize phone number fields in HTML forms and usually understand what info needs to be provided to fill in the fields.

Phone numbers are frequently formatted in fixed, distinctive ways, and Web developers may feel that just providing visual formatting of the fields will be sufficient to identify them.

Not so fast

Even if all the fields have programmatically determined names, a text label must also identify the set of fields as a phone number. The label alerts screen reader users about the content necessary to complete the form field correctly.

Best Practice in HTML5

In its most basic form, a telephone form input and text label can be implemented like this:

<label for=”telNo”>Phone number:</label>
<input id=”telNo” name=”telNo” type=”tel”>

===

WEBSITE ACCESSIBILITY TESTING & REMEDIATION SERVICES: Mary Gillen is an experienced Website Accessibility Compliance Auditor and Remediator. She can test your website to determine if it meets accessibility standards:

WCAG 2.1: 312 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 59 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===