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


Am 22.02.2021 um 17:22 schrieb Louise Lister <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>
Sent: 22 February 2021 15:49
To: Louise Lister <Louise.Lister@iop.org>; 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%7Cd08aa794e2b94e5bb59908d8d7495ad1%7C8b8986af18bb4882a149fa5a3dd1f995%7C0%7C0%7C637496057356159452%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=jDd3n6TXGQj5NjBfpa3Pp3J1XJ0e35ntoTe7AX6Evd4%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%7Cd08aa794e2b94e5bb59908d8d7495ad1%7C8b8986af18bb4882a149fa5a3dd1f995%7C0%7C0%7C637496057356169442%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=WqlFqIZ6EvXcRc4RCfoZa6z8JYn70iTBct%2FsbZPTnc0%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://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>

________________________________