Accessibility - archived issueshttps://lab.civicrm.org/dev/accessibility/-/issues2022-04-22T17:01:29Zhttps://lab.civicrm.org/dev/accessibility/-/issues/1Make menu more accessible2022-04-22T17:01:29ZJoeMurrayMake menu more accessiblePreliminary tasks, many from https://lab.civicrm.org/dev/accessibility/issues/1#note_4855 below:
1. [x] Hide D7 menubar
1. [x] Fix for D8
1. [x] After getting focus into top menu, tabbing and back-tabbing revealed there was something hid...Preliminary tasks, many from https://lab.civicrm.org/dev/accessibility/issues/1#note_4855 below:
1. [x] Hide D7 menubar
1. [x] Fix for D8
1. [x] After getting focus into top menu, tabbing and back-tabbing revealed there was something hidden between Quick Search textbox and the CiviCRM icon. Opening submenus and back-tabbing revealed it was the search options for the Quick Search textbox. Please remove this from tab order.
1. [x] After getting focus into top menu, Space did not open (and when repeated, close) child menu on current item. It should act similarly to Return.
1. [x] When focus is on an item that could be selected to navigate somewhere, Return worked fine but Space did not replicate this.
1. [x] When on an open sub-submenu (eg Contributions > Accounting Batches with Open Batches with focus), using left arrow correctly moved focus to Accounting Batches, but it did not close the sub-submenu.
1. [x] When on a submenu, using left arrow should close the submenu and move focus to parent item. Instead it moved focus to menu item to left of parent item. The submenu was left open when it should have been closed.
~~1. [ ] When on a sub-submenu, escape should only close that level of menu but closes both the sub-submenu and the submenu.~~
1. [ ] "First item in menu bar should be in the tab order (tabindex=0)." (https://staff.washington.edu/tft/tests/menus/index.html). This may be a bit of work to implement in all CMSes but I think tabindex=0 for CiviCRM menu makes sense as the default on CiviCRM pages on default CMS installs. The CiviCRM Menu left item should be considered the QuickSearch. There appears to be an item for a div around the textarea and a separate way to focus on the textarea itself. The div around the textarea should be tabindex=0.
1. [ ] The cited spec is relatively silent, but other accessible menus have different implementations on the following: 1) When focus is on top menu item and its submenu is open, left and right cycle focus to left and right top menu items and shift which submenu is open to the one under the top menu focussed item. 2a) When focus is on a submenu item left closes the submenu, cycles focus to left on top menu and opens that top menu's submenu. 2b) When focus is on a submenu item without a subsubmenu, right similarly closes submenu, cycles focus right on top menu and opens that top menu item's submenu. 2c) When focus is on a submenu item with a subsubmenu, right opens the subsubmenu. Let's change behaviour 1), 2a) and 2b) to not opening new submenu. Leave 2c) as is.
~~1. [ ] When focus is not on the menu, cursor hovering over a menu item brings focus to it and opens submenu. Submenu should not open until click, return or space.~~
A user should be able to navigate the menu bar by use of the keyboard:
1. [ ] The menu bar should occupy one tab stop
1. [ ] When focused on a menu at the top level:
1. [ ] The right arrow key should move the user to the next top-level menu
1. [ ] The left arrow key should move the user to the previous top level menu
1. [ ] User focus should wrap to the beginning if the user advances past the final menu item. Likewise, if the user tries to navigate to the previous item from the first menu, focus should wrap to the last menu.
1. [ ] The down-arrow and ENTER keys should expand a child menu and focus the user on the first item
~~1. [ ] When a character is typed, the next menu item starting with that letter receives the focus, circling around to first when there are no more. If no menu item starts with the typed character, focus does not move. (deprecated by HTML 5.2 accesskey standard)~~
1. [ ] When focused on a child menu
1. [ ] The down arrow key should move the user to the next menu item
1. [ ] The up arrow key should move the user to the previous menu item
1. [ ] The right arrow key should expand a menu item with a submenu and place user focus on the first item in that submenu. If there is no submenu, then no action is taken.
1. [ ] The left arrow key should collapse a submenu and place user focus on the parent of that submenu
1. [ ] The ESC key should close the active child menu, and any submenus, and return user focus to the parent menu at the top level.
~~1. [ ] When a character is typed, the next child menu item starting with that letter receives the focus, circling around to first when there are no more. If no child menu item starts with the typed character, focus does not move. (deprecated by HTML 5.2 accesskey standard)~~
Test the menu works on default installs (ie default theme!) on
1. [x] Drupal 7
1. [x] WordPress
1. [x] Joomla
1. [x] Backdrop
1. [x] Drupal 8
(NB: deliberately ignoring support for Drupal 6.)
Test the menu works on:
1. [x] Drupal 7 site with shoreditch theme installed
1. [x] Drupal 7 site with mosaico installed, on a CiviMail mosaico page.
A more detailed functional spec is provided at http://lists.w3.org/Archives/Public/wai-xtech/2007Dec/att-0025/index.html#menu
A good implementation that might be useful for its implementation details (seeing View Source) is https://staff.washington.edu/tft/tests/menus/simplyaccessible/index.html. As there are no sub-submenus, I imagine the code implementation needs to be extended to opening sub-submenus properly.
Was https://issues.civicrm.org/jira/browse/CRM-20824
Original description from https://civicrm.stackexchange.com/questions/17735/access-for-blind-users-to-civicrm/17752#17752
The menu bar is keyboard accessible, but awkwardly. Generally I find it best to focus on the first item then TAB (as opposed to arrowing) to the top level menu the user wants to interact with before pressing ENTER to activate the pop-up menu. You will then have to locate the HTML list element containing the menu choices. Often this element appears after the menu bar, or at the bottom of the virtual document (sometimes depending on the CMS theme, sometimes depending on, seemingly, the browser’s mood). In either case, it will not appear immediately “under” the activated menu.https://lab.civicrm.org/dev/accessibility/-/issues/8Add accessible fieldset for checkboxes and radio buttons2022-04-22T16:05:12ZMonish DebAdd accessible fieldset for checkboxes and radio buttonsAs per https://www.w3.org/WAI/tutorials/forms/grouping , grouped form controls like radio buttons/checkboxes must be enclosed in ```<fieldset>``` and the ```<legend>``` element act as a header to identify the group of elements. Currently...As per https://www.w3.org/WAI/tutorials/forms/grouping , grouped form controls like radio buttons/checkboxes must be enclosed in ```<fieldset>``` and the ```<legend>``` element act as a header to identify the group of elements. Currently, when we review such block with WAVE accessibility tool, it complains about:
![Screen_Shot_2018-06-01_at_6.53.18_PM](/uploads/ce52376c6ee0fba0babb877355112e93/Screen_Shot_2018-06-01_at_6.53.18_PM.png)
## Proposal
1. Enclose the checkbox/radio button block in a fieldset
2. Add a special class to that fieldset say `crm-sr-fieldset` which hides it in front-end forms (public and backoffice forms)
3. Use label of checkbox/radio buttons as its legend header.
Monish DebMonish Debhttps://lab.civicrm.org/dev/accessibility/-/issues/11Contrast ratios2022-04-22T16:05:09ZJoeMurrayContrast ratiosWCAG 2.0 specifies various minimum contrast ratios between foreground and background for different sizes of fonts, and for bolded and non-bolded fonts [https://www.w3.org/TR/WCAG20-TECHS/G18.html](https://www.w3.org/TR/WCAG20-TECHS/G18.h...WCAG 2.0 specifies various minimum contrast ratios between foreground and background for different sizes of fonts, and for bolded and non-bolded fonts [https://www.w3.org/TR/WCAG20-TECHS/G18.html](https://www.w3.org/TR/WCAG20-TECHS/G18.html).
> ...Priority 2 (AA), and Priority 3 (AAA). Whether or not you need to reach an AAA conformance depends on your target audience. Read more about this [on the w3 site](http://www.w3.org/TR/2005/WD-WCAG20-20051123/intro.html#conformance). For large text (over 18 points) the contrast ratio for AA is 3:1 and for AAA 5:1. For small text it's 5:1 for AA and 7:1 for AAA. ([http://www.colorsontheweb.com/Color-Tools/Color-Contrast-Analyzer](http://www.colorsontheweb.com/Color-Tools/Color-Contrast-Analyzer))
More exact ratios and translations of font sizes to px directly from the WCAG first mentioned for bold and non-bold text are:
* **BOLD and < 14pt (18.5px):** 7:1 contrast ratio
* Not bold and < 18pt (24px): 7:1 contrast ratio
*
* **BOLD and >= 14pt (18.5px):** 4.5:1 contrast ratio
* Not bold and >= 18pt (24px): 4.5:1 contrast ratio
Using the contrast analyzer provided on the page above, the current Shoreditch contrast ratios are not sufficient in some contexts.
For example, on pages like New Contact and New Activity we get the following ratios:
Blue font #2786c2 on tan #efefe5 in 13px: 3.44:1 (below 5:1)
Dimmed grey #999999 on offwhite #fff in 13px: 2.85:1 (below 5:1)
![2018-12-04_09-16-41](/uploads/7138b3b33d6e09434c8e0ec6186cc620/2018-12-04_09-16-41.png)
![2018-12-04_09-33-52](/uploads/569ee5c8e27db425ea14a674fa9df59b/2018-12-04_09-33-52.png)
![2018-12-04_09-51-12](/uploads/a13787755df8c46e1c72baa4c873fef2/2018-12-04_09-51-12.png)
We should meet a 5:1 ratio for all text < 18pt.https://lab.civicrm.org/dev/accessibility/-/issues/4Make alerts accessible2022-04-22T16:05:03ZJoeMurrayMake alerts accessibleFrom Clare comes a problem statement and some brainstorming ideas:
> A problem for our low vision users is alerts, their AT software doesn't recognise them, so they miss warnings and end up adding duplicates. It would be great to have s...From Clare comes a problem statement and some brainstorming ideas:
> A problem for our low vision users is alerts, their AT software doesn't recognise them, so they miss warnings and end up adding duplicates. It would be great to have some sort of per user control for setting how alerts display, perhaps even adding audio cues.
Use alert role approach suggested at https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/alert/index.html as this will allow audio cues to be given to users of screen readers.
Note more details at https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/#alert and also https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/#alertdialog
https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-no-exceptions.html indicates that there should be no time limits like quickly disappearing alerts.
As a first pass, let's implement a site wide setting to disable alerts from disappearing. We don't have a good design pattern currently for per user preferences. When we do move to per user preferences, the default should be to have alerts not disappear.justinfreeman (Agileware)justinfreeman (Agileware)https://lab.civicrm.org/dev/accessibility/-/issues/3Add aria-label (and label?) to form elements missing them2022-04-22T16:04:56ZJoeMurrayAdd aria-label (and label?) to form elements missing themUse 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...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:
1. Label without control elements/text: In some pages/forms we are simply declaring labels under `<label>` tag against an element/text.
1. 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">
```
1. 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')));
```
1. 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**: Add `aria-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.
1. Fix date fields.
Focus initially on public facing pages/forms:
1. [x] contribution page
1. [x] event registration page
1. [x] price field block
1. [x] newsletter signup
1. [x] user registration in CMS
1. [x] profile create/edit/search
1. [x] contact dashboard
1. [x] contact summary page
1. [ ] CiviReports
1. [ ] Search Forms
1. [ ] Backend registration forms
https://lab.civicrm.org/dev/accessibility/-/issues/10Make datepicker accessible2022-04-22T16:04:43ZMonish DebMake datepicker accessibleThe Civi datepicker field aren't accessible which means that other than cursor actions, you can select date from calendar using control keys.
This is about making datepicker accessible and here's a working example how it will look like ...The Civi datepicker field aren't accessible which means that other than cursor actions, you can select date from calendar using control keys.
This is about making datepicker accessible and here's a working example how it will look like after completing changes-
https://dequeuniversity.com/library/aria/date-pickers/sf-date-picker
A user should be able to use datepicker with the help of control keys, not just cursor actions, and tasks involved are:
1. Tab to select date input field
2. On date field select calendar dialog, focus on current or default date.
3. Tab action switches to previous/next/month/year button
4. Show a close button on down right corner that has a tabstop.
5. Left/Right/Up/Down to change day/month/year.
6. Enter to selectMonish DebMonish Debhttps://lab.civicrm.org/dev/accessibility/-/issues/6Upgrade select2 to stable version 4.0.4 and fix compatibility issues in Civi2022-04-22T16:04:19ZMonish DebUpgrade select2 to stable version 4.0.4 and fix compatibility issues in CiviCurrently, Civi is using select2 3.5 which we need to upgrade to latest stable 4.0.4 (https://github.com/select2/select2/releases) and also resolve compatibility issues with CiviCRM.
Major issues:
1. Auto appending values doesn't work a...Currently, Civi is using select2 3.5 which we need to upgrade to latest stable 4.0.4 (https://github.com/select2/select2/releases) and also resolve compatibility issues with CiviCRM.
Major issues:
1. Auto appending values doesn't work anymore
Error: Uncaught TypeError: Cannot read property 'prop' of undefined
LOC - https://github.com/civicrm/civicrm-core/blob/master/js/crm.searchForm.js#L9
Reference - https://select2.org/upgrading/migrating-from-35#select2-val
2. Placeholder broken
Error: Uncaught TypeError: Cannot read property 'id' of undefined
As per 3.5 - placeholderOption is used to set the placeholder value for select2 widget
As per 4.0.4 - placeholder option can now accept placeholder value both in string and object
Reference - https://select2.org/upgrading/migrating-from-35#more-flexible-placeholders
3. EntityRef select2 fields are broken
Error: Uncaught Error: No select2/compat/initSelection
As per 4.0.4 - Removed the requirement of 'initSelection'
Reference - https://select2.org/upgrading/migrating-from-35#removed-the-requirement-of-initselection
4. Navigation menu style is not applied
Error: Uncaught TypeError: Cannot read property 'prop' of undefined
As per 4.0.4 - $("select").val("1").trigger("change"); // instead of $("select").select2("val", "1");
Reference - https://select2.org/upgrading/migrating-from-35#select2-val
5. Broken entityRef field
There are multiple issues with an entityRef field which are listed below:
1. Placeholder doesn't show
2. Unable to populate data via REST API link
3. Create contact dialog box doesn't render below the search field
4. Escape text doesn't show up
6. Action-menu select2 doesn't work on selecting record(s) in a search list
It throws an error `Uncaught TypeError: Cannot read property 'apply' of undefined` after Search and also action-menu field doesn't behave on selecting a record.
7. The native crm CSS styling doesn't apply on select2/4.0+ widget
Minor issues
1. Multi select2 widget doesn't show downarrow placeholder icon
2. select2 css style aren't applied after upgrade