initial commit

2 files changed, 173 insertions, 0 deletions

diff --git a/files/de/learn/accessibility/accessibility_troubleshooting/index.html b/files/de/learn/accessibility/accessibility_troubleshooting/index.html
new file mode 100644
index 0000000000..5a427df730
--- /dev/null
+++ b/files/de/learn/accessibility/accessibility_troubleshooting/index.html
@@ -0,0 +1,111 @@
+---
+title: 'Aufgabe: Probleme bei der Zugänglichkeit beheben'
+slug: Learn/Accessibility/Accessibility_troubleshooting
+tags:
+  - Anfänger
+  - Aufgabe
+  - Barrierefreiheit
+  - CSS
+  - CodingSc
+  - HTML
+  - JavaScript
+  - Lernen
+  - WAI-ARIA
+translation_of: Learn/Accessibility/Accessibility_troubleshooting
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</div>
+
+<p class="summary">In der Aufgabe dieses Moduls müssen Sie Probleme hinsichtlich Barrierefreiheit und Zugänglichkeit einer Beispielwebsite erkennen und beheben.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Voraussetzung:</th>
+   <td>Basic computer literacy, a basic understanding of HTML, CSS, and JavaScript, an understanding of the <a href="/en-US/docs/Learn/Accessibility">previous articles in the course</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Lernziel:</th>
+   <td>To test basic knowledge of accessibility fundamentals.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ausgangspunkt">Ausgangspunkt</h2>
+
+<p>Um mit der Aufgabe zu beginnen, laden Sie den <a href="https://github.com/mdn/learning-area/blob/master/accessibility/assessment-start/assessment-files.zip?raw=true">ZIP-Ordner mit den Beispieldateien</a> herunter. Extrahieren Sie die Inhalte in ein neues Verzeichnis auf Ihrem Computer.</p>
+
+<p>Die fertige Beispielseite sollte so aussehen:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14555/assessment-site-finished.png" style="border-style: solid; border-width: 1px; display: block; height: 457px; margin: 0px auto; width: 800px;"></p>
+
+<p>Sie werden einige Unterschiede / Probleme bei der Anzeige des Ausgangszustands der Aufgabe bemerken - dies ist hauptsächlich auf die Unterschiede im Markup zurückzuführen, die wiederum einige Stilprobleme verursachen, da das CSS nicht ordnungsgemäß angewendet wird. Keine Sorge - Sie werden diese Probleme in den nächsten Abschnitten beheben!</p>
+
+<h2 id="Projektbeschreibung">Projektbeschreibung</h2>
+
+<p>Für dieses Projekt wird Ihnen eine fiktive Naturseite präsentiert, die einen "sachlichen" Artikel über Bären enthält. Gegenwärtig gibt es eine Reihe von Problemen mit der Barrierefreiheit. Ihre Aufgabe ist es, die vorhandene Website zu erkunden und sie nach besten Kräften zu beheben, indem Sie die unten stehenden Fragen beantworten.</p>
+
+<h3 id="Farben">Farben</h3>
+
+<p>Aufgrund des momentanen Farbschemas ist der Text der Webseite schwierig zu lesen. Können Sie den momentanen Farbkontrast (Text/Hintergrund) testen und die Farben so ändern, um das Problem mit dem Farbkontrast zu lösen?</p>
+
+<h3 id="Semantisches_HTML">Semantisches HTML</h3>
+
+<ol>
+ <li>Der Inhalt der Website ist momentan nicht besonders zugänglich. Probieren Sie aus was passiert, wenn Sie durch die Website navigieren.</li>
+ <li>Können Sie den Text des Artikels so ändern, um einfacher mit einem Screenreader navigieren zu können?</li>
+ <li>Das Navigationsmenü der Website (eingebunden in <code>&lt;div class="nav"&gt;&lt;/div&gt;</code>) könnte zugänglicher werden, indem man es in das geignete semantische HTML5-Element einbettet.</li>
+</ol>
+
+<div class="note">
+<p><strong>Hinweis: </strong><strong>Sie müssen die CSS-Regelselektoren aktualisieren, die die Tags so formatieren, dass sie den semantischen Überschriften entsprechen. Sobald Sie Absatzelemente hinzufügen, werden Sie feststellen, dass das Styling besser aussieht.</strong></p>
+</div>
+
+<h3 id="Die_Bilder">Die Bilder</h3>
+
+<p>Die Bilder sind momenten nicht zugänglich für Benutzer von Screenreadern. Können Sie dies beheben?</p>
+
+<h3 id="Der_Musikplayer">Der Musikplayer</h3>
+
+<ol>
+ <li><font>The <code>&lt;audio&gt;</code> player isn't accessible to hearing impaired (deaf) people — can you add some kind of accessible alternative for these users?</font></li>
+ <li><font>The <code>&lt;audio&gt;</code> player isn't accessible to those using older browsers that don't support HTML5 audio. How can you allow them to still access the audio?</font></li>
+</ol>
+
+<h3 id="Die_Formulare">Die Formulare</h3>
+
+<ol>
+ <li><font>The <code>&lt;input&gt;</code> element in the search form at the top could do with a label, but we don't want to add a visible text label that would potentially spoil the design and isn't really needed by sighted users. How can you add a label that is only accessible to screenreaders?</font></li>
+ <li><font>The two <code>&lt;input&gt;</code> elements in the comment form have visible text labels, but they are not unambiguously associated with their labels — how do you achieve this? Note that you'll need to update some of the CSS rule as well.</font></li>
+</ol>
+
+<h3 id="Schaltfläche_zum_Ein-_und_Ausblenden_von_Kommentaren">Schaltfläche zum Ein- und Ausblenden von Kommentaren</h3>
+
+<p>Die Schaltfläche für das Ein- und Ausblenden der Kommentare ist momentan nicht zugänglich für die Benutzung mit der Tastatur. Können Sie die Schaltfläche so ändern, damit sie für die Benutzung mit der Tastatur zugänglich wird - hinsichtlich Fokussieren mit der Tabulator-Taste und Aktivieren mit der Return-Taste. </p>
+
+<h3 id="Die_Tabelle">Die Tabelle</h3>
+
+<p>Im momentanen Zustand ist die Datentabelle nicht sehr zugänglich. Es ist schwer für den Benutzer eines Screenreaders Datenreihen und Datenspalten miteinander zu verknüpen. Außerdem besitzt die Tabelle keine Zusammenfassung. Können Sie das HTML so erweitern, damit das Problem gelöst werden kann?</p>
+
+<h3 id="Weitere_Überlegungen">Weitere Überlegungen</h3>
+
+<p>Fallen Ihnen noch 2 weitere Verbesserungen für diese Seite ein um die Zugänglichkeit der Website zu verbessern?</p>
+
+<h2 id="Einschätzung">Einschätzung</h2>
+
+<p>Falls Sie diesen Test im Rahmen eines organisierten Kurses absolvieren, sollten Sie Ihre Arbeit Ihrem/r Mentor*in/Lehrkraft zur Bewertung überreichen können.<font> </font>Falls Sie selbstständig lernen, können Sie die Bewertungskriterien sehr einfach erhalten, indem Sie im<font> <a href="https://discourse.mozilla.org/t/accessibility-troubleshooting-assessment/24691">Diskussionsthread für diese Übung</a>, n</font>achfragen oder im <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC Channel auf <a href="https://wiki.mozilla.org/IRC" rel="noopener">Mozilla IRC</a>. Versuchen Sie es zunächst selbst -- mit Mogeleien ist nichts gewonnen!</p>
+
+<p><font>{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</font></p>
+
+<h2 id="In_diesem_Modul">In diesem Modul</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li>
+</ul>
diff --git a/files/de/learn/accessibility/index.html b/files/de/learn/accessibility/index.html
new file mode 100644
index 0000000000..ee1a19552e
--- /dev/null
+++ b/files/de/learn/accessibility/index.html
@@ -0,0 +1,62 @@
+---
+title: Barrierefreiheit
+slug: Learn/Accessibility
+tags:
+  - ARIA
+  - Anfänger
+  - Artikel
+  - Barrierefreiheit
+  - CSS
+  - Code Scripting
+  - HTML
+  - JavaScript
+  - Landing
+  - Lernen
+  - Modul
+translation_of: Learn/Accessibility
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Das Erlernen von HTML, CSS und JavaScript ist nützlich, wenn Sie ein Webentwickler werden wollen, aber Ihr Wissen muss weiter gehen als nur mit den Technologien - Sie müssen sie verantwortungsvoll nutzen, damit Sie das Publikum für ihre Websites maximieren und niemand daran hindern, sie zu benutzen. Um dies zu erreichen, müssen Sie sich an allgemeine "Best Practices halten (die in allen <a href="https://developer.mozilla.org/de/Learn/CSS">HTML</a>-, <a href="https://developer.mozilla.org/de/docs/Learn/CSS">CSS</a> und <a href="https://developer.mozilla.org/de/Learn/JavaScript">JavaScript</a>-Themen demonstriert werden), <a href="https://developer.mozilla.org/de/Learn/Tools_and_testing/Cross_browser_testing">Cross-Browser-Tests</a> durchführen und die Barrierefreiheit von anfang an berücksichtigen. In diesem Modul werden wir uns ausführlich mit Letzterem beschäftigen.</p>
+
+<h2 id="Voraussetzungen">Voraussetzungen</h2>
+
+<p>Um das Meiste aus diesem Modul herauszuholen, wäre es eine gute Idee, entweder mindestens die ersten beiden Module der <a href="https://developer.mozilla.org/de/Learn/HTML">HTML</a>-, <a href="https://developer.mozilla.org/de/docs/Learn/CSS">CSS</a>- und <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript</a>-Themen durchzuarbeiten, oder vielleicht sogar noch besser, die relevanten Teile des Barrierefreiheit Moduls durchzuarbeiten, während Sie die entsprechenden Technologiethemen durcharbeiten.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Wenn Sie auf einem Computer/Tablet/anderem Gerät arbeiten, auf dem sie keine eigenen Dateien erstellen können, können Sie die meisten Codebeispiele in einem Online-Codeprogramm wie <a href="http://jsbin.com/">JSBin</a> oder <a href="https://thimble.mozilla.org/de/">Thimble</a> ausprobieren.</p>
+</div>
+
+<h2 id="Leitfäden">Leitfäden</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/de/Learn/Accessibility/What_is_accessibility">Was ist Barrierefreiheit? </a></dt>
+ <dd>Dieser Artikel beginnt das Modul mit einem Blick auf was Barrierefreiheit eigentlich ist - das schließt ein, welche Personengruppen wir berücksichtigen müssen und warum, welche Werkzeuge verschiedene Leute verwenden, um mit dem Web zu interagieren, und wie wir Barrierefreitheit zu einem Teil unseres Web-Entwicklungs-Workflows machen können</dd>
+ <dt><a href="https://developer.mozilla.org/de/Learn/Accessibility/HTML" style="font-weight: 700;">HTML: Eine gute Basis für Erreichbarkeit</a></dt>
+ <dd>Ein großer Teil der Webinhalte kann zugänglich gemacht werden, indem sichergestellt wird, dass immer die richtigen HTML-Elemente für den richtigen Zweck verwendet werden. Dieser Artikel behandelt im Detail, wie HTML verwendet werden kann, um eine maximale Barrierefreiheit zu gewährleisten.  </dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">Best Practices für CSS and JavaScript Barrierefreiheit</a></dt>
+ <dd>CSS und JavaScript haben bei richtiger Anwendung auch das Potenzial, barrierefreie Web-Erlebnisse zu ermöglichen, können aber bei Missbrauch die Barrierefreiheit erheblich einschränken. Dieser Artikel beschreibt einige CSS- und JavaScript-Best-Practices, die berücksichtigt werden sollten, um sicherzustellen, dass auch komplexe Inhalte so barrierefrei wie möglich sind.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA Grundlagen</a></dt>
+ <dd>
+ <p>In Anlehnung an den vorangegangenen Artikel kann es manchmal schwierig sein, komplexe UI-Controls zu erstellen, die nicht semantisches HTML und dynamische, mit JavaScript aktualisierte Inhalte beinhalten. WAI-ARIA ist eine Technologie, die bei solchen Problemen helfen kann, indem sie weitere Semantiken hinzufügt, die Browser und unterstützende Technologien erkennen und verwenden können, um den Benutzern mitzuteilen, was vor sich geht. Hier zeigen wir, wie man es grundlegend einsetzt, um die Barrierefreiheit zu verbessern.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/Multimedia">Barrierefreies Multimedia</a></dt>
+ <dd>Eine weitere Kategorie von Inhalten, die Barrierefreiheitsprobleme verursachen können, sind Multimedia - Video-, Audio- und Bildinhalte. Diese müssen mit geeigneten textlichen Alternativen ausgestattet werden, damit sie von unterstützenden Technologien und ihren Nutzern verstanden werden können. Dieser Artikel zeigt wie dies richtig umgesetzt wird.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile Barrierefreiheit</a></dt>
+ <dd>Da der Webzugriff auf mobilen Geräten heute so beliebt ist und Plattformen wie iOS und Android über vollwertige Barrierefreiheitswerkzeuge verfügen, ist es wichtig, die Barrierefreiheit Ihrer Webinhalte auf diesen Plattformen zu berücksichtigen. Dieser Artikel befasst sich mit mobilfunkspezifischen Überlegungen zur Barrierefreiheit.</dd>
+</dl>
+
+<h2 id="Aufgaben">Aufgaben</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Troubleshooting für Barrierefreiheit</a></dt>
+ <dd>In den Aufgaben für dieses Modul geben wir Ihnen eine einfache Seite mit einer Reihe von Problemen in der Barrierefreiheit, die Sie diagnostizieren und beheben müssen.</dd>
+</dl>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="https://egghead.io/courses/start-building-accessible-web-applications-today">Start Building Accessible Web Applications Today</a> — an excellent series of video tutorials by Marcy Sutton.</li>
+ <li><a href="https://dequeuniversity.com/resources/">Deque University resources</a> — includes code examples, screen reader references, and other useful resources.</li>
+ <li><a href="http://webaim.org/resources/">WebAIM resources</a> — includes guides, checklists, tools, and more.</li>
+</ul>