Accessible website contact details

Saturday 23 March 2024 -- 2 min read

Are you putting contact details in your website properly?

Just put the contacts in a <p> or <span> (<p>+254712345678</p>) and move on right? Well, doing so does not produce accessible content. The contacts or address details will be treated just as normal text, i.e when you click it it will not open the phone dialer or mail client.

Now let's do it the right way. Use the <address> html element to make the details accessible. We'll wrap everything inside the <address> element.

<address>

    <a href="tel:+254712345678">+254712345678</a>

    <a href="mailto:support@email.com">support@email.com</a>

</address>

By doing so when the contact number or email is clicked it will open the relevant action, i.e a phone dialer for the number and email client for the client. This will also help people using assistive technology such as screen readers interact with the contact details.