Blog-Archiv

Die Vorteile des Web-Frameworks Astro für die Gestaltung meines Web-Dev-Blogs.

Wir können die aktuell aktive Fallback-Position mit CSS abfragen und andere Styles anwenden.

Ein detaillierter Blick auf die neuen Features des nativen Offenlegungs-Elements.

Erweitere die Reichweite der Schaltflächen, um Tastaturbedienung und Screenreader zu unterstützen.

Eine Schritt-für-Schritt-Anleitung auf Basis der Popover API und CSS Anchor Positioning.

Ein erster Blick auf die neue API, die eine Alternative zu ARIA-Live-Regionen darstellt.

Sie ist zuverlässiger als Date und bietet Formatierungsoptionen und Zeitzonen-Unterstützung.

Eine Auswahl an Bookmarklets, Browser-Erweiterungen und Tools zum Testen von Barrierefreiheit.

Nutze die Fähigkeiten nativer Buttons, Dialoge, Formularelemente und ausklappbarer Widgets.

Nutze das ::placeholder CSS-Pseudo-Element, um die Barrierefreiheit deiner Website zu verbessern.

Durch die Nutzung moderner Webfunktionen könnt ihr schnell und einfach Navigationsmenüs bauen.

Die idb-Bibliothek macht es einfach, Daten auf dem Gerät zu speichern und sie für die Offline-Nutzung abzurufen.

Wie ihr Dialoge und Popovers animiert, sie korrekt verschachtelt und Dialoge beim Hintergrund-Klick schließt.

Lerne Natives Scoping anzuwenden und Code zu erstellen, der einfacher zu lesen und zu debuggen ist.

So erzeugt ihr einen barrierefreien, universellen Fokusindikator, der im hellen und dunklen Modus funktioniert.

Markiert Überschriften, Alternativtexte, Links und Buttons in euren Prototypen.

Informiere Nutzer über wichtige Ereignisse, ohne ihren Workflow zu unterbrechen.

Das Tool erkennt grobe Barrierefreiheits-Mängel. Die manuelle Prüfung ersetzt es aber nicht.

Ein kurzer Überblick über die neuen Erfolgskriterien und praktische Beispiele für konkrete Anwendungsfälle.

Zertifizierungen bieten einen einheitlichen Standard und erhöhen die Glaubwürdigkeit von Expert:innen.

Die RxJS-Bibliothek bietet mächtige Operatoren, die euer Entwicklerleben erheblich erleichtern.

Noch nie war es so einfach, barrierefreie Menüs, Tooltips und Datumsauswahlen zu erstellen.

Ein Inline-SVG-Bild kann mit CSS leicht angepasst werden und ist sehr flexibel.

Eine elegante Methode zur Verbesserung der Barrierefreiheit und des Nutzererlebnisses.

Gestaltet Listen von Schlüssel-Wert-Paaren, um euren Code besser lesbar zu machen und Screenreadern semantische Informationen zu vermitteln.

Schaffe ein einheitliches, barrierefreies Design und beschleunige den Entwicklungsprozess.

Gestalte responsive, wiederverwendbare Komponenten, die sich an den verfügbaren Platz in ihrem Container anpassen.

Verschachtelte Grid-Container können ihre Zeilen und Spalten perfekt aufeinander ausrichten.

Mit Angular, ARIA-Attributen und modernem CSS erstellen wir ein zugängliches, responsives Web-Karussell.

Vor einem Jahr startete ich meinen Blog über Web-Entwicklung und Barrierefreiheit. Ein Rück- und Ausblick.

Die künstliche Intelligenz beeindruckt mit durchdachten und gut formulierten Antworten. Aber sie ist nicht perfekt.

Semantisches HTML ist leicht zu lesen, tastaturbedienbar und die perfekte Basis für CSS-Regeln.

Die Kombination aus Button-Element und Switch-Rolle sorgt für eine gute Usability.

ARIA-Rollen und -Attribute können eine Website barrierefrei machen, wenn man weiß was man tut.

Wie der Forced Colors Modus bei Websites funktioniert und wie ihr das Styling dafür optimiert.

Strukturiere deine Styles und vermeide lästige Konflikte aufgrund der Spezifität oder Reihenfolge der Deklaration.

Das Dialog-Element ist einfach zu handhaben und barrierefrei, abgesehen von ein paar kleinen Problemen.

Die Grundlagen für barrierefreie Bilder und welche häufigen Fehler ihr vermeiden solltet.

Lerne wie du das native HTML-Element zur Datei-Auswahl beliebig stylen kannst.

Sich Schritt für Schritt dem Thema annähern und offen für neue Perspektiven sein.

Wie du Highcharts Event-Handling mit Angulars auf Komponenten basierter Architektur verbindest.

Style native Formularelemente mit CSS, um barrierefreie Web-Formulare mit konsistentem Look zu gestalten.

Verwende die CSS-Eigenschaft speak-as, um Screenreadern mitzuteilen, wie sie Zahlen und Abkürzungen lesen sollen.

Nutze die Elemente time, picture und dl für maschinenlesbare Daten, schnelleres Laden von Bildern und mehr Barrierefreiheit.

Wie fühlt es sich an, blind zu sein? Färbe alles schwarz und erlebe das Web wie blinde Nutzer:innen.

Schickes Design oder Barrierefreiheit? Mit der CSS-Pseudoklasse :focus-visible könnt ihr sowohl Tastatur-User als auch eure Kunden zufriedenstellen.

Wie dir der Einstieg in die Prüfung mit Screenreadern gelingt und welche Tastaturbefehle und Gesten dir das Leben leichter machen.

Erhöhe die Barrierefreiheit deiner Website oder App mit hohem Farbkontrast, semantischem Markup und Untertitel.