Ressourcen zum Erstellen barrierefreier Websites

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 für Personen, die beim Surfen im Web auf Hilfstechnologien angewiesen sind, nur schwer zu verwenden.

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

Besuchen Sie HTML5Accessibility, um zu erfahren, welche neuen HTML5-Features von Microsoft Edge unterstützt werden.

Funktionsweise der Barrierefreiheit

Hilfstechnologien fügen Funktionen hinzu, über die Computer normalerweise nicht verfügen. Beispielsweise kann ein Benutzer mit Sehschwäche seine Tastatur in Kombination mit Hilfstechnologien 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 von:

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äß geschrieben oder das entsprechende Element angegeben ist, damit auf die Anwendung zugegriffen werden kann.

Weitere Informationen finden Sie in ARIA und benutzeroberflächenautomatisierung in Microsoft Edge. Barrierefreie Universelle Windows-Plattform (UWP)-Apps werden unter "Barrierefreiheit" in Windows Dev Center erläutert.

Viele häufig auftretende Barrierefreiheitsprobleme mit dynamischen Inhalten können durch bewährte Codierungspraktiken behoben werden. Die WCAG 2.0-Dokumentation enthält viele Techniken und bewährte Methoden, mit denen Sie barrierefreiere dynamische Webanwendungen erstellen können. Auch wenn sie richtig codiert sind, ist jedoch nicht unbedingt auf dynamische Inhalte zugegriffen. Barrierefreie Rich-Internet-Anwendungen (ARIA) helfen bei der Behebung dieses Problems.

Weitere Informationen zur Barrierefreiheit im Web finden Sie in der Einführung in die Barrierefreiheit des Webs durch die Web Accessibility Initiative (WAI).For more information on web accessibility, check out the Introduction to Web Accessibility by the Web Accessibility Initiative (WAI).

ARIA

Die ARIA-Spezifikation (Accessible Rich Internet Applications) der W3C Web Accessibility Initiative definiert als Syntax, um dynamische Webinhalte und benutzerdefinierte Benutzeroberflächen für alle Personen zugänglich zu machen. ARIA erweitert HTML mithilfe zusätzlicher Attribute (Rollen, Eigenschaften und Zustände), die benutzerdefinierte Semantik vermitteln sollen. Diese Attribute werden von Browsern verwendet, um den Status 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 Rollenattribut verwenden, um Hilfstechnologien und Barrierefreiheits-APIs Informationen über das Element zu geben. Beispielsweise wird das folgende <li> Element zugewiesen role="menuitem" , um zu kennzeichnen, dass es sich um ein Element in einem Menü handelt.

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

ARIA-Zustände und -Eigenschaften sind Attribute mit Ariepräfixen, die spezifische Informationen zu einem Objekt bereitstellen, um die Definition der Art von Rollen zu erleichtern. Eigenschaften sind Attribute, die für die Natur eines Objekts unerlässlich 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" auf ein <li> Menüelement festgelegt, um anzuzeigen, dass sie ein Popup hat:

<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 benutzerinteraktion 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>

Um eine vollständige Liste der Rollen, Eigenschaften und Zustände anzuzeigen, wechseln Sie zu "Rollenmodell " bei W3C.

Kompatibilitätstests für Hilfstechnologien

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

Die Tastaturkompatibilitätstests überprüfen, 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 aus, z. B. Sprachausgaben. Diese Tests können Probleme in den folgenden Bereichen aufdecken:

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

Unterschiedliche Browser ordnen den ApIs für Die Barrierefreiheit der Plattform möglicherweise Elemente anders zu als Microsoft Edge sie zu ordnet. Beim Erstellen der Benutzeroberfläche ist es wichtig, jeden Unterschied zu berücksichtigen.

WebAIM führt Umfragen mit Sprachausgabe - und Sehbesachungsbenutzern durch, die Ihnen bei der Entscheidung helfen, welche Hilfstechnologien und Browser getestet werden sollen.

Learning testen

