Seite 5: Beispiel

Inhaltsverzeichnis

Beispielimplementierung einer Bibliothek

Im folgenden Beispiel wird der prinzipielle Mechanismus der Bibliothek anhand einer Implementierung mit GWT (Google Web Toolkit) gezeigt. Sie besteht aus einer Anzahl Klassen zur Instanziierung verschiedener Grafiken und Dialoge, die je nach Verwendung unterschiedlich konfiguriert werden. Bei den mit der Bibliothek eingebundenen Bildern liegt eine Besonderheit bei den Alternativtexten, die für Screenreader eine hohe Bedeutung haben. Wenn das entsprechende Attribut fehlt, wird in der Regel der Pfad beziehungsweise die URL des Bildes vorgelesen. Insbesondere für Bilder, die keinen inhaltlichen Mehrwert besitzen, lässt sich hier aber auch meistens kein sinnvoller Text finden. Deswegen besteht die Konvention, ein leeres Attribut für das Bild zu setzen. Damit ignoriert der Screenreader das Bild einfach. Das ist im Beispiel für eine Platzhaltergrafik umgesetzt.

Ausschnitt der Klasse für ein Warnsymbol:

public class WarnImage extends AbstractImage {

    /** Übersetzungsdefinitionen. */
    private static final AccessibleLibraryConstants CONSTANTS =
            GWT.create(AccessibleLibraryConstants.class);

    /** Standardklasse zur css Formatierung. */
    private static final String DEFAULT_STYLE = "image-warn";

    /**
     * Constructor
     */
    public WarnImage() {
        super(LibraryImages.WARNING, CONSTANTS.imageWarn(), DEFAULT_STYLE);
    }

}

Analog zeigt sich das Vorgehen beispielhaft hier für einen modalen Fehlerdialog und einen Dialog mit Einstellungsoptionen. GWT erzeugt bei seinen Widgets in erster Linie div-Container, weshalb es notwendig ist, mithilfe von ARIA den Dialogen ihre Strukturinformation zurückzugeben. Das wird im jeweiligen Constructor realisiert. Zusätzlich steuert man mit einer ARIA-Eigenschaft die Sichtbarkeit. Weitere Informationen zu ARIA finden sich auf der Seite des W3C.

Basisklasse für Warnmeldung der Bibliothek:

public abstract class AbstractWarningDialog extends AbstractDialog {

    protected AbstractWarningDialog(String text) {
        super(true, false, CONSTANTS.dialogTitle(), DEFAULT_STYLE);

        // Konfiguration der ARIA-Rolle als "alertdialog", initial bleibt der 
        // Dialog für Screenreader versteckt
        Roles.getAlertdialogRole().set(getElement());
        Roles.getAlertdialogRole().setAriaLabelProperty(getElement(), 
                   CONSTANTS.dialogTitle());
        Roles.getAlertdialogRole().setAriaDescribedbyProperty(getElement(), 
                   getDescriptionReference());
        Roles.getAlertdialogRole().setAriaHiddenState(getElement(), true);

        this.text = text;

    }

    @Override
    protected void createContent(Panel content, Panel wrapper) {

        // Konfiguration der Schaltfläche zur Bestätigung, beim Klicken wird 
        // der Dialog auch für Screenreader ausgeblendet
        closeButton.setText(CONSTANTS.dialogSubmit());
        registerInput(closeButton, true);
        closeButton.addClickHandler(new ClickHandler() {

            @Override
            public void onClick(ClickEvent event) {
                hide();
                Roles.getAlertdialogRole().setAriaHiddenState(getElement(),
                     true);
            }
        });

        // Hinzufügen der Elemente im Hauptbereich des Dialogs
        Panel wrapperwrapper = new FlowPanel();
        
        wrapperwrapper.add(new WarnImage());
        wrapperwrapper.add(wrapper);
        content.add(wrapperwrapper);
        content.add(closeButton);

    }

    @Override
    protected void createWrapper(Panel wrapper) {

        // Der Wrapper besteht bei diesem Dialogtyp lediglich aus der 
        // Warnmeldung
        demoMessage.setText(text);
        wrapper.add(demoMessage);

    }

    @Override
    public void show() {

        // Der Dialog wird für Screenreader sichtbar gemacht und der Fokus auf 
        // das zuvor definierte Element gesetzt
        super.show();
        center();
        Roles.getAlertdialogRole().setAriaHiddenState(getElement(), false);
        setInitialFocus();

    }

}

Ausschnitt der Implementierung einer Warnmeldung innerhalb einer Anwendung:

public class DemoApplication implements EntryPoint {

    /** Schaltfläche für das Anzeigen des Warndialogs. */
    private final Button modalButton = new Button();

    /** Warndialog. */
    private final DemoWarning warningDialog = new DemoWarning();

    @Override
    public void onModuleLoad() {

        ...

        // Konfiguration der Schaltfläche für die Anzeige des Warndialogs
        modalButton.setText(CONSTANTS.mainButtonModal());
        modalButton.addClickHandler(new ClickHandler() {

            @Override
            public void onClick(ClickEvent event) {
                warningDialog.show();
            }
        });

        ...

    }

}