Problem/Motivation
I see the following Alert when testing my page with WebAIM WAVE accessibility checker:
Unlabeled form control with title
This is coming from two form fields associated with Add2Any:
<input id="a2a_copy_link_text" type="text" title="Copy link" readonly="">
<input id="a2apage_find" class="a2a_menu_find a2a_localize" type="text" autocomplete="off" title="Find any service" data-a2a-localize="title,FindAnyServiceToAddTo">
What it means
A form control does not have a label, but has a title.
Why it matters:
The title attribute value for unlabeled form controls will be presented to screen reader users. However, a properly associated text label provides better usability and accessibility and should be used unless the purpose of the form control is intuitive without the label.
How to fix it:
If a visible text label is available for the form control, associate the text label to the form control using the label element. This provides additional functionality for end users because if the label is clicked it will set focus to the form control. If the form control is intuitive without a , the title attribute value may be used. Note that the title attribute value will not generally be read by a screen reader if the control has a label and may not be available to sighted users, particularly keyboard-only users.
Steps to reproduce
Proposed resolution
This probably should also be filed as an upstream issue to Add2Any, but since 3rd party companies are notoriously bad at fixing easy accessibility issues that affect everyone 😿, perhaps there is something we can do about it here in the Drupal module such as tacking on an aria-label attribute that copies the value from title attribute.
Remaining tasks
User interface changes
API changes
Data model changes