K (Benutzername entfernt) (Logbucheinzelheiten entfernt) |
Keine Bearbeitungszusammenfassung Markierung: Quelltext-Bearbeitung 2017 |
||
| (13 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
Die Erstellung von Alternativtexten (Alt-Text) ist ein zentraler Bestandteil barrierefreier Inhalte und spielt eine wichtige Rolle beim Erfüllen der Barrierefreiheits-Richtlinien. | |||
== Arten von Grafiken == | |||
Nicht alle Arten von Grafiken werden von Wiki-Autoren erstellt. Bedienelemente und Layoutgrafiken betreffen eher die Entwickler von Anwendungen. | |||
* Bedienelement: von Web-Entwicklern erstellt | |||
* Layoutgrafik: von Web-Entwicklern erstellt | |||
* Informative Grafik / Inhaltsgrafik: von Wiki-Autoren erstellt | |||
* Symbol: von Wiki-Autoren erstellt | |||
== Dateibeschreibungsseite == | |||
In BlueSpice werden Grafiken in das Wiki hochgeladen, ohne dass Benutzer hier bereits den Alt-Text für das Bild angeben können. Dies hat verschiedene Gründe: | |||
* MediaWiki trennt Dateiverwaltung (Upload, Metadaten) von Inhaltsdarstellung (z. B. Alt-Text beim Einfügen in Artikel). Dies kann man vergleichen mit Bildern die im Windows Explorer verwaltet werden und die dann bei der Verwendung in einem Textverarbeitungsprogramm mit dem Alt-Text versehen werden. | |||
* | |||
Daher wird der Alt-Text von den Inhaltserstellern direkt bei Verwendung des Bildes auf einer Wiki-Seite hinzugefügt. Dies bedeutet, dass bei mehrmaliger Verwendung einer Datei auch mehrmals manuell ein Alt-Text angegeben wird. | |||
== Informative Grafik / Inhaltsgrafiken == | |||
Folgende Merkmale sind zu beachten, wenn Bilder auf einer Wikiseite eingebunden werden: | |||
*Die Datei ist im Wiki fast immer zur Dateibeschreibungsseite verlinkt (im Gegensatz zu einer Webseite). | |||
*Jedes informative Bild benötigt Alternativtext | |||
*Die klassischen Vorschaubilder erlauben es, eine Bildunterschrift anzuzeigen, die sich inhaltlich häufig mit dem Alt-Text überschneidet. Es ist daher schwierig für Inhaltsersteller zu beurteilen, was in den Alternativtext (für Screenreader-Benutzer) und was in die Bildunterschrift (für alle Benutzer einschließlich Screenreader-Benutzer gehört). Der Alternativtext sollte eine knappe Beschreibung des wichtigsten Aspekts des Bildes sein (stellen Sie sich die Seite vor, wenn die Bilder deaktiviert sind und an deren Stelle der Text angezeigt wird. Die Bildunterschrift, das heißt die Beschreibung, erläutert das Bild zusätzlich für alle, die das Bild ansehen. | |||
{{Textbox|boxtype=important|header=Wichtig für Screenreader:|text=Screenreader lesen sowohl die Beschriftung als auch den Alt-Text vor. Diese sollten sich daher niemals identisch sein, um eine unnötige Wiederholung beim Vorlesen zu vermeiden.|icon=yes}} | |||
*Manche Bilder können unter Umständen auch eine längere Textalternative benötigen (z.B. ein Organigramm). In diesem Fall ist der Alt-Text nicht ausreichend. Der Inhalt der Grafik muss daher im Fließtext noch einmal beschrieben sein. | |||
*Leerer Alt-Text macht bei Inhaltsgrafiken keinen Sinn und sollte nicht umgesetzt werden. | |||
**Vorschaubild: Wiki fügt automatisch den Bildnamen ein. | |||
**Einfaches Bild: Wiki fügt Alt-Tag ohne Wert ein. | |||
=== | === Beispiele === | ||
[[Datei:19220.jpg|alternativtext=Infografik | |||
==== Einfaches Bild ==== | |||
[[Datei:19220.jpg|alternativtext=Infografik mit fünf Personen, die Zahnräder installieren.|300x300px]] | |||
==== Vorschaubild mit Beschriftung ==== | |||
[[Datei:19220.jpg|alternativtext=Infografik mit fünf Personen, die Zahnräder installieren|ohne|mini|Teamarbeit zahlt sich aus]] | |||
Die Beschriftung und der Alternativtext könnten hier im Dialog so angegeben werden: | |||
Beschriftung: Teamarbeit zahlt sich aus | |||
Alternativtext: Infografik mit fünf Personen, die Zahnräder installieren | |||
[[Datei:BITV 9.1.1 - Textalternativen beispiel.1.1 - Textalternativen 1751467315935.png|alt=Screenshot des Dialogs mit der Beschriftung und des Alternativtexts des vorhergehenden Bildes.|ohne|mini|500x500px|Beschriftung und Alternativtext]] | |||
=== Galerie === | === Galerie === | ||
Auch bei jedem Galerie-Bild werden die Beschriftung und der Alternativtext separat angegeben. | |||
Hier ist ein Galerie-Beispiel | |||
<gallery widths="300" heights="300"> | <gallery widths="300" heights="300"> | ||
Datei:stsv alle aktionen.png|alt= | Datei:stsv alle aktionen.png|alt=Ausgewähltem Menüpunkt 'alle Aktionen'|Details-Menü | ||
Datei:stsv Quelltext bearbeiten.png|alt=Ausgewählter Menüpunkt 'Quelltext bearbeiten' im Alle-Aktionen-Menü|Menü "alle Aktionen" | Datei:stsv Quelltext bearbeiten.png|alt=Ausgewählter Menüpunkt 'Quelltext bearbeiten' im Alle-Aktionen-Menü|Menü "alle Aktionen" | ||
</gallery> | </gallery>Beschriftung: Details-Menü | ||
Alternativtext: Menü mit ausgewähltem Menüpunkt 'alle Aktionen' | |||
[[Datei:BITV 9.1.1 - Textalternativen Galerie.1.1 - Textalternativen 1751467656393.png|alternativtext=Beschreibung und Alternativtext von Galeriebild 1 im Bearbeitungsmodus.|ohne|mini|550x550px|Bearbeitung des ersten Galerie-Bildes]] | |||
{{Textbox|boxtype=note|header=Hinweis:|text=Die Einstellung "Die Bildunterschrift als Alternativtext verwenden" is nicht zielführend, da vom Bildschirmlesegerät zweimal der gleiche Text vorgelesen wird. Diese Einstellung sollte immer deaktiviert sein.|icon=yes}} | |||
== Layoutgrafik == | == Layoutgrafik == | ||
*Nicht von Inhaltsverantwortlichen erstellt, | Merkmale von Layoutgrafiken: | ||
*Nicht von Inhaltsverantwortlichen erstellt, können aber in Vorlagen vorkommen. Bei der Erstellung neuer Vorlagen müssen Bilder immer überprüft werden (gibt es Layoutgrafiken vs. Informationsgrafiken?) | |||
== Symbol == | == Symbol == | ||
Symbole können sowohl als Bilder ins Wiki hochgeladen werden als auch als Content Droplet "Symbol" eingebunden werden. | |||
=== Als Grafik eingebunden === | === Als Grafik eingebunden (hochgeladen) === | ||
Wie alle Inhaltsgrafiken benötigt das Symbol Alt-Text, wenn es als Vordergrundbild (d.h. hochgeladenes Bild) verwendet wird. | |||
[[Datei:support.png|alt=Support-Hotline|40x40px]] | |||
[[Datei:BITV 9.1.1 - Textalternativen symbol.1.1 - Textalternativen 1751469064738.png|alternativtext=Bearbeitungsmodus eines Symbols|ohne|mini|600x600px|Symbolbild mit Alternativtext]] | |||
=== Content Droplet "Symbol" === | |||
Wird ein Symbol über das Content Droplet "Symbol" erzeugt, muss es Immer mit Text zusammen benutzt werden, da solche Symbole von Screenreadern nicht vorgelesen werden:<br> | |||
'''Richtig:''' | |||
{{Icon|bi bi-clock|}} Zeitplan | |||
'''Falsch:'''<br>{{Icon|bi bi-clock|}} | |||
Aktuelle Version vom 15. September 2026, 08:46 Uhr
Die Erstellung von Alternativtexten (Alt-Text) ist ein zentraler Bestandteil barrierefreier Inhalte und spielt eine wichtige Rolle beim Erfüllen der Barrierefreiheits-Richtlinien.
Arten von Grafiken[Bearbeiten | Quelltext bearbeiten]
Nicht alle Arten von Grafiken werden von Wiki-Autoren erstellt. Bedienelemente und Layoutgrafiken betreffen eher die Entwickler von Anwendungen.
- Bedienelement: von Web-Entwicklern erstellt
- Layoutgrafik: von Web-Entwicklern erstellt
- Informative Grafik / Inhaltsgrafik: von Wiki-Autoren erstellt
- Symbol: von Wiki-Autoren erstellt
Dateibeschreibungsseite[Bearbeiten | Quelltext bearbeiten]
In BlueSpice werden Grafiken in das Wiki hochgeladen, ohne dass Benutzer hier bereits den Alt-Text für das Bild angeben können. Dies hat verschiedene Gründe:
- MediaWiki trennt Dateiverwaltung (Upload, Metadaten) von Inhaltsdarstellung (z. B. Alt-Text beim Einfügen in Artikel). Dies kann man vergleichen mit Bildern die im Windows Explorer verwaltet werden und die dann bei der Verwendung in einem Textverarbeitungsprogramm mit dem Alt-Text versehen werden.
Daher wird der Alt-Text von den Inhaltserstellern direkt bei Verwendung des Bildes auf einer Wiki-Seite hinzugefügt. Dies bedeutet, dass bei mehrmaliger Verwendung einer Datei auch mehrmals manuell ein Alt-Text angegeben wird.
Informative Grafik / Inhaltsgrafiken[Bearbeiten | Quelltext bearbeiten]
Folgende Merkmale sind zu beachten, wenn Bilder auf einer Wikiseite eingebunden werden:
- Die Datei ist im Wiki fast immer zur Dateibeschreibungsseite verlinkt (im Gegensatz zu einer Webseite).
- Jedes informative Bild benötigt Alternativtext
- Die klassischen Vorschaubilder erlauben es, eine Bildunterschrift anzuzeigen, die sich inhaltlich häufig mit dem Alt-Text überschneidet. Es ist daher schwierig für Inhaltsersteller zu beurteilen, was in den Alternativtext (für Screenreader-Benutzer) und was in die Bildunterschrift (für alle Benutzer einschließlich Screenreader-Benutzer gehört). Der Alternativtext sollte eine knappe Beschreibung des wichtigsten Aspekts des Bildes sein (stellen Sie sich die Seite vor, wenn die Bilder deaktiviert sind und an deren Stelle der Text angezeigt wird. Die Bildunterschrift, das heißt die Beschreibung, erläutert das Bild zusätzlich für alle, die das Bild ansehen.
- Manche Bilder können unter Umständen auch eine längere Textalternative benötigen (z.B. ein Organigramm). In diesem Fall ist der Alt-Text nicht ausreichend. Der Inhalt der Grafik muss daher im Fließtext noch einmal beschrieben sein.
- Leerer Alt-Text macht bei Inhaltsgrafiken keinen Sinn und sollte nicht umgesetzt werden.
- Vorschaubild: Wiki fügt automatisch den Bildnamen ein.
- Einfaches Bild: Wiki fügt Alt-Tag ohne Wert ein.
Beispiele[Bearbeiten | Quelltext bearbeiten]
Einfaches Bild[Bearbeiten | Quelltext bearbeiten]
Vorschaubild mit Beschriftung[Bearbeiten | Quelltext bearbeiten]

Die Beschriftung und der Alternativtext könnten hier im Dialog so angegeben werden:
Beschriftung: Teamarbeit zahlt sich aus
Alternativtext: Infografik mit fünf Personen, die Zahnräder installieren

Galerie[Bearbeiten | Quelltext bearbeiten]
Auch bei jedem Galerie-Bild werden die Beschriftung und der Alternativtext separat angegeben.
Hier ist ein Galerie-Beispiel
-
Details-Menü
-
Menü "alle Aktionen"
Beschriftung: Details-Menü
Alternativtext: Menü mit ausgewähltem Menüpunkt 'alle Aktionen'

Layoutgrafik[Bearbeiten | Quelltext bearbeiten]
Merkmale von Layoutgrafiken:
- Nicht von Inhaltsverantwortlichen erstellt, können aber in Vorlagen vorkommen. Bei der Erstellung neuer Vorlagen müssen Bilder immer überprüft werden (gibt es Layoutgrafiken vs. Informationsgrafiken?)
Symbol[Bearbeiten | Quelltext bearbeiten]
Symbole können sowohl als Bilder ins Wiki hochgeladen werden als auch als Content Droplet "Symbol" eingebunden werden.
Als Grafik eingebunden (hochgeladen)[Bearbeiten | Quelltext bearbeiten]
Wie alle Inhaltsgrafiken benötigt das Symbol Alt-Text, wenn es als Vordergrundbild (d.h. hochgeladenes Bild) verwendet wird.

Content Droplet "Symbol"[Bearbeiten | Quelltext bearbeiten]
Wird ein Symbol über das Content Droplet "Symbol" erzeugt, muss es Immer mit Text zusammen benutzt werden, da solche Symbole von Screenreadern nicht vorgelesen werden:
Richtig:
Zeitplan
Falsch:
