BITV/9.1.1 - Textalternativen: Unterschied zwischen den Versionen

VisuellWikitext

Aktuelle Version vom 26. April 2024, 09:59 Uhr

Einleitung

Arten von Grafiken

Bedienelement (Web-Entwickler)
Informative Grafik (Inhaltsverantwortliche)
Layoutgrafik (Web-Entwickler)
Symbol (Inhaltsverantwortliche)

Bedienelement

Grafik-Bedienelemente

Verlinkte, informative Grafik
Benötigt Alternativtext
Soll das Ziel (Link) bzw. die Aktion (Schaltfläche) bezeichnen.

Informative Grafik

Ist im Wiki fast immer zum Originalbild verlinkt (im Gegensatz zu einer Webseite).
Benötigt Alternativtext
Kann auch eine Text-Alternative benötigen (z.B. bei einem Organigramm).

Hinweis: Derzeitige BlueSpice MediaWiki 1.39 Version benutzt keine klare Zuordnung von Bild und Bildunterschrift (wäre für Bildschirmlesegeräte besser, Beispiel). Dies geht erst ab neueren Versionen).

Beispiel

Teamarbeit zahlt sich aus

Galerie

Details-Menü
Menü "alle Aktionen"

Layoutgrafik

Nicht von Inhaltsverantwortlichen erstellt, kann aber in Vorlagen vorkommen. Bei der Erstellung neuer Vorlagen müssen Bilder immer überprüft werden (gibt es Layoutgrafiken vs. Informationsgrafiken?)
Leerer Alternativtext 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.

Symbol

Als Grafik eingebunden

Benötigt Alternativtext

Symbol-Droplet

Immer mit Text zusammen benutzen, da Droplet-Symbole nicht vorgelesen werden:

Richtig:

Zeitplan

Falsch:

Bildschirmlesegerät

Media-Viewer kann im Benutzermenü deaktiviert werden.

Feedback zur Dokumentation ist im Community-Forum möglich.

@@ Zeile 3: / Zeile 3: @@
 === Arten von Grafiken ===
-* Bedienelement
+* Bedienelement (Web-Entwickler)
-* Informative Grafik
+* Informative Grafik  (Inhaltsverantwortliche)
-* Layoutgrafik
+* Layoutgrafik (Web-Entwickler)
-* Symbol
+* Symbol  (Inhaltsverantwortliche)
-=== Beschreibungen ===
-* <code>alt</code> = kurzer Alternativtext
-* <code>longdesc</code> = Lange Beschreibung
-* <code>title</code> = Titel / Tooltip
 ==Bedienelement==
-{{WCAGBox|9.1.1.1a Alternativtexte für Bedienelemente}}[[Datei:BITV-content-UI graphics.png|alternativtext=3 Menü-Icons aus der BlueSpice Oberfläche: Zusatzmenü, Globale Aktionen und Benutzermenü|mini|150x150px|Grafik-Bedienelemente|ohne|verweis=https://training-margit.bluespice.cloud/wiki/Datei:BITV-content-UI_graphics.png]]Absatz einfügen
+[[Datei:BITV-content-UI graphics.png|alternativtext=3 Menü-Icons aus der BlueSpice Oberfläche: Zusatzmenü, Globale Aktionen, Benutzermenü und Seitenaktionen|mini|150x150px|Grafik-Bedienelemente|ohne]]
 *Verlinkte, informative Grafik
 *Benötigt Alternativtext
-Hinweis: Derzeitige BlueSpice MediaWiki 1.39 Version benutzt keine klare Zuordnung von Bild und Bildunterschrift. (Erst ab neueren Versionen).
+*Soll das Ziel (Link) bzw. die Aktion (Schaltfläche) bezeichnen.
 == Informative Grafik ==
+*Ist im Wiki fast immer zum Originalbild verlinkt (im Gegensatz zu einer Webseite).
 *Benötigt Alternativtext
-*Kann auch Text-Alternative benötigen
+*Kann auch eine Text-Alternative benötigen (z.B. bei einem Organigramm).
+Hinweis: Derzeitige BlueSpice MediaWiki 1.39 Version benutzt keine klare Zuordnung von Bild und Bildunterschrift (wäre für Bildschirmlesegeräte besser, [https://de.wikipedia.org/wiki/Wikipedia:Barrierefreiheit Beispiel]). Dies geht erst ab neueren Versionen).
-=== Sonderinhalte ===
+=== Beispiel ===
-Diagramme (Drawio, BPMN) sind nicht barrierefrei und benötigen eine Textalternative (z.B. Tabellenformat)
+[[Datei:19220.jpg|alternativtext=Infografik eines Geschäftsteams, die wie Zahnräder zusammenarbeiten.|ohne|mini|Teamarbeit zahlt sich aus]]
 === Galerie ===
-Screenshots zur Seitenleiste:<gallery widths="300" heights="300">
+<gallery widths="300" heights="300">
-Datei:stsv alle aktionen.png|alt=Menü mit ausgewähltem Menüpunkt "alle Aktionen"|Details-Menü
+Datei:stsv alle aktionen.png|alt=Menü mit 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>
 == Layoutgrafik ==
-*Nicht von Inhaltsverantwortlichen erstellt
+*Nicht von Inhaltsverantwortlichen erstellt, kann aber in Vorlagen vorkommen. Bei der Erstellung neuer Vorlagen müssen Bilder immer überprüft werden (gibt es Layoutgrafiken vs. Informationsgrafiken?)
 *Leerer Alternativtext macht bei Inhaltsgrafiken keinen Sinn und sollte nicht umgesetzt werden.
 **Vorschaubild: Wiki fügt automatisch den Bildnamen ein.
@@ Zeile 45: / Zeile 42: @@
 [[Datei:support.png|alternativtext=Support-Hotline Icon|40x40px]]
-==== Symbol-Droplet ====
+=== Symbol-Droplet ===
-Immer mit Text zusammen benutzen:
+Immer mit Text zusammen benutzen, da Droplet-Symbole nicht vorgelesen werden:<br>
-Richtig:
+'''Richtig:'''
+{{Icon|bi bi-clock|}}Zeitplan
-<br>[[Zeitplan 2023|Zeitplan]]
-{{Icon|bi bi-clock|}}Zeitplan
-Falsch:<br>
+'''Falsch:'''<br>
 {{Icon|bi bi-clock|}}
-[[Zeitplan 2023|{{Icon|bi bi-clock|}}]]
+== Bildschirmlesegerät ==
+* Media-Viewer kann im Benutzermenü deaktiviert werden.