Kuratierte Linksammlung für Webdesigner und -entwickler.
Bulletproof und barrierefreies Webdesign - was ist das eigentlich?

Einführung in barrierefreies Webdesign

Im echten Leben garantiert eine kugelsichere Weste keinen garantierten Schutz, dennoch ist es sinnvoll, sich vor Kugeln zu schützen. Mit einer kugelsicheren Weste bist Du im Notfall besser dran als ohne. Das gilt auch für das Webdesign. Ein kugelsicheres Webdesign, auch Bulletproof Webdesign, beschreibt die Flexibilität einer Webseite, die abhängig von den darin platzierten Inhalten einen geräteübergreifenden- und Cross-Browser-kompatiblen Zugang ermöglicht.

Vielleicht bist Du bei Deinen Recherchen zur Webseitengestaltung schon einmal über Begriffe wie barrierefreies– oder Bulletproof Webdesign gestolpert. Die meisten erahnen, dass es etwas mit der Nutzbarkeit von Webseiten und Online-Daten zu tun haben muss. Beispielsweise, dass über den Browser eine Schriftgröße geändert werden kann, damit auch Menschen unabhängig von körperlichen oder technischen Möglichkeiten die Inhalte einwandfrei lesen können. Zum Teil ist das auch richtig.

Anzeige

Sprungmarken:

Bulletproof Webdesign ist doch barrierefreies Internet, oder?

Zunächst einmal muss eine klare Abgrenzung zwischen Bulletproof Webdesign und barrierefreiem Webdesign erfolgen. Beides hat zwar durchaus Überschneidungen, aber nicht immer und schon gar nicht zwingend dieselben Anforderungen, die es zu erfüllen gibt. Während das Bulletproof Webdesign gut definiert und somit abgegrenzt ist, kann das barrierefreie Internet nochmals separiert werden. Allerdings kann barrierefreies Internet durchaus als Bulletproof Webdesign aufgebaut sein.

Barrierefreies Internet besteht im Prinzip aus zwei großen Bereichen.

  1. So richtet sich barrierefreies Internet zuerst einmal an solche Nutzer, die Schwierigkeiten aufgrund von körperlichen Behinderungen oder Einschränkungen haben, Inhalte aus dem Netz nutzen und lesen zu können.
  2. Der zweite große Bereich umfasst die Verfügbarkeit der Daten aus dem World Wide Web unabhängig von der Qualität der Internetverbindung und ebenso unabhängig von der genutzten Hardware.

Gerade beim letzten Aspekt werden viele, schwerwiegende Fehler gemacht.

Webseiteneigenschaften, die der User mit dem Browser ändern kann

Eigentlich verfügen alle Browser über eine Möglichkeit, die Schriftgrößen an persönliche Bedürfnisse anpassen zu können. Damit – so möchte man fast konsequent meinen – sei das Problem ja erledigt, oder? Nicht ganz! Wird die Definition von Browserschriftgrößen bei der Codierung nicht deutlich berücksichtigt, können an dieser Stelle Probleme auftreten. Am besten spielst Du ein wenig mit Webseiten herum, die sehr viele Grafiken und Tabellen verwenden, vernehmlich die Seiten, die sehr stark auf HTML aufbauen.

Ohne jetzt näher auf den Aufbau von HTML eingehen zu müssen, nur soviel: besonders, wenn eine Seite viele Grafiken einbindet sowie mehrere Textspalten, müssen die Grafiken als auch die Texte über die Breite der Seite in Tabellen gepackt werden. Hast Du schon einmal eine HTML-Seite mit eigenen Tabellen erstellt, wirst Du sehr schnell gemerkt haben, dass es gar nicht so einfach ist, auf diese Weise eine Texttabelle mit einem farblichen Rahmen, der an den Ecken abgerundet ist, zu verschönern.

Statisches oder dynamisches HTML

Noch kniffliger wird es, wenn Grafiken in Textspalten hineinreichen, doch genau das geschieht bei der Änderung von Einstellungen wie der Schriftgröße im Browser. Großflächige Grafiken werden dann entsprechend der Tabellenbreite buchstäblich in mehrere Einzelteile zerschnitten und dann den einzelnen Tabellen zugeordnet. Kommt nun Text in einer Grafik hinzu, den Du schön feinsäuberlich eingesetzt und formatiert hattest, entstehen hier extrem lange Anordnungen von Tabellen, die ineinandergreifen oder nacheinander aufgebaut werden müssen. Einige werden über die anteilige, prozentuale Breite der Seite definiert, andere bekommen eine bestimmte Pixelbreite zugewiesen.

Wird nun im Browser die Schrift seitens des Lesers vergrößert, ist Deine gesamte Formatierung über den Haufen geworfen. Tabellen passen nicht mehr zueinander, Texte stehen aus Textspalten heraus oder sie werden automatisch verlängert, sodass die Grafiken nicht mehr zusammenpassen.

