[Cerrado] Datepicker is not working with a screen reader

[Autor]

Mensajes

[MargeP6083]

The datepicker is not accessible to screen readers. It is blocking users who are blind from registering on our site because the date of birth field is required. Additionally, I have heard other complaints about the weird behavior when entering date. You have to click outside the date box for the date to populate.

We need something that is WCAG 2.0 Accessible for our users who are blind.

Link to a page where the issue can be seen: enlace oculto

I downloaded a local installation and deactivated all non toolset plugins. Same weird behavior.

Thanks!

[Christian Cox]

Hello, let me check with my team leader about this and give you some feedback.

[Christian Cox]

Our team has performed an internal audit and discovered areas where our software is not compliant with the latest WCAG guidelines. We have those areas noted and are working towards improving them in a future release of the software. For this specific situation, our team is looking for a workaround and if you would like to stand by we can try to come up with a solution for this specific case.

[MargeP6083]

We would really appreciate having a work-around.

thank you very much!

[Christian Cox]

Thanks for your patience. Our 2nd tier support team has a loaded queue at the moment, so this one could take some time. I'll keep you posted.

[Christian Cox]

I'm going to be out for a few days so I'm reassigning this ticket to Nigel, my team leader. He will follow up with you here when he has some workaround or other feedback to share.

[Nigel]

Hi Marge

Sorry for the delay getting back to you.

I had several false starts on this during the week trying to implement an alternative accessible datepicker, or an accessible text input field with masking for the date format, and I had trouble getting anything to work satisfactorily, while testing using a screen reader.

In the end I decided the most robust solution was to use separate select dropdowns for the day-of-month, the month, and the year, and then use JS to populate a hidden field with the corresponding timestamp (which is what happens behind the scenes with the current implementation with the datepicker).

You will need to make some minor modifications to your existing form.

Before starting, I suggest you make a backup.

Then edit the form.

Remove the existing input for the date of birth field.

In its place, add a custom HTML section, which you can copy and paste the following into:

<div class="form-group">
    <label>Enter date of birth:</label>
    <select id='date-day' name='date-day' required aria-label="Enter day of month">
        <option value="" selected>dd</option>
        <option value="01">01</option>
        <option value="02">02</option>
        <option value="03">03</option>
        <option value="04">04</option>
        <option value="05">05</option>
        <option value="06">06</option>
        <option value="07">07</option>
        <option value="08">08</option>
        <option value="09">09</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option value="29">29</option>
        <option value="30">30</option>
        <option value="31">31</option>
    </select>
    <select id='date-month' name='date-month' required aria-label="Enter month of year">
        <option value="" selected>mm</option>
        <option value="01">01</option>
        <option value="02">02</option>
        <option value="03">03</option>
        <option value="04">04</option>
        <option value="05">05</option>
        <option value="06">06</option>
        <option value="07">07</option>
        <option value="08">08</option>
        <option value="09">09</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
    </select>
    <select id='date-year' name='date-year' required aria-label="Enter year">
        <option value="" selected>yyyy</option>
        <option value="1940">1940</option>
        <option value="1941">1941</option>
        <option value="1942">1942</option>
        <option value="1943">1943</option>
        <option value="1944">1944</option>
        <option value="1945">1945</option>
        <option value="1946">1946</option>
        <option value="1947">1947</option>
        <option value="1948">1948</option>
        <option value="1949">1949</option>
        <option value="1950">1950</option>
        <option value="1951">1951</option>
        <option value="1952">1952</option>
        <option value="1953">1953</option>
        <option value="1954">1954</option>
        <option value="1955">1955</option>
        <option value="1956">1956</option>
        <option value="1957">1957</option>
        <option value="1958">1958</option>
        <option value="1959">1959</option>
        <option value="1960">1960</option>
        <option value="1961">1961</option>
        <option value="1962">1962</option>
        <option value="1963">1963</option>
        <option value="1964">1964</option>
        <option value="1965">1965</option>
        <option value="1966">1966</option>
        <option value="1967">1967</option>
        <option value="1968">1968</option>
        <option value="1969">1969</option>
        <option value="1970">1970</option>
        <option value="1971">1971</option>
        <option value="1972">1972</option>
        <option value="1973">1973</option>
        <option value="1974">1974</option>
        <option value="1975">1975</option>
        <option value="1976">1976</option>
        <option value="1977">1977</option>
        <option value="1978">1978</option>
        <option value="1979">1979</option>
        <option value="1980">1980</option>
        <option value="1981">1981</option>
        <option value="1982">1982</option>
        <option value="1983">1983</option>
        <option value="1984">1984</option>
        <option value="1985">1985</option>
        <option value="1986">1986</option>
        <option value="1987">1987</option>
        <option value="1988">1988</option>
        <option value="1989">1989</option>
        <option value="1990">1990</option>
        <option value="1991">1991</option>
        <option value="1992">1992</option>
        <option value="1993">1993</option>
        <option value="1994">1994</option>
        <option value="1995">1995</option>
        <option value="1996">1996</option>
        <option value="1997">1997</option>
        <option value="1998">1998</option>
        <option value="1999">1999</option>
        <option value="2000">2000</option>
        <option value="2001">2001</option>
        <option value="2002">2002</option>
        <option value="2003">2003</option>
        <option value="2004">2004</option>
        <option value="2005">2005</option>
        <option value="2006">2006</option>
        <option value="2007">2007</option>
        <option value="2008">2008</option>
        <option value="2009">2009</option>
        <option value="2010">2010</option>
        <option value="2011">2011</option>
        <option value="2012">2012</option>
        <option value="2013">2013</option>
        <option value="2014">2014</option>
        <option value="2015">2015</option>
        <option value="2016">2016</option>
        <option value="2017">2017</option>
        <option value="2018">2018</option>
        <option value="2019">2019</option>
        <option value="2020">2020</option>
        <option value="2021">2021</option>
        <option value="2022">2022</option>
        <option value="2023">2023</option>
        <option value="2024">2024</option>
        <option value="2025">2025</option>
        <option value="2026">2026</option>
        <option value="2027">2027</option>
        <option value="2028">2028</option>
        <option value="2029">2029</option>
    </select>
</div>

That will add select dropdowns for day, month, and year, and these work with screen readers.

Then add a generic hidden field to the form.

For the slug use the key of the date field, i.e. "wpcf-date-of-birth".

At this point you need to switch to Expert mode. In the form markup, locate the generic field you just added, and edit the JSON settings to add a "persist":1 setting, e.g.

[cred_generic_field type='hidden' field='wpcf-date-of-birth']
{
"default":"",
"persist":1
}
[/cred_generic_field]

Finally, you need to add the following custom JS:

document.addEventListener("DOMContentLoaded", function (event) {
    (function ($) {

        $('select[name="date-day"],select[name="date-month"],select[name="date-year"]').change(function () {

            var day = $('select[name="date-day"]').val();
            var month = $('select[name="date-month"]').val();
            var year = $('select[name="date-year"]').val();

            if (day != "" && month != "" && year != "") {
                var timestamp = Date.UTC(year, month - 1, day);
                $('input[name="wpcf-date-of-birth"]').val(timestamp/1000);
            }
        });
    })(jQuery);
});

Test your form and verify that it works as you would expect normally. If you are able to you can also test using a screen reader. I did this and confirm that it should work, because it is using standard browser form inputs.

Let me know how you get on.