barrierefreier- Code schreiben- Webseite barrierefrei lesen- Warum wird das CSS ausgeschaltet ?

Personen mit Sehbehinderungen schalten CSS-Code möglicherweise ab, um den Inhalt einer Webseite zugänglicher zu machen. Hier sind einige Gründe dafür:

1. Verbesserte Lesbarkeit: CSS kann komplexe Layouts, Farben und Schriftarten definieren, die es schwierig machen können, den Text zu lesen. Durch das Deaktivieren von CSS wird der Inhalt oft in einem einfacheren, leichter lesbaren Format angezeigt.
2. Kontraste und Farben: Manche Webseiten verwenden Farbschemata, die für Menschen mit Sehbehinderungen schwer zu erkennen sind. Ohne CSS wird der Inhalt oft in den Standardeinstellungen des Browsers angezeigt, was möglicherweise bessere Kontraste und lesbarere Farben bietet.
3. Vermeidung von Ablenkungen: Animationen, Hintergrundbilder und andere dekorative Elemente, die durch CSS gesteuert werden, können ablenkend sein und die Nutzung der Webseite erschweren. Das Ausschalten von CSS entfernt diese Elemente und ermöglicht eine fokussierte Navigation.
4. Einfache Navigation: Ohne CSS wird die Struktur der Seite oft linearisiert, was bedeutet, dass die Inhalte in der Reihenfolge angezeigt werden, in der sie im HTML-Code erscheinen. Dies kann die Navigation für Menschen erleichtern, die Bildschirmlesegeräte verwenden.
5. Vermeidung von Barrieren: Manche Webseiten haben durch CSS implementierte Barrieren, wie z.B. Pop-ups, modale Fenster oder versteckte Elemente, die die Nutzung erschweren können. Das Deaktivieren von CSS kann solche Barrieren umgehen.

Indem sie CSS deaktivieren, können Personen mit Sehbehinderungen eine bessere Kontrolle über die Darstellung und Navigation der Webseite erlangen und so eine barrierefreiere Nutzererfahrung schaffen.

Wie macht man das ?

Gehen Sie dazu einfach unter Ansicht auf „Webseite-Stil“ und klicken Sie dann auf „keinen Stil“. Schauen Sie sich die Seite dann mal genau an und beurteilen Sie, ob die Seite noch nutzbar ist, falls Sie diese unter diesem Aspekt selbst überprüfen möchten.

Weitere Tipps zum Thema Barrierefreiheit findest du hier in der großen Übersicht für Interessierte und Programmierer Übersicht

Was ist CSS-Code überhaupt – Ein einfaches Beispiel

Nehmen wir an, du möchtest eine Webseite coden, dann benötigst du zunächst HTML, dies ist eine sogenannte Markup-Sprache und keine Programmiersprache. Eine Markup-Sprache ist eine sogenannte Auszeichnungssprache. Das HTML nutzt du für die Struktur deiner Webseite. Was zum Teufel ist also CSS? – CSS ist für das Styling deiner Webseite verantwortlich. Das heißt, der Entwickler geht her und schaut natürlich dass die Webseite oder der Online-Shop cool aussieht. Mit CSS-Code kannst du bestimmen, wo sollen die Bilder eigentlich hin auf meinem Shop, wo genau sollen diese platziert werden? – Welchen Abstand sollen diese untereinander haben? Wie soll der Hintergrund einer Webseite aussehen und du bestimmst über sogenannte Hexalwerte auch die Farben und das Layout eben. Hast du in deinem Online Shop oder Webseite jetzt natürlich ein grelles Hintergrund – Bild das du vielleicht cool findest, so kann das für diese Person eine riesige Barriere darstellen.

Wie sieht denn so ein HTML, oder CSS-Code dann eigentlich aus?

Was genau passiert hier in dem Code? Was hat hier der Entwickler gemacht?

Der Entwickler ist hergegangen und hat ein einfaches HTML-Gerüst erzeugt. Im Beispiel ist dies in Visual-Studio-Code gemacht worden. Dies ist ein sogenannter Text-Editor, hier schreibt der Entwickler jetzt zum Beispiel den Code oder entwickelt ein besonderes Aussehen für eine Webseite.

Zur Erklärung – Was passiert hier genau in den einzelnen Zeilen?

