Question

I’m using JSF2.0 but I expiriencing accessibility issues when using panelGrid.

In this case I used two nested panelGrid:

<h:panelGrid id="inq" columns="1" 
    columnClasses="columnclass-noborders" >
<h:panelGrid  columns="2" 
    columnClasses="columnclass-noborders columnclass-right-padding, 
    columnclass-noborders"
    cellspacing="0" cellpadding="0">

the web site http://achecker.ca/checker/index.php

returns the error below.

Is there a way to get the panelGrid accessible setting id and headers as required by the WCAG 2.0 AA?

1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure.

Success Criteria 1.3.1 Info and Relationships (A)

Check 245: Data table with more than one row/column of headers does not use id and headers attributes to identify cells.
Repair: Add id and headers attributes to table cells so they identify the cells that relate to the headers.

Error Line 61, Column 22:

<table id="form:inq">
<tbody>
<tr>
<td class="columnclass-noborders"><table cellpadding="0" cells ...

Answer 1

Without seeing the full code, I am assuming you are using the first panelGrid as header row and the second holds the data. It looks like the table on http://www.jsftoolbox.com/documentation/help/12-TagReference/html/h_panelGrid.html is partially accessible. You may be able to get some ideas from that. The link uses:

<f:facet name="header">
 <h:outputText value="#{bundle.signInMessage}"/>
</f:facet>

which looks like controls the <th>. You will need to control headers and id’s as outlined at: http://www.w3.org/TR/html4/struct/tables.html#h-11.4.1