Die Webseiten so zu gestalten, dass auch beliebige Größenänderungen über einen Browser dem Seitendesign nichts anhaben können, das ist ein Teil des barrierefreien Webdesigns. Diese Anforderung umzusetzen, ist nicht leicht. Über HTML funktioniert es eigentlich nur mithilfe eines dynamischen Designs. Da für jede einzelne Tabelle, jeden Text und jede Grafik individuelle Formatierungsbefehle über die Tags direkt auf der Seite eingebaut werden müssen, ist ein dynamisches Design wiederum nicht leicht anzuwenden. Das widerspricht der aktuellen Richtung, dass Style-Elemente über ein CSS-Stylesheet definiert werden und dort nur die Zuordnung über einzelne Container erfolgt.

Wenn die Webseite nicht vollständig lädt

Explizit mit den CSS-Stylesheets kommen wir jetzt aber schon wieder zu einem weiteren typischen Problem beim barrierefreien Internet. Je nach Bandbreite, die dem Nutzer zur Verfügung steht, kann es sein, dass nicht alle Inhalte sauber geladen werden. Vielleicht hast Du schon einmal eine völlig unformatierte Webeite gesehen und erleben müssen, dass diese samt allen Grafiken nach einem Reload plötzlich sauber angezeigt wird. Ursächlich ist hier zumeist ein Nichtladen der Daten vom CSS-Stylesheet. Besonders bei einer langsamen Internetverbindung kann das passieren.

Darüber hinaus verwenden viele Webmaster eine Unmenge von Scripten. Schau Dir einfach einmal den HTML-Quellcode von Blogs oder Foren an. Bei vielen Webseiten wirst Du im Quelltext unzählige Scripte finden, die mit geladen werden. Sei es nun, weil irgendwelche Plug-ins oder Add-ons über Scripte laufen, Google-Dienste wie Analytics eingebaut sind usw. Wird es dem Speicher eines PCs zu viel, kommt schon mal die Meldung „Script kann nicht ausgeführt werden“ oder von Windows selbst, dass der virtuelle Speicher ausgelastet ist.

Nicht der User muss sich an die Seite anpassen, sondern umgekehrt!

Lädt eine Seite sehr langsam oder fehlerhaft, kann das am Hoster liegen. Oder man könnte schwach argumentieren und sagen „dann muss man eben einen leistungsstärkeren PC kaufen“. Nur nutzen die meisten Anwender einen Computer gar nicht so oft, dass sie sich zweimal im Jahr einen brandneuen PC leisten wollen oder können.

Aufgrund der heutigen Bandbreiten von Internetzugängen sind die Ladezeiten von Webseiten eigentlich auch kein Problem mehr. Dennoch führt die immer komplexer werdende Technik von HTML, XHTML und CSS in Verbindung mit vielen Skripten, die im Hintergrund auf einer Seite laufen, immer noch dazu, dass viele Seiten nur schlecht laden oder sich immer wieder aufhängen. Hierbei bleiben die Informationen vom CSS-Stylesheet für den Browser oft auf der Strecke oder datenlastige Grafiken werden nicht geladen.

Barrierefreies Webdesign ist in diesem Fall ebenfalls wieder ein wichtiger Lösungsansatz. Denn ausgehend von einer normal erstellten HTML-Seite entsteht eine sehr unübersichtliche Webseite, wenn nicht alle Elemente geladen werden. Fazit: der User geht, bevor er weiß um was es geht. Ein verlorener potenzieller Kunde.

Schnell ladende Webseiten sind das Beste, was Du Deinen Besuchern geben kannst, abgesehen vom Inhalt.

Außerdem darf hier auch nicht vergessen werden, das Ladezeiten von Webseiten für SEO mittlerweile entscheidend sind.

Eine gute Lösung: Bulletproof Webdesign

Eine Möglichkeit, all diese Probleme in den Griff zu bekommen, wäre zum Beispiel, viele Scripte im Footer anstelle des Headers zu platzieren. So können Webseiten-Funktionen vom Browser nacheinander ausgeführt werden, statt alles auf einen Schlag erledigen zu müssen. Außerdem sollte die Textanordnung so gestaltet werden, dass auch ohne Grafiken oder CSS alle Inhalte lesbar bleiben. Oder eben Bulletproof Webdesign.

Bulletproof Webdesign

Bulletproof Webdesign geht auf einen amerikanischen Webdesigner Dan Cederholm zurück, den genau diese Problematik geärgert hat. Er hat nach einer Lösung gesucht und sie im CSS-Stylesheet gefunden. Dan Cederholm hat hierzu einige Design-Konzepte auf den Weg gebracht, die diesen Problemen begegnen, und mittlerweile bekannt sind als Bulletproof Webdesign, also kugelsicheres Webdesign. Dabei werden technische Webdesign-Standards auf XHTML und CSS überarbeitet, sämtliche Seitendefinitionen wie auch Formatierungen werden über das CSS geregelt.