Hilfstechnologien sind anspruchsvolle Tools. Gehen Sie nicht davon aus, dass Sie sofort mit dem Testen mit einer Hilfstechnologie beginnen können, ohne zuerst zu erfahren, wie sie funktioniert. Learning zum Testen mit einer Sprachausgabe hat eine besonders steile Lernkurve. Ein Neuling der Sprachausgabe könnte denken, dass eine Sprachausgabe einen Fehler hat, während das Problem bei der Verwendung der Sprachausgabe tatsächlich ein Fehler sein könnte.

Das Testen mit Sprachausgaben 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 bildschirmsprachausgabe Windows Sprachausgabe und Windows Bildschirmlupe. Hilfstechnologien von Drittanbietern wie NVDA, FreedomscientificSoftwareJaws und ZoomText stehen zum Download zur Verfügung. Apple macOS enthält die Sprachausgabe VoiceOver. Und iOS, Android und Linux unterstützen alle eine Vielzahl von Hilfstechnologien.

Testen in 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 Windows virtuellen Computer. Virtuelle Computer mit Microsoft Edge (EdgeHTML) und IE sind für VirtualBox und VMWare auf der Downloadseite für virtuelle Computer verfügbar.

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 derzeit voiceOver nicht.

Cloudbasierte Testtools

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

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

Siehe auch Cloud-basierte Emulatoren und Simulatoren.

Ressourcen für die Grundlagen der Barrierefreiheit

Dies sind Projekte und Initiativen für Barrierefreiheit.

Das A11Y-Projekt

Die A11Y-Project ist ein von der Community gesteuerter Versuch, die Barrierefreiheit im Web zu vereinfachen. Sehen Sie sich die A11Y Project-Website an, um mehr über die grundlegenden Prinzipien der Barrierefreiheit, ihr barrierefreies Muster und ihre Widgetbibliothek sowie ihre Ressourcen für Barrierefreiheitssoftware, Blogs, Bücher und Tools zu erfahren.

Web Accessibility Initiative (WAI)

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

Barrierefreiheitsblogs

Dies sind Blogs zur 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. In ihrem Blog werden Themen wie bewährte Methoden für die Barrierefreiheit im Web, Barrierefreiheitstools und Barrierefreiheitstrends behandelt.

Einfach zugänglich

Simply Accessible ist ein Team von Barrierefreiheitsspezialisten, die Barrierefreiheitsschulungen, Beratung und mehr bereitstellen, um die Wahrnehmung von Barrierefreiheit im Web zu ändern. Im Abschnitt "Artikel " werden bewährte Methoden für Barrierefreiheit im Web, barrierefreies Design und vieles mehr erläutert.

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 befasst sich mit Themen wie bewährten ARIA-Methoden, Barrierefreiheitstrends, Webinaren und mehr.

Barrierefreie Beispiele

Dies sind Bibliotheken und Beispiele für Barrierefreiheit.

ally.js – Lernprogramme

JavaScript-Bibliothek, um moderne Webanwendungen bei Barrierefreiheitsaspekten zu unterstützen, indem die Barrierefreiheit vereinfacht wird. Weitere Informationen finden Sie unter ally.js – Lernprogramme.

OpenAjax-Beispiele

Die OpenAjax Alliance-Website ist eine hervorragende Ressource für die Überprüfung der Regeln für WAI-ARIA und bietet eine Reihe von Beispielen für WAI-ARIA-Implementierungen.

Muster

Die A11Y-Project bietet eine Bibliothek mit barrierefreien Widgets und Mustern wie Menüs, Schaltflächen, QuickInfos und mehr. Weitere Informationen finden Sie unter "Muster".

Barrierefreiheitstechniken und -tools

Dies sind Techniken und Tools zur Verbesserung der Barrierefreiheit.

Barrierefreiheit: Erstellen von Barrierefreiheitserweiterungssymbolen für Microsoft Edge

Hier erhalten Sie Anleitungen zum Erstellen von Symbolen für barrierefreie Erweiterungen für Microsoft Edge. Weitere Informationen finden Sie 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 Barrierefreiheitsauswertung

