Question

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

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

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

“ Axe”工具标记出带有复选框的数据表不符合“确保每个表单元素都有标签”子句，建议的解决方案是添加“ 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，直到我阅读了这个问题，我对JSF还是一无所知，看来有两种方法可以指定复选框https://docs.oracle.com/javaee/5/tutorial/doc/bnaqd.html#bnaqh。

默认情况下，

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

在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标记中很容易。

在顶部添加标签参考：

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

在primefaces标签中声明它：

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

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

2 个答案: