Search code examples
accessibilityhtmlcontrols

Defining the read-out value of a textbox for screen readers


Working on accessibility, have a textbox containing a date (format depends on language selected). Screen readers read the date currently in the textbox letter-by-letter ("Twelve-slash-oh-five-slash-twenty-thirteen" for 12/05/2013).

1) How can I tell the reader program to read out "twelfth may twenty-thirteen"?

2) How can I tell the reader the format required by the textbox to be typed in? e.g. "day-slash-month-slash-year"

I'm new to this topic and not familiar with the concepts. Any ideas or hints, links to details or concepts are very much welcome.


Solution

  • 1) you can't. I wouldn't worry about it.

    2) Screen readers need <label>s to be read correctly, you can do it like so

    <label for="date">Birthday (DD/MM/YYYY)</label>
    <input id="date" name="date" type="text"/>
    

    If you want to hide the formatting, you can do:

     <label for="date">Birthday <span class="hidden">DD/MM/YYY</span></label>
    

    where hidden is:

    .hidden {
     position: absolute;
     top: 0;
     left: -999px;
    }