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

问题

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?

回答1:

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
selectManyCheckbox

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" ...>

回答2:

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"

来源：https://stackoverflow.com/questions/52984941/jsf-datatable-not-complying-to-wcag-due-to-unsupported-aria-label-attribute

标签

jsf

datatable

wcag