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