Search code examples
accessibilityjaws-screen-reader

JAWS doesn't read placeholder


I am using JAWS to test the code. JAWS reads the below date as "Move In Date star dd/mm/i-edit".

How do I make JAWS read it as "Move In Date star dd/mm/yyyy". JAWS doesn't read "yyyy", instead it reads "i edit".

<input type="text" aria-label="Move In Date * dd/mm/yyyy" id="startDate" placeholder="dd/mm/yyyy">

Solution

  • First off, it should be the aria-label that's read and not placeholder, according to the "Accessible Name and Description Computation 1.1" spec, but some screen readers will read both the label and placeholder. Others will read only the label.

    Step 2C of the spec says to use aria-label and then process then stops. (The spec is a big if/else statement.) Step 2D is where placeholder *might* be used. That's where "native markup...text alternative" is used. It's debatable whether placeholder should be considered alternative text, but nonetheless, step 2D should never be reached if step 2C is satisfied.

    JAWS might be saying "my" instead of "i", but it's still not correct. After you hear it, press Ins+Space then H to bring up JAWS' speech history window. It should show the exact text that's read, which should be your aria-label.

    Two things you can try:

    1. Adjust your "punctuation" verbosity setting in JAWS. The default is "most". I don't remember if "most" will cause "/" to be read. You can try changing it to "all" if you're not hearing "slash" to see if that breaks up the "mm" from the "yyyy".
    2. Use uppercase letters in aria-label for the date specification. Sometimes JAWS will spell out the letters when words are in all caps if the word is not a pronounceable word.

    <input type="text" aria-label="Move In Date * DD/MM/YYYY" id="startDate" placeholder="dd/mm/yyyy">