Freigeben über

Ressourcen zum Erstellen barrierefreier Websites

  • Artikel

Das Web ist mit dynamischen und komplexen Websites, Anwendungen und Benutzeroberflächen gefüllt, die mit einer Kombination aus HTML, CSS und JavaScript erstellt wurden. Wenn sie jedoch ohne Barrierefreiheit entworfen und erstellt werden, sind diese komplexen Websites von Personen, die sich auf Hilfstechnologien verlassen, schwierig zu verwenden, um im Internet zu surfen.

Das Erstellen von Websites, die für Menschen mit Behinderungen zugänglich sind, erfordert semantische Informationen zur Benutzeroberfläche. Barrierefreie Websites ermöglichen Hilfstechnologien wie Bildschirmsprachausgaben, die notwendigen Informationen zu vermitteln, um Menschen mit einer Reihe von Fähigkeiten bei der Nutzung der Website zu helfen.

Unter HTML5Accessibility finden Sie Informationen dazu, welche neuen HTML5-Features von Microsoft Edge zugänglich unterstützt werden.

Funktionsweise der Barrierefreiheit

Hilfstechnologien fügen Funktionen hinzu, über die Computer normalerweise nicht verfügen. Beispielsweise kann ein Benutzer mit sehschwachem Sehvermögen seine Tastatur in Kombination mit hilfstechnischer Technologie wie einer Sprachausgabe verwenden, anstatt den Browser direkt mit Maus und Bildschirm zu verwenden.

Bei Anwendungen auf Microsoft-Plattformen und im Web interagiert die Hilfstechnologie mit einer beliebigen Kombination aus:

Für Webentwickler werden bestimmte HTML-Elemente Benutzeroberflächenautomatisierung Objekten zugeordnet, sodass der Entwickler bei der Auswahl dieser HTML-Elemente die in diese Elemente integrierten Barrierefreiheitseigenschaften und -ereignisse verwenden kann. Beim Entwickeln Ihrer Website müssen Sie in der Regel nur sicherstellen, dass die API ordnungsgemäß in geschrieben wird oder dass das entsprechende Element angegeben ist, damit auf die Anwendung zugegriffen werden kann.

Weitere Informationen finden Sie unter ARIA und Benutzeroberflächenautomatisierung in Microsoft Edge . Apps für barrierefreie Universelle Windows-Plattform (UWP) werden unter Barrierefreiheit in Windows Dev Center erläutert.

Viele allgemeine Barrierefreiheitsprobleme mit dynamischen Inhalten können durch bewährte Programmierpraxis behoben werden. Die WCAG 2.0-Dokumentation enthält viele Techniken und bewährte Methoden, mit denen Sie barrierefreiere dynamische Webanwendungen erstellen können. Selbst wenn sie ordnungsgemäß codiert sind, kann nicht unbedingt auf dynamische Inhalte zugegriffen werden. Accessible Rich Internet Applications (ARIA) hilft dabei, dieses Problem zu lösen.

Weitere Informationen zur Barrierefreiheit im Web finden Sie in der Einführung in web accessibility by the Web Accessibility Initiative (WAI).

ARIA

Die ARIA-Spezifikation (Accessible Rich Internet Applications) der Web Accessibility Initiative des W3C definiert als Syntax, um dynamische Webinhalte und benutzerdefinierte Benutzeroberflächen für alle Personen zugänglich zu machen. ARIA erweitert HTML durch zusätzliche Attribute (Rollen, Eigenschaften und Zustände), die für die Vermittlung benutzerdefinierter Semantik entwickelt wurden. Diese Attribute werden von Browsern verwendet, um den Zustand und die Rolle der Steuerelemente an die Barrierefreiheits-API zu übergeben.

Rollen, Eigenschaften und Zustände

ARIA-Rollen werden für Elemente festgelegt, die das role-Attribut verwenden, um Hilfstechnologien und Barrierefreiheits-APIs Informationen zum Element zu geben. Beispielsweise wird das folgende <li> Element zugewiesen role="menuitem" , um anzugeben, dass es sich um ein Element in einem Menü handelt.

<li role="menuitem">Home</li>

ARIA-Zustände und -Eigenschaften sind Attribute mit Aria-Präfix, die spezifische Informationen zu einem Objekt bereitstellen, um die Definition der Art von Rollen zu unterstützen. Eigenschaften sind Attribute, die für die Natur eines Objekts wichtig sind, z. B. aria-readonly und aria-haspopup. Das Ändern einer Eigenschaft wirkt sich auf die Bedeutung des Objekts aus.

