diff options
Diffstat (limited to 'files/de/web/barrierefreiheit/aria')
3 files changed, 394 insertions, 0 deletions
diff --git a/files/de/web/barrierefreiheit/aria/aria_live_regionen/index.html b/files/de/web/barrierefreiheit/aria/aria_live_regionen/index.html new file mode 100644 index 0000000000..4e1f22e0b5 --- /dev/null +++ b/files/de/web/barrierefreiheit/aria/aria_live_regionen/index.html @@ -0,0 +1,89 @@ +--- +title: ARIA Live-Regionen +slug: Web/Barrierefreiheit/ARIA/ARIA_Live_Regionen +translation_of: Web/Accessibility/ARIA/ARIA_Live_Regions +--- +<h2 id="Einführung">Einführung</h2> +<p>In der Vergangenheit konnten Änderungen bei Webseiten nur so von einem Screenreader kommuniziert werden, dass der komplette Inhalt vorgelesen oder nur sehr wenig bis gar nichts über die Inhaltsänderungen berichtet wurde. Dies führte dazu, dass einige oder sogar alle Informationen unzugänglich waren. Bisher waren Screenreader nicht in der Lage, diese Situation zu verbessern, weil es keine standardisierte Methode gab, um Screenreader per Markup über Veränderungen zu informieren. ARIA-Live-Regionen sollen diese Lücke schließen. Über Live-Regionen erhalten Screenreader Anweisungen, wonach entschieden werden kann, ob und wann Benutzer unterbrochen werden sollen, um sie über Veränderungen des Inhalts in Kenntnis zu setzen.</p> +<h2 id="Einfache_Live-Regionen">Einfache Live-Regionen</h2> +<p> </p> +<p>Dynamische Inhalte, die ohne das Neuladen einer Webseite nachgeladen werden, sind im Allgemeinen entweder eine Region oder eine Komponente. Einfache Inhaltsänderungen, die nicht interaktiv sind, sollten als Live-Regionen gekennzeichnet werden. In der folgenden Liste werden die unterschiedlichen Eigenschaften für ARIA-Live-Regionen mit einer Beschreibung aufgeführt.</p> +<ol> + <li><strong>aria-live:</strong> Mit aria-live=POLITENESS_SETTING wird die Priorität für die Behandlung von Aktualisierungen von Live-Regionen festgelegt - die möglichen Werte für diese Einstellung sind: off/polite/assertive, wobei "off" der Default-Wert ist. Diese Eigenschaft ist mit Abstand die Wichtigste.</li> + <li> + <p class="comment"><strong>aria-controls</strong>: Mit aria-controls=[IDLIST] wird ein Steuerungselement mit der Region verknüpft, die es kontrollieren soll. Regionen werden ähnlich wie div-Elemente anhand einer ID identifiziert. Wenn mehrere Regionen mit einer Steuerung verknüpft werden sollen, können diese einfach getrennt durch ein Leerzeichen angegeben werden, z.B. aria-controls="myRegionID1 myRegionsID2".</p> + <div class="warning"> + Not known if the aria-controls aspect of live regions is implemented in current ATs, or which. Needs research.</div> + </li> +</ol> +<p>In der Regel wird ausschließlich aria-live="polite" verwendet. Alle Regionen, die mit Informationen aktualisiert werden, die zwar wichtig sind, jedoch nicht so dringend, dass der Benutzer sofort unterbrochen und darüber informiert werden sollte, sollten dieses Attribut erhalten. Der Screenreader setzt den Benutzer dann über die Änderungen in Kenntnis, sobald er nicht mehr beschäftigt ist.</p> +<p>Regionen, die unrelevant sind oder z.B. wegen ständiger Aktualisierungen störend wirken könnten, sollten mit aria-live="off" stillgeschaltet werden.</p> +<h3 id="Einfaches_Einsatzszenario_Eine_Combobox_aktualisiert_nützliche_On-Screen-Informationen">Einfaches Einsatzszenario: Eine Combobox aktualisiert nützliche On-Screen-Informationen</h3> +<p>Angenommen eine Website, die Informationen über Vogelarten bereitstellt, bietet ein Dropdown-Menü zur Auswahl einer der Vogelarten an und bei der Auswahl werden in einer Region Informationen über diese Vogelart angezeigt.</p> +<p><code><select size="1" id="bird-selector" aria-controls="bird-info"><option> .... </select></code></p> +<p><code><div role="region" id="bird-info" aria-live="polite"></code></p> +<p>Sobald der Benutzer eine Vogelart selektiert, wird die Information vorgelesen. Da für die Region "polite" eingestellt ist, wartet der Screenreader, bis der Benutzer nicht mehr beschäftigt ist. Folglich wird bei der Bewegung nach unten in der Liste nicht jede Vogelart vorgelesen, sondern nur die ausgewählte.</p> +<h2 id="Bevorzugung_von_spezialisierten_Live-Region-Rollen">Bevorzugung von spezialisierten Live-Region-Rollen</h2> +<p>Für die folgenden bekannten vordefinierten Situationen sollte bevorzugt eine entsprechende "Live-Region-Rolle" eingesetzt werden:</p> +<table style="width: 100%;"> + <thead> + <tr> + <th scope="col">Rolle</th> + <th scope="col">Beschreibung</th> + <th scope="col">Hinweise zur Kompatibilität</th> + </tr> + </thead> + <tbody> + <tr> + <td>log</td> + <td>Chat, Fehler, Spiel oder andere Logs</td> + <td>Zur Maximierung der Kompatiblität sollte ein redundantes aria-live="polite" hinzugefügt werden, wenn diese Rolle verwendet wird.</td> + </tr> + <tr> + <td>status</td> + <td>Eine Statusleiste oder Bildschirmbereich, der einen aktualisierbaren Status anzeigt. Screenreader-Benutzer können mit einem speziellen Befehl den aktuellen Status abfragen.</td> + <td>Zur Maximierung der Kompatiblität sollte ein redundantes aria-live="polite" hinzugefügt werden, wenn diese Rolle verwendet wird.</td> + </tr> + <tr> + <td>alert</td> + <td>Eine Fehler- oder Warnungmeldung, die auf dem Bildschirm eingeblendet wird. Alarmmeldungen sind insbesondere bei der clentseitige Validierungsmeldungen für Benutzer wichtig. (TBD: link to ARIA form tutorial with aria info)</td> + <td>Zur Maximierung der Kompatiblität sollte ein redundantes aria-live="assertive" hinzugefügt werden, wenn diese Rolle verwendet wird. (TBD: check to see if this is necessary or causes double speaking issues.)</td> + </tr> + <tr> + <td>progressbar</td> + <td>Eine Kombination aus einer Komponente und einer Live-Region. Verwenden Sie diese Rolle mit aria-valuemin, aria-valuenow und aria-valuemax. (TBD: add more info here).</td> + <td> </td> + </tr> + <tr> + <td>marquee</td> + <td>Für scrollenden Text, wie z.B. ein Börsenticker.</td> + <td> </td> + </tr> + <tr> + <td>timer</td> + <td>Jede Art von Zeitschaltung oder Uhr, wie z.B. ein Countdown-Timer oder eine Stoppuhr.</td> + <td> </td> + </tr> + </tbody> +</table> +<h2 id="Fortgeschrittene_Live-Regionen">Fortgeschrittene Live-Regionen</h2> +<p>(TBD: what is supported where?)</p> +<ol> + <li><strong>aria-atomic:</strong> Das Attribut aria-atomic=BOOLEAN wird eingesetzt, um festzulegen, ob der Screenreader die Live-Regionen als Ganzes präsentieren soll, auch wenn sich nur ein Teil dieser Region ändert. Die möglichen Werte sind false oder true, wobei false der Default-Wert ist.</li> + <li><strong>aria-relevant:</strong> Mit aria-relevant=[LIST_OF_CHANGES] wird bestimmt, welche Art von Veränderungen relevant für eine Live-Region sind - die möglichen Werte sind additions/removals/text/all. Der Default-Wert ist "additions text".</li> + <li><strong>aria-labelledby</strong>: Mit aria-labelledby=[IDLIST] wird eine Region mit seinen Labels verknüpft. Die Technik ist dieselbe wie bei aria-controls, nur dass hier Labels statt Steuerungselemente mit der Region verknüpft werden. Mehrere Bezeichner können durch Leerzeichen getrennt angegeben werden.</li> + <li><strong>aria-describedby:</strong> Das Attribut aria-describedby=[IDLIST] wird verwendet, um eine Region mit einer Beschreibung zu verknüpfen. Auch hier ist die Technik dieselbe, wie bei aria-controls, nur dass eine Beschreibung statt einer Steuerung verknüpft wird. Mehrere Bezeichner für Beschreibungen können durch Leerzeichen getrennt angegeben werden.</li> +</ol> +<h3 id="Fortgeschrittenes_Einsatzszenario_Roster"><span class="mw-headline" id="Use_Case:_Roster">Fortgeschrittenes Einsatzszenario: Roster</span></h3> +<p>Auf einer Chat-Webseite soll eine Liste von Benutzern angezeigt werden, die zum aktuellen Zeitpunkt eingeloggt sind. Der Status der Benutzer soll dabei dynamisch (ohne Aktualisierung der Webseite) auf dem neusten Stand gehalten werden.</p> +<pre><ul id="roster" aria-live="polite" aria-relevant="additions removals"> + <!-- Hier wird JavaScript zum Hinzufügen und Entfernen von Benutzern eingesetzt --> +</ul> +</pre> +<p>Zusammenfassende Beschreibung von ARIA-Live-Eigenschaften:</p> +<ul> + <li>aria-live="polite" legt fest, dass der Screenreader warten soll, bis der Benutzer nicht mehr beschäftigt ist, bevor die Aktualisierungen ausgegeben werden. Dieser Wert wird am häufigsten verwendet, da das Setzen des Werts "assertive" dafür sorgt, dass der Benutzer während er noch aktiv ist unterbrochen wird, was für den Benutzer störend sein kann.</li> + <li>Die Eigeschaft aria-atomic wurde nicht gesetzt (Default-Wert: "false"), sodass nur hinzugekommene und den Chat verlassende Benutzer genannt werden und nicht die gesamte Liste vorgelesen wird.</li> + <li>Mit aria-relevant="additions removals" wird sichergestellt, dass sowohl die hinzugekommenen als auch die den Chat verlassenden Benutzer genannt werden.</li> +</ul> +<p>TBD: Realistic use case for aria-atomic="true"</p> diff --git a/files/de/web/barrierefreiheit/aria/aria_techniken/index.html b/files/de/web/barrierefreiheit/aria/aria_techniken/index.html new file mode 100644 index 0000000000..85059df7a2 --- /dev/null +++ b/files/de/web/barrierefreiheit/aria/aria_techniken/index.html @@ -0,0 +1,168 @@ +--- +title: ARIA Techniken +slug: Web/Barrierefreiheit/ARIA/ARIA_Techniken +tags: + - ARIA + - Accessibility +translation_of: Web/Accessibility/ARIA/ARIA_Techniques +--- +<p> </p> + +<h2 id="Rollen"> Rollen</h2> + +<p> </p> + +<h3 id="Widget_Rollen"><a href="/en/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_switch_role">Widget Rollen</a></h3> + +<div class="index"> +<ul> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role" title="die Button Rolle benutzen">Button</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role" title="die Checkbox Rolle benutzen">Checkbox</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role" title="die Dialog Rolle benutzen">Dialog</a></li> + <li>Gridcell</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role" title="die Link Rolle benutzen">Link</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role" title="die Log Rolle benutzen">Log</a></li> + <li>Marquee</li> + <li>Menuitem</li> + <li>Menuitemcheckbox</li> + <li>Menuitemradio</li> + <li>Option</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" title="die Progressbar Rolle benutzen">Progressbar</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="die Radio Rolle benutzen">Radio</a></li> + <li>Scrollbar</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role" title="die Slider Rolle benutzen">Slider</a></li> + <li>Spinbutton</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role" title="die Status Rolle benutzen">status</a></li> + <li>Tab</li> + <li>Tabpanel</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_textbox_role" title="die Textbox Rolle benutzen">textbox</a></li> + <li>Timer</li> + <li>Tooltip</li> + <li>Treeitem</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_switch_role" title="die Switch Rolle benutzen">switch</a></li> +</ul> +</div> + +<h3 id="Zusammengesetzte_Rollen">Zusammengesetzte Rollen</h3> + +<p>Diese Techniken beschreiben jede zusammengesetzte Rolle, sowie deren benötigte und optinale Kind-Rollen.</p> + + +<div class="index"> +<ul> + <li>Combobox</li> + <li>Grid (einschließlich row, gridcell, rowheader, und columnheader Rollen)</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="die Listbox Rolle benutzen">Listbox</a> (einschließlich option Rolle)</li> + <li>Menu</li> + <li>Menubar</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="die Radio Rolle benutzen">Radiogroup (siehe auch radio Rolle)</a></li> + <li>Tablist (einschließlich tab und tabpanel Rollen)</li> + <li>Tree</li> + <li>Treegrid</li> +</ul> +</div> + +<h3 id="Dokumentstruktur_Rollen"><a href="https://www.w3.org/TR/wai-aria/roles#document_structure_roles">Dokumentstruktur Rollen</a></h3> + +<div class="index"> +<ul> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role" title="die Article Rolle benutzen">Article</a></li> + <li>Definition</li> + <li>Directory</li> + <li>Document</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role" title="die Group Rolle benutzen">Group</a></li> + <li>Heading</li> + <li>Img</li> + <li>List</li> + <li>Listitem</li> + <li>Math</li> + <li>Note</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role" title="die Presentation Rolle benutzen">Presentation</a></li> + <li>Region</li> + <li>Separator</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role" title="die Toolbar Rolle benutzen">Toolbar</a></li> +</ul> +</div> + +<h3 id="Grenzrollen"><a href="https://www.w3.org/TR/wai-aria/roles#landmark_roles">Grenzrollen</a></h3> + +<div class="index"> +<ul> + <li>Application</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_banner_role" title="die Banner Rolle benutzen">Banner</a></li> + <li>Complementary</li> + <li>Contentinfo</li> + <li>Form</li> + <li>Main</li> + <li>Navigation</li> + <li>Search</li> +</ul> +</div> + +<h2 id="Zustände_und_Eigenschaften">Zustände und Eigenschaften</h2> + +<p> </p> + +<h3 id="Widget_Eigenschaften">Widget Eigenschaften</h3> + +<div class="index"> +<ul> + <li>aria-autocomplete</li> + <li>aria-checked</li> + <li>aria-current</li> + <li>aria-disabled</li> + <li>aria-expanded</li> + <li>aria-haspopup</li> + <li>aria-hidden</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute" title="das aria-invalid Attribut benutzen">aria-invalid</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" title="das aria-label Attribut benutzen">aria-label</a></li> + <li>aria-level</li> + <li>aria-multiline</li> + <li>aria-multiselectable</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute" title="das aria-orientation Attribut benutzen">aria-orientation</a></li> + <li>aria-pressed</li> + <li>aria-readonly</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute" title="das aria-required Attribut benutzen">aria-required</a></li> + <li>aria-selected</li> + <li>aria-sort</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute" title="das aria-valuemax Attribut benutzen">aria-valuemax</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute" title="das aria-valuemin Attribut benutzen">aria-valuemin</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute" title="das aria-valuenow Attribut benutzen">aria-valuenow</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute" title="das aria-valuetext Attribut benutzen">aria-valuetext</a></li> +</ul> +</div> + +<h3 id="Live_Region_Attribute">Live Region Attribute</h3> + +<div class="index"> +<ul> + <li>aria-live</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute" title="das aria-live Attribut benutzen">aria-relevant</a></li> + <li>aria-atomic</li> + <li>aria-busy</li> +</ul> +</div> + +<h3 id="Drag_drop_Attribute">Drag & drop Attribute</h3> + +<div class="index"> +<ul> + <li>aria-dropeffect</li> + <li>aria-dragged</li> +</ul> +</div> + +<h3 id="Beziehungs_Attribute">Beziehungs Attribute</h3> + +<div class="index"> +<ul> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute" title="das aria-activedescendant Attribut benutzen">aria-activedescendant</a></li> + <li>aria-controls</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="das aria-describedby Attribut benutzen">aria-describedby</a></li> + <li>aria-flowto</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="das aria-labelledby Attribut benutzen">aria-labelledby</a></li> + <li>aria-owns</li> + <li>aria-posinset</li> + <li>aria-setsize</li> +</ul> +</div> diff --git a/files/de/web/barrierefreiheit/aria/index.html b/files/de/web/barrierefreiheit/aria/index.html new file mode 100644 index 0000000000..c282ef8f95 --- /dev/null +++ b/files/de/web/barrierefreiheit/aria/index.html @@ -0,0 +1,137 @@ +--- +title: ARIA +slug: Web/Barrierefreiheit/ARIA +translation_of: Web/Accessibility/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/" title="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/" title="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" title="http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/">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" title="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/">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" title="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm">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/" title="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/" title="http://dev.aol.com/dhtml_style_guide">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/" title="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" title="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" title="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/" title="http://www.paciellogroup.com/blog/category/wai-aria/">Paciello Group</a></p> + + <p><a class="external" href="http://www.accessibleculture.org/tag/wai-aria/" title="http://www.accessibleculture.org/tag/wai-aria/">Accessible Culture</a></p> + + <p><a class="external" href="http://yaccessibilityblog.com/library/category/code/aria" title="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/" title="http://yuilibrary.com/gallery/">YUI</a></dd> + </dl> + + <dl> + <dt><a class="external" href="http://mail.yahoo.com" title="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/" title="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" title="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/" title="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" title="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/" title="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/" title="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" title="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> |