BlueSpice4

1 BITV Prüfdokumentation BlueSpice

1.1 Testgegenstand

1.1.1 Getestete Seiten, Name, URL

Seite 1: Anmelden

Seite 2: Seite lesen & Suche (Reader)

Seite 3: Seite erstellen/bearbeiten (Editor)

Seite 4: Adminbereich (Admin)

• Sidebar bearbeiten
• Benutzerverwaltung
• Rechteverwaltung
• Datenschutzverwaltung
• Konfigurationsverwaltung

Seite 5: Einstellungen & Benachrichtigungen

1.1.2 Testdurchführung

Wer: Fiona Heilemann, T-Systems MMS

Wann: 05.01.2023 – 13.01.2023

Empfohlene Tools: Screenpresso zur Dokumentation

1.1.3 Testumgebung

Betriebssystem: Windows 10 Enterprise

NVDA: 2022.3.1

1.1.4 Browser, Version

Chrome: 108.0.5359.95 (Offizieller Build) (64-Bit)

Firefox: 102.5.0esr (64-Bit)

2 (alle)

Seite 1 – 5: na

3 (nur: e,ne,na)

Seite 1 – 5: na

4 (alle)

Seite 1 – 2: na

Seite 3: e

Seite 4 – 5: na

5 (alle)

Seite 1 – 5: na

6 (alle)

Seite 1 – 5: na

7 (nur: e,ne,na)

Seite 1 – 5: na

8 (alle)

Seite 1 – 5: na

9 (alle)

Seite 1 – 5: na

10 (alle)

Seite 1 – 5: na

11 (alle)

Seite 1 – 5: na

12 (alle)

Seite 1 – 5: na

13 (alle)

Seite 1 – 5: na

14 (alle)

Seite 1 – 5: na

15 (alle)

Seite 1 – 5: na

16 (alle)

Seite 1 – 5: na

17 (alle)

Seite 1 – 5: na

18 (alle)

Seite 1 – 5: na

19 (alle)

Seite 1 – 5: na

20 (alle)

Seite 1 – 5: na

21 (alle)

Seite 1 – 5: na

22 (alle)

Seite 1 – 5: na

23 (alle)

Seite 1 – 5: na

24 (alle)

Seite 1 – 5: na

25 (alle)

Seite 1 – 5: na

26 (alle)

Seite 1 – 5: na

27 (alle)

Seite 1 – 5: na

28 (alle)

Seite 1 – 5: na

29 (alle)

Seite 1 – 5: na

30 (alle)

Seite 1: te

Seite 2 – 4: ne

Seite 5: te

30.1.1 Seite 1 – 5: te

Der Link auf dem Logo ist auf allen Seiten mit „Zurück“ beschriftet. Dies ist nicht sehr aussagekräftig. Im Code ist ein Hochkomma falsch gesetzt, weswegen die vollständige Beschriftung „Zurück zu Hauptseite“ nicht ausgegeben wird. Zusätzlich ist der Text des Logos nicht wahrnehmbar.

Empfehlung:

• Das aria-label Attribut sollte korrigiert werden, damit die vollständige Beschriftung ausgegeben wird (und Syntaxfehler vermieden werden).
• Da das Logo vom Wiki-Admin angepasst werden kann, sollte es dort eine Möglichkeit geben, den Alternativtext anzugeben, damit Screenreader-Nutzer das Logo wahrnehmen können.

30.1.2 Seite 2: ne

In der Anwendung werden blaue grafische Elemente als Buttons verwendet. Diese werden vom Screenreader größtenteils ohne Beschriftung ausgegeben. Die Ursache ist, dass die Elemente zwar ein title-Attribut haben, dieses jedoch nur beim linearen Lesen und auf interaktiven Elementen ausgegeben wird.

In der erweiterten Suche betrifft dies auch die Buttons zum Löschen eines Filters.

Empfehlung:

• Die Umsetzung der blauen Button-Elemente sollte überprüft werden (siehe auch 9.2.1.1).
• Die Buttons sollten mit einem aria-label für Screenreader beschriftet werden.

30.1.3 Seite 3: ne

Blaue Buttons wie Seite 2.

Zusätzlich sind die Buttons für die Einstellungen einer Diskussion und die Links zum Bearbeiten eines Beitrags nicht beschriftet.

Empfehlung:

• Die Umsetzung der blauen Button-Elemente sollte überprüft werden (siehe auch 9.2.1.1).
• Alle Links und Buttons sollten mit einem aria-label für Screenreader beschriftete werden.

30.1.4 Seite 4: ne

Blaue Buttons wie Seite 2.

Der Schalter zum Abbrechen der Bearbeitung der Seitenleiste wird ohne Beschriftung ausgegeben. Zusätzlich werden beim Navigieren der Baumansicht sehr viele unbeschriftete Links und Buttons ausgegeben.

In den Tabellen des Adminbereichs werden die Schalter in der Paginierung vom Screenreader ohne Beschriftung ausgegeben.

In der Rechteverwaltung sind die Info-Buttons nicht beschriftet.

Empfehlung:

• Alle Links und Buttons sollten mit einem aria-label für Screenreader beschriftete werden.
• Die Umsetzung der Baumstruktur sollte überprüft werden (siehe 9.4.1.2).

31 (alle)

Seite 1 – 3: na

Seite 4: ne

Seite 5: na

31.1.1 Seite 4: ne

In der Tabelle der Datenschutzerklärungen werden die Icons (Häkchen und Kreuze) nicht vom Screenreader ausgegeben.

Empfehlung:

• Die Icons sollten ausgegeben werden. Auf der Seite „Namensraumverwaltung“ werden die Icons bspw. als Bilder mit Alternativtext eingefügt, was für Screenreader-Nutzer wahrnehmbar ist.

32 (alle)

Seite 1 – 5: na

32.1 Optionale Empfehlung

Mit dem Editor können Grafiken eingefügt werden. Der Editor wird jedoch nicht gezwungen, einen Alternativtext für diese anzugeben. Dadurch ist es möglich, Grafiken ohne Alternativtext einzubinden, die dann vom Screenreader als unbeschriftete Links ausgegeben werden, da alle Grafiken durch Aktivierung des Links vergrößert werden können. Es sollte möglich sein, ein Bild beim Hinzufügen als Layoutgrafik zu kennzeichnen, um Editoren das Hinzufügen von Grafiken zu ermöglichen, die vom Screenreader ignoriert werden sollen, bspw. wenn es eine Textalternative gibt und daher keine Ausgabe der Grafik nötig ist.

