Re: [External] datepicker form title

Wow - thanks for this great article. 2019 is a quite isn't long ago and for many, maybe most of the users nothing changed since then.

I really frequently test with VoiceOver on iOS since 2020 and haven't known about these issues.

I really would like to hear other opinions - because I’m not sure what to recommend after reading your article. Everything except input="date“ feels like a hack and for sure the native element will be ready for the (near ?) future.

I always considered the date pickers being a nice to have and that the lack of browser support is no big thing, as typing in the date is still a reasonable option - for many people even the preferred one.

But with the partial support UAs including ATs seem to make things worse. And the VoiceOver „feature“ of bringing the user back to the top of the page is really awful. As a sighted user I didn't really realised it so far. It just seemed to be strange, but I thought I may have made a mistake because of my poor SR experience and also I was quickly where I have been by „cheating“ - which is scrolling and tapping on the next form input.

Well that sucks…

What do other daily SR users think about the date type? And besides Louises case: is a whole bunch of accessible JS and divs and CSS better than a simple default input (which means plain text)?



Am 22.02.2021 um 19:54 schrieb Graham Armfield <graham.armfield@coolfields.co.uk<mailto:graham.armfield@coolfields.co.uk>>:

Whereas input type="date" should be a good solution, I'd want to check on accessible support in browsers and assistive tech.

I wrote a blog about this - admittedly in 2019 - but we decided at the time there wasn't sufficient widespread support to use it. See https://www.hassellinclusion.com/blog/input-type-date-ready-for-use/


It would solve so many problems on websites if it was well supported.

Regards
Graham Armfield
Coolfields Consulting

On Mon, 22 Feb 2021, 16:43 Louise Lister, <Louise.Lister@iop.org<mailto:Louise.Lister@iop.org>> wrote:


Thanks Marc, I appreciate your solution!
Kind regards,
Louise

From: Marc Haunschild <haunschild@mhis.onmicrosoft.de<mailto:haunschild@mhis.onmicrosoft.de>>
Sent: 22 February 2021 16:36
To: Louise Lister <Louise.Lister@iop.org<mailto:Louise.Lister@iop.org>>
Cc: Hewitt, Susan HHHH <Susan.Hewitt@cigna.com<mailto:Susan.Hewitt@cigna.com>>; w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>
Subject: Re: [External] datepicker form title

Hi Louise,

why you don’t use <input type="date"> instead of all this code? I don’t see any corporate design elements or other styling reason, that are normally used as an excuse dir not using the native html elements for things like date pickers, selects, uploads and other things that are difficult to style?

If this is no option: if I understand everything right (we don’t see the actual DOM or the accessibility tree, just the source before it’s changed by the js and CSS), than the image is just decorative and the alt attribute should be empty, the title attribute should be completely removed and the labeling text should be in the label element, what is already correct.

--
Mit freundlichen Grüßen

Marc Haunschild
https://Accessibility.Consulting<https://accessibility.consulting/>


Am 22.02.2021 um 17:22 schrieb Louise Lister <Louise.Lister@iop.org<mailto:Louise.Lister@iop.org>>:

Thanks Susan,

The error is being picked up in Monsido as we are trying to get ourselves 100% compliant with our images at the moment.

I’m new to the accessibility world.

<div class="iop-form-element js-form-item form-item fi-5 js-form-type-date form-type-date js-form-item-start-date form-item-start-date">
      <label for="edit-start-date" class="js-form-required form-required">Start date</label>

<input data-datepicker-button="" type="text" data-drupal-date-format="Y-m-d" data-drupal-selector="edit-start-date" id="edit-start-date" name="start_date" value="" class="form-text required iop-input" required="required" aria-required="true" /><span class="iop-form-element__focus"></span>
</div>
<div class="iop-form-element js-form-item form-item fi-5 js-form-type-date form-type-date js-form-item-end-date form-item-end-date">
      <label for="edit-end-date" class="js-form-required form-required">End date</label>

<input data-datepicker-button="" type="text" data-drupal-date-format="Y-m-d" data-drupal-selector="edit-end-date" id="edit-end-date" name="end_date" value="" class="form-text required iop-input" required="required" aria-required="true" /><span class="iop-form-element__focus"></span>
</div>

