a11y errors
Running a very vanilla setup we get the following accessibility errors (D10.2.3 / Civi 5.70.2 site, Finsbury Park theme enabled and Backend theme set to Finsbury Park and Aah disabled/alternating with Finsbury Park theme disabled and Aah enabled and Backend theme set to Aah, Frontend Theme to Automatic. Using WAVE Web Accessibility Evaluation Tool 3.2.5.3 in Chrome browser 123.0.6312.86 on macOS Sonoma 14.4.1).
CiviCRM Home Page Errors:
-
Missing form label on the QuickSearch element (Finsbury Park, Aah)
<input type="text" id="crm-qsearch-input" name="sort_name" placeholder=" Name/Email" accesskey="q" class="ui-autocomplete-input" autocomplete="off">
-
Missing form label on Find menu item... (Finsbury Park, Aah)
<input type="text" id="crm-menubar-drilldown" placeholder="Find menu item...">
-
Empty link (Finsbury Park, Aah)
<a href="#" class="has-submenu" id="sm-17116551805997053-1" aria-haspopup="true" aria-controls="sm-17116551805997053-2" aria-expanded="false">
<form action="/civicrm/contact/search/advanced" name="search_block" method="post">
<div>
AccesskeyMissing form label
<input type="text" id="crm-qsearch-input" name="sort_name" placeholder=" Name/Email" accesskey="q" class="ui-autocomplete-input" autocomplete="off">
<input type="hidden" name="hidden_location" value="1">
<input type="hidden" name="hidden_custom" value="1">
<input type="hidden" name="qfKey" value="CRMContactControllerSearch1nrj4735k2cgk8kgcos44c4800cwc800o8gk00w8so0gko004s_8998">
<input type="hidden" name="_qf_Advanced_refresh" value="Search">
</div>
</form>
<span class="sub-arrow"></span>
</a>
-
Empty link (Finsbury Park, Aah)
<a accesskey="m" href="#" class="has-submenu" id="sm-17116551805997053-3" aria-haspopup="true" aria-controls="sm-17116551805997053-4" aria-expanded="false">
<i class="crm-logo-sm"></i>
<span class="sub-arrow"></span>
</a>
-
Empty link (Finsbury Park, Aah)
<a href="#" class="has-submenu" id="sm-17116551805997053-5" aria-haspopup="true" aria-controls="sm-17116551805997053-6" aria-expanded="false">
Missing form label
<input type="text" id="crm-menubar-drilldown" placeholder="Find menu item...">
<span class="sub-arrow"></span>
</a>
-
Very low contrast (Aah)
<button class="trigger visually-hidden focusable" type="button" aria-pressed="false">
Open configuration options
</button>
-
Very low contrast (Finsbury Park, Aah)
<label class="crm-menubar-toggle-btn" for="crm-menubar-state">
<span class="crm-menu-logo"></span>
<span class="crm-menubar-toggle-btn-icon"></span>
Toggle main menu
</label>
-
Very low contrast (Finsbury Park, Aah)
<div id="drupal-live-announce" class="visually-hidden" aria-live="polite" aria-busy="false">
Tray opened.
</div>
Simple Search (Search > Find Contacts) Errors not present above:
-
Missing form label
<select placeholder="- any group -" multiple="multiple" class="big big crm-select2 crm-form-multiselect" name="group[]" id="group" tabindex="-1" style="display: none;">
<option value="1">
My site group 1
</option>
<option value="2">
My site group 2
</option>
</select>
-
Empty form label (see next task for Empty link that contains this)
<label for="s2id_autogen2" class="select2-offscreen"></label>
-
Empty link
<a href="#" class="has-submenu" id="sm-17116579339791917-1" aria-haspopup="true" aria-controls="sm-17116579339791917-2" aria-expanded="false">
<form action="/civicrm/contact/search/advanced" name="search_block" method="post">
<div>
<input type="text" id="crm-qsearch-input" name="sort_name" placeholder=" Name/Email" accesskey="q" class="ui-autocomplete-input" autocomplete="off">
<input type="hidden" name="hidden_location" value="1">
<input type="hidden" name="hidden_custom" value="1">
<input type="hidden" name="qfKey" value="CRMContactControllerSearch1nrj4735k2cgk8kgcos44c4800cwc800o8gk00w8so0gko004s_4570">
<input type="hidden" name="_qf_Advanced_refresh" value="Search">
</div>
</form>
<span class="sub-arrow"></span>
</a>
-
Empty link
<a accesskey="m" href="#" class="has-submenu" id="sm-17116579339791917-3" aria-haspopup="true" aria-controls="sm-17116579339791917-4" aria-expanded="false">
<i class="crm-logo-sm"></i>
<span class="sub-arrow"></span>
</a>
-
Empty link
<a href="#" class="has-submenu" id="sm-17116579339791917-5" aria-haspopup="true" aria-controls="sm-17116579339791917-6" aria-expanded="false">
<input type="text" id="crm-menubar-drilldown" placeholder="Find menu item...">
<span class="sub-arrow"></span>
</a>
-
Very low contrast
<span class="select2-chosen" id="select2-chosen-1">
- any contact type -
</span>
-
Very low contrast
<button class="crm-form-submit default validate crm-button crm-button-type-refresh crm-button_qf_Basic_refresh" value="1" type="submit" name="_qf_Basic_refresh" id="_qf_Basic_refresh-bottom">
<i aria-hidden="true" class="crm-i fa-check"></i>
Search
</button>