Cederholm verfolgt unter anderem folgende Ziele damit:

  • höhere Erreichbarkeit des Internetauftritts,
  • weniger Seitencodierung und
  • einfachere Pflege, also Wartung der Seite.

Was genau hinter den Design-Konzepten steckt und wie Du Bulletproof Webdesign selber bei der Erstellung von Webseiten anwenden kannst, dazu mehr im nächsten Beitrag.

Frischer Input für Designer. Jeder Abonnent erhält das kostenlose Bundle aus 50 Photoshop Device-Mockups und 40 Responsive WordPress-Themes.

1x pro Woche. Kein Spam. Jederzeit kündbar.
Jonathan Torke
Jonathan Torke

Auf pixeltuner.de teile ich aktuelle Ressourcen für Webdesigner und -entwickler. Du findest mich auch auf deviantART und Instagram.
PayPal-Kaffeespende.

13 Antworten auf "Einführung in barrierefreies Webdesign"
  • Avatar
    Tobsen:

    Versteh ich das richtig, dass hier suggeriert wird, die Arbeit mit Tabellen für den Aufbau sei angemessen? Ein Design aus Tabellen kann man doch sowieso erstmal entweder komplett überarbeiten und an HTML5-Standards anpassen oder – was wahrscheinlich einfacher wäre – komplett wegwerfen und direkt von null anfangen.
    Der Artikel schreibt zwar letztlich, dass Design über CSS erfolgen soll, was richtig ist, aber beschreibt damit doch nur Standards, die schon seit vielen Jahren angewendet werden sollten.

    • Jonathan

      Hi Tobsen,

      hier muss ich mich wohl unmissverständlich ausgedrückt haben. Die Arbeit mit Tabellen ist meist sehr Aufwendig und ich meide sie, wenn möglich.

      Es geht nicht darum, die Arbeit mit Tabellen zu propagieren – Es geht mir darum zu beschreiben, den Umgang mit Tabellen zu vereinfachen.

      Tabellen sind in ihrer Struktur ja ziemlich fest. Außerdem werden bei Tabellen oft auch Spalten benötigt, deren Aufgabe es nur ist, die Inhalte der beiden Spalten links und rechts davon in einem definierten Abstand zu halten. Zusätzlich kommen hier – nach klassischem HTML-Aufbau – im Design wieder eine Vielzahl von Bildern (Hintergrund-Gif’s) zum Einsatz. So entstehen selbst für kleinste Tabellen wahre HTML-Strecken. Muss in solchen Tabellen dann später eine Änderung durchgeführt werden, ist das mit einem enormen zeitlichen Aufwand verbunden.

      Werden nun aber das Design und die Daten voneinander getrennt, sind auch spätere Bearbeitungen schnell und einfach durchzuführen. Dazu werden vornehmlich die HTML-Befehle th, scope und caption genutzt. Diese ordnen bestimmte Bereiche wie den Header einer Tabelle zu. Durch geschickten Einsatz lässt sich hier wieder ein punktgenaues CSS entwickeln, welches in den einzelnen Bereichen greift. Außerdem lassen sich dann über die Eigenschaften vom CSS die einzelnen Teile beliebig positionieren. Das reduziert den Umfang der eigentlichen HTML-Codierung um ein großes Stück.

      Lieben Gruß

      • Avatar
        Tobsen:

        Hallo Jonathan,

        heißt das du nutzt Tabellen um das Layout einer Seite zu bauen? Ist das nicht enorm suchmaschinenfeindlich? Dafür kann man doch divs oder andere tags nutzen und floaten. Dadurch kann ein Design auch direkt responsive aufgebaut werden und somit auch für Smartphones und Tablets direkt viel schöner abgebildet werden.

        Oder habe ich dich jetzt schon wieder missverstanden und du nutzt die Tabellen nur dort, wo es auch inhaltlich wirklich Tabellen sind?

        Grüße, Tobsen

        • Jonathan

          Hi Tobsen,

          ich verwende immer DIVs um das grundsätzliche Layout zu definieren. Es gibt z.B. jedoch Webapplikationen, wie verschiedene Open Source Shopsysteme, deren Layout in Tabellen gepackt worden ist.

  • Avatar

    Du schriebst „Aufgrund der heutigen Bandbreiten von Internetzugängen sind die Ladezeiten von Webseiten eigentlich auch kein Problem mehr“

    Ach und die mobile Nutzung. :-)

    80% aller Menschen mit Einschränkungen hassen Captchas, ergab erst wieder der „Survey 2012“ ich geh mal deines ausfüllen ;)

  • Avatar

    Der Artikel sollte ursprünglich 1999 veröffentlicht werden, ist aber aus Versehen letzte Woche rausgerutscht, oder? So viel Fehler und inhaltlicher Schwachsinn auf einem Haufen hätte ich in 2012 nicht mehr erwartet.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Verpasse keine News!

Du erhältst ein kostenloses Bundle aus 50+ WordPress-Themes und PSD Device-Mockups.

1x pro Woche. Jederzeit kündbar.
Anzeige