Clicking on either field brings up an active calendar, so the clickable area is much larger than the image.

<image003.jpg>

If you can help that would be most appreciated.

With kind regards
Louise

From: Hewitt, Susan HHHH <Susan.Hewitt@Cigna.com<mailto:Susan.Hewitt@Cigna.com>>
Sent: 22 February 2021 15:49
To: Louise Lister <Louise.Lister@iop.org<mailto:Louise.Lister@iop.org>>; w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>
Subject: Re: [External] datepicker form title

Can you provide the markup for the entire form field? You don’t need an alt and title attribute – especially when their values are duplicated – on any image but if this <img> is actually within an <input> field, that could be causing your error. I don’t think you can have an active image inside a form field. It’s going to create problems for screen reader and keyboard-only users.

From: Louise Lister <Louise.Lister@iop.org<mailto:Louise.Lister@iop.org>>
Date: Monday, February 22, 2021 at 9:20 AM
To: "w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>" <w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>>
Subject: [External] datepicker form title
Resent-From: <w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>>
Resent-Date: Monday, February 22, 2021 at 9:15 AM


Hello there,

I am picking up an accessibility error on a form date picker to state that this should not include a title attribute unless it’s decorative.  It’s contained within a functional field in a webform – when someone clicks on the field which includes this small calendar image they can select a date on a calendar). Can anyone advise if this therefore needs to be set to decorative? Code snippet is below:

<img class="ui-datepicker-trigger" src="/modules/contrib/webform/images/elements/date-calendar.png" alt="Select date" title="Select date">

With thanks
Louise

________________________________
This email (and attachments) are confidential and intended for the addressee(s) only. If you are not the intended recipient please immediately notify the sender, permanently and securely delete any copies and do not take action with it or in reliance on it. Any views expressed are the author's and do not represent those of IOP, except where specifically stated. IOP takes reasonable precautions to protect against viruses but accepts no responsibility for loss or damage arising from virus infection. For the protection of IOP's systems and staff emails are scanned automatically..

Institute of Physics. Registered charity no. 293851 (England & Wales) and SCO40092 (Scotland)
Registered Office:  37 Caledonian Road, London, N1 9BU<https://gbr01.safelinks.protection.outlook.com/?url=https%3A%2F%2Furldefense.proofpoint.com%2Fv2%2Furl%3Fu%3Dhttps-3A__goo.gl_maps_DUHbKcbzuUN2%26d%3DDwMFaQ%26c%3DWlnXFIBCT3pmNh_w8hYeLw%26r%3DXGRvi0C5Qd73Krn0GqObqkXzMfikPXgWdSS39KkW_Lk%26m%3DIR58QE5v13SQswb1M-RVrvzo3gVLpbGNZ-FDfhliWEA%26s%3DEDlrMrRShG2aRFI9rru-oYZtggrx0xlcnuRxgHwymj0%26e%3D&data=04%7C01%7Clouise.lister%40iop.org%7C16a7e1604ea544a947b108d8d750cd83%7C8b8986af18bb4882a149fa5a3dd1f995%7C0%7C0%7C637496089327367402%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=yVEiIvyJ%2BVkWCr2qJGFXG6I4o0HLlpJmuBKXar3H0BI%3D&reserved=0>
Your privacy is important to us. For information about how IOP uses your personal data, please see our Privacy Policy<https://gbr01.safelinks.protection.outlook.com/?url=https%3A%2F%2Furldefense.proofpoint.com%2Fv2%2Furl%3Fu%3Dhttps-3A__emea01.safelinks.protection.outlook.com_-3Furl-3Dhttp-253A-252F-252Fwww.iop.org-252Fprivacy-252Findex.html-26data-3D02-257C01-257C-257C6716aa3c6fd84da5102808d5c0b234a0-257Cf9ee42e6bad04e639115f704f9ccceed-257C0-257C0-257C636626793962820374-26sdata-3DRI6OT4MumRlklNzF5i2M9ZxS6P-252FxxLg-252FJwcnMJ-252B0480-253D-26reserved-3D0%26d%3DDwMFaQ%26c%3DWlnXFIBCT3pmNh_w8hYeLw%26r%3DXGRvi0C5Qd73Krn0GqObqkXzMfikPXgWdSS39KkW_Lk%26m%3DIR58QE5v13SQswb1M-RVrvzo3gVLpbGNZ-FDfhliWEA%26s%3DHkH40BK6YTiOoVtgC1vYFP3P_Hgyx1X5Oe9VaFiO6rc%26e%3D&data=04%7C01%7Clouise.lister%40iop.org%7C16a7e1604ea544a947b108d8d750cd83%7C8b8986af18bb4882a149fa5a3dd1f995%7C0%7C0%7C637496089327377398%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=Ql3QUOINNDdAftSaxguzueoFeARkwUXlSAWAGHfRrKg%3D&reserved=0>
________________________________