33 (alle)

Seite 1 – 5: na

34 (alle)

Seite 1 – 5: na

35 (alle)

Seite 1 – 5: na

36 (alle)

Seite 1 – 5: na

37 (alle)

Seite 1 – 5: na

38 (alle)

Seite 1 – 5: na

39 (alle)

Seite 1 – 5: e

40 (alle)

Seite 1 – 5: e

41 (alle)

Seite 1 – 5: na

42 (alle)

Seite 1: na

Seite 2 – 4: te

Seite 5: e

42.1.1 Seite 2 – 4: te

Für fett hervorgehobene Textelemente wird das -Element verwendet. Die Hervorhebung der Texte ist auf diese Weise jedoch nur darstellungsbezogen und nicht semantisch erkennbar.

Empfehlung:

• Für Hervorhebungen im Text sollte verwendet werden.

42.1 9.1.3.1e Datentabelle richtig aufgebaut

42.1.1 Bewertung*

43 (alle)

Seite 1: na

Seite 2 – 3: e

Seite 4: ne

Seite 5: te

43.1 Dokumentation der einzelnen Seiten/Prozesse

43.1.1 Seite 4: ne

In der Verwaltung der Berechtigungen wird eine Tabelle genutzt, um Berechtigungen an Nutzer zu vergeben. Visuell ist die Zuordnung der Checkboxen zu den Zeilen und Spalten offensichtlich. Mit dem Screenreader ist dies jedoch nicht möglich, da der Bereich aus mehreren Tabellen besteht, und daher die Navigation zwischen den zusammenhängenden Zeilen nicht möglich ist.

Empfehlung:

• Die programmatische Struktur sollte mit einer Tabelle umgesetzt werden, bei der Zeilen und Spalten korrekt zuordenbar sind.

43.1.2 Seite 5: te

In den Einstellungen wird bei der Tabelle der Ereignisbenachrichtigungen die Spaltenüberschrift („Wiki“ & „E-Mail“) nicht ausgegeben, wenn zwischen den Spalten navigiert wird.

Empfehlung:

• Die Implementierung der Spaltenüberschriften sollte überprüft werden. Bei der Tabellennavigation sollte der Screenreader die entsprechende Überschrift ausgeben.

43.1 9.1.3.1f Zuordnung von Tabellenzellen

43.1.1 Bewertung*

44 (alle)

Seite 1 – 5: na

44.1 9.1.3.1g Kein Strukturmarkup für Layouttabellen

44.1.1 Bewertung*

45 (alle)

Seite 1: na

Seite 2 – 5: e

45.1 9.1.3.1h Beschriftung von Formularelementen programmatisch ermittelbar

45.1.1 Bewertung*

46 (alle)

Seite 1 – 2: e

Seite 3 – 4: te

Seite 5: e

46.1 Dokumentation der einzelnen Seiten/Prozesse

46.1.1 Seite 3: te

Bei einigen Eingabefeldern und Textfeldern wird die sichtbare Beschriftung nicht vom Screenreader ausgegeben, wenn die Felder den Fokus erhalten.

Empfehlung:

• Bei Fokussierung eines Formularelements wie z.b. Eingabefelder sollte vom Screenreader die sichtbare Beschriftung ausgegeben werden.

46.1.2 Seite 4: te

Wie Seite 3.

Das Eingabefeld in der Paginierung ist zwar mit einem aria-describedby Attribut beschriftete, dieses zeigt jedoch auf ein leeres -Element, wodurch die eigentliche Beschriftung „Seite…von 2“ nicht ausgegeben wird.

Empfehlung:

• Bei Fokussierung eines Formularelements wie z.b. Eingabefelder sollte vom Screenreader die sichtbare Beschriftung ausgegeben werden.

46.1 9.1.3.2 Sinnvolle Reihenfolge

46.1.1 Bewertung*

47 (alle)

Seite 1 – 5: e

47.1 9.1.3.3 Ohne Bezug auf sensorische Merkmale nutzbar

47.1.1 Bewertung*

48 (Immer anwendbar, sonst alle)

Seite 1 – 5: e

48.1 9.1.3.4 Keine Beschränkung der Bildschirmausrichtung

48.1.1 Bewertung*

49 (Immer anwendbar, sonst alle)

Seite 1 – 5: e

49.1 9.1.3.5 Eingabefelder zu Nutzerdaten vermitteln den Zweck

49.1.1 Bewertung*

50 (alle)

Seite 1: e

Seite 2 – 5: na

50.1 9.1.4.1 Ohne Farbe nutzbar

50.1.1 Bewertung*

51 (Immer anwendbar, sonst alle)

Seite 1: te

Seite 2: te

Seite 3 – 4: e

Seite 5: te

51.1 Dokumentation der einzelnen Seiten/Prozesse

51.1.1 Seite 1: te

Die Links in der Anwendung unterscheiden sich zu den nicht-interaktiven Textelementen nur über die Farbe (blau/rot zu schwarz). Die Farben haben nur einen Kontrastabstand von 2,2:1 zueinander. Durch den zu geringen Kontrastabstand kann schlecht zwischen normalem Text und Links unterschieden werden.

Empfehlung:

• Die Links sollten nicht nur über Farbe unterscheidbar sein, sondern ein weiteres Merkmal besitzen, bspw. eine Unterstreichung oder dickere Schrift. Alternativ sollte der Kontrastabstand zwischen den Elementen mind. 3:1 betragen.

51.1.2 Seite 2: te

Wie Seite 2.

Die Links in Wikiinhalten können von den Editoren manuell unterstrichen werden. Da bei der Erstellung (Seite 3) jedoch die Links unterstrichen dargestellt werden, ist dies für die Editoren u.U. nicht ersichtlich.

51.1.3 Seite 5: te

Wie Seite 2.

Zusätzlich ist die aktive Registerkarte in den Einstellungen nur durch einen weißen Hintergrund von den nicht-aktiven unterscheidbar. Der Kontrast zwischen weiß und grau beträgt 1,2:1.

51.1 9.1.4.2 Ton abschaltbar

51.1.1 Bewertung*

