由于不支持的aria-label属性，JSF数据表不符合WCAG

Question

我正在使用JSF来编写我的应用程序，它有一个数据表。

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

我的应用程序需要符合WCAG 2.0，并且我使用Chrome扩展程序“Ax”来扫描我的应用程序。

“Ax”工具标记出带有复选框的数据表不符合“确保每个表单元素都有标签”这一条款，建议的解决方案是添加“aria-label”属性。

但是，JSF数据表没有“aria-label”属性。

需要询问是否有任何专家有任何解决方案？

Answer 1

复选框需要标签，无论是否可见，以便屏幕阅读器正确地宣布复选框。对于有视力的用户，在表格中有一个列标题就足够作为其下方复选框的标签。但是，对于屏幕阅读器用户，除非您将列标题与每个复选框关联，否则不会公布。暂时忽略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，在我阅读这个问题之前我一无所知，看起来有两种方法可以指定一个复选框，https://docs.oracle.com/javaee/5/tutorial/doc/bnaqd.html#bnaqh。

• selectBooleanCheckbox
• selectManyCheckbox

默认情况下，selectBooleanCheckbox没有与selectManyCheckbox所做的复选框关联的标签。但是，您也可以指定<h:outputLabel>与selectBooleanCheckbox配对，所以我认为这是您的答案。请参阅selectBooleanCheckbox doc中的示例。

使用更新版本的JSF，您还可以使用JSF Passtrough attributes（Spec）添加与aria相关的属性

所以如果你添加正确的命名空间声明，你可以这样做

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

但它也可以放在数据表上

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

Answer 2

JSF 2.2支持传递属性。因此，可以轻松地将自定义属性添加到primefaces标记中。

1. 在顶部添加标记引用：

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

2. 在primefaces标记内声明它：

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