Zeile 1 – Hier wird das HTML eingeleitet

Zeile 2 Hier steht, dass es auf englisch ist

Zeile 3 Ein HTML Gerüst ist immer in ein sogenannten Head- und einen Body-Bereich aufgeteilt. Der Head-Bereich ist für allgemeine Informationen zuständig. In Zeile 3 beginnt also der Head-Bereich.

Zeile 4 Hier steht, dass man auch Sonderzeichen nutzen kann ( UTF 8)

Zeile 5 Ist für das responsive

Zeile 6 Ist der Titel- der Code hat hier keinen Titel, was eigentlich sehr schlecht ist. Es sollte ein aussagekräfiger Titel sein.

Zeile 7 Hier endet der sogenannte Head-Bereich, das siehst du daran, weil hier ein sogenannter Schrägstrich zu sehen ist. Das Tag ist abgeschlossen. </head>

Es ist enorm wichtig, dass du weißt, wo ist eigentlich welcher Bereich und wo fängt ein Bereich an und wo hört dieser auf, wenn du Code schreibst. In unserem Falle, wenn dich jemand fragt: Sag mal wo genau geht denn der Head-Bereich los? Dann antwortest du cool: Er geht in Zeile 3 los und endet in Zeile 7, weil hier so ein Schrägstrich zu sehen ist. ( dick gekennzeichnet). Wichtig zum Head-Bereich ist noch zu bemerken, dass es sich hier wie bereits erwähnt , nur um allgemeine Informationen handelt, das heißt, klickt der Entwickler rechts unten auf den sogenannten Live-Server, dann wird nichts davon angezeigt auf der Webseite. Nur ganz oben der Titel zum Beispiel.

Nun wird die Sache spannend.

Zeile 8

Wenn dich dein Kumpel fragt: Sag mal, wo muss ich denn jetzt den Code überhaupt eintragen? Die Antwort: Im Zwischenraum vom Body-Bereich. Was heißt das genau? Alles was du im Zwischenbereich vom Body einträgst, wird dir dann auf deiner Webseite angezeigt, vorausgesetzt du hast coolen Code geschrieben und es passt alles.

Zeile 9

Was passiert genau in Zeile 9? Hier haben wir eine sogenannte H1-Überschrift. diese ist für die Größe der Überschrift verantwortlich. Und wir haben hier schon den ersten Text deiner Webseite, den du natürlich individuell anpassen kannst. “ Hallo Leute diese ist meine erste Webseite. “ Das heißt, klickt der Entwickler wieder rechts unten dort steht „Port 5500“ auf den sogenannten Live-Server, dann bekommt er folgendes Bild zu sehen und hat seinen ersten Satz auf der Webseite am Start. Wie sieht das ganze dann aus?

Zeile 10 ist leer

Zeile 11 wird der Body abgeschlossen, das erkennst du wieder an diesem Schrägstrich </body>

Zeile 12 ist das gesamte HTML abgeschlossen.

Hilfe, was hat das jetzt aber mit CSS zu tun?

Der Programmierer will natürlich dass der Webshop, oder die Webseite einen coolen Style hat. Das heißt, er legt sich in der Regel eine sogenannte style.css an und dort schreibt er all seinen CSS-Code rein. Auf der linken Seite siehst du, dass zu der index.html, nun auch eine sogenannte style.css angelegt wurde von dem Programmierer, um zum Beispiel zu bestimmen, wo soll der Text hin, wo sollen die Bilder hin, welche Abstände soll es geben, soll der Button auf dem Online-Shop grün werden, oder schwarz etc.

Damit er diesen Schritt überhaupt machen kann, muss er unbedingt in Zeile 7, eine sogenannte „Verknüpfungszeile“ einbinden, die das HTML mit dem CSS praktisch verbindet. Macht er das nicht, vergisst es, oder macht hier einen Fehler wird ihm sein CSS-Code nicht angezeigt, und egal welchen CSS-Code er schreibt, es wird nichts angzeigt. Er geht also her und trägt deshalb immer über der Head-Zeile die Zeile <link rel =….. ein, dann funktioniert das ganze.

Super, aber wie sieht denn CSS-Code überhaupt aus, ich habe das noch nie gesehen?