Barrierefreie JSF-Komponenten

In JSF-Projekten stößt man schnell an die Genzen, wenn es um das Thema Barrierefreiheit geht. Die meisten Renderer der jeweiligen JSF-Komponenten tragen diesem Konzept leider viel zu selten Rechnung. Häufig fehlt die Möglichkeit in den HTML-Komponenten die notwendigen ARIA-Attribute zu setzen.

Seit JSF 2.0 besteht jedoch die Möglichkeit die Renderer von JSF-Komponenten zu erweitern. Diese Mechanik eignet sich sehr gut dazu, um die Komponenten Barrierefrei zu machen. Eine Beispielhafte Lösung eines Renderers für ein Eingabefeld könnte wie folgt aussehen:

public class InputTextRendererWithAriaSupport extends TextRenderer {
 
  enum AriaAttribute{
      REQUIRED("aria-required"),
      READONLY("aria-readonly"),
      AUTOCOMPLETE("aria-autocomplete"),
      MULTILINE("aria-multiline"),
      LABEL("aria-label"),
      CHECKED("aria-checked");
       
      private String attributeName;
       
      private AriaAttribute (String attributeName){
          this.attributeName = attributeName;
      }
 
      public String getAttributeName() {
          return attributeName;
      }
  } 
     
  @Override
  protected void getEndTextToRender(FacesContext context, UIComponent component, String currentValue)
  throws java.io.IOException {
 
    ResponseWriter writer = context.getResponseWriter();
    for (AriaAttribute ariaAttribut : AriaAttribute.values()) {
      // Prüfen, ob eins der ARIA-Attribute gesetzt wurde.
      String value = (String) component.getAttributes().get(ariaAttribut.getAttributeName());
       
      if (value != null) {
        //Das ARIA-Attribut wird mit den zugehörigen Wert geschrieben und
        //der Kompente angehangen. 
        writer.writeAttribute(ariaAttribut.getAttributeName(), value, ariaAttribut.getAttributeName());
      }
    }
    //Die Methode EndTextToRender der Superklasse aufrufen
    super.getEndTextToRender(context, component, currentValue);
  }
} 

Hier wird die Methode "getEndTextToRender" besteht nun die Möglichkeit in den Renderprozess der Komponente einzugreifen und diese dynamisch mit Attributen zu erweitern.

Anschließend muss noch der Renderer "javax.faces.text" in der faces-config.xml überschrieben werden:

<render-kit>
    <renderer>
        <component-family>javax.faces.Input</component-family>
        <renderer-type>javax.faces.Text</renderer-type>
        <renderer-class>de.ordix.jsf.InputTextRendererWithAriaSupport</renderer-class>
    </renderer>
</render-kit> 

Der generierte HTML-Code besitzt von nun an auch die notwendigen ARIA-Elemente:

<input aria-required="true" aria-readonly="true" id="meinFormular:textField" type="text" name="meinFormular:textField" />