Überblick über Umsetzungen im Detail A - Z

Automatisch durch Intrexx gesetzte Überschriften

Wenn Sie in Intrexx eine neue Seite anlegen, wird für diese automatisch eine H1-Überschrift mit dem Titel der Seite vergeben.

Beziehung von Formularelement und Label über "aria-labelledby" herstellen

Sie haben in Intrexx die Möglichkeit, die Beziehung von einem (Formular-)Element und Label manuell herzustellen. Dies erfolgt über das ARIA Attribut "aria-labelledby".

Schritt 1: Ermitteln Sie den Namen des Labels, auf das Sie referenzieren möchten.

Schritt 2: Erfassen Sie den Namen in dem Element, von dem aus Sie referenzieren möchten.

Schritt 1: Namen des Labels ermitteln

Schritt-für-Schritt

Um den Namen eines Elements zu ermitteln, gehen Sie wie folgt vor:

1. Markieren Sie die Seite, auf der sich das Element befindet.

2. Führen Sie einen Rechtsklick aus.

3. Wählen Sie die Option "Elemente anzeigen" aus.

4. Markieren Sie das Element, dessen Namen Sie ermitteln möchten.

5. Führen Sie einen Rechtsklick aus.

6. Wählen Sie die Option "Details" aus.

   

   Das Dialogfenster "Details" wird angezeigt.

   

   Der Name wird angezeigt.

Schritt 2: Namen erfassen

Schritt-für-Schritt

Um die Referenz zu einem anderen Element herzustellen, gehen Sie wie folgt vor:

1. Öffnen Sie das Element, bei dem Sie die Referenz zu einem anderen Element hinterlegen möchten.

2. Wechseln Sie auf die Registerkarte "Barrierefreiheit".

3. Klicken Sie auf das - Icon.

   Ein neuer, leerer Datensatz für ARIA Attribute wird angezeigt.

4. Wählen Sie in der Auswahlliste "ARIA Attribute" den Wert "aria-labelledby" aus.

5. Erfassen Sie im Feld "Wert" Folgendes: "ID_" + Name des Elements, auf das Sie referenzieren möchten.

   Im dargestellten Beispiel lautet der Wert folgendermaßen: "ID_labelcontrol64CC76C9"

   

Bezug von Formularelement und Label

Ein wichtiger Aspekt der Barrierefreiheit besteht im korrekten Bezug zwischen Eingabe- bzw. Formularfeldern und deren Beschriftung (Label).

(Die Begriffe Beschriftung, Label, Titel oder Feldtitel werden häufig gleichbedeutend verwendet.)

Während für sehende Menschen der Bezug zwischen Feld und Beschriftung durch deren räumliche Nähe offenkundig ist, muss dieser Bezug für Blinde programmatisch, also durch den im Browser interpretierten Quellcode, herstellbar sein, damit assistive Technologien diesen Bezug dem Blinden vermitteln können.

(Dieser Aspekt der Barrierefreiheit, der weniger im Zusammenhang mit der optischen Strukturierung einer Seite, sondern mit dem Bezug zwischen Elementen.)

9.1.3.1h Beschriftung von Formularelementen programmatisch ermittelbar

Elemente mit Labeln

Wenn Sie in Intrexx Elemente verwenden, die ein Label haben können, dann haben Sie immer die Möglichkeit, dieses Label zusammen mit dem Element zu erzeugen. Das Label ist dann automatisch mit dem Element verbunden und der Bezug kann von assistiven Technologien ermittelt werden.

Beispiel - Eingabefeld

Aktivieren Sie beim Anlegen eines Eingabefelds das Kontrollkästchen "Feldtitel erzeugen". Der Feldtitel wird als Label für das Eingabefeld verwendet.

Beispiel - Formularassistent

Wenn Sie den Formularassistenten verwenden, wird der Titel (Label) und das zugehörige Datenfeld angezeigt.

Nach dem Schließen des Formularassistenten wird der Bezug von Label und Feld im Applikationsdesigner durch die optische Nähe signalisiert.

CAPTCHAs

9.1.1.1d Alternativen für CAPTCHAs

Das CAPTCHA-Element von Intrexx ist aktuell noch nicht barrierefrei gestaltet. Falls Sie CAPTCHAS benötigen, sollten Sie eine textbasierte Alternative umsetzen.

Datentabellen richtig aufbauen

9.1.3.1e Datentabellen richtig aufgebaut

