Barrierefreies Internet (engl. Fachbegriff: Web Accessibility) bezeichnet Internet-Angebote, die von allen Nutzern unabhängig von körperlichen und/oder technischen Möglichkeiten uneingeschränkt genutzt werden können. Dies schließt sowohl Menschen mit und ohne Behinderungen, als auch Benutzer mit technischen (z. B. Textbrowser oder PDA) oder altersbedingten Einschränkungen (z. B. Sehschwächen) sowie Webcrawler ein, mit denen Suchmaschinen den Inhalt einer Seite erfassen. Da dies aufgrund der unzähligen weichen, individuell geprägten Barrieren nicht vollständig erreicht werden kann, spricht man auch von barrierearm oder zugänglich.
Statistisch gesehen sind Menschen mit Behinderungen überdurchschnittlich häufig im Internet. Es ist wenig bekannt, dass sich blinde und sehbehinderte Nutzer Webseiten per Software vorlesen oder in Braille-Schrift ausgeben lassen. Auch gehörlose oder schwerhörende Menschen, deren erste Sprache Gebärdensprache ist, benötigen auf sie zugeschnittene, besondere Darstellungsformen im Internet.
Zusätzlich zu der Berücksichtigung der Belange von Behinderten bedeutet „barrierefrei“ („behindertengerecht“ bezeichnet nur einen Teilaspekt), dass ganz allgemein niemandem Barrieren in den Weg gelegt werden sollen. Auch nichtbehinderten Nutzern soll nicht die Pflicht auferlegt werden, beim Abruf von Internet-Angeboten genau dieselbe Hard- und Softwarekonfiguration zu verwenden wie der Autor des Angebots. Neben der Zugänglichkeit geht es hier auch um die Plattformunabhängigkeit – ein Internetangebot soll sowohl mit Bildschirm als auch mit PDA, Handy, etc. nutzbar bleiben. Es soll unabhängig vom verwendeten Betriebssystem und von der Software (sofern diese standardkonform arbeitet) funktionieren.
Mindestens ebenso wichtig wie technische Zugangsbedingungen ist, dass die Inhalte übersichtlich und in leicht verständlicher Sprache präsentiert werden.
Mit der Verbreitung von Ajax besteht die Gefahr, dass die Barrierefreiheit ins Hintertreffen gerät. Wie oft bei der Einführung neuer Technologien wird auf Menschen mit Behinderung keine besondere Rücksicht genommen. Dabei ist gerade für diesen Teil der Bevölkerung der Community-Gedanke des Web 2.0 besonders interessant, um soziale Kontakte zu pflegen.
Internet-Suchmaschinen indizieren das WWW mit Hilfe von automatisierten Programmen, sogenannten Webcrawlern oder auch Robots. Diese Programme nehmen eine Seite ähnlich wie sehbehinderte Benutzer wahr. Sie können in der Regel nur Text auswerten. Bilder, Animationen und Ähnliches bleiben ihnen in den meisten Fällen verborgen. Als Faustregel gilt: Alles, was Sehbehinderten Probleme bereitet, ist auch für Robots ein Hindernis.
Eine Verallgemeinerung der Faustregel ist jedoch nicht möglich. Ein blinder Mensch wird möglicherweise noch eine Ausgabe über eine optionale Sprachausgabe erhalten. Ein Robot jedoch, der Töne nicht analysieren kann, wird dann keine Informationen indizieren können. Andersherum gibt es auch Beispiele, wo menschliche Blinde keine Informationen mehr bekommen, Robots aber doch noch etwas analysieren können (so zum Beispiel Strukturen oder Wasserzeichen innerhalb von Bildern).
Grundvoraussetzung für barrierefreie Internetseiten ist die Einhaltung von Webstandards (gültiges HTML/XHTML). Die geforderte strikte Trennung von Inhalt (Text, Bilder usw.) und Layout erreicht man durch den korrekten Einsatz von Cascading Style Sheets (CSS). Kompromisse beim Design sind nicht nötig. Einige grundlegende Möglichkeiten:
Feste Schriftgrößen stellen in manchen Browsern eine Barriere dar, da sie vom Nutzer nur schwer veränderbar sind. So sollte die Maßeinheit insbesondere für Schriften, aber auch für Bereiche, Abstände usw. relativ sein (Angaben in em oder %).
Die wichtigste Regel für barrierefreie Webseiten ist, die HTML-Elemente entsprechend ihrer Bedeutung (Semantik) einzusetzen. Am Beispiel von Überschriften im Dokument soll das verdeutlicht werden: Für Überschriften sind die HTML-Elemente h1 - h6 vorgesehen und sollen auch damit ausgezeichnet werden wie folgt: Überschrift 1 , formatiert wird mit einer externen CSS-Regel z. B.: h1{font-size:1.2em;}. Eine Hervorhebung nur durch eine vergrößerte Schrift wie z. B. mit Überschrift 1 ist semantisch nicht korrekt und bildet keine Struktur ab.
Nur bei aktiviertem Webseiten-Stil (im Browser über Ansicht einstellbar) führen beide Methoden zum optisch selben Ergebnis, die erste Version ist jedoch auch weitaus wirtschaftlicher: Für Layoutänderungen muss bei der korrekten Version in der CSS-Datei nur eine Regel für Überschrift 1 geändert werden und sofort sind auf allen Seiten der gesamten Website sämtliche Überschriften erster Ordnung angepasst. Bei der anderen Version müssen sämtliche Überschriften auf der Webpräsenz überarbeitet werden, was äußerst zeitaufwendig ist. An diesem Beispiel wird deutlich, dass Barrierefreiheit weniger mit „Design“ zu tun hat, sondern eher mit dem richtigen Aufbau von (X)HTML Quelltexten. Positiver Nebeneffekt: Suchmaschinen werten semantisch richtige und valide Webseiten auf, was sich auf ein besseres Suchergebnis auswirkt.
Wird diese Methode auf alle verwendeten HTML-Elemente angewandt und die Stil-Regeln in die externe CSS-Datei ausgelagert, so ist die barrierefreie Version der herkömmlichen deutlich überlegen, da für ein Redesign der Seite nur diese CSS-Datei ausgetauscht werden muss, ohne auch nur eine einzige Änderung im (X)HTML-Dokument vornehmen zu müssen. Somit ist Barrierefreiheit auch ein Qualitätsmerkmal für Webseiten.
Um Elemente auf einer Seite zu platzieren, können zum einen Tabellenkonstruktionen eingesetzt werden, zum anderen lassen sich Elemente mit Cascading Style Sheets mittels genauer Koordinaten positionieren. Durch die Nutzung von Tabellen wird der Quelltext unnötig aufgebläht, da auch Bereiche definiert werden müssen, die gar nicht genutzt werden. Mit Cascading Style Sheets müssen nur Elemente definiert werden, die auch benötigt werden. Auch Überlappungen von einzelnen Elementen (Vorder- und Hintergrundelemente in verschiedenen Ebenen) sind möglich.
Besonders vorteilhaft ist aber vor allem die Unabhängigkeit der angezeigten Position von der im Quelltext. So kann im HTML-Dokument der Kopfbereich des sichtbaren Inhalts erst am Ende definiert werden. Wenn dieser z. B. mit Bannern versehen wird, welche für Nutzer mit Handicap meist eher störend sind, so werden diese am Ende des Quelltextes definiert. Somit müssen Benutzer von Screenreadern nicht erst uninteressantes „lesen“, sondern können direkt den relevanten Inhalt nutzen. Sehr sinnvoll sind auch seiteninterne Sprungmarken (Anker) wie z. B. Sprung zum Inhalt (Navigation überspringen).
Jeder Sprachwechsel muss kenntlich gemacht werden. Ist die Webseite zum Beispiel in deutscher Sprache gehalten, müssen englischsprachige Wörter wie "Screenreader" explizit ausgezeichnet werden, etwa durch ein -Tag ("...auch für Screenreader-Nutzer...").
Auch Akronyme und Abkürzungen sollten definiert werden z.B. BITV BITV
Oftmals werden Bilder nur für Layoutzwecke, nicht jedoch für die Informationsvermittlung genutzt. Um die geforderten Standards einzuhalten, also valides HTML zu erstellen, muss man Bilder mit einem alternativen Text (ALT-Attribut) versehen. Handelt es sich bei den Bildern um grafische Elemente für das Seitenlayout, wäre ein ALT-Text jedoch z. B. für Blinde störend, weshalb er leer gelassen werden sollte.
Des Weiteren werden für die Positionierung der Bilder oftmals komplizierte Tabellenkonstrukte genutzt. Mit der Positionierung von Containern (DIVs) über CSS lassen sich diese vollständig umgehen. Dient ein Bild einzig dem Layout/Design und transportiert keine relevante Information, so sollte es als Hintergrundbild im Stylesheet (background-image) definiert werden.
Oftmals werden Navigationen noch mit Hilfe von JavaScript oder mittels Plug-ins (z. B.: Adobe Flash) realisiert. Dies kann den Quelltext unnötig umfangreich machen und sperrt Benutzer aus, wenn zum Beispiel:
Bei den meisten Schaltflächen im Internet werden einfach nur Hintergrundfarbe oder -bild sowie Textfarbe und -dekoration ausgetauscht. Dies ist per CSS um ein Vielfaches einfacher und der Quelltext schrumpft (Bündelung von Formatangaben in Klassen). Dies verringert natürlich auch die Dokumentengröße, wodurch zugleich das Transfervolumen kleiner und die Seite schneller geladen wird. Durch eine Ausgliederung der CSS Angaben in eine externe Datei können weitere Verbesserungen im Bezug auf Transfervolumen und Ladezeit erreicht werden, da die Formatierungen nur einmal – und nicht bei jedem neuen Aufruf – zum User übertragen werden müssen.