Vorstellung

Überblick

• Was ist überhaupt digitale Barrierefreiheit und warum ist das wichtig?
• Grundlagen schaffen
• Visuelles barrierefrei gestalten
• Tabellarisches barrierefrei gestalten
• Barrierefreiheit überprüfen
• Zusammenfassung

Warum R und Quarto?

• Quarto
  • Open-Source, kostenfrei verfügbar
  • basiert auf Markdown, ist also plain-text
  • Publikationssystem für wissenschaftliche und technische Dokumente, aber auch Präsentationen, Dahsboards, Webseiten, Blogs, Bücher, ….
  • neben R unterstützt Quarto auch Python, Julia und Observable
• R
  • weit verbreitete Statistik-Programmiersprache
  • ebenfalls Open-Source und kostenfrei
  • zahlreiche Packages erweitern R und helfen auch bei Inhalten weiter
• Workflow: Quarto-MD > knitr > MD > Pandoc > Ausgabedokument

Was ist Barrierefreiheit?

Barrierefrei sind […] Systeme der Informationverarbeitung, akustische und visuelle Informationsquellen […], wenn sie für Menschen mit Behinderungen in der allgemein üblichen Weise, ohne besondere Erschwernis und grundsätzlich ohne fremde Hilfe auffindbar, zugänglich und nutzbar sind. Hierbei ist die Nutzung behinderungsbedingt notwendiger Hilfsmittel zulässig. - §4 BGG (Hervorhebungen durch den Verfasser)

• Gesetzliche Regelungen (auf Bundesebene, Umsetzungen von EU-Recht)
  • Behindertengleichstellungsgesetz (BGG)
  • Barrierefreie Informationstechnik Verordnung (BITV)
  • Barrierefreiheitsstärkungsgesetz (BFSG)
• auf Länderebene ggf. noch andere Gesetze, insbesondere für Hochschulen

Für wen ist Barrierefreiheit wichtig?

Grundlagen digitaler Barrierefreiheit

Barrierefreie Inhalte folgen dem POUR-Prinzip, d.h. sie sind …

• Perceivable - wahrnehmbar durch Textalternative, Untertitelung, sie sind unterscheidbar und anpassbar
• Operable - bedienbar auch per Tastatur, einfach navigierbar, nutzbar ohne Zeitdruck und Anfälle auszulösen
• Understandable - verständlich, gut lesbar, vorhersehbar und nachvollziehbar gestaltet, und Fehler werden vermieden
• Robust - robust und kompatibel mit aktuellen und künftigen Werkzeugen

Grundlagen barrierefreier Dokumente

• Vorteil Markdown: WYSIWYM - What You See Is What You Mean
• Perceivable / Wahrnehmbar
  • Textalternativen für nicht-textuelle Inhalte
  • Strukturierung mit Elementen für Überschriften, Listen, Zitate
  • Gliederung von Dokumenten
  • Korrekt aufgebaute Tabellen
  • Farbkontraste
• Operable / Bedienbar
  • Inhaltsverzeichnis bei langen Dokumenten
  • Dokumententitel
  • Sprechende Links
• Understandable / Verständlich
  • Aussagekräftige Überschriften und Beschriftungen
  • Dokumentensprache angegeben
• Robust

Aufbau von Quarto-MD-Dokumenten

    title: Beispieldokument
    author:
        name: Petra Musterfrau
        orcid: 0000-1234-5678-9123
    lang: de
    ----

    ## Einführung

    ...

Dokumente semantisch strukturieren

• WYSIWYM: Dokumente mit Überschriften gliedern
• Überschriftenhierarchie beachten
• Überschriften in Markdown

  • # : H1

  • ## : H2

  • ### : H3 usw.

• Tipp: Entweder eine H1/# oder title im YAML-Header
• Strukturelemente für
  • unnummerierte Listen: *, + -
  • nummerierte Listen: 1., 2., usw.
  • Einrückungen/Zitate: >, >>

Barrierefreies Schreiben

• Aussagekräftige (“sprechende”) Link-Texte nutzen:
  • nicht: “…für mehr Informationen zur Datengrundlage klicken Sie hier.”
  • sondern: “…mehr Informationen über die Datengrundlage.”
