Initial ADA check: Primeface hidden checkboxes fail compatibility

[raprasad]

I ran a dataset page through the Web Accessibility Evaluation Tool

It flagged many errors (76) as well as alerts (43). I didn't examine them in depth but they're mostly related to standard HTML tagging practices for ADA -- may not be hard to fix.

The test indicated that Primefaces generates checkboxes that are not ADA compliant--they lack <label...> tags. The Primefaces checkbox HTML is described here:

• https://github.com/IQSS/dataverse-helper-scripts/blob/master/system-thoughts/issues-with-primefaces.md#example-1-primefaces-checkbox

This is a double-sided issue:

• Adding labels to the checkboxes may fix the warnings from the ADA web tool
• However, the checkbox HTML elements aren't actually visible.
  • The Primefaces checkbox substitute (a clickable icon) would need to be tested for ADA usability
  • In other words, is this an ADA checkbox?

 <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default">
    <span class="ui-chkbox-icon ui-c"></span>
    </div>

[mheppler]

Related to Edit File Metadata: Select All Files in Tab, Can't Edit Them All after clicking Edit Metadata #2859, as well as to File Download: Changing the list of selected files for a multipage file list results in bad download all behavior. #3711. Investigate as part of Spike: Files DataTable, Selection, Paginator vs Scroll #4437.

[mheppler]

This should be looked into as part of Upgrade to PrimeFaces 7 #5975 as "accessibility improvements" has been outlined in the release notes. Will leave it open until the functionality can be reviewed after upgrading.

[mheppler]

This issue should be reviewed as part of Upgrage to PrimeFaces 8 #6634 as I saw an improvement to checkboxes in release notes for 7.0.12.

Add ariaLabel attribute to SelectBooleanCheckbox

[kaitlinnewson]

A note that in DV 5.1/5.2 checkboxes still appear to be inaccessible (missing labels), at least those in the facets in dataverse.xhtml. When I tested in ChromeVox no label was read when I entered the checkbox.

[RichCaloggero]

Invalid HTML

I ran validator.w3.org on the harvard dataverse site:
https://dataverse.harvard.edu/

on the page resulting from clicking the "view all data" link on the homepage:
https://dataverse.harvard.edu/dataverse/harvard

The results can be seen by click this url:
https://validator.w3.org/nu/?doc=https%3A%2F%2Fdataverse.harvard.edu%2Fdataverse%2Fharvard

There are many input elements which are nested within "a" (anchor) elements. This is invalid HTML. Where is keyboard focus here: should it be on the link, the nested input? It makes no sense.

Not sure what the purpose is: perhaps these are visually hidden somehow, but my screen reader shows the checkboxes as well as the aria-label on the enclosing a element. In fact, it gets weirder than that: if moving through via the tab key, the screen reader will focus the checkboxes; if using screen reader reading commands to read the document by line, etc, they do not show up.

It's also not clear, because of lack of page structure, semantic HTML (i.e. headings, lists, proper table markup on tabular data), what is actually being shown here. I see stuff about subjects and categories, collections, files, etc, but clicking one of these checkboxes, and/or clicking one of the links containing the cehckboxes doesn't seem to do much that is obvious to me using a screen reader.

It seems to have been said already that depending on ancient software (primeFaces) is counterproductive. I would also suggest that it makes fixing accessibility issues very difficult!

Thoughts on Primefaces

https://github.com/IQSS/dataverse-helper-scripts/blob/master/system-thoughts/issues-with-primefaces.md#example-1-primefaces-checkbox

Here is the code for one of these checkboxes from the URL cited above:

<a href="/dataverse/harvard?q=&amp;types=datasets&amp;sort=dateSort&amp;order=desc&amp;page=1" class="facetTypeChBox facetLink facetSelected" aria-label="Toggle Collections">
<div id="facetType:j_idt482" class="ui-selectbooleancheckbox ui-chkbox ui-widget">
<div class="ui-helper-hidden-accessible">
<input id="facetType:j_idt482_input" name="facetType:j_idt482_input" type="checkbox" autocomplete="off" aria-label="Toggle Collections" checked="checked" aria-checked="true">
</div>

<div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default ui-state-active">
<span class="ui-chkbox-icon ui-icon ui-icon-check ui-c"></span>
</div></div></a>

[pdurbin]

It seems to have been said already that depending on ancient software (primeFaces) is counterproductive. I would also suggest that it makes fixing accessibility issues very difficult!

@RichCaloggero yes. Accessibility is something we're working hard on in the new frontend, which is being written in React: https://github.com/IQSS/dataverse-frontend

(For more background on the rewrite, please see https://groups.google.com/g/dataverse-community/c/2hfhWIHQddE )

If you go to that frontend repo, you can find links to Chromatic/Storybook where you can dig into the accessibility checks, all passing in this example:

[pdurbin]

Accessibility is much better with the new UI: https://github.com/IQSS/dataverse-frontend