9.1.3.1f Zuordnung von Tabellenzellen

Wenn Sie in Intrexx das Element "Ansichtstabelle" nutzen, wird die entsprechende Tabelle automatisch mit den passenden HTML-Tags ausgezeichnet.

Achten Sie darauf, der Ansichtstabelle einen Titel zu geben und das Kontrollkästchen "Titel anzeigen" zu aktivieren.

Dauer der Portal-Session

Sie können die Dauer der Portal-Session festlegen. Dies erfolgt in den Portaleigenschaften. Diese erreichen Sie über "Hauptmenü 'Portal' > Portaleigenschaften > Startparameter".

Vor Ablauf der eingestellten Session-Dauer wird der Portal-Benutzer durch einen Dialog auf den Umstand hingewiesen und kann hier die Session weiter verlängern.

Weitere Informationen

Portaleigenschaften - Startparameter

Element - Diagramm

Beim Element "Diagramm" können Sie keine Textalternative erfassen. Über ARIA-Rollen und -Attribute können Sie jedoch die Grafik näher spezifizieren.

Wenn Sie manuell keine ARIA Rolle erfassen, wird standardmäßig die Rolle "graphics-datachart" in der veröffentlichten Applikationsseite hinterlegt.

Weitere Informationen

Diagramm

Element - Schaltfläche

9.1.1.1a Alternativtexte für Bedienelemente

Beim Anlegen einer Schaltfläche können Sie zwischen drei Schaltflächentypen wählen:

• Schaltfläche

• Text

• Bild

Im Zusammenhang mit der Barrierefreiheit ist die Option "Bild" besonders wichtig.

	Wenn Sie beispielsweise ein Bild mit dem Text "Neu" verwenden, dann kann ein Screenreader diesen Text nicht identifizieren.
	Ein Bild oder ein Icon mit einem Symbol, kann von einem Screenreader ebenfalls nicht interpretiert werden.

In beiden Fällen ist es erforderlich, eine Textalternative zu hinterlegen. Diese Textalternative sollte nicht nur den Text auf der Schaltfläche wiederholen oder die Bedeutung des Symbols angeben. Vielmehr sollte die Aktion beschrieben werden, die durch das Betätigen der Schaltfläche ausgelöst wird.

So könnte die Textalternative beispielsweise "Neuen Kunden anlegen" oder "Neues Projekt anlegen" lauten.

Schritt-für-Schritt

Um einen Schaltflächentyp "Bild" mit einer Textalternative zu versehen, gehen Sie wie folgt vor:

1. Wählen Sie den Schaltflächentyp "Bild" aus.

   

2. Wechseln Sie im Navigationsbereich auf den Eintrag "Bild".

   

   Beachten Sie, dass der im Feld "Titel" hinterlegte Text nicht als Textalternative verwendet wird. Er wird von Screenreadern nicht interpretiert.

3. Klicken Sie auf das -Icon (Textalternative bearbeiten).

   Das Dialogfenster "Textalternative" wird angezeigt.

   

4. Erfassen Sie im Feld "Beschreibung" den Alternativtext.

Weitere Informationen

Schaltfläche

Feldgruppierungen (Fieldset) mit Überschriften versehen

Sie haben die Möglichkeit, Elemente zu gruppieren und diese Gruppierung mit einer Überschrift zu versehen.

Schritt-für-Schritt

1. Fügen Sie das Element "Gruppierung" auf die Seite ein.

2. Wechseln Sie auf die Registerkarte "Optionen".

3. Wählen Sie im Auswahlfeld "HTML-Element" den Wert "Fieldset (z.B. Gruppe von Eingabeelementen)" aus.

4. Aktivieren Sie das Kontrollkästchen "Titel anzeigen".

   

5. Wechseln Sie auf die Registerkarte "Ansicht".

6. Klicken Sie auf das Stift - Icon. (Klicken Sie nicht auf das nach unten zeigende Pfeil-Icon.)

   

   Das Dialogfenster "Styleklasse auswählen" wird angezeigt.

   

7. Wählen Sie die gewünschte Styleklasse aus.

8. Klicken Sie auf "OK".

Fokus setzen - Eingabefelder und Schaltflächen

Über das Hauptmenü "Bearbeiten" / Fokus setzen oder über das Kontextmenü können Eingabefelder und Schaltflächen mit dem Typ "Schaltfläche" oder "Text" beim Laden der Seite den Fokus erhalten. Dabei können ein oder mehrere Elemente der Seite mit "Fokus setzen" eingestellt werden. Nach dem Laden erhält dann das erste sichtbare Element den Fokus.

