Add aria-label (and label?) to form elements missing them
Use accessible labels for all pages/forms following spec at https://www.w3.org/WAI/tutorials/forms/labels.
Tasks will include the following general points. Some details will change to ensure that ts() is handled properly, addField() is used appropriately, etc from comments below:
- Label without control elements/text: In some pages/forms we are simply declaring labels under
<label>
tag against an element/text.- Remove tag when it is declared against a text as in
- <div class="label"><label>{ts}Contact{/ts}</label></div>
+ <div class="label">{ts}Contact{/ts}</div>
1. Add `aria-labelledby` attribute to tag
```
- <label>{ts}Contact{/ts}</label><input type="text" name="contact_id" id="contact_id">
+ <label aria-labelledby="contact_id">{ts}Contact{/ts}</label><input type="text" name="contact_id" id="contact_id">
```
- Add aria-label attribute to QuickForm element when label is not declared in tpl: Say for example we are assigning a label to a QuickForm element
$form->addElement('text', 'pledge_installments', ts('Installments'), array('size' => 3));
but not using it in tpl. Fix: Add aria-label attribute to QuickForm element:
- $form->addElement('text', 'pledge_installments', ts('Installments'), array('size' => 3));
+ $form->addElement('text', 'pledge_installments', ts('Installments'), array('size' => 3, 'aria-label' => ts('Pledge Installments')));
- Add aria-label attribute to form element via JS: A special case when after declaring this attribute didn't got added to the QuickForm element as in case of 'Credit card Expiration date' when this element got rendered in the quickform as
$form->add('date', 'credit_card_exp_date', ts('Expiration Date'), ['format' => M Y'])
and thus rendered into two select field without this attribute Fix: Addaria-label
attribute via JS instead. This might involve modifying $.fn.crmDatepicker in Common.js to add aria-labels to the autogenerated date elements it inserts. - Fix date fields.
Focus initially on public facing pages/forms:
-
contribution page -
event registration page -
price field block -
newsletter signup -
user registration in CMS -
profile create/edit/search -
contact dashboard -
contact summary page -
CiviReports -
Search Forms -
Backend registration forms