Screen reader friendly phone numbers

When you display a telephone number on screen, screen readers read it out as a single number. The Fangs screen reader emulator (see http://sourceforge.net/projects/fangs) reads the number (01234) 567890 as “left paren six hundred sixty-eight right paren five hundred sixty-seven thousand eight hundred ninety”. The “six hundred sixty-eight” bit is particularly curious: the 01234 is being interpreted as an octal number.

By encasing each digit within a <span /> tag, the digits are read out individually. So, (01234) 567890 becomes “left paren zero one two three four right paren five six seven eight nine zero”.

I have written an XSLT template that takes a phone number and applies a <span /> to each digit:

  <xsl:template name="DisplayPhoneNumber">
    <xsl:param name="position" />
    <xsl:param name="phonenumber" />
    <xsl:variable name="digit"
select="substring($phonenumber, $position, 1)" />

    <xsl:choose>
      <xsl:when test="contains('012345678', $digit)">
        <span>
          <xsl:value-of select="$digit" />
        </span>
      </xsl:when>
      <xsl:otherwise>
        <xsl:value-of select="$digit" />
      </xsl:otherwise>
    </xsl:choose>

    <xsl:if test="$position &lt;
string-length($phonenumber)">
      <xsl:call-template name="DisplayPhoneNumber">
        <xsl:with-param name="position">
          <xsl:value-of select="$position+1" />
        </xsl:with-param>
        <xsl:with-param name="phonenumber"
select="$phonenumber" />
      </xsl:call-template>
    </xsl:if>
  </xsl:template>

To call the template, pass in the telephone number and prime the starting position using a value of 1:

      <xsl:call-template name="DisplayPhoneNumber">
        <xsl:with-param name="position" select="'1'" />
        <xsl:with-param name="phonenumber"
select="'(01234) 567890'" />
      </xsl:call-template>

If you’re using this within Sitecore, you can simply pass in a field value in the usual way:

      <xsl:call-template name="DisplayPhoneNumber">
        <xsl:with-param name="position" select="'1'" />
        <xsl:with-param name="phonenumber"
select="sc:fld('phone', .)" />
      </xsl:call-template>