Fokus setzen - Seiten

In den Seiteneigenschaften kann festgelegt werden, dass die Seite keinen Fokus setzt. Ist für kein Element auf einer Seite "Fokus setzen" eingestellt, so wird das erste fokussierbare Element der Seite automatisch bestimmt und der Fokus dort gesetzt. Dabei gibt es folgende Ausnahmen:

• Der Fokus wird nicht auf Felder in Frei gestalteten Tabellen gesetzt

• Der Fokus wird nicht innerhalb von Portlets gesetzt

• Auf Seiten mit Tabindex wird der Fokus auf das Element mit Tabindex 1 gesetzt

Frei gestaltete Tabelle als Liste

Beachten Sie, dass der Einsatz des Elements "Frei gestaltete Tabelle" einer Seite einen gewissen Grad an Komplexität verleiht und daher dem Grundsatz, eine Applikation möglichst einfach zu gestalten, nicht ganz entspricht (vgl. Gestalten Sie Ihre Applikationen möglichst einfach).

Sie haben die Möglichkeit, das Element "Frei gestaltete Tabelle" als ungeordnete Liste auf einer Seite darzustellen.

Schritt-für-Schritt

1. Wechseln Sie auf die Registerkarte "Optionen".

2. Wählen Sie im Auswahlfeld "Darstellung Datensätze" den Wert "Unordered List (z.B. Liste von Ansichtselementen)" aus.

   

Beachten Sie, dass die eingebundene Seite keine Überschrift mit einem H1-Tag hat, da die Seite, die die Frei gestaltete Tabelle enthält, dann zwei H1-Tags enthalten würde.

Die eingebundene Seite sollte responsiv sein.

Weitere Informationen

Frei gestaltete Tabelle

Fremdsprachiger Text

Anderssprachige Wörter oder Passagen müssen mit einem lang-Attribut ausgezeichnet werden. Handelt es sich also z.B. um englischen Text, muss lang="en" eingefügt werden. Nur so ist sichergestellt, dass die Passage einem blinden Nutzer mit englischer Aussprache vorgelesen wird. Auch andere fremdsprachige Wörter sollten ausgezeichnet werden.

Auch hier gilt, dass Sie im Element "Statisches Textfeld" alle HTML-Strukturelemente verwenden können.

Home-Logo

Häufig findet sich an der linken oberen Ecke eines Portals ein Firmenlogo. In der Regel ist dies mit einem Link auf die Startseite des Portals verlinkt. Es ist hilfreich dies in den Linktext mit aufzunehmen. Ein Linktext könnte also beispielsweise lauten: "Intrexx - Zur Startseite".

Schritt-für-Schritt

Um den Linktext für das Home-Logo manuell anzupassen, gehen Sie wie folgt vor:

1. Starten Sie das Modul "Design".

2. Öffnen Sie das entsprechende Layout.

3. Markieren Sie in der Struktur-Ansicht das Element "Link" ("Umgebender Container > Container Header > Grid Header > Spalte Homelink / Actioncontrols")

   

   In den Element-Einstellungen wird das Feld "Link-Titel" angezeigt.

4. Passen Sie den Linktext an.

Icons in Tabellen

In Tabellen können Sie Icons verwenden. Häufig werden das Lupen-Icon und das Stift-Icon verwendet.

Auch für die in Tabellen verwendeten Icons ist es erforderlich, Textalternativen zu hinterlegen.

Schritt-für-Schritt

Um ein Icon in einer Tabelle mit einer Textalternative zu versehen, gehen Sie wie folgt vor:

1. Markieren Sie das Icon (Bild), dem Sie eine Textalternative hinzufügen möchten.

   

2. Klicken Sie auf das - Icon.

   Sie gelangen in das Dialogfeld "Schaltfläche Bild".

3. Markieren Sie im Navigationsbereich den Eintrag "Bild".

4. Klicken Sie auf das -Icon (Textalternative bearbeiten).

   

   Das Dialogfenster "Textalternative" wird angezeigt.

   

5. Erfassen Sie im Feld "Beschreibung" den Alternativtext.

Weitere Informationen

Ansichtstabelle

Landmarks

