JSF datatable not complying to WCAG due to unsupported aria-label attribute

Question

I am using JSF to code my application and it has a datatable.

Each row of the datatable has a checkbox in the first column, and some text in the rest of the columns.

My application needs to comply to the WCAG 2.0 and I'm using a Chrome Extension "Axe" to scan my application.

The "Axe" tool flagged out that the datatable with the checkboxes is not complying to the clause "Ensure every form element has a label" and the proposed solution is to add the "aria-label" attribute.

However JSF datatable does not have the "aria-label" attribute.

Would need to ask if any experts out there have any solution?

The datatable is not a 'form' element in the sense that it is an input, select or whatever. Sure it is a selectbox from the datatable or do you render it. Please post an [mcve], jsf version and implementation info like requested in http://www.stackoverflow.com/tags/jsf/info — Kukeltje, Oct 25 '18 at 08:54

score 3 · Answer 1 · edited Jun 09 '20 at 06:15

3

JSF 2.2 Support pass through attributes. So it's easy to add customized attributes into the primefaces tag.

Add tag reference at the top:

xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"

Declare it inside the primefaces tag:

p:inputText value="#{bean.value}" pt:aria-label="Whatever you want"

edited Jun 09 '20 at 06:15

Kukeltje

12,223
4
24
47

answered Mar 19 '19 at 15:37

Jason Jiang

41
5

score 1 · Answer 2 · edited Oct 25 '18 at 16:57

A checkbox needs a label, whether visible or not, in order for screen readers to announce the checkbox properly. For sighted users, having a column header in your table is sufficient as the label for the checkboxes below it. However, for screen reader users, unless you associate the column header with each checkbox, it won't be announced. Ignoring JSF for a moment, if you are writing straight html, you could have something like this:

<table border="1" style="border-collapse: collapse">
  <tr>
    <th scope="col" id="check_label">select me</th>
    <th scope="col">some other value</th>
  </tr>
  <tr>
    <td>
      <input type="checkbox" aria-labelledby="check_label">
    </td>
    <td>hello</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" aria-labelledby="check_label">
    </td>
    <td>there</td>
  </tr>
</table>

Each checkbox has an aria-labelledby attribute pointing to the column header ("check_label"). This works pretty well for most screen readers, but there are some cases where the checkbox label is not read, for example in NVDA if you are using the table navigation keys (ctrl+alt+arrow) and navigate down the checkbox column, the name is not read for the checkboxes. That could be a bug with NVDA, I'm not sure.

An alternative to the above is to have a visually hidden <label> specifically associated with each checkbox. This works whether you navigate the table using the TAB key or ctrl+alt+arrow.

<table border="1" style="border-collapse: collapse">
  <tr>
    <th scope="col">select me</th>
    <th scope="col">some other value</th>
  </tr>
  <tr>
    <td>
      <input type="checkbox" id="check1">
      <label for="check1" class="sr-only">select me</span>
    </td>
    <td>hello</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" id="check2">
      <label for="check2" class="sr-only">select me</span>
    </td>
    <td>there</td>
  </tr>
</table>

Now, getting back to JSF, of which I knew nothing about until I read this question, it looks like there are two ways to specify a checkbox, https://docs.oracle.com/javaee/5/tutorial/doc/bnaqd.html#bnaqh.

selectBooleanCheckbox, by default, does not have a label associated with the checkbox where as selectManyCheckbox does. However, you can also specify an <h:outputLabel> to be paired with the selectBooleanCheckbox so I think that's your answer. See the example in the selectBooleanCheckbox doc.

And with more recent versions of JSF you can also add the aria related attributes by using JSF Passtrough attributes (Spec)

So provided you add the right namespacedeclaration, you can do

<h:selectBooleanCheckbox pt:aria-labbeledby="check_label" ...>

But it can also be put on a datatable

<h:datatable pt:aria-labbeledby="check_label" ...>

javaee 5 is old ;-). I added som JSF related info since it is (almost) identical on how to add a `aria-labbeled` by — Kukeltje, Oct 25 '18 at 16:50
cool, thanks. i just used whatever showed up first for selectBooleanCheckbox. i would have thought the newest doc would have been at the top of the search results. — slugolicious, Oct 25 '18 at 20:03
No, google unfortunately does not work this way. JSF is 'modern' in sense that JSF itself and the component frameworks support html5 ajax etc. But google still puts 10 year old tutorials (which are bad in multiple ways) at the top and since all new users click those first, read them and unfortunately use them, they stay at the top and then users blame jsf for badly maintainable code while they effectively are partly to blame themselves and google. Some 'expert voting mechanism' in google would be great. — Kukeltje, Oct 25 '18 at 22:18

JSF datatable not complying to WCAG due to unsupported aria-label attribute

2 Answers2

Linked