Web-Barrierefreiheit bedeutet, dass die Website auch mit einer Tastatur, einem Screenreader oder einer anderen assistiven Technologie sinnvoll genutzt werden kann. Viele Probleme entstehen dabei nicht im Design, sondern erst im Code — bei Buttons ohne Beschriftung, Icons ohne Bedeutung, falsch gekennzeichneten Formularen, Dropdowns, Modals oder der Navigation.
Das Kontrastverhältnis ist eine wichtige Basis und ergibt sich oft schon aus dem Grafikdesign. Der Entwickler sollte jedoch vor allem darauf achten, dass die Website technisch Sinn macht, eine korrekte Struktur, Beschriftungen, Tastatursteuerung und eine klare Verbindung zwischen den Elementen aufweist.
Beschriftungen, Zustände und Verknüpfungen für Elemente, die nicht allein aus dem HTML oder dem sichtbaren Text hervorgehen.
Labels, Feldbeschreibungen, Fehlermeldungen, Required-Zustände und eine klare Verbindung zwischen Input und Text.
Dropdowns, mobile Menüs, Modal-Fenster, aria-expanded, aria-controls und Tastaturbedienung.
Die Website muss auch ohne Maus bedienbar sein. Fokus-Zustände müssen sichtbar sein und die Reihenfolge der Elemente muss Sinn machen.
Wichtig
Seit dem 28. Juni 2025 gelten in der Europäischen Union neue Barrierefreiheitsregeln nach dem European Accessibility Act. Die Barrierefreiheit von Websites ist somit kein reines Thema mehr für staatliche Seiten, sondern wird auch für Teile des privaten Sektors relevant, insbesondere für E-Shops, Online-Dienste und digitale Systeme für die Öffentlichkeit.
Technickým základem bývá hlavně správná struktura webu, ovládání klávesnicí, přístupné formuláře, čitelné popisky, ARIA atributy a použitelnost pro asistivní technologie. Neznamená to ale, že úplně každý malý web automaticky spadá pod stejnou povinnost.
In der Praxis haben viele Websites jedoch nach wie vor Probleme mit der grundlegenden Barrierefreiheit. Häufig sind Schaltflächen ohne Beschriftung, Formulare ohne korrekte Labels, Modalfenster ohne Tastaturbedienung oder eine Navigation, die für Screenreader keinen Sinn ergibt. Ein gutes praktisches Beispiel ist meine eigene Website, auf der ich auch noch nicht überall alles perfekt optimiert habe :)
ARIA-Attribute ergänzen die Bedeutung von Elementen für assistive Technologien. Sie werden hauptsächlich bei interaktiven Teilen der Website wie Icon-Buttons, Dropdown-Menüs, Modal-Fenstern, Akkordeons oder Formularen verwendet. Sie sind kein Ersatz für korrektes HTML, helfen aber dort, wo ein Element eine präzisere Beschreibung, einen Zustand oder eine Verknüpfung zu anderen Inhalten benötigt.
Gibt einem Element eine Textbeschriftung, wenn es keinen sichtbaren Text hat. Typischerweise ein Icon-Button für ein Menü, das Schließen eines Fensters oder die Suche. Eine Alternative ist Text mit der Klasse sr-only.
Gibt an, dass die Beschriftung des Elements von einem anderen Element auf der Seite übernommen wird, meistens anhand dessen ID.
Fügt eine zusätzliche Beschreibung hinzu. Nützlich bei Formularen, Tooltips, Fehlermeldungen oder Feldbezeichnungen.
Gibt an, ob das Element aus- oder eingeklappt ist. Wird bei Menüs, Dropdowns, Akkordeons oder mobiler Navigation verwendet.
Erstellt eine Verbindung zwischen dem Steuerelement und dem gesteuerten Inhalt. Zum Beispiel ein Menü-Button und das mobile Menü selbst.
Informiert darüber, dass das Element eine weitere Ebene öffnet, wie ein Menü, einen Dialog oder eine Listbox.
Verbirgt dekorative oder doppelte Inhalte vor assistiven Technologien. Wird hauptsächlich bei bedeutungslosen Icons verwendet.
Ergänzt die Bedeutung eines Elements, wenn normales HTML nicht ausreicht. Sollte nicht unnötig verwendet werden, wenn ein korrektes HTML-Element verwendet werden kann.
Visuelle Hervorhebung des aktiven Elements bei der Tastaturbedienung. Ohne diese weiß der Benutzer nicht, wo er sich gerade auf der Seite befindet.
Illustrationsbild erstellt mit KI.
Normaler Text oder Bilder sind meist einfacher. Größere Probleme sind Buttons ohne Text, Menüs ohne Aufklapp-Status, Modal-Fenster ohne korrekte Verknüpfung, Formulare ohne Labels oder Elemente, die sich nicht mit der Tastatur bedienen lassen.
Deshalb gehe ich das Thema Barrierefreiheit vor allem praktisch an. Es geht nicht nur darum, ein paar ARIA-Attribute hinzuzufügen, sondern zu prüfen, ob das Element als Ganzes Sinn macht — visuell, im HTML, bei der Tastaturbedienung und für den Screenreader.
TIPP
Wussten Sie, dass ein Screenreader eine Fehlermeldung in Echtzeit einem blinden Benutzer nicht automatisch ankündigt? Visuell ist der Fehler auf der Seite sichtbar. Wenn die dynamische Meldung jedoch nicht in einem korrekt gekennzeichneten Live-Bereich liegt (z. B. mit role="alert" oder aria-live), erfährt der Screenreader-Benutzer möglicherweise nichts davon. Das Feld sollte zudem über aria-describedby mit der Fehlermeldung verknüpft sein.
Der Designer kümmert sich um das visuelle Erscheinungsbild, die Lesbarkeit, die Größen und den Kontrast. Der Entwickler muss darauf achten, dass das Design im Code nicht seine Bedeutung, Bedienbarkeit und korrekte Struktur verliert.
Richtige Elemente verwenden. Ein Button sollte ein Button sein, ein Link ein Link und Überschriften sollten eine logische Struktur haben.
Die Website sollte per Tabulatortaste navigierbar sein, interaktive Elemente müssen erreichbar sein und der Fokus darf nicht verschwinden.
Ikony, tlačítka, inputy a ovládací prvky musí mít jasný textový význam.
Jedes Feld muss ein Label, einen Hinweistext, einen eventuellen Fehler und eine verständliche Verbindung zwischen Text und Input haben.
Ein Dialog muss eine Beschriftung, eine Schließoption und den richtigen Fokus haben und darf den Benutzer nicht hinter dem Overlay verloren lassen.
Menüs, Dropdowns und mobile Navigation müssen klar sagen, was sie öffnen und ob sie aktuell ausgeklappt sind.
ARIA sollte nicht überall unüberlegt eingesetzt werden. Zuerst sollte das HTML korrekt sein. Erst danach wird es dort ergänzt, wo ein Zustand, eine Beziehung zwischen Elementen oder eine Bedeutung beschrieben werden muss, die aus dem normalen Markup nicht hervorgeht.
Wenn eine Schaltfläche nur ein SVG-Symbol enthält, weiß ein Screenreader-Benutzer möglicherweise nicht, was sie tut. Ein aria-label kann eine Beschreibung wie „Menü öffnen“, „Fenster schließen“ oder „Suchen“ bereitstellen.
Der Button kann aria-expanded haben, je nachdem, ob das Menü geöffnet ist, aria-controls mit der ID des gesteuerten Menüs und aria-haspopup, wenn es eine weitere Navigationsebene öffnet.
Ein Input muss ein Label haben. Wenn es zusätzlich einen Hinweis oder Fehler hat, kann aria-describedby verwendet werden, um klarzustellen, welcher Text das Feld ergänzt.
Ein Modal muss einen klaren Namen, eine Schließoption und eine korrekte Tastatursteuerung haben. Wenn sich das Modal-Fenster öffnet, sollte sich ein Tastatur- oder Screenreader-Benutzer nur innerhalb des geöffneten Dialogs bewegen und nicht versehentlich per Tabulator auf den Inhalt unter dem Overlay springen.
Es ist ratsam, sich bereits bei der Erstellung der Website mit der Barrierefreiheit zu befassen und nicht erst nachträglich nach deren Fertigstellung.
Formulare, Menüs, Modals, Fokus, Buttons und die grundlegende technische Barrierefreiheit können überprüft werden.
Die Barrierefreiheit kann auch nachträglich in eine fertige Website integriert werden, insbesondere bei interaktiven Elementen und Formularen.
Web-Barrierefreiheit bedeutet, dass die Website mit einer Tastatur, einem Screenreader oder einer anderen assistiven Technologie sinnvoll genutzt werden kann. Es geht nicht nur um den Kontrast, sondern auch um korrekte Beschriftungen, Struktur, Formulare, Navigation und Steuerung.
ARIA-Attribute ergänzen HTML um Informationen für assistive Technologien. Sie werden beispielsweise für Button-Beschriftungen, den Aufklapp-Status von Menüs, die Verbindung zwischen einem Button und dem gesteuerten Inhalt oder für zusätzliche Beschreibungen eines Formularfelds verwendet.
aria-label dient dazu, einem Element, das keinen sichtbaren Text hat, eine Textbeschriftung hinzuzufügen. Typischerweise wird es bei Icon-Buttons verwendet, beispielsweise bei einem Button zum Öffnen eines Menüs oder Schließen eines Modal-Fensters.
aria-controls gibt an, welches Element der jeweilige Button oder das Steuerelement steuert. Es wird beispielsweise bei einem Button verwendet, der ein Menü, einen ausklappbaren Inhalt oder ein Modal-Fenster öffnet.
aria-expanded drückt aus, ob das gesteuerte Element aktuell aus- oder eingeklappt ist. Es wird beispielsweise bei Dropdown-Menüs, mobiler Navigation oder Akkordeon-Bereichen verwendet.
aria-haspopup informiert darüber, dass das Steuerelement eine weitere Ebene öffnet, beispielsweise ein Menü, einen Dialog oder andere ausklappbare Inhalte.
Nein. Das Kontrastverhältnis ist wichtig, aber ein großer Teil der Barrierefreiheit entsteht erst im Code. Der Entwickler kümmert sich um semantisches HTML, ARIA-Attribute, Tastatursteuerung, Formulare, Fokus-Zustände und korrekte Elementbeschriftungen.
Ja. Bei einer fertigen Website können Beschriftungen ergänzt, Formulare korrigiert, die Navigation, Modal-Fenster, Fokus-Zustände, Tastatursteuerung und die grundlegende HTML-Semantik angepasst werden.
Schreiben Sie mir, welche Website Sie überprüfen lassen möchten. Ich werde mir Formulare, Buttons, Navigation, Modal-Fenster, ARIA-Attribute, Fokus-Zustände und die Tastaturbedienung ansehen.
Schreiben Sie mir, welche Website oder Anwendung Sie erstellen lassen möchten.
Bevor Sie mit einer Website starten, ist es sinnvoll, Klarheit über Unterlagen, WordPress, Cookies und Tracking zu haben.
Beispiele echter Bewertungen, die Kunden auf meinem Google-Profil hinterlassen haben.
Zu den Bewertungen★ ★ ★ ★ ★„Skvělá spolupráce, při dalších projektech určitě nebudu shánět někoho jiného.“
★ ★ ★ ★ ★„S panem Vančurou jsem spolupracovala na tvorbě mých webových stránek a jsem maximálně spokojená. Oceňuji profesionální přístup, rychlou komunikaci a schopnost přesně pochopit moje představy. Web je moderní, přehledný, funkční a skvěle vypadá i na mobilu. Celý proces proběhl hladce, s jasným vysvětlením jednotlivých kroků a výborným výsledkem. Určitě doporučuji každému, kdo hledá spolehlivý a kvalitní přístup.“
★ ★ ★ ★ ★„Spolupráce při tvorbě konfigurátoru proběhla naprosto bez problémů. Oceňuji profesionální přístup, rychlou komunikaci a schopnost pochopit specifický projekt od A do Z. Konfigurátor je přehledný, funkční a přesně odpovídá mým požadavkům. Rozhodně doporučuji.“
★ ★ ★ ★ ★„Velmi dobrá a rychlá spolupráce. Doporučuji!“
★ ★ ★ ★ ★„Přesně takto si představujeme profesionální práci. Dekujeme“
★ ★ ★ ★ ★„Ať už se jedná o optimalizaci webu, nebo tvorbu na míru oceňuji kromě profesionální práce a znalostí problematiky také férový přístup a komunikaci.“
★ ★ ★ ★ ★„Děkuji za profesionální spolupráci, vše dle domluvy, naprostá spokojenost a mohu jen vřele doporučit.... Při dalších projektech určitě opět využiji Vašich služeb“
★ ★ ★ ★ ★„Profesionalita a velká ochota, nemohu jinak než doporučit“
★ ★ ★ ★ ★„Skvělá zkušenost při tvorbě webu, profesionální přístup, rychlost, ochota pomoci“
★ ★ ★ ★ ★„Rychlá spolupráce a komunikace – mohu jen doporučit.“
★ ★ ★ ★ ★„Moc mi pomohl, když jsem potřebovala pomoc s webem. A bylo to gratis :)). Jsem mu neskonale vděčná.“
★ ★ ★ ★ ★„Děkuji Jiřímu za rychlou a kvalitní spolupráci na tvorbě webu. Srozumitelná a ochotná komunikace mě vždycky potěší a přináší důvěru.“
★ ★ ★ ★ ★„Jsem maximálně spokojená. Rychlost, ochota a cenově dostupné. Děkuji“
★ ★ ★ ★ ★„Naprostá spokojenost. Rychlá komunikace, skvělá cena a odborná pomoc. Moc děkuji :)“
★ ★ ★ ★ ★„Velká spokojenost, rychlost a p. Vančura moc dobře ví co dělá. :)“
★ ★ ★ ★ ★„dobrá práce, rychlá odezva“
★ ★ ★ ★ ★„S programátory mám zkušeností hodně, ale tady musím opravdu pochválit. Pro mě a mé přátele vytvořil skvělý nástroj na evidenci sbírek a opravdu se to povedlo. Bylo to hotové rychle, kvalitně a za skvělou cenu. Komunikace funguje velmi rychle, což je super a ne úplně standard. Díky za super práci, za mě 100% spokojenost!“
★ ★ ★ ★ ★„Vše bylo rychlé a hlavně to funguje. Dobrá práce.“
★ ★ ★ ★ ★„Normálně recenze nepíši, ale zde rád doporučím kvalitní práci. Jiří pro mě vytvořil web pro dětské tábory. Kvalitní práce, rychlá komunikace a vlastní nápady, které Jiří sám přidá, jsou na velice vysoké úrovni. Nemohu hodnotit jinak než 5/5.“
★ ★ ★ ★ ★„Pan Jiri nam delal jiz 3 webove stranky a vzdy velka spokojenost, je mega rychly a vse hned kladne vyridi, mohu pouze doporucit. Poradi si bez problemu i s rezervacnimi kalendaremi, udrzbou socialnich siti, atd.“