52 (alle)

Seite 1 – 5: na

52.1 9.1.4.3 Kontraste von Texten ausreichend

52.1.1 Bewertung*

53 (alle)

Seite 1 – 5: te

53.1 Dokumentation der einzelnen Seiten/Prozesse

53.1.1 Seite 1 – 5: te

Einige Textkontraste in der Anwendung sind zu gering, d. h. der Kontrastabstand zwischen Text und Hintergrund liegt unter 4,5:1. Dadurch sind die Texte für sehbeeinträchtigte Nutzer u.U. nicht gut sichtbar. Die betrifft bspw. folgende Texte:

• Schriftgrafiken im Footer: 2,7:1

Empfehlung:

• Alle (kleinen) Texte sollten einen Kontrastabstand von mind. 4,5:1 zum Hintergrund besitzen.

53.1.2 Seite 2: te

Wie Seite 1.

• Grau-blaue Buttons: 2,4:1

53.1.3 Seite 4: te

Wie Seite 1.

• Hinweistext unter Datenschutzverwaltung: 3,34:1

53.1 9.1.4.4 Text auf 200% vergrößerbar

53.1.1 Bewertung*

54 (alle)

Seite 1 – 4: e

Seite 5: ne

54.1 Dokumentation der einzelnen Seiten/Prozesse

54.1.1 Seite 5: ne

Bei der Vergrößerung der Anwendung auf 200% wird der Bereich „Letze Aktivität“ auf der Seite der Benachrichtigungen nicht mehr angezeigt.

Empfehlung:

• Beim Zoomen der Anwendung sollten alle Elemente weiterhin sichtbar und bedienbar sein.

54.1 9.1.4.5 Verzicht auf Schriftgrafiken

54.1.1 Bewertung*

55 (Immer anwendbar, sonst alle)

Seite 1 – 5: ne

55.1 Dokumentation der einzelnen Seiten/Prozesse

55.1.1 Seite 1 – 5: ne

In der Fußzeile werden Links verwendet, die nicht als Text umgesetzt sind, sondern als Schriftgrafik. Diese Grafiken können vom Nutzer nicht angepasst werden (bspw. Anpassung des Textabstands) und werden beim Zoomen unscharf.

Empfehlung:

• Die Links sollten nicht mittels Schriftgrafiken umgesetzt werden. Stattdessen kann der Text der Links entsprechen gestyled werden.

55.1 9.1.4.10 Inhalte brechen um

55.1.1 Bewertung*

56 (alle)

Seite 1 – 3: e

Seite 4 – 5: ne

56.1 Dokumentation der einzelnen Seiten/Prozesse

56.1.1 Seite 4: ne

Bei einer Browserfenster-Breite von 1280 px und einer Vergrößerung von 400 % brechen Bereiche der Anwendung nicht korrekt um oder Texte werden abgeschnitten. Dies betrifft folgende Elemente:

• Die Konfigurationsverwaltung bricht nicht um, Texte sind nicht lesbar.
• Tabellen werden stark gestaucht (z.B. Benutzerverwaltung).
• Die Baumstruktur beim Bearbeiten der Sidebar muss horizontal gescrollt werden.

Empfehlung:

• Auch bei starkem Zoom der Anwendung sollten alle Elemente weiterhin sichtbar und bedienbar sein.
• Die Elemente sollten so umbrechen, dass sie nicht überlappen und Texte weiterhin lesbar sind.
• Es sollte nicht horizontal gescrollt werden müssen. Ausnahmen hiervon sind bspw. Tabellen. Diese sollten nicht zu stark gestaucht werden.

56.1.2 Seite 5: ne

Bei einer Browserfenster-Breite von 1280 px und einer Vergrößerung von 400 % überlappen sich einige Texte in den Einstellungen.

Zusätzlich ist der Bereich „Letze Aktivität“ auf der Seite der Benachrichtigungen nicht mehr sichtbar.

Empfehlung:

• Auch bei starkem Zoom der Anwendung sollten alle Elemente weiterhin sichtbar und bedienbar sein.
• Die Elemente sollten so umbrechen, dass sie nicht überlappen und Texte weiterhin lesbar sind.

56.1 9.1.4.11 Kontraste von Grafiken und grafischen Bedienelementen ausreichend

56.1.1 Bewertung*

57 (alle)

Seite 1: e

Seite 2 – 4: ne

Seite 5: e

57.1 Dokumentation der einzelnen Seiten/Prozesse

57.1.1 Seite 2 – 4: ne

Die blauen grafischen Bedienelemente in der Anwendung haben einen Kontrastabstand von 2,4:1 zum Hintergrund. Dies ist unter dem Minimalwert von 3:1 und die Elemente sind dadurch für sehbeeinträchtigte u.U. schlecht zu erkennen. Zusätzlich haben einige Ausklapppfeilchen nur einen geringen Kontrast von 1,9:1.

Empfehlung:

• Nicht-Text-Inhalte sollten einen Kontrastabstand von mindestens 3:1 zum Hintergrund aufweisen.

57.1.2 Seite 4: ne

Auf den Admin-Seiten haben die Buttons in der Pagination (2,1:1) und die Info-Icons der Berechtigungsvergabe (2,8:1) einen zu geringen Kontrast.

Empfehlung:

• Nicht-Text-Inhalte sollten einen Kontrastabstand von mindestens 3:1 zum Hintergrund aufweisen.

57.1 9.1.4.12 Textabstände anpassbar

57.1.1 Bewertung*

58 (alle)

Seite 1 – 2: e

Seite 3: ee

Seite 4 – 5: e

58.1 Dokumentation der einzelnen Seiten/Prozesse

58.1.1 Seite 3: ee

Bei der Anpassung der Textabstände wird der Text des Buttons „Starte ein neues Thema“ abgeschnitten.

Empfehlung:

• Bei der Anpassung der Textabstände sollten alle Texte weiterhin vollständig lesbar sein.

58.1 9.1.4.13 Eingeblendete Inhalte bedienbar

58.1.1 Bewertung*

59 (alle)

Seite 1: na

Seite 2 – 3: ne

Seite 4: e

Seite 5: na

59.1 Dokumentation der einzelnen Seiten/Prozesse

59.1.1 Seite 2 – 3: ne