Im folgenden Beispiel wird die -Eigenschaft aria-haspopup="true" für ein <li> Menüelement festgelegt, um anzugeben, dass es über ein Popup verfügt:

<li role="menuitem" aria-haspopup="true">Open</li>

Zustände ändern nicht die Art des Objekts, sondern stellen Informationen dar, die dem Objekt zugeordnet sind, oder Benutzerinteraktionen mit dem Objekt, z. B. aria-hidden oder aria-checked. Der Zustand aria-checked="false" im folgenden Beispiel stellt beispielsweise dar, dass das Kontrollkästchen deaktiviert und nicht aktiviert ist:

<div role="checkbox" aria-checked="false">Accept</div>

Eine vollständige Liste der Rollen, Eigenschaften und Zustände finden Sie unter Rollenmodell bei W3C.

Kompatibilitätstests für Hilfstechnologien

Die Überprüfung, ob die Website, die Sie erstellen, mit echten Hilfstechnologien funktioniert, ist der beste Weg, um sicherzustellen, dass Sie eine gute Erfahrung für Benutzer mit Behinderungen bieten. Da viele Hilfstechnologien die Tastatur verwenden, ist das Testen der Barrierefreiheit ihrer Website ein guter Ausgangspunkt.

Bei Tests der Tastaturkompatibilität wird überprüft, ob Benutzer Zugriff auf alle interaktiven Steuerelemente haben, ohne dass eine Maus erforderlich ist. Microsoft Accessibility Insights for Web ist eine Browsererweiterung für Microsoft Edge und Chrome, die Sie führt und mehrere häufige Probleme aufdeckt.

Sobald Sie sicher sind, dass Ihre Website gut mit einer Tastatur funktioniert, probieren Sie sie mit anderen Hilfstechnologien wie Bildschirmsprachausgaben aus. Diese Tests können Probleme in den folgenden Bereichen aufdecken:

  • Ihr HTML-, ARIA- und CSS-Code.
  • Der Grad der Unterstützung einer Hilfstechnologie für ein Feature oder eine Technik.

Verschiedene Browser ordnen den APIs für die Barrierefreiheit der Plattform Elemente möglicherweise anders zu als Microsoft Edge zuordnet. Beim Erstellen Ihrer Schnittstelle ist es wichtig, jeden Unterschied zu berücksichtigen.

WebAIM führt Umfragen mit Sprachausgabe - und Sehschwächebenutzern durch, mit denen Sie entscheiden können, welche Hilfstechnologien und Browser getestet werden sollen.

Erfahren Sie, wie Sie testen

Hilfstechnologien sind anspruchsvolle Werkzeuge. Gehen Sie nicht davon aus, dass Sie sofort mit dem Testen mit einer Hilfstechnologie beginnen können, ohne sich zunächst mit der Funktionsweise vertraut zu machen. Das Lernen, mit einer Sprachausgabe zu testen, hat eine besonders steile Lernkurve. Ein unerfahrener Benutzer von Bildschirmsprachausgaben könnte denken, dass eine Sprachausgabe einen Fehler aufweist, während das Problem tatsächlich ein Fehler bei der Verwendung der Sprachausgabe sein könnte.

Testen mit Bildschirmsprachausgaben bei WebAIM bietet weitere Informationen zum Testen mit Hilfstechnologien.

Lokales Testen

Die meisten Geräte enthalten Hilfstechnologien, die in das Betriebssystem integriert sind. Microsoft Windows enthält die Windows-Sprachausgabe und die Windows-Bildschirmlupe. Hilfstechnologien von Drittanbietern wie NVDA, FreedomscientificSoftwareJaws und ZoomText stehen zum Download zur Verfügung. Apple macOS enthält die VoiceOver-Sprachausgabe . Und iOS, Android und Linux unterstützen eine Vielzahl von Hilfstechnologien.

Testen auf virtuellen Computern und Emulatoren

Wenn Sie unter macOS mit einer Hilfstechnologie testen möchten, die nur für Windows verfügbar ist, z. B. windows-Sprachausgabe oder NVDA, erstellen Sie einen virtuellen Windows-Computer.

Android Studio enthält einen Emulator, mit dem Sie Hilfstechnologien in der Android Accessibility Suite testen können. Befolgen Sie die Anweisungen zum Einrichten eines virtuellen Geräts , starten Sie den Emulator, und installieren Sie dann Android Accessibility Suite aus dem GooglePlay Store.

Hinweis

Der iOS-Simulator enthält voiceOver derzeit nicht.

Cloudbasierte Testtools

