Vorstellung

Überblick

• Was ist überhaupt digitale Barrierefreiheit und warum ist das wichtig?
• Grundlagen schaffen
• Visuelles barrierefrei gestalten
• Tabellarisches barrierefrei gestalten
• Barrierefreiheit überprüfen
• Praktische Umsetzung im eigenen Arbeitsalltag
• 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-Markdown > knitr > Markdown > Pandoc > Ausgabedokument (HTML, ePUB, DOCX, PDF, …)

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

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 sind unterschiedliche Zeichen: —, – oder doch - ?
  • Zeit- und Datumsangaben: „05.05. – 07.05.“ besser schreiben als „05.05.2027 bis 07.05.2027“
• Geschlechtergerecht Schreiben
  • “bestimmte Schreibweisen (*:_I/-) sind nicht barrierefrei“ > Jein, Screenreader können angepasst werden
  • den Empfehlungen des Dudens folgen oder im Genderwörterbuch nachschlagen
  • 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? Folie 1 von 4

• 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, bspw Gemma/Gemini, ChatGPT, Qwen
  • ellmer-Package für die Verbindung zum LLM

Alternativtexte mit KI erstellen? Folie 2 von 4

#| 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? Folie 3 von 4

#| 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 = multimodal_model
  )
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), echo = "none")
  alt_Text <- trimws(gsub('[\'"„“‘’]', '', as.character(alt_Text))) 
}

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? Folie 4 von 4

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 = multimodal_model
  )
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), echo = "none")
  alt_Text <- trimws(gsub('[\'"„“‘’]', '', as.character(alt_Text))) 
}

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:

Streudiagramm mit dem Titel Flügelspannweite vs. Gewicht der Pinguine. Die horizontale Achse stellt die Flügelspannweite in Millimetern (170 bis 230) und die vertikale Achse das Gewicht in Gramm (3000 bis 6000) dar. Drei Pinguinarten werden farbcodiert unterschieden: Adelie (rot), Chinstrap (grün) und Gentoo (blau). Es zeigt sich ein klarer positiver Trend, bei dem sowohl Spannweite als auch Gewicht zusammenhängen. Adelie-Pinguine haben die kleinsten Maße (ca. 170–200 mm Spannweite, 3100–4500 g), gefolgt von den Chinstrap-Pinguinen (ca. 180–210 mm Spannweite, 2800–4600 g). Die Gentoo-Pinguine liegen am höchsten mit einer Spannweite von 210 bis 230 mm und einem Gewicht von 4000 bis über 6000 g.

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

Mathematische Formeln in Quarto

• Quarto unterstützt LaTeX-Formelschreibweise mit $ und $$
• per $a^2 + b^2 = c^2$ innerhalb einer Zeile: \(a^2 + b^2 = c^2\)
• oder per $$ in einem eigenen Absatz: \[a^2 + b^2 = c^2\]
• in HTML werden Formeln mit MathJax angezeigt

Werkzeuge zur Prüfung

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

• Für HTML-basierte Dokumente
  • deque axe: direkt in Quarto integrierbar bei Ausgabe von HTML-basierten Formaten
  • WebAIM Wave
  • Pa11y
• PDF-Dokumente
  • Adobe Acrobat (Pro)
  • veraPDF: direkt in Quarto integrierbar bei Ausgabe von PDF (LaTeX) und Typst/PDF
  • PAC - PDF Accessibility Checker
• Word/DOCX: in M365 integriertes Prüfwerkzeug
• Erweiterungen wie Reveal.js A11y verbessern die indiviuelle Nutzbarkeit

Praktische Umsetzung im eigenen Arbeitsalltag

• mit Quarto lässt sich vieles im Bereich des wisssenschaftlichen Schreibens umsetzen
• einfach anfangen und erste Dokumente mit Markdown erstellen
• seit Quarto 1.9 Unterstützung für barrierefreie PDF-Dokumente
  • LaTeX unterstützt PDF/UA-2
  • Typst unterstützt PDF/UA-1
• in den Werkzeugkoffer gehören:
  • Editor, bspw. RStudio/Positron, Emacs, (Neo)Vim, Scrivener
  • Literaturverwaltung, bspw. mit Zotero, Jabref, BibDesk; mit automatisiertem Export als BibTex
  • Quarto: entweder manuell installiert oder zusammen mit Positron/RStudio
  • make für die einfache Erstellung von Ausgabedokumenten
    
  • Git und ggf. GitHub

Zusammenfassung

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

1. Web-first Gedanke folgen, 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

Quarto ist noch nicht perfekt, aber es wird fortlaufend daran gearbeitet.

Ich freue mich auf Ihre Fragen und Anregungen!