Die in der Anwendung verwendeten Tooltips können nicht mit der ESC-Taste geschlossen werden. Dies kann bspw. zu Problemen für Nutzer führen, die mit starkem Zoom arbeiten.

Empfehlung:

• Nutzer müssen in der Lage sein, den eingeblendeten Inhalt wieder zu schließen, ohne den Fokus zu bewegen bspw. mit der ESC-Taste.

59.1 9.2.1.1 Ohne Maus nutzbar

59.1.1 Bewertung*

60 (Immer anwendbar, sonst alle)

Seite 1: e

Seite 2 – 4: ne

Seite 5: e

60.1 Dokumentation der einzelnen Seiten/Prozesse

60.1.1 Seite 2 + 4: ne

Viele der blauen grafischen Buttons erhalten nicht den Tastaturfokus. Die Ursache ist, dass sie entweder nicht als interaktive Elemente umgesetzt wurden (z.b. ) oder als Link (<a>) ohne href-Attribut. Nutzer, die auf die Tastatur angewiesen sind, können die Buttons somit nicht erreichen und aktivieren.

Empfehlung:

• Die Umsetzung der grafischen Buttons sollte überprüft werden. Sie sollten mit der Tastatur erreicht und aktiviert werden können.

60.1.2 Seite 2: ne

Einige der blauen Buttons erhalten zwar den Tastaturfokus, da sie jedoch das Attribut tabindex=“0“ besitzen, können sie mit der Tastatur nicht aktiviert werden. Dies ist auch bei den Favoritensternen in der erweiterten Suche der Fall.

Innerhalb von Tooltips befinden sich grafische Buttons, die zu den Einstellungen führen. Mit der Tastatur können zwar die Tooltips geöffnet werden, die Buttons darin sind jedoch nicht erreichbar, da mit dem nächsten Tab-Schritt das Tooltip geschlossen wird.

Der Link zum Vergeben einer Kategorie ist für Nutzer mit Leseberechtigung deaktiviert. Mit der Tastatur ist der Link jedoch trotzdem erreichbar und kann aktiviert werden.

Empfehlung:

• Alle interaktiven Elemente sollten mit der Tastatur erreicht werden und bedienbar sein.
• Elemente, die für Mausnutzer deaktiviert sind, sollten auch nicht den Tastaturfokus erhalten.

60.1.3 Seite 3: ne

Einige Auswahllisten (z.B. Bearbeiten eines Diskussionseintrags) können zwar mit der Tastatur geöffnet, jedoch nicht weiter bedient werden.

Der Link „Empfehlen“ bekommt nicht den Tastaturdokus, da er kein href-Attribut hat, und ist daher nicht bedienbar.

Die Liste der Tastaturkürzel im Editiermodus kann bei der Bedienung mit der Tastatur nicht gescrollt werden. Tastaturnutzer können den unteren Bereich nicht wahrnehmen.

Beim Editieren von Wiki-Einträgen wird ein Kontextmenü angezeigt, wenn Text mit der Maus markiert wird. Das Menü wird nicht angezeigt, wenn Text mit der Tastatur markiert wird. Einige Funktionen (wie bspw. die Farbe) müssen daher in der Quelltextbearbeitung gesetzt werden, was ineffizient ist.

Empfehlung:

• Alle interaktiven Elemente sollten mit der Tastatur erreicht werden und bedienbar sein.
• Es sollte möglich sein, Pop-ups mit den Pfeiltasten zu scrollen.
• Im Editor sollten die Optionen zum Formatieren eines markierten Texts auch beim Markieren mit der Tastatur angezeigt werden und entsprechend navigierbar sein.

60.1.4 Seite 4: ne

Die Auswahl in der Rechteverwaltung kann mit der Tastatur nicht bedient werden, da keine interaktiven Elemente für die Umsetzung verwendet wurden.

Die Tabellen im Adminbereich können über die Kopfzeile sortiert und gefiltert werden. Diese Option wird jedoch nur beim Überfahren mit der Maus sichtbar. Tastaturnutzer können nicht wahrnehmen, dass diese Optionen existieren.

In einigen Tabellen werden Buttons verwendet, die nur beim Überfahren mit der Maus angezeigt werden. Für Tastatur- und Screenreader-Nutzer sind sie daher nicht wahrnehmbar. Die Funktionen können zwar zum Teil auch über die Buttons über der Tabelle ausgeführt werden, dies ist jedoch weniger effizient. Die leeren Inhalte in der Spalte „Aktion“ sind zudem verwirrend.

Beim Anpassen der Sidebar kann ein Tooltip eingeblendet werden. Dieses muss jedoch gescrollt werden, um den ganzen Text wahrzunehmen, was mit der Tastatur nicht möglich ist.

In der Konfigurationsverwaltung werden zusätzliche Informationen durch Info-Icons angezeigt. Die Icons bekommen zwar den Tastaturfokus, der Text ist jedoch nicht wahrnehmbar, da es sich um ein title-Attribut handelt, welches bei Tastaturfokus nicht angezeigt wird.

Empfehlung:

• Alle interaktiven Elemente sollten mit der Tastatur erreicht werden und bedienbar sein.
• Elemente, die beim Überfahren mit der Maus eingeblendet werden, sollen den Tastaturfokus erhalten und dazu eingeblendet werden.
• Es sollte möglich sein, Pop-ups und Tooltips ggf. mit den Pfeiltasten zu scrollen.
• Die Informationen auf den Icons in der Konfigurationsverwaltung sollten nicht als title-Element, sondern als eigener Tooltip oder Pop-up umgesetzt werden, das angezeigt wird, sobald die Icons aktiviert werden.

60.1 9.2.1.2 Keine Tastaturfalle

60.1.1 Bewertung*

61 (Immer anwendbar, nur: e,ne)

Seite 1 – 2: e

Seite 3: ne

Seite 4 – 5: e

61.1 Dokumentation der einzelnen Seiten/Prozesse

61.1.1 Seite 3: ne

Erreicht ein Nutzer den Editor oder bspw. die Textfelder in einer Diskussion, kann er die Felder mit der Tastatur nicht mehr verlassen. Nur das Speichern der Änderungen über Tastaturkürzel oder das neu Laden der Seite ermöglichen es, die Eingabe zu verlassen.

Empfehlung:

• Die Textfelder sollten mittels eines (dokumentierten) Shortcuts verlassen werden können.