Wenn eine Hilfstechnologie auf Ihrem Betriebssystem nicht verfügbar ist oder Sie nicht auf einem virtuellen Computer oder Emulator installieren können, sind cloudbasierte Hilfstechnologie-Testtools das nächstbeste.

  • Assistiv Labs (ein kommerzielles Produkt) ermöglicht Es Ihnen, manuell mit Hilfstechnologien über einen beliebigen modernen Webbrowser zu testen. Wählen Sie eine Hilfstechnologie und einen Browser aus, und sie verbindet Sie mit einem virtuellen Computer, Emulator oder echten Gerät, mit dem Sie interagieren können.

Siehe auch Cloudbasierte Emulatoren und Simulatoren.

Ressourcen für Barrierefreiheitsgrundlagen

Dabei handelt es sich um Projekte und Initiativen für Barrierefreiheit.

Das A11Y-Projekt

Das A11Y-Projekt ist ein communityorientierter Versuch, die Barrierefreiheit im Web zu vereinfachen. Sehen Sie sich die A11Y-Projektwebsite an, um mehr über grundlegende Barrierefreiheitsprinzipien, ihr barrierefreies Muster und die Widgetbibliothek sowie ihre Ressourcen zu Barrierefreiheitssoftware, Blogs, Büchern und Tools zu erfahren.

Web Accessibility Initiative (WAI)

Die W3C Web Accessibility Initiative (WAI) ist ein Ziel, die Barrierefreiheit des Webs zu verbessern. Ihre Website bietet eine Vielzahl von Ressourcen für Erste Schritte mit Webbarrierefreiheit, Entwerfen für Die Einbeziehung, Tutorials und Präsentationen und mehr.

Blogs zur Barrierefreiheit

Dies sind Blogs über Barrierefreiheit.

TPGi, LLC

TPGi, LLC bietet Beratungs- und Technologielösungen für Organisationen auf der ganzen Welt, um sicherzustellen, dass ihre Kunden alle Zielgruppen effektiv und effizient erreichen und gleichzeitig staatliche und internationale Standards erfüllen. Ihr Blog behandelt Themen wie bewährte Methoden für webe Barrierefreiheit, Tools für Barrierefreiheit und Trends zur Barrierefreiheit.

Zugriffsebene

Level Access ist ein Unternehmen für digitale Barrierefreiheit, das seine Kunden bei der Entwicklung und Bereitstellung barrierefreier Produkte und Dienste unterstützt. Ihr Blog behandelt Themen wie bewährte Methoden für ARIA, Trends zur Barrierefreiheit, Webinare und vieles mehr.

Barrierefreie Beispiele

Dies sind Bibliotheken und Beispiele für Barrierefreiheit.

ally.js – Tutorials

JavaScript-Bibliothek, die moderne Webanwendungen bei Barrierefreiheitsbedenken unterstützt, indem sie die Barrierefreiheit vereinfacht. Weitere Informationen finden Sie unter ally.js – Tutorials.

OpenAjax-Beispiele

Die OpenAjax Alliance-Website ist eine hervorragende Ressource zum Überprüfen der Regeln für WAI-ARIA und enthält eine Reihe von Beispielen für WAI-ARIA-Implementierungen.

Muster

Das A11Y-Projekt bietet eine Bibliothek mit zugänglichen Widgets und Mustern wie Menüs, Schaltflächen, QuickInfos und mehr. Weitere Informationen findest du unter Muster.

Barrierefreiheitstechniken und -tools

Dies sind Techniken und Tools zur Verbesserung der Barrierefreiheit.

Barrierefreiheit: Erstellen barrierefreier Erweiterungssymbole für Microsoft Edge

Hier erhalten Sie Anleitungen zum Erstellen barrierefreier Erweiterungssymbole für Microsoft Edge. Weitere Informationen findest du unter Barrierefreiheit: Erstellen barrierefreier Erweiterungssymbole für Microsoft Edge.

Barrierefreier Name und Beschreibung: Berechnung und Zuordnungen 1.1

In diesem W3C-Zuordnungsdokument wird erläutert, wie Browser Namen und Beschreibungen barrierefreier Objekte aus Webinhaltssprachen ermitteln und in Barrierefreiheits-APIs verfügbar machen. Weitere Informationen finden Sie unter Barrierefreier Name und Beschreibung: Berechnung und Zuordnungen 1.1.

Ressourcen zur Bewertung der Barrierefreiheit

Ressourcen zur Bewertung der Barrierefreiheit ist eine mehrseitige Ressource des W3C, die verschiedene Ansätze für die Bewertung von Websites auf Barrierefreiheit beschreibt. Weitere Informationen findest du unter Ressourcen zur Bewertung der Barrierefreiheit.

