diff options
Diffstat (limited to 'files/de/learn/accessibility/accessibility_troubleshooting/index.html')
| -rw-r--r-- | files/de/learn/accessibility/accessibility_troubleshooting/index.html | 111 |
1 files changed, 111 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><div class="nav"></div></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><audio></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><audio></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><input></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><input></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> |