Erstellen zug?nglicher Diashows: Eine umfassende Anleitung

Diashows sind auf organisatorischen Websites weit verbreitet, aber aufgrund der übersehenen Anforderungen an die Barrierefreiheit h?ufig nicht zug?nglich. Beliebte Webentwicklungs -Frameworks wie Bootstrap und Foundation unterstützen nicht von Natur aus zug?ngliche Diashows und erfordern erhebliche ?nderungen. Dieser Artikel beschreibt wichtige Prinzipien für die Zug?nglichkeit zum Erstellen integrativer Diashows. Ein nachfolgender Artikel enth?lt praktische Code -Beispiele.

übliche Diashow -Typen (Abbildungen 1 und 2) fehlen h?ufig wichtige Merkmale: Pauzierfunktionen und Tastaturzugriff. Viele Designs beibehalten den Tastaturfokus beim Navigieren von Folien nicht.

Fünf Kernprinzipien gew?hrleisten zug?ngliche Diashows:

1. Benutzersteuerung über Bewegung: WCAG 2.2.2 Mandatiert einen Mechanismus zum Pause, Stoppen oder Ausblenden automatisch, die über fünf Sekunden dauern. Eine einfache Pause/Stop -Link ist effektiv. Vermeiden Sie es, nach M?glichkeit animierte überg?nge abzulenken.

2. sichtbare und zug?ngliche Steuerelemente: Steuerelemente (Stopp, Start, Navigation) muss sein:

   • Eindeutig sichtbar: gro? genug, mit ausreichendem Farbkontrast.
   • Zugriff über Tastatur, Maus und Berührung: Schaltfl?chen oder Links sind ideal; Vermeiden Sie es, sich ausschlie?lich auf tabindex zu verlassen
   • Clear Focus/Hover -Indikation: unterschiedliche visuelle Ver?nderungen im Fokus, Erfüllung der Kontrastanforderungen. Form?nderungen sind für Farb?nderungen allein vorzuziehen.

   Beispiele für gut gestaltete Steuerelemente finden Sie an Stellen wie Barrierefreiheit (Abbildung 3 und 4) und der Griffith University (Abbildung 6), die eindeutige Pause-Schaltfl?chen und Navigationssteuerungen sowohl für Desktop als auch für Mobilger?te zeigen. Die Monash University bietet ein Beispiel für eine mobilfreundliche Diashow ohne automatische Bewegung (Abbildung 5).

3. logische Fokusreihenfolge: Registerkarte "Sollte die HTML -Struktur spiegeln. Kontrollen (insbesondere Pause) sollten den Inhalten vorausgehen. Inhalts?nderungen sollten nicht vor dem aktuellen Fokuselement auftreten.

4. gültigen Code und Stile: Diashows sollte mit deaktivierten Stylesheets funktionieren, obwohl die Pr?sentation unterschiedlich sein kann. Vermeiden Sie unerwartete Verschiebungen oder überlappungen für Inhalte, wenn Stylesheets deaktiviert sind. Der Text sollte mit den Anpassungen der Browser -Textgr??en skaliert werden. Mobile Versionen müssen Pinch-to-Zoom unterstützen.

5. Aussagebare Alternativen: Geben Sie Benutzer, die auf die Diashow nicht zugreifen k?nnen, eine textbasierte Alternative an. Dies kann einen Abschnitt "Nur Screen-Reader" enthalten, der den Folieninhalt und die Links wiederholt, die idealerweise dort platziert werden, wo die Diashow angezeigt wird. Stellen Sie sicher, dass diese Alternative der Diashow in Bezug auf die bereitgestellten Informationen entspricht. Bilder erfordern geeignete alt Attribute.

Schlussfolgerung: Erstellen von wirklich zug?nglichen Diashows erfordert eine sorgf?ltige Berücksichtigung dieser Prinzipien. Der n?chste Artikel bietet praktische Code -Implementierungen, um diese Ziele zu erreichen.

h?ufig gestellte Fragen (FAQs) zu zug?nglichen Diashows (Dieser Abschnitt bleibt gegenüber der ursprünglichen Eingabe weitgehend unver?ndert, da es wertvolle Erg?nzungsinformationen liefert.)

Was ist eine zug?ngliche Diashow? Wie mache ich meine Diashow zug?nglich? Was ist Alt -Text und warum ist es wichtig? Wie füge ich meiner Diashow Bildunterschriften hinzu? Warum ist die Tastaturnavigation wichtig? Wie kann ich die Sprache meiner Diashow klar und einfach machen? Was ist ein Transkript und warum ist es wichtig? Wie erstelle ich ein Transkript für meine Diashow? Kann ich automatisierte Tools verwenden, um meine Diashow zug?nglich zu machen? Was sind die Vorteile, wenn meine Diashow zug?nglich gemacht wird?

Das obige ist der detaillierte Inhalt vonDie unertr?gliche Unzug?nglichkeit von Diashows. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!