Kompatibilitätstests für Hilfstechnologien

Testergebnisse, die zeigen, wie sich verschiedene Inhaltstypen und Standards in Hilfstechnologien (AT) wie Bildschirmsprachausgaben verhalten. Weitere Informationen findest du unter Kompatibilitätstests für Hilfstechnologien.

Das Erstellen barrierefreier Websites ist viel einfacher geworden

In diesem Blogbeitrag für die .NET-Webentwicklung und -Tools wird die Webbarrierefreiheitsprüfung für die Visual Studio-Erweiterung beschrieben. Weitere Informationen findest du unter Erstellen barrierefreier Websites wurde noch einfacher.

Grundlegende Barrierefreiheits-API-Zuordnungen 1.1

In diesem W3C-Zuordnungsdokument wird erläutert, wie die Semantik von Webinhaltssprachen für Barrierefreiheits-APIs verfügbar gemacht wird. Weitere Informationen finden Sie unter Grundlegende Barrierefreiheits-API-Zuordnungen 1.1.

Einfache Überprüfungen – Eine erste Überprüfung der Web-Barrierefreiheit

Eine Reihe von Schnellprüfungen des WAI, die Ihnen helfen, die Barrierefreiheit einer Webseite zu bewerten. Weitere Informationen finden Sie unter Einfache Überprüfungen – Eine erste Überprüfung der Web-Barrierefreiheit.

So treffen Sie WCAG 2.0

Kurzübersicht zu den Anforderungen und Techniken der Web Content Accessibility Guidelines (WCAG) 2.0 (Erfolgskriterien). Weitere Informationen finden Sie unter How to Meet WCAG 2.0.

HTML-Barrierefreiheits-API-Zuordnungen 1.0

In diesem W3C-Zuordnungsdokument wird erläutert, wie HTML5.1-Elemente und -Attribute den APIs für die Barrierefreiheit der Plattform zugeordnet werden. Weitere Informationen finden Sie unter Zuordnungen der HTML-Barrierefreiheits-API 1.0.

Kurztipps

Eine Liste mit schnellen Webentwicklungstipps für die Barrierefreiheit von The A11Y Project. Weitere Informationen findest du unter Schnelltipps.

Standortüberprüfung

Das Site Scan-Tool in Microsoft Edge Dev Center sucht nach veralteten Bibliotheken, Layoutproblemen und Barrierefreiheitsproblemen. Weitere Informationen findest du unter Standortüberprüfung.

Techniken für WCAG 2.0

Techniken aus dem W3C, die Webentwicklern Anleitungen zur Erfüllung der Erfolgskriterien für die Barrierefreiheit von Webinhalten (WCAG) 2.0 bieten. Weitere Informationen finden Sie unter Techniken für WCAG 2.0.

Tipps zur Entwicklung für Web-Barrierefreiheit

Tipps aus dem W3C zum Entwickeln von Webinhalten, die für Menschen mit Behinderungen zugänglicher sind. Weitere Informationen findest du unter Tipps zur Entwicklung für Web-Barrierefreiheit.

WAI-ARIA Authoring Practices 1.1

Ein Dokument des W3C, das Lesern ein Verständnis der Verwendung von WAI-ARIA 1.1 vermittelt und Ansätze empfiehlt, um Widgets, Navigation und Verhalten mithilfe von WAI-ARIA-Rollen, Zuständen und Eigenschaften zugänglich zu machen. Weitere Informationen findest du unter WAI-ARIA Authoring Practices 1.1.

WAI-Richtlinien und -Techniken

Eine Reihe von Richtlinien und Standards für die Web-Barrierefreiheit, die vom WAI entwickelt wurden. Weitere Informationen finden Sie unter WAI-Richtlinien und -Techniken.

Liste der Tools für die Auswertung der Webbarrierefreiheit

Eine Liste der Tools zur Bewertung der Webbarrierefreiheit, mit denen Sie ermitteln können, ob Websites den Richtlinien für Barrierefreiheit entsprechen. Weitere Informationen hierzu erhalten Sie unter Web Accessibility Evaluation Tools List (Liste der Web-Barrierefreiheitsauswertungstools).

Webbarrierefreiheitsperspektiven: Erkunden der Auswirkungen und Vorteile für alle

Eine Reihe von kurzen Situationsvideos des W3C über die Auswirkungen der Barrierefreiheit und die Vorteile für alle. Weitere Informationen finden Sie unter Webbarrierefreiheitsperspektiven: Erkunden der Auswirkungen und Vorteile für alle.