Barrierearmut auf der PSE-Webseite

Als PSE bemühen wir uns, offizielle Webseiten, u.a. https://www.pse.rub.de im Einklang mit den nationalen Rechtsvorschriften zur Umsetzung der Richtlinie (EU) 2016/2102 des Europäischen Parlaments und des Rates über den barrierefreien Zugang zu den Websites und mobilen Anwendungen öffentlicher Stellen barrierefrei zugänglich zu machen. Dabei ist uns bewusst, dass eine 100%ige Barrierefreiheit nicht erreichbar ist. Wir sprechen daher von Barrierearmut im Web. Weitere Informationen und Beratungen finden sich bei den Kolleg:innen von Accessibility@RUB.

Gute Lesbarkeit von Texten

Texte im Web funktonieren anders als gedruckte Texte. Daher ist es wichtig, dass die Webseitentexte für die Webansicht optimiert sind, z.B. durch die Verwendung kurzer Hauptsätze und Absätzen sowie der Fettsetzung wichtiger Informationen. Weitere Hinweise haben wir in einem Leitfaden zusammengefasst.

Lesbarkeit für Screenreade

Für Menschen mit einer Seheinschränkung ist es wichtig, dass unsere Seiten gut geliedet und für Screenreader klar erkennbar sind. Dabei sollten wir u.a. darauf achten, dass alle Informationen mit den richtigen HTML-Tags im Backend versehen werden.

• Die Hauptpberschrift wird als H1 makiert.
• Weitere Überschriften werden hierachie mit H2 bis H6 geordnet.
• Der Seitentitel wird korrekt und lesbar im Backend eingetragen.
• Verwendung des Doppelpunkts zum Genden.

Mehr Informationen zur technischen Umsetzung findest du in unserem Dossier zur Erstellung von PSE-Seiten.

Schriftarten

Als Schriftearten sollen die RUB-Hausschriften RUB-Scala (Serifenschrift) und RUB-Flama verwendet werden. Standardschrift ist RUB-Flama. Eine Schrift ohne Serifen kann an Bildschirmen deutlich besser gelesen werden, als eine Serifenschrift; denn an Bildschirmen sind Schriften in ihrer Auflösung eingeschränkt. Bei geringerer Auflösung “verschwimmen” die Serifen vor dem Auge, sie werden pixelig ausgegeben und die Schrift wirkt insgesamt eher unscharf auf das Auge. Gerade bei kleinen Schriftgrößen wird dieser Effekt besonders deutlich. Daher empfiehlt sich für längere Texte auf Bildschirmen in jedem Fall die Verwendung von Sans-Serif-Schriften. Die Ermüdung beim Lesen wird dadurch deutlich minimiert. RUB-Scala wird nur als Akzentschrift verwendet. Sie ist nur in Druckwerken vorzuziehen.

Farben und Kontraste

Bei vielen Personen liegen Farbsehschwächen vor. Der wohl bekannteste Begriff ist die Rot-Grün-Blindheit. Bei einem hohen Farbkontrast können Texte dennoch erkannt und gelesen werden. Bei niedrigen Kontrasten wird das Lesen auch unabhängig von Sehschwächen für alle Personen stark erschwert. Bei einem niedrigen Kontrast ähneln sich die ausgewählten Farben stark, etwa rote Schrift auf gelbem Grund. Für relevante Inhalte sollten immer hohe Farbkontraste gewählt werden. Am besten schwarze Schrift auf weißem Grund. Bei anderen Farbkombinationen kann der Kontrast mithilfe kleiner Tools schnell und einfach ermittelt werden. Das Kontrastverhältnis sollte mindestens 7:1 betragen.

Beispiele für Farbkontraste