61.1 9.2.1.4 Tastatur-Kurzbefehle abschaltbar oder anpassbar

61.1.1 Bewertung*

62 (Immer anwendbar, sonst alle)

Seite 1 – 5: e

62.1 9.2.2.1 Zeitbegrenzung anpassbar

62.1.1 Bewertung*

63 (Immer anwendbar, sonst alle)

Seite 1 – 5: e

63.1 9.2.2.2 Bewegte Inhalte abschaltbar

63.1.1 Bewertung*

64 (Immer anwendbar, sonst alle)

Seite 1 – 5: e

64.1 9.2.3.1 Verzicht auf Flackern

64.1.1 Bewertung*

65 (Immer anwendbar, nur: e,ne)

Seite 1 – 5: e

65.1 9.2.4.1 Bereiche überspringbar

65.1.1 Bewertung*

66 (alle)

Seite 1 – 5: e

66.1 9.2.4.2 Sinnvolle Dokumenttitel

66.1.1 Bewertung*

67 (Immer anwendbar, sonst alle)

Seite 1 – 5: ee

67.1 Dokumentation der einzelnen Seiten/Prozesse

67.1.1 Seite 1 – 5: ee

Im Seitentitel wird die jeweilige Seite, auf der sich der Nutzer befindet, benannt. Jedoch fehlt der Name der Anwendung (e.g. BlueSpice).

Empfehlung:

• Der Name der Anwendung selbst sollte im Titel enthalten sein.

67.1 9.2.4.3 Schlüssige Reihenfolge bei der Tastaturbedienung

67.1.1 Bewertung*

68 (alle)

Seite 1: te

Seite 2: ene

Seite 3 – 5: te

68.1 Dokumentation der einzelnen Seiten/Prozesse

68.1.1 Seite 1 – 5: ee

Beim Navigieren mit der Tastatur erhält die Hauptüberschrift jeder Seite den Tastaturfokus. Dies ist ein unnötiger Tab-Schritt, da die Überschrift kein interaktives Element ist. Die Ursache ist das Attribut tabindex=“0“.

Empfehlung:

• Nur interaktive Elemente sollten den Tastaturfokus erhalten. Das tabindex-Attribut sollte entfernt werden.

68.1.2 Seite 2 – 5: te

Der Button „Zurück nach oben“ verschiebt zwar den sichtbaren Bereich nach oben, jedoch nicht den Tastaturfokus.

Der letzte Eintrag in der Breadcrumb-Navigation ist ein Link, der immer auf die aktuelle Seite zeigt. Dies führt zu einem unnötigen TAB-Schritt.

Empfehlung:

• Der Button „Zurück nach oben“ sollte auch den Tastaturfokus auf den Anfang des Hauptbereichs setzen.
• Die aktuelle Seite sollte im Breadcrumb nicht verlinkt sein.

68.1.3 Seite 1: te

Bei der Anmeldung bekommen die Eingabefelder und Checkboxen im Hauptbereich vor allen anderen Elementen der Seite den Tastaturfokus. Dies macht im Arbeitsablauf Sinn, entspricht aber nicht der visuellen Reihenfolge. Das Springen des Fokus kann verwirrend sein.

Empfehlung:

• Die interaktiven Elemente sollten entsprechend ihrer visuellen Reihenfolge den Tastaturfokus erhalten. Hierzu sollte das tabindex-Attribut (z.b. tabindex=“1“) entfernt werden.

68.1.4 Seite 2: ene

Beim Wechseln von Registerkarten (z.B. Pop-up „Link hinzufügen“) wird nach jedem Wechsel der Registerkarte der Fokus versetzt (hier auf das Eingabefeld). Um die letzte Registerkarte zu erreichen, muss mehrfach Rückwärts navigiert werden

Im Editor werden die Bedienelemente nicht nach ihrer visuellen Reihenfolge fokussiert. Dies kann verwirrend sein.

Empfehlung:

• Beim Wechseln von Registerkarten sollte der Tastaturfokus auf der entsprechenden Registerkarte verbleiben.
• Die interaktiven Elemente sollten entsprechend ihrer visuellen Reihenfolge den Tastaturfokus erhalten.

68.1.5 Seite 4: te

Im Adminbereich entspricht die Tasturreihenfolge an einigen Stellen nicht der visuellen oder logischen Reihenfolge, was verwirrend sein kann. Die betrifft folgende Elemente:

• Im Hauptmenü der Button „Benutzermenü bearbeiten“
• Die Tabellen der Rechteverwaltung

In der Konfigurationsverwaltung gibt es einen leeren Tab-Schritt zwischen der Suchleiste und der Filterliste. Der Fokus ist auf einer unsichtbaren Auswahlliste, die sogar bedient werden kann.

Empfehlung:

• Die interaktiven Elemente sollten entsprechend ihrer visuellen Reihenfolge den Tastaturfokus erhalten.
• Unsichtbare Elemente sollten nicht den Tasturfokus erhalten und bedienbar sein.

68.1 9.2.4.4 Aussagekräftige Linktexte

68.1.1 Bewertung*

69 (alle)

Seite 1: e

Seite 2 – 3: te

Seite 4 – 5: e

69.1 Dokumentation der einzelnen Seiten/Prozesse

69.1.1 Seite 2 – 3: te

Auf dem Profilbild eines Nutzers befindet sich ein Punkt, der den Anwesenheitsstatus ausdrückt. Dieser wird vom Screenreader als eigener Links ausgegeben, ist jedoch nur mit dem Punkt beschriftet. Der Zweck des Links ist daher nicht erkennbar.

Empfehlung:

• Der Status des Nutzers sollte in der Linkbeschriftung zum Nutzerprofil mit ausgegeben werden, d. h. die Verlinkung des Punktes selbst sollte entfernt werden.

69.1 9.2.4.5 Alternative Zugangswege

69.1.1 Bewertung*

70 (alle)

Seite 1: na

Seite 2 – 5: e

70.1 9.2.4.6 Aussagekräftige Überschriften und Beschriftungen

70.1.1 Bewertung*

71 (alle)

Seite 1 – 3: e

Seite 4: ee

Seite 5: e

71.1 Dokumentation der einzelnen Seiten/Prozesse

71.1.1 Seite 4: ee