Bestimmte Bereiche von Portal- und Applikationsseiten lassen sich mit Landmarks bzw. Rollen kennzeichnen. Zentrale Landmarks sind u.a. Banner, Navigation, Main und Contentinfo.

Bei der Verwendung des Barrierefreien Layouts sind zentrale Landmarks voreingestellt.

Sie können auch manuell Landmarks zuweisen.

Schritt-für-Schritt

1. Starten Sie das Modul "Design".

2. Öffnen Sie das gewünschte Layout.

3. Markieren Sie in der Strukturansicht das Element, dem Sie eine Landmark zuweisen wollen ().

4. Wählen Sie in den Element-Einstellungen im Auswahlfeld "Rolle" die gewünschte Landmark aus ().

   

Weitere Informationen

Design - WAI-Aria Rollen

Listenfeld

Mit dem Element "Listenfeld" können Sie Listen erzeugen.

Wir empfehlen, die Auswahl "Standard" zu verwenden.

Auswahl "Unordered List (z.B. Liste von Ansichtselementen)"

Wenn Sie beim HTML-Element den Wert "Unordered List (z.B. Liste von Ansichtselementen)" wählen, dann müssen Sie in der Registerkarte "Barrierefreiheit" das ARIA-Attribut "aria-labelledby" auswählen und die ID des zugehörigen Textfeldes hinterlegen. Dadurch ist gewährleistet, dass der Titel korrekt vorgelesen wird.

Detaillierte Informationen zur Verwendung von "aria-labelledby" finden Sie in Abschnitt ARIA-Attribut "labelledby".

Weitere Informationen

Auswahlliste / Listenfeld

Schmuckbilder (Layoutgrafiken)

9.1.1.1c Leere alt-Attribute für Layoutgrafiken

Dekorative Bilder oder Schmuckbilder haben keine informative Funktion und sollten keine Textalternative enthalten. Bei Schmuckbildern kann es sich zum Beispiel um Abstandshalter, Farbflächen, Muster oder rein dekorative Grafiken handeln. Schmuckbilder sollten mit einem leeren Alt-Attribut ausgezeichnet sein.

Alle von Intrexx eingesetzten Schmuckbilder sind mit einem leeren Alt-Attribut ausgezeichnet. Falls Sie weitere Schmuckbilder verwenden möchten, achten Sie darauf, keine Textalternativen zu verwenden.

Seitentitel für die Startseite des Portals anpassen

Standardmäßig lautet der Titel der Portal-Startseite "Intrexx".

Es ist hilfreich, der Portal-Startseite einen sprechenden und für Screenreader geeigneten Titel zu geben wie z.B. "Startseite - Intrexx".

Schritt-für-Schritt

Um den Seitentitel für die Startseite des Portals anzupassen, gehen Sie wie folgt vor:

1. Starten Sie das Dialogfenster "Menüstruktur bearbeiten..." (Hauptmenüpunkt "Portal" > Menüstruktur bearbeiten...").

2. Legen Sie im Portalmenü an erster Stelle einen neuen leeren Ordner an.

3. Vergeben Sie für den Ordner einen sprechenden Titel z.B. "Startseite".

   

   Der im Eingabefeld "Titel" eingegebene Text wird im Browser-Tab angezeigt.

4. Erteilen Sie dem Benutzer "Anonymous" Rechte an dieser Seite.

   

   Da der Ordner keine Applikationen enthält, funktioniert die Seite im Portalbetrieb wie ein "Home"-Button. Das Erscheinungsbild der Seite kann z.B. über eine Portalseite weiter angepasst werden.

Weitere Informationen

Menüstruktur des Portals bearbeiten

Info und Beziehungen (Seiten und Inhalte strukturieren)

Überschriften mit Element "Statischer Text" anlegen

Sie können auf einer Seite Überschriften platzieren, indem Sie das Element "Statischer Text" auf der Seite platzieren.

Schritt-für-Schritt

1. Wechseln Sie auf die Registerkarte "Ansicht".

2. Erfassen Sie im Eingabefeld "Styleklasse" einen der Werte von "Text_H1" bis "Text_H6".

   Diese entsprechen jeweils den Html-Tags <h1> bis <h6>.

   Oder

3. Klicken Sie auf das Stift - Icon. (Klicken Sie nicht auf das nach unten zeigende Pfeil-Icon.)

   

   Das Dialogfenster "Styleklasse auswählen" wird angezeigt.

   

4. Wählen Sie die gewünschte Styleklasse aus.

5. Klicken Sie auf "OK".