• Trennstriche
  • Bindestrich, Trennstrich, Minus: —, – oder doch - ?
  • Aus „05.05. – 07.05.“ wird „05.05. bis 07.05.“
• Genderschreibweisen
  • “bestimmte Schreibweisen (*:_I/-) sind nicht barrierefrei“ > Jein, Screenreader können angepasst werden
  • Im Zweifel einfach geschlechtsneutral (Studierende) schreiben

Barrierefreie Grafiken und Diagramme

Alternativtexte erstellen

![Afrikanischer Buschelefant](assets/elephant.jpg "Elefant"){fig-alt="Afrikanischer Buschelefant auf einer Schotterpiste, die Ohren sind aufmerksam nach vorne gerichtet."}

Manuelle Alternativtexte für Diagramme

• Alternativtext über Parameter für knitr-Codezellen: fig-alt
• funktioniert mit Plots per graphics und ggplot2

#| fig-alt: Barplot, X-Achse zeigt die drei Arten Adelie (150 Exemplare), Chinstrap (63) und Gentoo (120)
species_count <- table(penguins$species)

barplot(species_count, main = "Häufigkeiten der Pinguinarten", 
        xlab = "Arten", ylab = "Häufigkeit")

Komplexe Grafiken

#| fig-cap: Zusammenhang von Flügelspannweite und Körpergewicht
#| fig-alt: Streudiagramm, betitelt mit Flügelspannweite versus Gewicht der Pinguine. Auf der X-Achse ist die Flügelspannweite abgetragen, von 170 bis 230 mm. Auf der Y-Achse ist ist das Körpergewicht abgetragen, von 3000 bis 6000 Gramm, in Abständen von 500 Gramm. Das Diagramm hat ungefähr 250 Einzelpunkte, die in einem Bereich von links unten nach rechts oben aufgetragen sind. Die Punkte für die drei Arten unterscheiden sich farblich, Rot für Adelie, Grün für Chinstrap und Blau für Gentoo. Die Punkte für die beiden Arten Adelie und Chinstrap konzentrieren sich im Bereich links unten bis ungefähr zur Mitte. Die Punkte für die Art Gentoo verteilt sich von der Mitte bis in die rechte obere Ecke.

ggplot(penguins, aes(x = flipper_length_mm, y = body_mass_g, color = species)) ...

Zusammenhang von Flügelspannweite und Körpergewicht

Alternativtexte mit BrailleR erstellen?

• BrailleR erleichtert blinden Nutzenden die Arbeit mit R
• momentan nur von GitHub installierbar
• liefert unter anderem Details zu Diagrammen und Plots
• Describe(): liefert nicht-kontextbezogene Informationen zu Grafikebenen eines Plots
• VI(): extrahiert Details aus Plots oder anderen R-Objekten

A geom_point layer created with the ggplot2 framework

General Description:
A scatter plot shows the relationship between two variables by plotting a symbol for each observation at the coordinates for the two variables.

R hints:
A geom_point by default will by closed black dots. This can be changed with the `shape` parameter, while the size and colour can be changed with the `size` and `colour` parameter. These can be set to categorical variable to visually distinguish the groups 

This chart has title 'Flügelspannweite vs. Gewicht der Pinguine'.
It has x-axis 'Flügelspannweite (mm)' with labels 170, 180, 190, 200, 210, 220 and 230.
It has y-axis 'Gewicht (g)' with labels 3000, 4000, 5000 and 6000.
There is a legend indicating colour is used to show Pinguinarten, with 3 levels:
Adelie shown as strong reddish orange colour, 
Chinstrap shown as vivid yellowish green colour and 
Gentoo shown as brilliant blue colour.
The chart is a set of 342 big solid circle points of which about 85% can be seen.
It has size set to 3.

Alternativtexte mit KI erstellen?

