1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
---
title: ARIA
slug: Web/Accessibility/ARIA
translation_of: Web/Accessibility/ARIA
original_slug: Web/Barrierefreiheit/ARIA
---
<p>Accessible Rich Internet Applications <strong>(ARIA)</strong> ermöglichen Webentwicklern Webinhalte und Web-Applikationen (insbesondere solche mit Ajax und JavaScript) besser zugänglich für Menschen mit Behinderungen und anderen Einschränkungen zu machen. Zum Beispiel lassen sich mit ARIA Navigations-Landmarken, JavaScript-Widgets, Formular-Hinweise und Fehlermeldungen hinzufügen und Live-Content-Aktualisierungen barrierefrei gestalten.</p>
<p>ARIA ist ein Satz von speziellen Attributen, die beliebigem Markup-Content hinzugefügt werden können, wurde jedoch vorwiegend für HTML entwickelt. Das Attribut <code>role</code> definiert, um welche Art von Element es sich bei einem Objekt handelt (z. B. article, alert, oder slider). Andere ARIA-Attribute erweitern den Inhalt einer Website um nützliche Hilfsfunktionen, wie z. B. Formularbeschreibungen und Anzeigen für den aktuellen Wert bei Fortschrittsanzeigen.</p>
<p>ARIA ist bei den meisten Browsern und Screen-Readern implementiert. Die Implementierungen weichen jedoch teilweise voneinander ab. Bei älterer Technologie ist die Unterstützung oft nicht vollständig (oder gar nicht vorhanden), daher sollte am besten "sicheres" ARIA eingesetzt werden, das bei schlechter Unterstützung keine Probleme verursacht, oder der Benutzer aufgefordert werden, neuere Technologie zu benutzen.</p>
<p>Bitte helfen Sie uns, ARIA zu verbessern! Falls sie nicht genügend Zeit haben, fügen sie ihre Vorschläge einfach auf der <a href="/Talk:en/ARIA" title="https://developer.mozilla.org/Talk:en/ARIA">Diskussionsseite</a> hinzu.</p>
<table class="topicpage-table">
<tbody>
<tr>
<td>
<h3 id="Documentation" name="Documentation">Einführung in ARIA</h3>
<dl>
<dt><a href="/de/docs/Barrierefreiheit/An_overview_of_accessible_web_applications_and_widgets" title="An overview of accessible web applications and widgets">Einführung in ARIA</a></dt>
<dd>Eine schnelle Einführung, die beschreibt, wie dynamische Inhalte mit ARIA barrierefrei gestaltet werden können. Lesen Sie auch die klassische <a class="external" href="http://dev.opera.com/articles/view/introduction-to-wai-aria/">Einführung von Gez Lemon</a> von 2008.</dd>
<dt><a href="/en-US/docs/Accessibility/ARIA/Web_applications_and_ARIA_FAQ" title="https://developer.mozilla.org/en-US/docs/Accessibility/Web_applications_and_ARIA_FAQ">Web-Applikationen und ARIA-FAQ</a></dt>
<dd>Antworten für die häufigsten Fragen rund um WAI-ARIA und warum es nötig ist, Web-Applikationen barrierefrei zu gestalten.</dd>
<dt><a class="external" href="http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/">Videos von Screen-Readern mit ARIA</a></dt>
<dd>Schauen sie sich vereinfachte Beispiele und Praxisbeispiele zu ARIA an. Auch "davor und danach"-Beispiele sind hier zu finden.</dd>
<dt><a class="external" href="http://dvcs.w3.org/hg/aria-unofficial/raw-file/tip/index.html">Benutzung von ARIA mit HTML</a></dt>
<dd>Hier finden Sie praxisorientierte Empfehlungen für Entwickler. Zum Beispiel welche Attribute mit welchen HTML-Elementen eingesetzt werden sollten.</dd>
</dl>
<h3 id="Einfache_Verbesserungen_mit_ARIA">Einfache Verbesserungen mit ARIA</h3>
<dl>
<dt><a class="external" href="http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/" rel="external">Enhancing Page Navigation with ARIA Landmarks</a></dt>
<dd>Eine Einführung zur Verbesserung der Seitennavigation für Benutzer von Screen Readern mit ARIA-Landmarken. <a class="external" href="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/" rel="external">Lesen Sie auch den Artikel zur Impelemtierung von ARIA-Landmarken</a> und schauen Sie sich bereits existierende Websites mit ARIA-Landmarken an (letze Aktualisierung: Juli 2011).</dd>
<dt><a href="/en-US/docs/ARIA/forms" rel="internal" title="/en-US/docs/ARIA/forms">Verbesserung der Zugänglichkeit von Formularen</a></dt>
<dd>ARIA ist nicht nur für dynamische Inhalte! Lernen Sie, wie die Zugänglichkeit von HTML-Formularen mit Hilfe von ARIA-Attributen verbessert werden kann.</dd>
<dt><a href="/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions" title="Live Regions">Live-Regions (work-in-progress)</a></dt>
<dd>Live-Regionen liefern Screen Readern Hinweise über den Umgang mit Inhaltsänderungen bei Webseiten.</dd>
<dt><a class="external" href="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm" rel="external">Using ARIA Live Regions to Announce Content Changes</a></dt>
<dd>Eine kurze Übersicht über Live-Regionen von den Machern der Screen-Reader Software JAWS. Live Regions werden auch von NVDA in Firefox und VoiceOver bei Safari unterstüzt (ab OS X Lion und iOS 5).</dd>
</dl>
<h3 id="ARIA_für_JavaScript-Widgets">ARIA für JavaScript-Widgets</h3>
<dl>
<dt><a class="external external-icon" href="/de/docs/Web/Barrierefreiheit/Tastaturgesteuerte_JavaScript_Komponenten" title="en-US/docs/Accessibility/Keyboard-navigable_JavaScript_widgets">Tastaturgesteuerte JavaScript-Komponenten</a></dt>
<dd>Der erste Schritt bei der Erstellung eines berrierefreien JavaScript-Widget ist, es mit der Tastatur navigierbar zu machen. Deiser Artikel zeigt die Arbeitsschritte auf, die hierfür nötig sind. Der <a class="external" href="http://www.yuiblog.com/blog/2009/02/23/managing-focus/">Artikel von Yahoo! zum Focus Management</a> liefert ebenfalls eine gute Beschreibung.</dd>
<dt><a class="external" href="http://access.aol.com/dhtml-style-guide-working-group/">Style-Guide für die Tastaturnavigation</a></dt>
<dd>Es stellt eine Herausforderung bei ARIA dar, Entwickler zur konsistenten Implementierung zu bringen, was für die Benutzer natürlich am besten wäre. Dieser Style-Guide beschreibt die Tastaturfunktionen bei bekannten Widgets.</dd>
</dl>
<h3 id="Weitere_Informationen_zu_ARIA">Weitere Informationen zu ARIA</h3>
<dl>
<dt><a href="/en-US/docs/Accessibility/ARIA/widgets/overview" title="en-US/docs/aria/widgets/overview">Widget-Techniken, Tutorials und Beispiele</a></dt>
<dd>Benötigen sie einen Slider, ein Menü oder eine andere Art von Widget? Hier finden Sie weiterführende Informationen.</dd>
<dt><a class="external" href="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/">ARIA-erweiterte JavaScript UI-Libraries</a></dt>
<dd>Falls Sie ein neues Projekt starten, setzen Sie eine UI-Widget-Llibrary mit ARIA-Unterstützung ein! Achtung: Der Artikel ist von 2009 - der Inhalt sollte auf eine MDN-Seite kopiert werden, damit er aktualisiert werden kann.</dd>
<dt><a class="external" href="http://dl.dropbox.com/u/573324/CSUN2012/index.html">Barrierefreiheit von HTML5 und Rich Internet Applications - CSUN 2012 Workshop Materialen</a></dt>
<dd>Beinhaltet auch Präsentationen und Beispiele.</dd>
</dl>
</td>
<td>
<h3 id="Community" name="Community">Mailing-Liste</h3>
<dl>
<dt><a class="link-https" href="https://groups.google.com/forum/#!forum/free-aria">Free ARIA Google Group</a></dt>
<dd>Hier können Fragen zu ARIA gestellt und Vorschläge gemacht werden, um diese ARIA-Dokumentation zu verbessern.</dd>
</dl>
<h3 id="Community" name="Community">Blogs</h3>
<p>ARIA-Information von Blogs sind meist schnell veraltet. Dennoch gibt es einige hilfreiche Informationen von anderen Entwicklern, die mit ARIA arbeiten.</p>
<p><a class="external" href="http://www.paciellogroup.com/blog/category/wai-aria/">Paciello Group</a></p>
<p><a class="external" href="http://www.accessibleculture.org/tag/wai-aria/">Accessible Culture</a></p>
<p><a class="external" href="http://yaccessibilityblog.com/library/category/code/aria">Yahoo! Accessibility</a></p>
<h3 id="Fehler_melden">Fehler melden</h3>
<p><a href="/en/Accessibility/ARIA/How_to_file_ARIA-related_bugs" title="https://developer.mozilla.org/en/ARIA/How_to_file_ARIA-related_bugs">Schreiben Sie ARIA-Fehlerberichte zu Browsern, Screen-Readern und JavaScript-Libraries</a>.</p>
<h3 id="Beispiele">Beispiele</h3>
<dl>
<dt><a class="external" href="/en-US/docs/Accessibility/ARIA/ARIA_Test_Cases" title="en-US/docs/ARIA/examples">Verzeichnis für ARIA-Beispiele</a></dt>
<dd>Einige Beispieldateien mit Grundstruktur von denen man lernen kann.</dd>
<dt><span class="external">Beispiele für zugängliche JS-Widget-Libraries</span></dt>
<dd><a class="external" href="http://dojotoolkit.org/widgets" title="http://dojotoolkit.org/widgets">Dojo</a>, <a class="external" href="http://hanshillen.github.com/jqtest/" title="http://hanshillen.github.com/jqtest/">jQuery</a>, <a class="external" href="http://wiki.fluidproject.org/display/fluid/Components" title="http://wiki.fluidproject.org/display/fluid/Components">Fluid</a>, <a class="external" href="http://yuilibrary.com/gallery/">YUI</a></dd>
</dl>
<dl>
<dt><a class="external" href="http://mail.yahoo.com">Yahoo! Mail</a></dt>
<dd>Yahoo! hat bei Yahoo! Mail sehr gute Arbeit geleistet. Einer Web-App, die beinahe wie eine native App aussieht und sehr gut funktioniert, wie ein <a class="external" href="http://www.marcozehe.de/2011/09/21/review-the-all-new-yahoo-mail-web-application/">Review über Yahoo! Mail</a> des Screen-Reader-Benutzers Marco Zehe zeigt. Sein Kommentar: "Keep up the good work!".</dd>
</dl>
<dl>
<dt><a class="external" href="http://search.yahoo.com">Yahoo! Search</a></dt>
<dd>Yahoo! hat hier ebenfalls sehr gute Arbeit geleistet, die Möglichkeiten mit ARIA voll ausgeschöpft und die <a class="external" href="http://ycorpblog.com/2011/03/23/searchdirect/">Technik ausführlich dokumentiert</a>. Bei Yahoo! Search kommt eine Kombination von ARIA-Landmarken, Live-Regionen und Widgets zum Einsatz.</dd>
</dl>
<h3 id="Bemühungen_zur_Standardisierung">Bemühungen zur Standardisierung</h3>
<dl>
<dt><a class="external" href="http://www.w3.org/WAI/intro/aria.php">Übersicht zu den WAI-ARIA Aktivitäten des W3C</a></dt>
<dd>Übersicht zu den Bemühungen für die Standardisierung von AI-ARIA der Web Accessibility Initiative (WAI).</dd>
<dt><a class="external" href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Spezifikation</a></dt>
<dd>Die Spezifikation des W3C ist als Referenz sehr nützlich. In diesem Stadium unbedingt Kompatibilitätstest durchgeführt werden, da die Implematierungen noch immer voneinader abweichen.</dd>
<dt><a class="external" href="http://www.w3.org/WAI/PF/aria-practices/">WAI-ARIA Authoring Practices</a></dt>
<dd>Wie bei der WAI-ARIA-Spezifikation des W3C stellen die offiziellen best-practices ein Ideal für die Zukunft dar - den Zeitpunkt, an dem davon ausgegangen werden kann, dass die ARIA-Überstützung bei allen Browsern und Screen-Readern konsistent implemetiert ist. Die W3C-Dokumente erlauben die tiefgehende Einsicht in die Struktur von ARIA.<br>
<br>
Für jetzt gilt, dass Webentwickler, die ARIA implementieren, die Kompatibiliät maximieren sollten und hierfür auf die Dokumentation von Best-Practices und Beispielen zurückgreifen.</dd>
<dt><a class="external" href="http://www.openajax.org/member/wiki/Accessibility">Open AJAX Accessibility Task Force</a></dt>
<dd>Die Open AJAX Effort Centers zu Themen wie Entwicklerwerkzeugen, Beispieldateien und automatisierte Tests für ARIA.</dd>
<dt><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="ARIA Techniques">In der Entwicklung: WCAG 2.0 ARIA Techniken</a></dt>
<dd>Die Community benötigt einen kompletten Satz von WCAG-Techniken für WAI-ARIA + HTML, damit Organisationen davon ausgehen können, dass ihre ARIA-erweiterten Inhalte WCAG-konform sind. Das ist vor allem dann wichtig, wenn Regulierungen und Vorschriften auf WCAG basieren.</dd>
</dl>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="2">
<h3 id="Related_Topics" name="Related_Topics">Verwandte Themen</h3>
<dl>
<dd><a href="/en-US/docs/Accessibility" title="en-US/docs/Accessibility">Accessibility</a>, <a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></dd>
</dl>
</td>
</tr>
</tbody>
</table>
<p> </p>
|
