0

I have a contact section on a webpage that displays email, address phone and fax number. I would like to make sure, that visitors who use screen readers are made aware that the fax number is indeed af fax number - as opposed to a phone number.

At the moment, this is what I have:

<p class="contact-item">
    <a href="tel:+4588888888" class="mr-1">88 88 88 88</a>
</p>
<p class="contact-item">
    87 87 87 87
</p>

The second p-element contains the fax number. I have tried using

<p class="contact-item" aria-label"fax">
    87 87 87 87
</p>

but nothing is read aloud.

So, what would be the best/correct way to let screen reader users know that it is a fax number?

Lasserh
  • 407
  • 1
  • 4
  • 11
  • 1
    [This](https://stackoverflow.com/questions/9443520/does-anything-like-a-href-faxnumbernumber-a-exist) may help. – sbgib Mar 11 '21 at 13:28
  • Thanks @sbgib, will this get it read aloud in a way, so the user knows that it is a fax number? I guess I could add an aria-label to the link, that should force the label to be read aloud. – Lasserh Mar 11 '21 at 13:43
  • I suppose it would depend on the screen reader, but it'd definitely be worth adding an aria-label to make sure. – sbgib Mar 12 '21 at 08:02

1 Answers1

0

First of all: How do you label it for anybody? In the current example it is not made clear at all, not even icons or titles are communicating the nature of the two numbers.

Sighted, advanced mouse users might recognise the fax schema or the file extension in the URL when it’s being displayed by the browser on hover, but that’s not very user friendly.

So best practice is to add a text accessible to anyone explaining the link purpose, the format, and the language if they change.

While there is link formats that might not need an additional description due to their distinct format (like email addresses), if you have two phone/fax numbers, it’s not clear enough any more.

For labels in key-value lists, the <dl> is a good choice. Since users also navigate to links directly by means of Tab, the link should carry a label or description, explaining that it‘s a phone number, not a currency or lottery number.

<dl>
  <dt id="label-tel">Telephone</dt>
  <dd><a href="tel:+4588888888" aria-describedby="label-tel">88 88 88 88</a></dd>

  <dt>Fax</dt>
  <dd>87 87 87 87</dd>
</dl>

Note that aria-label doesn’t do anything for non-interactive elements like <p>. That is why it is not being read and missing for the fax in above example.

While fax is a valid URL scheme as well, I left it out for demonstration purposes. Also, it should be considered whether users’ platforms support that scheme, and if it’s useful.

If you really wanted to provide a label only for screen readers, the famous sr-only or inclusively-hidden class can help, but as mentioned above, other users would still be puzzled.

<a href="tel:+4588888888"><span class="inclusively-hidden">Telephone </span>88 88 88 88</a>
Andy
  • 4,783
  • 2
  • 26
  • 51