Los form de JSF incluyen siempre un input con el id "javax.faces.ViewState". Si tienes más de un formulario en la misma pantalla este id se repite varias veces. Para evitar tener este id repetido puedes añadir al fichero /src/main/webapp/WEB-INF/web.xml del módulo web el siguiente context-param:
<context-param> <param-name>com.sun.faces.enableViewStateIdRendering</param-name> <param-value>false</param-value> </context-param>
Los panel de PrimeFaces con la propiedad toggleable="true" deben incluir siempre la propiedad toggleTitle. Sin esta propiedad el botón no tiene ningún texto asociado Ej.:
<p:panel toggleable="true" toggleTitle="#{messages['panel.toggleTitle']}">
...
</p:panel>
Los dataTable de PrimeFaces con la propiedad rowSelectMode="checkbox" deben incluir siempre la propiedad ariaRowLabel. Sin esta propiedad el checkbox no tiene ningún texto asociado Ej.:
<p:dataTable rowSelectMode="checkbox" ariaRowLabel="#{messages['dataTable.ariaRowLabel']}">
...
</p:dataTable>
Los calendar de PrimeFaces deben incluir la propiedad title con el texto que consideres oportuno. Ej.:
<p:calendar value="#{manejador.fecha}" title="#{messages['calendar.title']}" />
También se pueden incluir un p:outputLabel (con clase CSS "sr-only" si no queremos que se vea). Ej.:
<p:outputLabel value="#{messages['calendar.label']}" for="idCalendario" styleClass="sr-only" />
<p:calendar id="idCalendario" value="#{manejador.fecha}" />
Los inputTextarea de PrimeFaces deben incluir la propiedad title con el texto que consideres oportuno. Ej.:
<p:inputTextarea value="#{manejador.texto}" title="#{messages['inputTextarea.title']}" />
También se pueden incluir un p:outputLabel (con clase CSS "sr-only" si no queremos que se vea). Ej.:
<p:outputLabel value="#{messages['inputTextarea.label']}" for="idAreaTexto" styleClass="sr-only" />
<p:inputTextarea id="idAreaTexto" value="#{manejador.texto}" />
Los selectOneMenu de PrimeFaces deben incluir la propiedad labelledBy que apunte a un texto descriptivo del campo. Ej.:
<p:outputLabel id="idEtiqueta" value="#{messages['selectOneMenu.label']}" />
<p:selectOneMenu value="#{manejador.valorSeleccionado}" labelledBy="idEtiqueta">
...
</p:selectOneMenu>
También se pueden incluir un p:outputLabel (con clase CSS "sr-only" si no queremos que se vea). Ej.:
<p:outputLabel value="#{messages['selectOneMenu.label']}" for="idCombo" styleClass="sr-only" />
<p:selectOneMenu id="idCombo" value="#{manejador.valorSeleccionado}">
...
</p:selectOneMenu>
Los commandLink o link de PrimeFaces que, porque contienen un icono o por cualquier otro motivo, no incluyen la propiedad value deben incluir la propiedad title y/o la propiedad ariaLabel. Con la propiedad title aparece un tooltip y con ariaLabel no. Ej.:
<p:commandLink title="#{messages['commandLink.title']}" >
<span class="fa fa-check" />
</p:commandLink>
<p:commandLink ariaLabel="#{messages['commandLink.label']}" >
<span class="fa fa-check" />
</p:commandLink>
También se pueden incluir un p:outputLabel (con clase CSS "sr-only" si no queremos que se vea). Ej.:
<p:outputLabel for="idBoton" value="#{messages['commandLink.label']}" styleClass="sr-only" />
<p:commandLink id="idBoton">
<span class="fa fa-check" />
</p:commandLink>
También se pueden incluir el texto (con clase CSS "sr-only" si no queremos que se vea) dentro del componente. Ej.:
<p:commandLink>
<span class="fa fa-check" />
<span class="sr-only">#{messages['commandLink.text']}</span>
</p:commandLink>
Los enlaces simples del estilo <a href="xxx" …> que no tienen texto, solamente un icono, deben incluir la propiedad aria-abel. Ej.:
<a href="..." aria-label="#{messages['a.label']}">
<i class="fa fa-check" />
</a>
Los enlaces simples del estilo <a href="#" …> que no navegan a nuevo contenido deberían tener la propiedad role adecuada. Ej.:
<a href="#" role="button"> ... </a>
Los selectCheckboxMenu de PrimeFaces deben ir acompañados de un p:outputLabel (con clase CSS "sr-only" si no queremos que se vea). Ej.:
<p:outputLabel for="@next" value="#{messages['selectBooleanCheckbox.label']}" styleClass="sr-only" />
<p:selectBooleanCheckbox value="#{manejador.valoresSeleccionados}" />
...
</p:selectBooleanCheckbox>
Los fileUpload de PrimeFaces deben ir acompañados de un p:outputLabel (con clase CSS "sr-only" si no queremos que se vea). Ej.:
<p:outputLabel for="idSubirFichero" value="#{messages['fileUpload.label']}" styleClass="sr-only" />
<p:fileUpload id="idSubirFichero" />
Los ckEditor de las extensiones de PrimeFaces, los selectBooleanCheckbox de PrimeFaces, los dataTable de PrimeFaces con paginatorTemplate, los selectOneRadio de PrimeFaces, los tab de PrimeFaces y los toggleSwitch no se resaltan al recibir el foco. Se puede solucionar con el siguiente CSS:
.cke.cke_focus, .ui-sortable-column.ui-state-focus, .ui-chkbox-box.ui-state-focus, .ui-paginator .ui-paginator-next.ui-state-focus, .ui-paginator .ui-paginator-last.ui-state-focus, .ui-paginator .ui-paginator-first.ui-state-focus, .ui-paginator .ui-paginator-prev.ui-state-focus, .ui-paginator .ui-paginator-page.ui-state-focus, .ui-radiobutton .ui-radiobutton-box.ui-state-focus, .ui-tabs-nav .ui-tabs-outline, .ui-accordion .ui-tabs-outline, .ui-toggleswitch.ui-toggleswitch-focus, .ui-buttonset .ui-state-default.ui-state-focus {
outline: 2px dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset:-2px;
}
Bypass blocks: La página debería proporcionar un método accesible mediante teclado para saltar el contenido repetitivo y no tener que ir pasando con el tabulador por todos los elementos del menú para llegar al contenido principal (WCAG 2.4.1) Ejemplo:
...
<!-- Poner como primer elemento de la página al que se puede hacer foco -->
<div id="skip">
<a href="#maincontent">#{messages['label.skipToMain']}</a>
</div>
...
#skip a {
display: block;
position: absolute;
left: -999px;
top: -999px;
}
#skip a:focus {
left: 0;
top: 0;
z-index: 9000;
color: #b41515;
padding: 3px;
background: white;
border: 1px solid #990000;
}