Die Einträge im Hauptmenü unterscheiden sich teilweise stark von der Überschrift der Seiten, die über die Menüeinträge aufgerufen werden. Dies kann die Orientierung in der Anwendung beeinträchtigen. Bspw.:

• Benutzer = Benutzerverwaltung
• Berechtigungen = Rechteverwaltung
• Oberfläche = Einstellungen zur Benutzeroberfläche
• Qualitätssicherung = Qualitätsmanagement Überblick

Empfehlung:

• Die Menüeinträge sollten der Überschrift der jeweiligen Seite entsprechen.

71.1 9.2.4.7 Aktuelle Position des Fokus deutlich

71.1.1 Bewertung*

72 (alle)

Seite 1 – 5: ne

72.1 Dokumentation der einzelnen Seiten/Prozesse

72.1.1 Seite 1 – 5: ne

Der Fokus ist auf sehr vielen Elementen in der Anwendung nicht sichtbar. Nutzer, die auf die Tastatur angewiesen sind, können daher nicht erkennen, wo sie gerade navigieren. Dies betrifft bspw. folgende Elemente:

• Die Bedienelemente in der Kopfzeile
• Die Elemente im Kopf einer Wikiseite (Breadcrumbs, Zuletzt bearbeitet & Bearbeitungsbuttons)
• Die Elemente in der Fußzeile
• Die Links in Baumstrukturen

Empfehlung:

• Der Tastaturfokus sollte auf allen interaktiven Elementen deutlich sichtbar sein.

72.1.2 Seite 3: te

Der Link „Bearbeiten“ für die Tags wird nur beim Überfahren mit der Maus angezeigt. Beim Navigieren mit der Tastatur ist die Funktion zwar über den Fokus auf dem Tag-Icon erreichbar, die Funktion des Elements ist jedoch nicht offensichtlich.

Empfehlung:

• Der Link „Bearbeiten“ sollte den Tastaturfokus erhalten und dabei eingeblendet werden.

72.1 9.2.5.1 Alternativen für komplexe Zeiger-Gesten

72.1.1 Bewertung*

73 (alle)

Seite 1 – 5: na

73.1 9.2.5.2 Zeigergesten-Eingaben können abgebrochen oder widerrufen werden

73.1.1 Bewertung*

74 (alle)

Seite 1 – 5: e

74.1 9.2.5.3 Sichtbare Beschriftung Teil des zugänglichen Namens

74.1.1 Bewertung*

75 (alle)

Seite 1 – 3: e

Seite 4: te

Seite 5: e

75.1 Dokumentation der einzelnen Seiten/Prozesse

75.1.1 Seite 4: te

Das aria-label des Links „Seitenleiste bearbeiten“ enthält nicht den sichtbaren Text. Damit ist die sichtbare Beschriftung nicht Teil des zugänglichen Namens.

Empfehlung:

• Das aria-label sollte angepasst werden, sodass dieses dem sichtbaren Text entspricht.

75.2 Optionale Empfehlung

In der Anwendung wird für title und aria-label Attribute häufig die Schreibweise mit Doppelpunkt bspw. „MediaWiki:…“ oder „Spezial:…“ verwendet. Dies ist zwar nicht falsch, kann jedoch für Nutzer, die nicht mit der Struktur eines Wikis vertraut sind, verwirrend sein.

75.1 9.2.5.4 Alternativen für Bewegungsaktivierung

75.1.1 Bewertung*

76 (alle)

Seite 1 – 5: na

76.1 9.3.1.1 Hauptsprache angegeben

76.1.1 Bewertung*

77 (Immer anwendbar, nur: e,ne)

Seite 1 – 5: e

77.1 9.3.1.2 Anderssprachige Wörter und Abschnitte ausgezeichnet

77.1.1 Bewertung*

78 (alle)

Seite 1 – 2: na

Seite 3: ene

Seite 4: te

Seite 5: na

78.1 Dokumentation der einzelnen Seiten/Prozesse

78.1.1 Seite 3: ene

Wenige teilweise lange Texte in der Anwendung (bspw. Änderungen speichern) sind in der deutschen Version auf Englisch. Da die Seitensprache Deutsch ist, liest der Screenreader diese Texte mit der falschen Aussprache vor, wodurch die Ausgabe nicht verständlich ist.

Empfehlung:

• Englische Texte in der deutschen Anwendung sollten nach Möglichkeit übersetzt werden.

• Andernfalls sollten die Bereiche über das lang-Attribut mit der entsprechenden Sprache ausgezeichnet werden.

78.1.2 Seite 4: te

Wie Seite 3. Beim Bearbeiten der Seitenleiste sind einige Beschriftungen auf Englisch z.B. „Edit node“.

78.1 9.3.2.1 Keine unerwartete Kontextänderung bei Fokus

78.1.1 Bewertung*

79 (Immer anwendbar, sonst alle)

Seite 1: e

Seite 2 – 3: ne

Seite 4 – 5: e

79.1 Dokumentation der einzelnen Seiten/Prozesse

79.1.1 Seite 2: ne

Beim Navigieren des Suchfelds mit der Tastatur wird das Feld jedes Mal geleert, wenn es mit der TAB-Taste verlassen wird. Dabei wird auch das angezeigte Ergebnis in der erweiterten Suche ausgeblendet. Tastaturnutzer können daher nicht direkt zu den Suchergebnissen navigieren. Auch wenn der Hauptbereich über die Skiplinks erreicht wird, werden die Suchergebnisse nicht mehr angezeigt.

Empfehlung:

• Beim Navigieren mit der Tastatur sollte sich der Kontext nicht ändern. D. h. der Text im Suchfeld und die Suchergebnisse sollten nach Verlassen des Suchfeldes mit der TAB-Taste weiterhin angezeigt werden.

79.1.2 Seite 3: ne

Werden die Buttons zum Antworten in einer Diskussion mit der TAB-Taste fokussiert, wird automatisch das entsprechende Eingabefeld eingeblendet und fokussiert. Diese ist zum einen für Nutzer unerwartet, zum anderen führt es zu einer Tastaturfalle (siehe 9.2.1.2).

Empfehlung:

• Beim Erreichen der Buttons „Antworte hier…“ sollte sich der Kontext nicht ändern. Das Textfeld sollte erst nach dem Aktivieren des Buttons eingeblendet werden.

79.1 9.3.2.2 Keine unerwartete Kontextänderung bei Eingabe

