由于不受支持的aria-label属性，JSF数据表不符合WCAG [英] JSF datatable not complying to WCAG due to unsupported aria-label attribute

问题描述

我正在使用JSF编码我的应用程序，它具有一个数据表.

数据表的每一行在第一列中都有一个复选框，在其余列中有一些文本.

我的应用程序需要符合WCAG 2.0，并且我使用的是Chrome扩展程序"Axe"来扫描我的应用程序.

"Axe"工具标记带有复选框的数据表不符合确保每个表单元素都具有标签"子句，建议的解决方案是添加"aria-label"属性.

但是，JSF数据表不具有"aria-label"属性.

是否需要询问那里的专家是否有解决方案?

解决方案

复选框需要一个标签(无论是否可见)，以使屏幕阅读器正确宣布该复选框.对于有视力的用户，在表中具有列标题就足以作为其下方复选框的标签.但是，对于屏幕阅读器用户，除非您将列标题与每个复选框相关联，否则它将不会被宣布.暂时忽略JSF，如果您直接编写html，则可能会出现以下内容:

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

每个复选框都有一个aria-labelledby属性，该属性指向列标题("check_label").这对于大多数屏幕阅读器来说效果很好，但是在某些情况下，复选框标签不会被读取，例如在NVDA中，如果您使用表格导航键(ctrl + alt + arrow)并向下浏览复选框列，即名称不会读取该复选框.我不确定那可能是NVDA的错误.

上述的一种替代方法是让一个视觉上隐藏的<label>与每个复选框特别关联.无论您使用 TAB 键还是使用ctrl + alt +箭头浏览表，该功能都可以使用.

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

现在，回到JSF，直到我阅读了这个问题，我对JSF还是一无所知，看来有两种方法可以指定一个复选框: selectBooleanCheckbox

selectManyCheckbox

默认情况下，

selectBooleanCheckbox没有与selectManyCheckbox相同的，与复选框关联的标签.但是，您也可以指定将<h:outputLabel>与selectBooleanCheckbox配对，因此我认为这就是您的答案.请参见 selectBooleanCheckbox 文档中的示例.

在JSF的最新版本中，您还可以使用规范)

因此，只要您添加正确的名称空间声明，就可以

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

但是它也可以放在数据表中

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

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?

解决方案

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

这篇关于由于不受支持的aria-label属性，JSF数据表不符合WCAG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！