• Quelle: https://www.jumpingrivers.com/blog/ellmer-dynamic-alt-text/
• Idee: KI erstellt den Alternativtext dynamisch, ändert sich der Plot, ändert die KI den Alternatixtext
• Benötigt werden
  • ein guter Prompt für einen Alternativtext
  • Zugang zu einem LLM (lokal, eher aber im RZ)
  • multimodales Modell
  • ellmer-Package für die Verbindung zum LLM

Alternativtexte mit KI erstellen?

#| fig-alt: !expr ggplot2::get_alt_text(ggplot2_ai_alt)
1library(ellmer)

generate_alt_text = function(ggplot_obj) {
2  temp = tempdir()
  save_path = file.path(temp, "temp.png")
  ggsave (save_path, ggplot_obj)

1

Paket ellmer laden

2

Bild wird gespeichert, um es im LLM-Chat zu verwenden

Alternativtexte mit KI erstellen?

#| fig-alt: !expr ggplot2::get_alt_text(ggplot2_ai_alt)
1library(ellmer)

generate_alt_text = function(ggplot_obj) {
2  temp = tempdir()
  save_path = file.path(temp, "temp.png")
  ggsave (save_path, ggplot_obj)
3  alt_text_chat <- chat_openai_compatible(
    base_url = "https://api.yourllm.de/v1",
    credentials = function(){Sys.getenv("YOUR_API_KEY")},
    model = "Qwen3-VL-32B-Instruct-FP8"
  )
4  alt_Text = alt_text_chat$chat("Erzeuge einen kurzen und aussagekräftigen Alternativtext für das Diagramm für Menschen, die das Bild nicht sehen können. Beginne sofort mit dem Alt-Text ohne Text wie 'Alt-Text:' oder 'Beschreibung:' davor. Der Alt-Text soll zuerst den Diagrammtyp und die auf den Achsen aufgetragenen Variablen wiedergeben. Danach beschreibst du kurz und prägnant die wichtigsten in den Daten erkennbaren Muster oder Trends. Achte darauf, alle Wertebereiche in die Darstellung aufzunehmen, je genauer desto besser.", content_image_file(save_path))
}

1

Paket ellmer laden

2

Bild wird gespeichert, um es im LLM-Chat zu verwenden

3

LLM-Chat aufbauen

4

Beispiel für ein Prompt um Alt-Text zu erzeugen

Alternativtexte mit KI erstellen?

6#| fig-alt: !expr ggplot2::get_alt_text(ggplot2_ai_alt)
1library(ellmer)

generate_alt_text = function(ggplot_obj) {
2  temp = tempdir()
  save_path = file.path(temp, "temp.png")
  ggsave (save_path, ggplot_obj)
3  alt_text_chat <- chat_openai_compatible(
    base_url = "https://api.yourllm.de/v1",
    credentials = function(){Sys.getenv("YOUR_API_KEY")},
    model = "Qwen3-VL-32B-Instruct-FP8"
  )
4  alt_Text = alt_text_chat$chat("Erzeuge einen kurzen und aussagekräftigen Alternativtext für das Diagramm für Menschen, die das Bild nicht sehen können. Beginne sofort mit dem Alt-Text ohne Text wie 'Alt-Text:' oder 'Beschreibung:' davor. Der Alt-Text soll zuerst den Diagrammtyp und die auf den Achsen aufgetragenen Variablen wiedergeben. Danach beschreibst du kurz und prägnant die wichtigsten in den Daten erkennbaren Muster oder Trends. Achte darauf, alle Wertebereiche in die Darstellung aufzunehmen, je genauer desto besser.", content_image_file(save_path))
}

5new_alt_text <- generate_alt_text(ggplot2_cc_alt)
ggplot2_ai_alt <- ggplot2_cc_alt + labs(alt = new_alt_text)
ggplot2_ai_alt

1

Paket ellmer laden

2

Bild wird gespeichert, um es im LLM-Chat zu verwenden

3

LLM-Chat aufbauen

4

Beispiel für ein Prompt um Alt-Text zu erzeugen

5

Alternativtext generieren und per ggplot2::labs() anhängen

6

Plot mit Alternativtext ausgeben; der Alt-Text muss auch in den Chunk-Optionen eingebunden werden

Alternativtexte mit KI erstellen

Der Alternativtext, den das LLM erzeugt hat:

Scatterplot mit Flügelspannweite (x-Achse, 170–230 mm) und Gewicht (y-Achse, 3000–6000 g) von drei Pinguinarten: Adelie (rosa), Chinstrap (grün), Gentoo (blau). Die Daten zeigen, dass Gentoo-Pinguine die größte Flügelspannweite (210–230 mm) und das höchste Gewicht (4500–6000 g) aufweisen. Chinstrap-Pinguine haben eine mittlere Flügelspannweite (180–210 mm) und ein Gewicht zwischen 3000 und 4500 g. Adelie-Pinguine zeigen die kleinste Flügelspannweite (170–195 mm) und das niedrigste Gewicht (3000–4500 g). Innerhalb jeder Art ist eine positive Korrelation zwischen Flügelspannweite und Gewicht erkennbar.

Haben wir was vergessen?

Farbkontraste, Füllstile und Symbole

• Verbesserung der Farbkontraste für Menschen mit Farbfehlsichtigkeit
  • eigene Farbpalette definieren und in ggplot2 nutzen
  • Farbpaletten aus den Paketen viridis, colorBlindness oder RColorBrewer nutzen
  • Hinweis: Farbpaletten in ggthemes sind abgekündigt
• je nach Plot-Typ die Darstellung anpassen, zum Beispiel
  • verschiede Linientypen nutzen
  • verschiedene geometrische Formen für Datenpunkte nutzen
  • ggpattern für Füllung mit Mustern nutzen

Beispiel: Farbkontraste und Symbole

ggplot_a11y <- ggplot(penguins, aes(x = flipper_length_mm, y = body_mass_g, shape = species, color = species)) +
  geom_point(size = 3) +  # Punktcharakter und Größe einstellen
  labs(title = "Flügelspannweite vs. Gewicht der Pinguine", 
       x = "Flügelspannweite (mm)", 
       y = "Gewicht (g)", 
       color = "Pinguinarten",
       shape = "Pinguinarten") +
  theme_minimal() +
  scale_color_brewer(palette = "Dark2")
ggplot_a11y

Zusammenhang von Flügelspannweite und Körpergewicht

Anforderungen an barrierefreie Datentabellen

• Tabellenbeschriftung mit <caption> verfügbar
• Spalten- und Zeilenüberschriften mit <th> ausgezeichnet, alternativ über ARIA-Rollen
• keine leeren Zellen als Tabellenüberschrift
• Bezüge zwischen Überschriften- und Datenzellen sind festgelegt, entweder per scope-Attribut oder per headers/id-Kombinationen
• zusätzlich können Tabellenkopf und -fuß per <thead> und <tfoot> ausgezeichnet werden
• das <summary>-Element darf in HTML5 nicht mehr genutzt werden

Wie gut erfüllten die Pakete flextable, gt, huxtable und kableExtra diese Anforderungen?

Einfache und komplexe Tabellen

Vergleich verschiedener Tabellen-Pakete

Empfehlung für Datentabellen: gt

Full-monty Accessibility

Werkzeuge zur Prüfung

Wichtig: Eine automatische Prüfung allein ist nicht ausreichend!

• Für HTML-basierte Dokumente
  • deque axe: lässt sich auch direkt in Quarto integrieren
  • WebAIM Wave
  • Pa11y
• PDF-Dokumente
  • Adobe Acrobat (Pro)
  • veraPDF
  • PAC - PDF Accessibility Checker
• Word/DOCX: in M365 integriertes Prüfwerkzeug

Zusammenfassung

Machen Sie den “shift left” und berücksichtigen Sie die Barrierefreiheit von Anfang an!

1. Ausgabeformat bewusst wählen
2. Metadaten im YAML-Header setzen
3. Dokument mit Überschriften gliedern
4. Nicht-Textinhalte mit Alternativtext und Bildunterschrift versehen
5. Farbgestaltung und Kontraste beachten
6. Datentabellen barrierefrei mit dem gt-Package erstellen
7. Barrierefreiheit überprüfen

Ich freue mich auf Ihre Fragen und Anregungen!