Accessibility Evaluation Resources ist eine mehrseitige Ressource des W3C, die verschiedene Ansätze zum Auswerten von Websites auf Barrierefreiheit beschreibt. Weitere Informationen finden Sie unter Ressourcen zur Bewertung der Barrierefreiheit.

Kompatibilitätstests für Hilfstechnologien

Testergebnisse, die zeigen, wie sich unterschiedliche Inhaltstypen und Standards in Hilfstechnologien (AT) wie Sprachausgaben verhalten. Weitere Informationen finden Sie unter Kompatibilitätstests für Hilfstechnologien.

Das Erstellen barrierefreier Websites wurde viel einfacher

In diesem Blogbeitrag zur .NET-Webentwicklung und -tools wird die Visual Studio Erweiterung Web Accessibility Checker beschrieben. Weitere Informationen finden Sie unter Erstellen barrierefreier Websites.

Core Accessibility API Mappings 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 Core Accessibility API Mappings 1.1.

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

Eine Reihe von Schnellprüfungen durch die WAI, die Ihnen helfen, die Barrierefreiheit einer Webseite zu überprüfen. Weitere Informationen finden Sie unter "Einfache Prüfungen – Eine erste Überprüfung der Barrierefreiheit im Web".

So lernen Sie WCAG 2.0 kennen

Eine Kurzübersicht über die Anforderungen und Techniken der Web Content Accessibility Guidelines (WCAG) 2.0 (Erfolgskriterien). Weitere Informationen finden Sie unter So lernen Sie WCAG 2.0 kennen.

HTML-Barrierefreiheits-API-Zuordnungen 1.0

In diesem Dokument für W3C-Zuordnungen wird erläutert, wie HTML5.1-Elemente und -Attribute apIs für plattformeigene Barrierefreiheit zugeordnet werden. Weitere Informationen finden Sie unter HTML Accessibility API Mappings 1.0.

Schnelles Tipps

Eine Liste der Tipps zur schnellen Webentwicklung zur Barrierefreiheit von The A11Y Project. Weitere Informationen finden Sie unter Quick Tipps.

Websitescan

Das Websitescantool im Microsoft Edge Dev Center sucht nach veralteten Bibliotheken, Layoutproblemen und Barrierefreiheitsproblemen. Weitere Informationen finden Sie unter "Websitescan".

Techniken für WCAG 2.0

W3C-Techniken, die Webentwicklern Anleitungen zum Erfüllen von Wcag 2.0-Erfolgskriterien (Web Content Accessibility Guidelines) bieten. Weitere Informationen finden Sie unter Techniken für WCAG 2.0.

Tipps zum Entwickeln von Barrierefreiheit im Web

Tipps aus dem W3C zum Entwickeln von Webinhalten, die für Menschen mit Behinderungen zugänglicher sind. Weitere Informationen finden Sie unter Tipps zum Entwickeln von Barrierefreiheit im Web.

WAI-ARIA-Erstellungspraktiken 1.1

Ein Dokument des W3C, das Lesern ein Verständnis der Verwendung von WAI-ARIA 1.1 bietet und Ansätze zur Barrierefreiheit von Widgets, Navigation und Verhalten mit WAI-ARIA-Rollen, -Zuständen und -Eigenschaften empfiehlt. Weitere Informationen finden Sie unter WAI-ARIA Authoring Practices 1.1.

WAI-Richtlinien und -Techniken

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

Web Accessibility Evaluation Tools List

Eine Liste der Tools zur Bewertung der Barrierefreiheit im Web, mit denen Sie ermitteln können, ob Websites den Richtlinien für die Barrierefreiheit entsprechen. Weitere Informationen finden Sie unter Web Accessibility Evaluation Tools List.

Web Accessibility Perspectives: Explore the Impact and Benefits for Everyone

Eine Reihe kurzer Situationsvideos des W3C über die Auswirkungen der Barrierefreiheit und die Vorteile für alle. Weitere Informationen finden Sie unter " Web Accessibility Perspectives: Explore the Impact and Benefits for Everyone".