79.1.1 Bewertung*

80 (alle)

Seite 1 – 5: e

80.1 9.3.2.3 Konsistente Navigation

80.1.1 Bewertung*

81 (alle)

Seite 1 – 5: e

81.1 9.3.2.4 Konsistente Bezeichnung

81.1.1 Bewertung*

82 (alle)

Seite 1 – 5: e

82.1 9.3.3.1 Fehlererkennung

82.1.1 Bewertung*

83 (alle)

Seite 1: te

Seite 2 – 3: na

Seite 4: ene

Seite 5: te

83.1 Dokumentation der einzelnen Seiten/Prozesse

83.1.1 Seite 1: te

Wird beim Login ein Fehler gemacht, wird eine Fehlermeldung über den Eingabefeldern angezeigt. Diese Meldung wird jedoch vom Screenreader nicht ausgegeben und kann daher von blinden Nutzern nur wahrgenommen werden, wenn sie die Seite nochmal von Anfang an lesen.

Empfehlung:

• Die Fehlermeldung sollte über eine aria-live-region umgesetzt werden, damit sie beim Erscheinen direkt vom Screenreader ausgegeben wird.

83.1.2 Seite 4: ene

Wird beim Bearbeiten der Seitenleiste ein Fehler gemacht, bekommt das fehlerhafte Feld lediglich einen roten Rahmen. Dieser ist für blinde und sehbeeinträchtigte Nutzer nicht oder schlecht wahrnehmbar. Es wird keine Fehlermeldung in Textform angezeigt oder ausgegeben, wodurch Nutzer den Fehler nicht direkt erkennen.

Empfehlung:

• Bei fehlerhaftem Ausfüllen eines Formulars sollte eine Fehlermeldung angezeigt (und ausgegeben) werden, die das fehlerhafte Feld und die Ursache des Fehlers benennt.

83.1.3 Seite 5: te

Bei einem Fehler in den Einstellungen wird eine Fehlermeldung angezeigt und auch vom Screenreader ausgegeben. Die Meldung verschwindet jedoch nach kurzer Zeit, sodass das fehlerhafte Feld und der Grund des Fehlers nicht mehr erkennbar sind. Für Screenreader-Nutzer wird das Feld dann nur als „ungültig“ ausgegeben.

Empfehlung:

• Bei fehlerhaftem Ausfüllen eines Formulars sollte eine Fehlermeldung angezeigt (und ausgegeben) werden, die das fehlerhafte Feld und die Ursache des Fehlers benennt.
• Die Meldung sollte solange verfügbar sein, bis der Fehler behoben ist.

83.1 9.3.3.2 Beschriftungen von Formularelementen vorhanden

83.1.1 Bewertung*

84 (alle)

Seite 1 – 3: e

Seite 4: ene

Seite 5: e

84.1 Dokumentation der einzelnen Seiten/Prozesse

84.1.1 Seite 4: ene

In der Konfigurationsverwaltung haben eine Auswahlliste und ein Eingabefeld weder eine sichtbare noch eine programmatische Beschriftung. Für Nutzer ist nicht gut erkennbar, was der Zweck dieser Felder ist.

Empfehlung:

• Die Elemente sollten eine Beschriftung (sichtbar und programmatisch) erhalten, die den Zweck benennt.

84.1 9.3.3.3 Hilfe bei Fehlern

84.1.1 Bewertung*

85 (alle)

Seite 1: e

Seite 2 – 3: na

Seite 4 – 5: e

85.1 9.3.3.4 Fehlervermeidung wird unterstützt

85.1.1 Bewertung*

86 (nur: e,ne,na)

Seite 1 – 5: e

86.1 9.4.1.1 Korrekte Syntax

86.1.1 Bewertung*

87 (Immer anwendbar, nur: e,ne)

Seite 1: e

Seite 2 – 5: ne

87.1 Dokumentation der einzelnen Seiten/Prozesse

87.1.1 Seite 2 – 5: ne

Der Code der Anwendung enthält WCAG-relevante Syntaxfehler, wie bspw. doppelte IDs.

Empfehlung:

• Die Syntaxfehler sollten behoben werden.

87.1 9.4.1.2 Name, Rolle, Wert verfügbar

87.1.1 Bewertung*

88 (alle)

Seite 1: e

Seite 2: ene

Seite 3: te

Seite 4: ne

Seite 5: e

88.1 Dokumentation der einzelnen Seiten/Prozesse

88.1.1 Seite 2: ene

Das Suchen-Feld wird vom Screenreader als Eingabefeld ausgegeben. Es gibt keinen Hinweis darauf, dass Suchergebnisse als Auswahl unter dem Feld angezeigt werden und wie diese navigiert werden können.

Der Button „Neu“ wird mit dem Zusatz „Untermenü“ ausgegeben, da er das Attribut aria-haspopup=“true“ besitzt. Auf diesem Button kann jedoch kein Untermenü geöffnet werden, was für Screenreader-Nutzer verwirrend sein kann. Dies betrifft auch den Link der aktuellen Seite in der Breadcrumb-Navigation.

Empfehlung:

• Das Eingabefeld der Suche sollte als kombiniertes Eingabefeld umgesetzt werden, oder die Auswahlfunktion mittels Aria-Attributen übermittelt werden.
• Die Verwendung von aria-haspopup=“true“ sollte überprüft werden und nur auf Elementen verwendet werden, die tatsächlich ein Untermenü haben.

88.1.2 Seite 3: te

Wie Seite 2. Elemente, die kein Pop-up öffnen, werden mit dem Hinweis auf ein Untermenü ausgegeben.

Die Ausklappliste „Zugeordnete Diskussionsseite“ ist für Mausnutzer deaktiviert, kann aber mit der Tastatur bedient werden. Der Screenreader gibt keinen Hinweis darauf, dass es sich um ein deaktiviertes Element handelt.

Empfehlung:

• Die Verwendung von aria-haspopup=“true“ sollte überprüft werden und nur auf Elementen verwendet werden, die tatsächlich ein Untermenü haben.
• Deaktivierte Elemente sollten vom Screenreader als solche ausgegeben werden und nicht mit der Tastatur bedient werden können.

88.1.3 Seite 4: ne

