Zuletzt bearbeitet vor einem Monat
von Margit Link-Rodrigue

Testseite WCAG 2: Unterschied zwischen den Versionen

(Die Seite wurde neu angelegt: „==Textformatierung== Betonungen über stilistische Hervorhebungen wie Fettdruck or Kursivdruck sind zu vermeiden, da sie in Screenreadern standardmäßig nicht hervorgeheben werden. Die Textformatierungen, die zum visuellen "Scannen" von Texten häufig eingesetzt werden, würden bei einer Benutzung von Bildschirmlesegeräten in unerwünschten Überbetonungen resultieren. Daher werden die Formatierungsangaben derzeit von Bildschirmlesern wie JAWS oder NVDA…“)
 
Keine Bearbeitungszusammenfassung
Markierung: 2017-Quelltext-Bearbeitung
 
(4 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
==Textformatierung==
'''<big>Textformatierung</big>'''
 
 
 
Betonungen über stilistische Hervorhebungen wie Fettdruck or Kursivdruck sind zu vermeiden, da sie in Screenreadern standardmäßig nicht hervorgeheben werden. Die Textformatierungen, die zum visuellen "Scannen" von Texten häufig eingesetzt werden, würden bei einer Benutzung von Bildschirmlesegeräten in unerwünschten Überbetonungen resultieren. Daher werden die Formatierungsangaben derzeit von Bildschirmlesern wie JAWS oder NVDA nicht berücksichtigt.
Betonungen über stilistische Hervorhebungen wie Fettdruck or Kursivdruck sind zu vermeiden, da sie in Screenreadern standardmäßig nicht hervorgeheben werden. Die Textformatierungen, die zum visuellen "Scannen" von Texten häufig eingesetzt werden, würden bei einer Benutzung von Bildschirmlesegeräten in unerwünschten Überbetonungen resultieren. Daher werden die Formatierungsangaben derzeit von Bildschirmlesern wie JAWS oder NVDA nicht berücksichtigt.


Zeile 9: Zeile 12:


Bitte beachten Sie unbedingt: Die Fahrkarte kann nur vor Antritt der Fahrt entwertet werden. Benutzen Sie hierzu die Fahrkartenentwerter an den Bahnsteigen.
Bitte beachten Sie unbedingt: Die Fahrkarte kann nur vor Antritt der Fahrt entwertet werden. Benutzen Sie hierzu die Fahrkartenentwerter an den Bahnsteigen.
===Farben===
 
 
 
'''Farben'''
 
Folgende Farben können barrierefrei über den visuellen Editor gewählt werden.
Folgende Farben können barrierefrei über den visuellen Editor gewählt werden.
*<span class="col-red">rot</span>
*<span class="col-red">rot</span>
Zeile 15: Zeile 22:
*<span class="col-blue-navy">navy</span>
*<span class="col-blue-navy">navy</span>
Im Wiki wird generell  auf Hervorhebungen über Schriftfarben im Fließtext verzichtet. Für die Verwendung von farblichen Elementen, zum Beispiel für Infoboxen, sollten barrierefreie Vorlagen eingerichtet werden.
Im Wiki wird generell  auf Hervorhebungen über Schriftfarben im Fließtext verzichtet. Für die Verwendung von farblichen Elementen, zum Beispiel für Infoboxen, sollten barrierefreie Vorlagen eingerichtet werden.
===Grafikeinbindung===
 
 
 
'''Grafikeinbindung'''
 
Der Alternativtext für Grafiken wird  beim Einfügen eines Bildes angegeben.
Der Alternativtext für Grafiken wird  beim Einfügen eines Bildes angegeben.


[[Datei:infografik_produktivität.jpg|alternativtext=Abstrakte Grafik mit arbeitenden Teammitgliedern, die Teile von Zahnrädern zum Geschehen beitragen.|350x350px]]
[[Datei:infografik_produktivität.jpg|350x350px]]
===Dekorative Grafik===
 
[[Datei:flourish-dekografik.png|alt=|300x300px|link=]]
 
===Sprachkennzeichnung===
 
Die Standardsprache dieser Seite ist Deutsch. Folgender Satz ist als Englisch markiert:<span lang="en" dir="ltr">This sentence is written in English and marked as such</span>.
'''Dekorative Grafik'''
===Zitate===
 
[[Datei:flourish-dekografik.png|300x300px|link=]]
 
 
'''Sprachkennzeichnung'''
 
 
Die Standardsprache dieser Seite ist Deutsch. Folgender Satz ist als Englisch markiert:This sentence is written in English and marked as such.
 
 
 
'''Zitate'''
 
 
Zitate werden über das blockquote-Tag formatiert:<blockquote>Welchen Weg man auch einschlägt, er führt einen unfehlbar zum Wasser.</blockquote>
Zitate werden über das blockquote-Tag formatiert:<blockquote>Welchen Weg man auch einschlägt, er führt einen unfehlbar zum Wasser.</blockquote>
==Verlinkungen==
 
 
 
'''<big>Verlinkungen</big>'''
 
 
 
Dies ist ein [[Hauptseite|Link auf eine Wiki-Seite]].
Dies ist ein [[Hauptseite|Link auf eine Wiki-Seite]].


Dies ist ein [https://www.google.de Link auf eine externe Seite].
Dies ist ein [https://www.google.de Link auf eine externe Seite].
==Tabellenbeispiele==
 
 
 
'''<big>Tabellenbeispiele</big>'''
 
 
{| class="wikitable" style="width: 100%;"
{| class="wikitable" style="width: 100%;"
|+Tabelle mit Überschriftszeile und Überschriftsspalte
|+Tabelle mit Überschriftszeile und Überschriftsspalte
!Standort
|Standort
!Land
|Land
!Umsatz
|Umsatz
!Jahr
|Jahr
|-
|-
!München
|München
|Deutschland
|Deutschland
|$150,000.00
|$150,000.00
|2024
|2024
|-
|-
!Berlin
|Berlin
|Deutschland
|Deutschland
|$250,000.00
|$250,000.00
|2024
|2024
|-
|-
!Hamburg
|Hamburg
|Deutschland
|Deutschland
|$85,000.00
|$85,000.00
|2024
|2024
|-
|-
!Prag
|Prag
|Tschechien
|Tschechien
|$180,000.00
|$180,000.00
|2024
|2024
|-
|-
!Prag
|Prag
|Tschechien
|Tschechien
|$40,000.00
|$40,000.00
|2023
|2023
|-
|-
!Salzburg
|Salzburg
|Österreich
|Österreich
|$45,000.00
|$45,000.00
Zeile 69: Zeile 104:
{| class="wikitable"
{| class="wikitable"
|+Tabelle mit verbundenen Zellen
|+Tabelle mit verbundenen Zellen
!Gegenstand
|Gegenstand
!Menge
|Menge
!Kosten
|Kosten
|-
|-
!Brot
|Brot
|0.3 kg
|0.3 kg
|$0.65
|$0.65
|-
|-
!Butter
|Butter
|0.125 kg
|0.125 kg
|$1.25
|$1.25
|-
|-
! colspan="2" |Gesamt
| colspan="2" |Gesamt
|$1.90
|$1.90
|}
|}
==<span lang="en" dir="ltr">Content Droplets</span>==
 
===Formatierte Meldung===
 
 
 
 
'''<big>Content Droplets</big>'''
 
 
'''Formatierte Meldung'''
 
Hier ist der Titel "Warnung!" nur visuell (über CSS) fett gedruckt, da die Wortauswahl selbst bereits den Inhalt betont. Das Wort "Niemals" im Text hingegegen wurde vom Autor bewusst über ein <nowiki><strong>-Element hervorgehoben, um die Betonung eines Satzes auf den Satzanfang  zu legen.</nowiki>
Hier ist der Titel "Warnung!" nur visuell (über CSS) fett gedruckt, da die Wortauswahl selbst bereits den Inhalt betont. Das Wort "Niemals" im Text hingegegen wurde vom Autor bewusst über ein <nowiki><strong>-Element hervorgehoben, um die Betonung eines Satzes auf den Satzanfang  zu legen.</nowiki>
{{Textbox|boxtype=warning|header=Warnung!|text=<strong>Niemals</strong> heißes Wasser in den Behälter gießen.|icon=yes}}
{{Textbox|boxtype=warning|header=Warnung!|text=<strong>Niemals</strong> heißes Wasser in den Behälter gießen.|icon=yes}}
===Link als Schaltfläche===
 
 
 
'''Link als Schaltfläche'''
 
Links können auch im Stil einer Schaltfläche dargestellt werden.
Links können auch im Stil einer Schaltfläche dargestellt werden.


{{ButtonLink|external=no|target=Hauptseite|label=Zur Hauptseite|format=blue}}
{{ButtonLink|external=no|target=Hauptseite|label=Zur Hauptseite|format=blue}}
===Symbole===
 
 
 
'''Symbole'''
 
Symbole die rein dekorativ sind, werden über CSS formatiert.
Symbole die rein dekorativ sind, werden über CSS formatiert.


{{Icon|bi bi-people|1.2em||}} Mitarbeiterliste
{{Icon|bi bi-people|1.2em||}} Mitarbeiterliste

Aktuelle Version vom 21. November 2024, 10:47 Uhr

Textformatierung


Betonungen über stilistische Hervorhebungen wie Fettdruck or Kursivdruck sind zu vermeiden, da sie in Screenreadern standardmäßig nicht hervorgeheben werden. Die Textformatierungen, die zum visuellen "Scannen" von Texten häufig eingesetzt werden, würden bei einer Benutzung von Bildschirmlesegeräten in unerwünschten Überbetonungen resultieren. Daher werden die Formatierungsangaben derzeit von Bildschirmlesern wie JAWS oder NVDA nicht berücksichtigt.

Dennoch ist es möglich, bei Bedarf eine solche Hervorhebung zu erzeugen. Beispiel:

Es ist wichtig, die Fahrkarte vor Antritt der Fahrt am Bahnsteig zu entwerten.

Eine bessere sprachliche Umsetzung wäre:

Bitte beachten Sie unbedingt: Die Fahrkarte kann nur vor Antritt der Fahrt entwertet werden. Benutzen Sie hierzu die Fahrkartenentwerter an den Bahnsteigen.


Farben

Folgende Farben können barrierefrei über den visuellen Editor gewählt werden.

  • rot
  • dunkelblau
  • navy

Im Wiki wird generell auf Hervorhebungen über Schriftfarben im Fließtext verzichtet. Für die Verwendung von farblichen Elementen, zum Beispiel für Infoboxen, sollten barrierefreie Vorlagen eingerichtet werden.


Grafikeinbindung

Der Alternativtext für Grafiken wird beim Einfügen eines Bildes angegeben.

infografik produktivität.jpg


Dekorative Grafik

flourish-dekografik.png


Sprachkennzeichnung


Die Standardsprache dieser Seite ist Deutsch. Folgender Satz ist als Englisch markiert:This sentence is written in English and marked as such.


Zitate


Zitate werden über das blockquote-Tag formatiert:

Welchen Weg man auch einschlägt, er führt einen unfehlbar zum Wasser.


Verlinkungen


Dies ist ein Link auf eine Wiki-Seite.

Dies ist ein Link auf eine externe Seite.


Tabellenbeispiele


Tabelle mit Überschriftszeile und Überschriftsspalte
Standort Land Umsatz Jahr
München Deutschland $150,000.00 2024
Berlin Deutschland $250,000.00 2024
Hamburg Deutschland $85,000.00 2024
Prag Tschechien $180,000.00 2024
Prag Tschechien $40,000.00 2023
Salzburg Österreich $45,000.00 2024
Tabelle mit verbundenen Zellen
Gegenstand Menge Kosten
Brot 0.3 kg $0.65
Butter 0.125 kg $1.25
Gesamt $1.90



Content Droplets


Formatierte Meldung

Hier ist der Titel "Warnung!" nur visuell (über CSS) fett gedruckt, da die Wortauswahl selbst bereits den Inhalt betont. Das Wort "Niemals" im Text hingegegen wurde vom Autor bewusst über ein <strong>-Element hervorgehoben, um die Betonung eines Satzes auf den Satzanfang zu legen.

Warnung!Niemals heißes Wasser in den Behälter gießen.


Link als Schaltfläche

Links können auch im Stil einer Schaltfläche dargestellt werden.

Zur Hauptseite



Symbole

Symbole die rein dekorativ sind, werden über CSS formatiert.

Mitarbeiterliste



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