------------------------------------------------------------------------------
CONFIDENTIALITY NOTICE: If you have received this email in error,
please immediately notify the sender by e-mail at the address shown.
This email transmission may contain confidential information.  This
information is intended only for the use of the individual(s) or entity to
whom it is intended even if addressed incorrectly.  Please delete it from
your files if you are not the intended recipient.  Thank you for your
compliance.  Copyright (c) 2021 Cigna
==============================================================================

________________________________
This email (and attachments) are confidential and intended for the addressee(s) only. If you are not the intended recipient please immediately notify the sender, permanently and securely delete any copies and do not take action with it or in reliance on it. Any views expressed are the author's and do not represent those of IOP, except where specifically stated. IOP takes reasonable precautions to protect against viruses but accepts no responsibility for loss or damage arising from virus infection. For the protection of IOP's systems and staff emails are scanned automatically..

Institute of Physics. Registered charity no. 293851 (England & Wales) and SCO40092 (Scotland)
Registered Office:  37 Caledonian Road, London, N1 9BU<https://gbr01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgoo.gl%2Fmaps%2FDUHbKcbzuUN2&data=04%7C01%7Clouise.lister%40iop.org%7C16a7e1604ea544a947b108d8d750cd83%7C8b8986af18bb4882a149fa5a3dd1f995%7C0%7C0%7C637496089327377398%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=%2F3Ive1Px%2BySBwisP21dxGjMZDuRd5p8DtTQ3JTGcr24%3D&reserved=0>
Your privacy is important to us. For information about how IOP uses your personal data, please see our Privacy Policy<https://gbr01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.iop.org%2Fprivacy%2Findex.html&data=04%7C01%7Clouise.lister%40iop.org%7C16a7e1604ea544a947b108d8d750cd83%7C8b8986af18bb4882a149fa5a3dd1f995%7C0%7C0%7C637496089327387392%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=v%2FSbnnEzFMqbHCtwhAObOVM0UJMHNMrxqRhplwlAhoM%3D&reserved=0>
________________________________


________________________________
This email (and attachments) are confidential and intended for the addressee(s) only. If you are not the intended recipient please immediately notify the sender, permanently and securely delete any copies and do not take action with it or in reliance on it. Any views expressed are the author's and do not represent those of IOP, except where specifically stated. IOP takes reasonable precautions to protect against viruses but accepts no responsibility for loss or damage arising from virus infection. For the protection of IOP's systems and staff emails are scanned automatically..

Institute of Physics. Registered charity no. 293851 (England & Wales) and SCO40092 (Scotland)
Registered Office:  37 Caledonian Road, London, N1 9BU<https://goo.gl/maps/DUHbKcbzuUN2>

Your privacy is important to us. For information about how IOP uses your personal data, please see our Privacy Policy<https://emea01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.iop.org%2Fprivacy%2Findex.html&data=02%7C01%7C%7C6716aa3c6fd84da5102808d5c0b234a0%7Cf9ee42e6bad04e639115f704f9ccceed%7C0%7C0%7C636626793962820374&sdata=RI6OT4MumRlklNzF5i2M9ZxS6P%2FxxLg%2FJwcnMJ%2B0480%3D&reserved=0>

________________________________