• RUB-Blau (#17365c) zu weiß (#ffffff): 12,21 zu 1
• RUB-grün (#8dae10) zu weiß (#ffffff): 2,56 zu 1
• RUB-Blau (#17365c) zu RUB-grün (#8dae10): 4,76 zu 1
• RUB-Blau (#17365c) zu RUB-grau (#e7e7e7): 9,88 zu 1
• RUB-grün (#8dae10) zu RUB-grau (#e7e7e7): 2,71 zu 1

Kurz zusammengefasst:

• RUB-blau kann als Hauptfarbe gut auf weißem oder RUB-grauem Hintergrundstehen.
• RUB-grün sollte nicht als Haupt-, sondern nur als Akzentfarbe genutzt werrden.
• RUB-grün sollte nicht auf RUB-grau stehen, wenn die Schriftgröße kleiner als 11pt ist.

ALT-Texte für Bilder

"Alt-Texte" (auch bekannt als "Alt-Tags" oder "Alternative Texte") sind kurze beschreibende Texte, die in HTML-Code eingefügt werden, um Bilder auf Webseiten zu beschreiben. Diese Texte werden angezeigt, wenn ein Bild aus irgendeinem Grund nicht geladen werden kann, sei es aufgrund einer langen Ladezeit, einer fehlenden Verbindung oder aus Gründen der Barrierefreiheit für Menschen mit Sehbehinderungen. Alt-Texte sind wichtig, weil sie mehrere Funktionen erfüllen:

1. Barrierefreiheit: Für Menschen mit Sehbehinderungen, die Screenreader verwenden, sind Alt-Texte von entscheidender Bedeutung. Ein Screenreader liest den Inhalt einer Webseite laut vor, und wenn ein Bild keine Beschreibung hat, wird der Nutzer nicht verstehen, was auf dem Bild zu sehen ist. Durch die Verwendung von Alt-Texten wird die Webseite für alle Benutzer zugänglich gemacht.
2. SEO (Suchmaschinenoptimierung): Suchmaschinen wie Google können den Textinhalt einer Webseite analysieren, um sie in den Suchergebnissen anzuzeigen. Alt-Texte für Bilder sind ein weiterer Textinhalt, den Suchmaschinen indizieren können. Wenn die Alt-Texte gut geschrieben sind und relevante Keywords enthalten, kann dies dazu beitragen, dass die Webseite in den Suchergebnissen besser sichtbar wird.
3. Benutzererfahrung: Selbst für Benutzer ohne Sehbehinderungen kann ein sorgfältig geschriebener Alt-Text die Benutzererfahrung verbessern. Wenn Bilder aus irgendeinem Grund nicht geladen werden können, können Alt-Texte dennoch den Inhalt des Bildes vermitteln und so die Integrität der Webseite erhalten.

Bei der Erstellung von Alt-Texten ist es wichtig, präzise und beschreibende Informationen über den Inhalt des Bildes bereitzustellen. Die Texte sollten kurz und klar sein, ohne zu technisch oder unnötig komplex zu werden. Es ist auch ratsam, Schlüsselwörter zu verwenden, die den Kontext des Bildes erfassen, da dies zur SEO-Optimierung beiträgt.

Wichtiger Hinweis

Relevante Informationen (z.B. Daten für Veranstaltungen) dürfen nie nur in Bildern zu erkennen sein, sondern müssen immer im Text stehen.

Gendergerechte Sprache

Auf den zentralen Webseiten nutzen wir so oft wie möglich geschlechterneutrale Formulierungen beziehungsweise die männliche und weibliche Form (Doppelform), wie z. B. Studierende, Mitarbeitende, Beschäftigte usw. Die Lesbarkeit des Textes muss gewahrt bleiben. Das gilt insbesondere für Teaser und Headline. In allen anderen Fällen nutzen wir den Doppelpunkt zum Gendern (z.B. Schüler:innen) anstatt des Gender-Sternchen (Schüler*innen). Der Doppelounkt ist für die Screenreader am besten erkenn- und lesbar und gewährleistet so eine Barrierearmut unserer Seite.