In der Baumstruktur beim Bearbeiten der Seitenleiste ist die Struktur mit dem Screenreader nicht gut wahrnehmbar. Es wird nur die erste Ebene ausgegeben und viele Elemente sind unbeschriftet. Zusätzlich werden die Einträge als Links ausgegeben, obwohl sie mit der Tastatur keine aktivierbare Funktion haben.

Beim Erreichen der Baumstruktur mit den Pfeiltasten (lineares Lesen) verschieben sich der Tastaturfokus und der Lesefokus. Es wird nur die erste Zeile ausgegeben. Die Inhalte danach werden nur als „Baumstruktur“ ausgegeben und der Screenreader setzt die Ausgabe in der Fußzeile fort.

In den Tabellen im Adminbereich (z.B. Benutzerverwaltung) sind die verwendeten Buttons und Checkboxen für Screenreader-Nutzer nicht verwendbar. Sie werden ohne Rolle und ohne Name ausgegeben. Es ist nicht erkennbar, dass die Zeilen ausgewählt werden können. Die Buttons unter „Aktionen“ werden vom Screenreader ignoriert, da sie nur beim Überfahren mit der Maus eingeblendet werden.

Bei der Rechteverwaltung wird die Auswahl vom Screenreader nicht als interaktive Elemente ausgegeben. Die aktuell gewählte Option ist nicht erkennbar.

Empfehlung:

• Die Implementierung der Baumstruktur sollte überprüft werden.
• Die Buttons und Checkboxen in Tabellen sollten für Screenreader-Nutzer als solche erkennbar und beschriftet sein. Es sollte deutlich sein, welche Funktion die Elemente haben.
• Bei der Rechteverwaltung sollte die Möglichkeit der Auswahl sowie die aktuelle Auswahl erkennbar sein.

88.1 9.4.1.3 Statusmeldungen programmatisch verfügbar

88.1.1 Bewertung*

89 (alle)

Seite 1: na

Seite 2: te

Seite 3: na

Seite 4: te

Seite 5: na

89.1 Dokumentation der einzelnen Seiten/Prozesse

89.1.1 Seite 2: te

Eine Meldung auf einem eingefügten Bild im Wiki-Inhalt wird zwar bei Fokussierung des Elements angezeigt, jedoch nicht vom Screenreader ausgegeben. Blinde Nutzer können den Hinweis nicht wahrnehmen.

Empfehlung:

Der Hinweis sollte beim Erscheinen vom Screenreader ausgegeben werden oder in der Nähe der Grafik dauerhaft sichtbar platziert werden, sodass der Zusammenhang erschlossen werden kann.

89.1.2 Seite 4: te

Der Hinweis, wenn ein Benutzer erfolgreich hinzugefügt wurde, wird vom Screenreader nicht ausgegeben.

Empfehlung:

• Die Meldungen sollten beim Erscheinen vom Screenreader ausgegeben werden, bspw. mit einer aria-live-Region.

89.1 11.7 Benutzerdefinierte Einstellungen

89.1.1 Bewertung*

90 (Immer anwendbar, sonst alle)

Seite 1: e

Seite 2 – 5: ne

90.1 Dokumentation der einzelnen Seiten/Prozesse

90.1.2 Seite 2 – 5: ne

Bei der Verwendung benutzerdefinierter Einstellungen (bspw. helle Schrift, dunkler Hintergrund) sind sehr viele Elemente nicht mehr sichtbar. Die Ursache ist, dass es sich um Grafiken mit transparentem Hintergrund handelt, und deren Farbe nicht angepasst wird.

Die betrifft bspw.

• Die Favoritensterne in der erweiterten Suche
• Die Icons des Editors
• Mehrere Info- und Einstellungs-Icons (z.b. Konfigurationsverwaltung)
• Das Häkchen der ausgewählten Rechteverwaltung

Empfehlung:

• Es sollte sichergestellt werden, dass alle Elemente auch bei angepassten Farben (z.B. hoher Kontrast) weiterhin sichtbar sind.

90.1.3 Seite 5: ne

Bei der Verwendung benutzerdefinierter Einstellungen (bspw. helle Schrift, dunkler Hintergrund) sind die ausgewählten Checkboxen nicht erkennbar.

Zusätzlich ist die aktuell gewählte Registerkarte nicht erkennbar, da sie mittels eines farbigen Hintergrunds hervorgehoben wird.

Empfehlung:

• Es sollte sichergestellt werden, dass alle Elemente auch bei angepassten Farben (z.B. hoher Kontrast) weiterhin sichtbar sind.

• Die aktuelle Registerkarte kann bspw. durch einen dickeren Rahmen hervorgehoben werden.

90.1 11.8.2 Barrierefreie Erstellung von Inhalten

90.1.1 Bewertung*

91 (alle)

Seite 1 – 2: na

Seite 3: e

Seite 4 – 5: na

91.1 11.8.3 Erhaltung von Barrierefreiheitsinformationen bei Transformation

91.1.1 Bewertung*

92 (alle)

Seite 1 – 5: na

92.1 11.8.4 Reparaturassistenz

92.1.1 Bewertung*

93 (alle)

Seite 1 – 5: na

93.1 11.8.5 Vorlagen

93.1.1 Bewertung*

94 (alle)

Seite 1 – 5: na

94.1 12.1.1 Dokumentation von Kompatibilität und Barrierefreiheit

94.1.1 Bewertung*

95 (alle)

Seite 1 – 5: na

95.1 12.1.2 Barrierefreie Dokumentation

95.1.1 Bewertung*

96 (alle)

Seite 1 – 5: ne

96.1 Dokumentation der einzelnen Seiten/Prozesse

96.1.1 Seite 1 – 5: ne

Die Produktdokumentation von BlueSpice wurde selbst als Wiki umgesetzt. Da dies der Anwendung entspricht, die in diesem Test überprüft wurde, und der Test mehrere verletzte Kriterien aufweist, ist die Produktdokumentation ebenfalls nicht barrierefrei.

96.1 12.2.2 Technischer Support

96.1.1 Bewertung*

97 (alle)

Seite 1 – 5: na

97.1 12.2.3 Effektive Kommunikation

97.1.1 Bewertung*

98 (alle)

Seite 1 – 5: na

98.1 12.2.4 Vom Support bereitgestellte Dokumentation

98.1.1 Bewertung*

99 (alle)

Seite 1 – 5: na

Definition