Lieber Zuschauer, dieser Untertitel wurde automatisch generiert von YouTube und dementsprechend (sehr) fehlerhaft. Wenn du kannst, hilf uns bitte gute Untertitel zu erstellen: https://c3subtitles.de/talk/2335 Danke!
freue ich mich jetzt an wie begrüßen zu
dürfen wenn auch nur mit Standbild kurze
Vorwarnung denn die Internetverbindung
mag vielleicht nicht die beste sein aber
wir haben ein schönes Bild von ANV und
sie wird vorstellen ein bisschen was was
sie herausgefunden hat undit sie sich
sehr beschäftigt nämlich zur
Datenvisualisierung im Internet wie man
die besonders Barriere umsetzen kann ist
frontendentwicklerin und studiert Mensch
computerinteraktion deshalb freue ich
mich sehr auf den Talk zur Barriere am
Datenvisualisierung im Web und freue
mich und trete zur Seite für den
Talk ja vielen Dank für diese coole
Anmoderation ich freue mich sehr dass
ich hier bei fir bei fir Chance die
Möglichkeit habe über dieses Thema zu
reden was mich sehr interessiert und was
auch ein sehr wichtiges Thema ist wie
ich
finde ich rede heute über barrierearme
Datenvisualisierung im Web wie schon
angekündigt das ist ein Thema dass ich
momentan im Rahmen von meiner
Masterarbeit recherchiere und
ich habe wollte hier einfach die
Gelegenheit nutzen einfach mal ein paar
Learnings zu teilen einfach die ich
jetzt selber auch hatte während ich
recherchiert habe für meine
masterarbeitm kurz vorweg wo nicht
anders gekennzeichnet ist diese
Präsentation unter einer Creative com
Namensnennung 4.0 international Lizenz
lizensiert fangen wir an
Datenvisualisierung
begegnen uns an vielen verschiedenen
Orten unter anderem auch häufig im
Internet da könnten uns z.B solche Daten
Visualisierung begegnen ich habe hier
auf meiner Site ein Bild von einem
Balkendiagramm mit dem Titel
durchschnittlicher matthekonsum in
Flaschen pro Tag wir haben auf der
x-Achse die Monate Januar bis Dezember
202 20 und auf der Y-Achse den
durchschnittlichen matthekonsum von 0
bis vier Flaschen Tag und dann eben die
Daten in einem gestapelten
Balkendiagramm von drei verschiedenen
Personen das ist jetzt einfach nur ein
Beispiel
von so einer Visualisierung damit
daramit wollte ich einfach mal zeigen
was so was ich meine wenn ich jetzt über
die Visualisierung spreche natürlich
gibt es auch ganz andere deutlich
komplexere aber das ist jetzt ein
Beispiel einfach
ein anderes Beispiel wäre z.B diese
Visualisierung auf dieser slide habe ich
wieder ein
Balkendiagramm diesmal haben wir auf der
x-Achse Altersgruppen aufgetragen von 0
bis 4 bis zu 95 bis 99 auf der Y-Achse
haben wir die Bevölkerung
in dieser Altersgruppe und das Ganze ist
als weendiagramm dargestellt
m an diesem Diagramm wollte ich gerne
auch schon
mal zeigen
vielleicht dass es eben auch häufig
Barrieren gibt bzw das halt leider
häufig die Umsetzung von
Datenvisualisierung im Internet nicht so
ideal
ist als Hinweis hier bei der
Visualisierung z.B ist jetzt die Schrift
teilweise recht klein nicht ganz lesbar
es gibt z.B auch kein Titel von der
Visualisierung und das sind einfach nur
kleine Beispiele dafür
für die vielen vielen Barrieren die
leider häufig anzutreffen sind bei
Datenvisualisierung im
Internet das heißt
was ich mich da gefragt habe ist wie
können wir das Ganze besser machen wie
können wir schauen dass
Datenvisualisierung die wir im Internet
irgendwo posten oder auf Webseiten
einbinden dass die eben auch für
Menschen mit Behinderung gut benutzbar
sind ich habe mir überlegt ähm dass ich
das ganze anhand von drei kleinen
Szenarios hier präsentiere das heißt ähm
ich würde als erstes mir das Szenario
anschauen dass wir eine Visualisierung
online ir Posten z.B auf
Mastodon das zweite was ich mir mit euch
anschauen wollte ist das Design einer
Visualisierung ähm ich denke das eine
Situation in der vielleicht ähm manche
hier ab und zu sind wenn man Daten hat
und selber eine Visualisierung generiert
das heißt da würden wir uns anschauen
was kann man worauf kann man z.B achten
damit das
Barriere ärmer wird und das dritte
Szenario was ich mir gerne mit euch
anschauen würde ist das Boden einer
Visualisierung da wollte ich so auch so
einen kleinen Einblick einfach geben
wenn ich z.B ein Datenquelle oder Daten
habe und eine Visualisierung Code worauf
ich dann achten kann
um das Ganze ein bisschen beima zu
machen fangen wir also an mit dem ersten
Szenario Posten einer Visualisierung das
heißt ich gehe davon aus wir haben schon
irgendeine Grafik irgendeine
Visualisierung und möchten diese im
Internet teilen das heißt ich sag mal
die Möglichkeiten die wir haben um das
Ganze barrierearm zu gestalten
sind jetzt in dem Sinne eingeschränkt
dass wir nicht wirklich
an dem Bild selber etwas ändern können
ich sag mal vielleicht wenn wir Grafiker
innen sind könnten wir das vielleicht
schon aber ich sag mal jetzt in diesem
Kontext wo wir einfach ein fertiges Bild
online teilen können wir das nicht
[Musik]
mm schauen wir uns also das als Beispiel
an ich habe hier wieder ein
Balkendiagramm das hat den Titel Janas
Mate Konsum 2022 in Flaschen pro Tag auf
der x-Achse sind die Monate Januar bis
Dezember 2022
aufgetragen und auf der Y-Achse haben
wir die konsumierten matateflaschen die
durchschnittlichen konsumierten
mateflaschen pro Tag von 0 bis
2,5 und
ähm es geht hier jetzt zwar nicht um die
Daten aber ich sag's trotzdem kurz man
sieht dass der matekonsum recht ansteigt
von Januar bis August und dann recht
drastisch abfällt auf Null bzw fast Null
in den letzten drei Monaten des Jahres
das heißt wenn wir jetzt diese
Visualisierung posten wollen dann ist
vielleicht
wo viel direkt auch vielleicht auch dran
gedacht haben wir sollten auf jeden Fall
eine Bildbeschreibung
schreiben das ist immer wichtig wenn wir
online Bilder teilen dass wir
Bildbeschreibung schreiben damit
Menschen die ein Screen readader
benutzen dann eine adäquate Beschreibung
vorgelesen bekommen wenn Sie dieses Bild
annavigieren hier wollte ich gerne einen
kurzen Exkurs machen weil ich eben nicht
weiß ob das im Publikum jetzt wie weit
das verbreitet ist das wissen halt auch
was ist de Bild Beschreibung und wie
mache ich eine
Bildbeschreibung deswegen hier einen
ganz kurzen Exkurs dazu wie ich eben
schon genannt habe eine Bildbeschreibung
ist eben ein Text wo ich das Bild was
ich poste beschreibe damit z.B Screen
readader Nutzer innen das vorgelesen
bekommen wenn sie das Bild eben nicht
sehen nicht sehen können nicht sehen
wollen wie auch immer als Beispiel hier
habe ich einen Post vielen Dank an@gze
auf auf
chos.social für dieses Bild das ist ein
Screenshot von einem Post mit dem Titel
kalt und nass und es ist das Foto einer
Katze im Schnee und hier hat gatze z.B
eine Bildbeschreibung geschrieben die
kann man sich mit dem screenreeder
anhören oder auch in manchen Clients
auch lesen hier habe ich ein Screenshot
von einem Android Client und da steht
eben unter dem Bild dann eine flauschige
langhkatze hockt in der Reifenspur eines
Autos mitten in einer verschneiden
Fläche sie Start geradeaus und wirkt
nicht unbedingt zufrieden mit der
Situation so eine Bildbeschreibung kann
man eben
hinzufügen wenn man ein Bild hochlädt
hier habe ich ein Screenshot vom Bilder
Upload in
mastodor und hier ist rechts die Preview
von dem Bild was gerade hochgeladen wird
und links gibt es eben ein Textfeld
bildbeschreibung für Blinde und
sebehinderte Menschen wo man das Bild
dann beschreiben
kann kurzer Hinweis
Bildbeschreibungen sind nicht nur für
Blinde und sehrbehinderte Menschen es
sind nicht die einzigen Menschen die
diese Bildbeschreibung konsumieren aber
nichts nichtsdestotrotz hier kann man
diese Bildbeschreibung
eingeben wie man eine Visualisierung gut
beschreibt ist gar nicht so trivial
und natürlich Bildbeschreibung überhaupt
sind auch ein eine Sache wo es natürlich
sehr drauf ankommt warum poste ich das
Bild
in welchem Kontext poste ich das Bild
was ist in dem Bild wichtig hier gerade
das heißt es gibt nicht die eine we es
gibt nicht den einen Weg jetzt ein Bild
perfekt zu beschreiben ähm aber wenn wir
uns jetzt anschauen wir wollen eine
Datenvisualisierung beschreiben und
wollen möglichst einfach die
Informationen gut wiedergeben die in der
Visualisierung enthalten sind
ähm dann gibt es eben dieses Modell
ähm von lundgard und sati Narayan was
ich recht hilfreich finde an dem man
sich orientieren kann es besteht aus
vier Ebenen die erste Ebene ist
Übersicht und Aufbau das heißt hier
beschreibt man was ist das für ein
Diagrammtyp was ist der Titel der
Visualisierung welche Achsen gibt es
welche welche
Codierung und so weiter das heißt man
beschreibt einfach den Grundaufbau der
Visualisierung Ebene ist der
statistische
überblickm hier beschreibt man
grundlegend statistische Werte von den
Daten die dort gezeigt werden z.B kann
man den mediaan nennen Extremwerte oder
auch einfache Vergleiche
machen die dritte Ebene ähm ist die
Ebene der sichtbaren Phänomene und diese
Ebene oder ich sag mal
beschreibungsteile die dieser Ebene
entsprechend sind werden besonders laut
deren Studie auch besonders geschätzt
ähm z.B von blinden und sehbehinderten
Menschen die weil hier weil es hier eben
darum geht die Sachen zu kommunizieren
m die häufig so visuell wahrgenommen
werden wie z.B Trends Muster und
Ausnahmen das sind eben genau diese
Sachen warum ich normalerweise dann in
diesem Fall eben nicht eine Tabelle
share online sondern eben eine
Visualisierung weil es eben etwas
Interessantes zu sehen gibt wie z.B
einen Trend in den Daten und das ist
eben wichtig es ist e besonders wichtig
dass auch diese Sachen in der bildreib
enthalten
sind die vierte Ebene ist etwas
kontroverser ist die Ebene der
zusätzlichen Information da geht es um
darum dass man zusätzliche Erklärungen
insights oder zusätzlichen Kontext dazu
gibt das sollte man eben nach Messen der
Situation machen würde ich sagen und da
sollte man auf jeden Fall aufpassen dass
man jetzt nicht mit interpret
zu weit geht weil eine Bildbeschreibung
jetzt ja das Schreiben sollte und nicht
der Person sagen sollte wie sie das Bild
zu verstehen oder zu interpretieren
hat das heißt noch mal ganz kurz hier
die vier Ebenen die vorgeschlagen wurden
erstens Übersicht und Aufbau zweitens
statistischer Überblick drittens
sichtbare Phänomene viertens zusätzliche
Informationen man muss jetzt keinesfalls
der reih nach alles abarbeiten sondern
ähm man kann
einfach diese Ebenen anschauen und m
einen Text schreiben und entsprechend
schauen ob man die wichtigen Teile
ungefähr abgedeckt hat mit dem
Text ich habe das hier mal versucht für
dieses Diagramm was wir eben hatten am
Anfang vom Beispiel Janas smate Konsum
2022 ich habe hier die folgende
Bildbeschreibung geschrieben ein
Balkendiagramm mit dem Titel jahas
marate Konsum 2022 in Flaschen pro Tag
auf der x-Achse stehen die Monate Januar
bis Dezember
2022 auf der Y-Achse steht die
durchschnittliche Anzahl an täglich
konsumierten Flaschen Mate
Jahresdurchschnitt 1,35 Flaschen pro Tag
Maximum liegt bei 2,7 Flaschen pro Tag
im August Minimum liegt bei Null
Flaschen pro Tag im September November
und Dezember der Konsum steigt von 1,5
Flaschen im Januar auf 2,7 im August
fällt dann abrupt auf Null Flaschen im
im September abgesehen vom Oktober mit
0,25 Flaschen pro Tag bleibt der Konsum
bis Ende des Jahres bei Null das ist
eben einfach ein Beispiel wie so eine
Bildbeschreibung aussehen bzw sich
anhören
kann ein weiterer Tipp noch wenn ihr
online Datenvisualisierung teilt wenn
ihr selber die Daten habt oder wenn ihr
ein Link dazu habt wo die Daten
herkommen dann ist es immer nice auch zu
den Daten zu verlinken
das hat eben den Vorteil dass dann
Personen für die weder die
Visualisierung noch die Bildbeschreibung
irgendwie hilfreich ist z.B die Daten
runterladen können und in einem Programm
Ihrer Wahl
öffnen das ist natürlich jetzt nicht die
ideal Lösung dass man Personen das
Personen dann selber die Daten
runterladen und selber öffnen anschauen
müssen aber es ist eben es bietet
immerhin die Möglichkeit dass wenn
jemand sagt okay das ist ist für mich
interessant aber irgendwie funktioniert
diese Visualisierung für mich nicht dann
bietet es immerhin die Möglichkeit dass
die Person sich selber die Daten nimmt
und so mit den Daten interagiert wie es
für sie
passt damit würde ich jetzt dann
übergehen zum zweiten Szenario und zwar
ist das das Design einer Visualisierung
das heißt in diesem Szenario stelle ich
mir vor wir haben Daten und
wollen entweder per Hand eine
Visualisierung zeichnen oder verwenden
irgendein Tool um eine
Visualisierung wo dann am Ende irgendein
Bild bei rauskommt das heißt ich gehe
davon aus wir haben eine Tabelle mit
Daten z.B hier habe ich Daten vom
Statistischen Bundesamt mit
den Zahlen der Geburten und Todesfälle
in Deutschland von 1950 bis
2021 wenn wir jetzt ähm eine
Visualisierung Design oder daraus könnte
das sein dass das
im ersten Schritt dann beispielsweise so
aussieht auf dieser slide habe ich jetzt
ein Liniendiagramm auf der x-Achse sind
die Jahreszahlen von 1950 bis 2021
aufgetragen auf der Y-Achse sind die
Geburten bzw Sterbefälle von 0 bis 1,4
Millionen aufgetragen es gibt zwei
Linien eine grüne für die Geburten und
eine rote für die
Sterbefälle
hier fallen vielleicht manchen auch
schon einige Sachen auf
die man besser machen könnte damit das
Barriere ärmer ist eine Sache z.B ist
dass der Text eher klein und kontrastarm
ist das heißt das ist so die erste Sache
die ich empfehlen würde auch schaut dass
alles möglichst kontrastreich ist gut zu
erkennen ist und gut zu lesen ist vor
allem halt auch
der
Text das heißt ich habe jetzt hier eine
kleine verbesserte Version auf der
nächsten slide wo einfach die der Text
größer und kontrastreicher
ist was vielleicht vielen auch gleich
schon aufgefallen ist ist ich habe hier
die Farben rot und grün verwendet das
sind
Farben die Mensch die für Menschen mit
bestimmten farbsehchwächen einfach
schlecht zu unterscheiden sind das heißt
diese Farbkombination sollte vermieten
werden möglichst in Visualisierung es
gibt noch andere Farbkombinationen die
auch schwierig sind das heißt wenn ihr
Farben auswählt für Visualisierung dann
würde ich empfehlen online zu schauen es
gibt verschiedene Seiten wo man sich
Farbpaletten generieren kann oder wo es
Tipps dazu gibt wie man Farben auswählt
äh die auch für Menschen mit
Farbsehschwächen gut unterscheidbar sind
hier habe ich jetzt die dritte Version
von diesem Diagramm jetzt ist die rote
Linie etwas kräftiger rot und die grüne
Linie ist dunkelblau ich habe noch eine
andere Änderung vorgenommen und zwar ähm
habe ich vorher eine eine Legende gehabt
ich weiß nicht das kann sein dass ich
vergessen habe das zu erwähnen aber es
gab vorher oben eine Legende die die
Farben zu den Datenreihen meppt und
jetzt ist diese Legende Weg stattdessen
sind die Daten rein stattdessen sind die
Linien jetzt direkt gelabelt also am
Ende der blauen Linie gibt es ein Label
Sterbefälle am Ende der roten Linie gibt
es ein Label Geburten das hat eben den
zusätzlichen Vorteil dass selbst wenn
jetzt die Farben irgendwie für jemanden
schlecht zu erkennen wären dass es
trotzdem noch möglich wä zu verstehen
welche Linie welche Daten
darstellt und jetzt habe ich noch eine
vierte Version davon und zwar was ich
hier noch hinzugefügt habe ist ein Titel
Geburten und Sterbefälle in Deutschland
von 1950 bis
2021 und achsenlabels und zwar ist die
x-Achse gelabelt mit ja und die Y-Achse
ist gelabeltt mit Anzahl pro
Jahr das heißt das ist ein weitere eine
weitere Sache wo wir drauf achten
sollten wenn wir Visualisierung Design
dass wir schauen dass wirklich alles
klar gelabelt und verständlich ist und
das eben auch z.B achenlabels und Titel
vorhanden
sind das war's dann zu meinen TIPPS
kurzen Tipps zum Thema Design es gibt
sicher noch viele weitere Sachen
ähm aber jetzt wollte ich noch kurz dass
wir uns das Thema coden einer
Visualisierung anschauen was ich damit
meine ist das Szenario dass wir eben
Daten haben oder eine Datenquelle haben
die wir
anbinden aus der wir mit Code
Visualisierung generieren die unter
Umständen auch dynamisch sind da gibt's
natürlich viele verschiedene Methoden
wie man das machen kann auch viele
verschiedene
libraries und deshalb kann ich hier
natürlich nicht alles abdecken aber ich
werde jetzt mal ein Beispiel zeigen ich
habe hier wieder einen Datensatz ich
habe auf meiner slide eine Tabelle mit
einer Spalte Alter wo Altersgruppen sind
z.B 0 bis 4 5 bis 9 und so weiter und
dann habe ich eine zweite Spalte
Bevölkerung in diesem Alter das heißt es
ist wieder ein Datensatz vom
Statistischen Bundesamt der einfach die
m Aufteilung der Bevölkerung
Altersgruppen
wiedergibt wenn wir das diesen Datensatz
verwenden z.B habe ich hier jetzt für
dieses Beispiel habe ich jetzt mit
Javascript und d3j
dieses Balkendiagramm gecodet und das
ist jetzt einfach ein Screenshot davon
ich habe hier auf der Slide wieder ein
Balkendiagramm auf der x-Achse sind die
Altersgruppen aufgetragen von 0 bis 4
bis zu 95 bis 99 die
über 100undtjährigen sind hier jetzt
gerade nicht mit drin
auf der Y-Achse habe ich die Bevölkerung
in diesem Alter von 0 bis 7 Millionen
das
heißt Frage die sich hier stellt ist wie
können wir die Visualisierung jetzt so
coden dass sie für möglichst viele
Menschen mit und ohne Behinderung auch
zugänglich ist und eine Sache von den
Sachen die ich gelernt habe und die ich
auf jeden Fall auch empfehlen würde ist
möglichst viele Alternativen auch
anbieten zu der Visualisierung das heißt
auch wenn es jetzt kein Bild ist sondern
wenn das z.B einzelne SVG Elemente sind
dass wir auf jeden Fall eine
Bildbeschreibung hinterlegen für
Menschen die ein Screen Reader benutzen
die dann sich eine grobe beschreib der
Visualisierung anhören können aber auch
zusätzlich dass wir
z.B irgendwo auf der Webseite die Daten
als Tabellenform anbieten das kann auf
der gleichen se Seite sein wo die
Visualisierung
ist oder das kann über einen Link sein
dass das auf einer Unterseite irgendwo
ist aber dass man sich die Daten auch
als Tabelle aufrufen kann das hilft z.B
wenn jemand
ähm
z.B sich die Bildbeschreibung angehört
hat mit dem Screen Reader aber einige
Details einige vielleicht interessante
Details nicht in der Bildbeschreibung
drin gewesen sind oder vielleicht auch
wenn die Person einfach überprüfen will
ist diese Bildbeschreibung noch aktuell
sind das wirklich die Daten dann kann
eben die Person die Daten in der
tabellefen und dort
nachschauen hier auch
was ichen würde wie ich es vorhin auch
schon genannt habe Daten als Download
anzubieten ähm damit Personen im
Zweifel sich die Daten selber anschauen
können ähm da kann man z.B einfach die
Daten als als CSV Datei anbieten
ähm das sollte mit möglichst vielen
verschiedenen Programmen kompatibel sein
lesbar
sein und eine weitere Sache die auch
möglich ist ähm die unter Umständen
vielleicht nicht so straightforward
umzusetzen ist aber wenn man das
hinbekommt cool ist ist eine
sonification eine sonification ist etwas
wo man die Daten nicht auf visuelle
Elemente mapt sondern auf Sound oder auf
Töne
das
heißt man könnte sich vorstellen bei
einem Balkendiagramm z.B das habe ich
z.B auch
im Rahmen meiner Masterarbeit setze das
auch in meinem Prototypen um
ähm dass dann jeder Balken im
Balkendiagramm
ähm durch einen Ton repräsentiert wird
wenn der Datenwert niedriger ist ist der
Ton niedriger wenn der Datenwert höher
ist dann ist der Ton höher und dann kann
man sich das eben anhören diese
Datenpunkte alle nacheinander weg und
das coole ist eben dass man dadurch dann
so ein Gefühl für die Form der Daten
bekommen kann über das Hören das ist
zwar nicht so exakt und es ist halt äh
muss ich dazu sagen auch jetzt nicht so
trivial in der
Umsetzung aber es ist auf jeden Fall
eine coole Option
auch hier nur als Beispiel das ist ein
Screenshot aus meinem Prototypen da habe
ich eine Überschrift also das ist quasi
aus der Sitebar von meiner
Visualisierung da gibt es die
Überschrift sonification höre dir die
Daten an mit einem play button die
Überschrift Download ladet dir die Daten
als CSV herunter und dann noch Tabelle
öffne die Daten als Tabelle und hier
habe ich noch ein Screenshot von einer
Unterseite wo ich die Daten eben als
Tabelle
darstelle dort gibt es die Überschrift
Tabelle Bevölkerung in Deutschland dann
Bevölkerung in Deutschland aufgeteilt
nach Altersgruppen jede Altersgruppe
umfasst 5 Jahre und da drunter ist eben
die Tabelle mit den Spalten Alter und
Bevölkerung in diesem Alter und oben
gibt es ein Link zurück zur
Visualisierung das ist einfach eine
Möglichkeit wie man das umsetzen
kann das sind jetzt waren jetzt alles
Ansätze wie man das
ganze wie man Alternativen quasi
anbieten kann zu dieser visuellen
Darstellung
was natürlich ideal wäre ist dass man
auch die einzelnen Elemente der
Visualisierung selbst zugänglich
macht unter anderem auch für visuelle
haben wir schon gesprochen im Design
aber hier z.B auch für Tastatur und
Screenreader Nutzer
innen da geht es dann darum dass die
einzelnen visuellen Elemente innerhalb
der
Visualisierung gänglich gemacht werden
hier habe ich als mal das Balkendiagramm
von eben mit
dersverteilung aber diesmal sieht man
einen Tooltipp bei einem der Balken wo
steht Alter 35 bis 39 Bevölkerung
5,236
Millionen wenn wir solche gerade wenn
wir solche interaktiven Elemente haben
ist es eben wichtig dass die auch
zugänglich sind das heißt dass dieser
Tooltip nicht nur erscheint wenn ich mit
der Maus darüber hoverere über den
Balken sondern dass eben diese Balken
z.B auch mit der Tastatur angetappt
werden
können und dann auch die Tooltipps
erscheinen und was wir auch machen
können ist z.B gerade wenn wir das ganze
z.B mit d3js und als SVG Elemente
generieren dass wir auch SG Elemente
gruppieren z.B alle SWG Elemente die zur
y-Achse gehören gruppieren und dem
ganzen ein Label geben für Screen
readader was eben die Y-Achse beschreibt
s dass man sich quasi durch die
einzelnen Elemente der Visualisierung
auch durchnavigieren kann mit Tastatur
und mit Screen readader und dass man
eben wenn man ein Screener benutzt dann
auch einen sinnvollen Output bekommt
wenn man z.B die Achsen oder die
einzelnen Balken
annavigiert das ist natürlich gerade bei
komplexeren und sehr interaktiven
Visualisierung gar nicht so trivial aber
das ist eben auch noch ein aktuelles
Forschungsgebiet wie man es am besten
machen
kann hier noch mal kurz als Tipp das
habe ich jetzt eben teilweise schon
erwähnt aber was wir eben machen können
dass wir den Achsen z.B Aria Labels
geben wenn wir jetzt im Web unterwegs
sind dass wir z.B die Balken antappar
machen mit Tastatur dafür kann man z.B
tabindex n0
setzen und dass wir z.B die Balken oder
andere Datenelemente Labeln mit Ara
Label oder dass wir sie z.B mit dem
Tooltip assoziieren über area labeled by
sass dann der Inhalt des Tooltipps
vorgelesen wird wenn der Balken
annavigiert
wird und eine
Sache die ich ganz wichtig fand ich das
häufiger auch gelesen hab ist
was wichtig ist ist dass vor allem
Screen readader Nutzer innen ganz klar
kommuniziert wird wenn sie sich gerade
in einer Visualisierung befinden oder
wenn eine Visualisierung gerade anfängt
es ist nämlich ein häufiges Problem dass
Screenreader NutzerInnen gar nicht
mitbekommen wenn sie gerade auf eine
Visualisierung treffen eben teilweise
weil sie entweder gar nicht barrierearm
sind weil sie gar nicht bei ihrer Armen
sind weil sie überhaupt keine
Beschreibung haben oder auch teilweise
ein ch weil dann irgendwelche swvg
Elemente vorgelesen werden irgendwelche
Texte aus dem SVG die zufälligerweise
gerade da an der Stelle im Dom sind das
heißt der Screenreader fängt dann an
irgendwie die einzelnen tickmarks von
der yachse vorzulesen die Person die den
hat überhaupt keine Ahnung was gerade
vorgelesen
wird das heißt wenn ihr wirklich
versuchen wollt das bei ihrer Arm zu
machen dann tut irgendwo ganz an den
Anfang der Visualisierung entweder
irgendeine Bildbeschreibung oder einfach
ein kurzes Label was das Ganze Element
identifiziert als Visualisierung oder
Diagramm oder was auch immer es
ist nun kurz zum
Abschluss ich habe eine Ressource die
ich euch gerne empfehlen würde das ist
nicht von mir selber sondern das ist
einfach etwas was ich gefunden habe in
Rahmen im Rahmen von meiner Recherche
und was ichel
und was ich selber sehr cool finde
und zwar ist ch ability es wurde
entwickelt von Frank elavski das ist
verfügbar unter der
Webseite
ability.fis.studio FIS mit
Fizz und das ist einfach so ein
Kriterienkatalog anhand dessen man
selber überprüfen kann ob die eigenen
Datenvisualisierung möglichst
barrierearm sind und
zwar ist es ähnlich aufgebaut wie die
webcent accessibil die Guidelines die
vielleicht manche kennen das heißt es
gibt verschiedene Kriterien ich habe
hier ganz kurz ein Beispiel auf meiner
slide es gibt z.B das Kriterium low
contrast das heißt geringer Kontrast und
da geht es eben darum dann dass man
überprüft ob alle die Farben die man
verwendet ausreichend Kontrast haben so
dass sie gut erkennbar sind das heißt
das wä jetzt meine Empfehlung wenn ihr
irgendwie mit Datenvisualisierung zu tun
habt wenn ihr welche designt wenn ihr
welche codet oder postet schaut euch das
an das chartability ich finde es ist
ziemlich cool gemacht
da ist sicher viel Arbeit reingeflossen
das basiert zum einen auf den webcent
accessibility guidelines zum anderen auf
Research und ich finde das sehr
hilfreich anhanddessen
Datenvisualisierung zu auditen auf
barrieref so viel so viel
dazu ich hoffe es war interessant für
euch ich hoffe ihr habt es mitgenommen
vielen Dank fürs zuhören wenn ihr fragen
Feedback oder Anmerkungen habt könnt ihr
mir gerne auf masterdon schreiben ich
bin anwi auf chos.social anvi und
ansonsten könnt ihr auch
gerne noch eure Fragen
stellen
cool vielleicht mal die die allererste
Frage we das weil sie auch ganz am
Anfang schon kam du hast die drei Ebenen
genannt
Bildbeschreibung also Posten das Design
und dann das Coden und beim Posten kam
schon die Frage ob diese
Bildbeschreibung die man macht ob die
eigentlich auch von Suchmaschinen
erfasst werden weißt du
das da kann ich leider nicht wirklich
was zu sagen also ich weiß dass
Bildbeschreibung sehr viel missbraucht
wurden für Search Engine Optimization
dass da eben irgendwelche Keywords z.B
geschrieben wurden von man gemeint hat
dass das dann
hilft bei dem Ranking der Suchergebnisse
ähm denke ich muss ich nicht näher sagen
das bitte macht das bitte macht das
nicht bitte schreibt ordentliche
Bildbeschreibungen und schreibt D nicht
dein Müll rein Co
aber die Suchmaschinen haben das
inzwischen glaube ich auch schon
mitkriegt und ich glaube das
funktioniert auch inzwischen gar nicht
mehr so mehr kann ich zu dem Thema
leider nicht sagen ja aber gut das ja
schon mal gut zu wissen also zumindest
hat es mal
funktioniert und Menschen haben es
direkt missbraucht was sehr unschön
ist okay ja
eine Frage oder ein Hinweis mit
kombiniert mit einer Frage der sich auf
ein bestimmtes kommerzielles Produkt
bezieht ich würde die Frage trotzdem
gerne stellen weil es einfach so weit
genutzt ist also es gibt ja bestimmte
Programme mit denen man schön Folien
machen kann und da wenn man alles
richtig einstellt werden
Bildbeschreibung sogar in das Finale PDF
überführt
m aber es gibt auch das
dazu passende
Tabellenkalkulationsprogramm das
offensichtlich immer wieder meckert wird
hier geschrieben dass man auch
Barrierefreiheit prüfen soll oder kann
und
m hast du da schon Erfahrung mit wie gut
oder sinnvoll sind diese Tools die so
eingebaut sind in kommerzielle Programme
m nee kann ich jetzt leider zu zu
solchen Programmen nicht sagen also ich
weiß es gibt auch Software wo man sich
z.B halt äh für den Webbereich ähm
Datenvisualisierung generieren kann und
ich weiß dass es da Unterschiede gibt es
gibt da manche die da wirklich gute
Ansätze haben
ähm ich weiß nicht ob ich jetzt hier
Namen nennen kann oder soll auf jeden
Fall m wenn man es googelt findet man
das auch denke ich wenn man es im
Internet sucht ähm und es gibt eben da
auch Unterschiede also ich weiß das ist
halt da das gibt es gibt einige die sehr
gut machen die sogar auch sonification
teilweise mit drin haben also die
wirklich fortschrittlich da sind und
sich wirklich Mühe geben es gibt manche
die zumindest z.B eine Datentabelle
inkludieren und es gibt manche die halt
mehr schlecht
sind das ist aber alles jetzt für den
Bereich Web weil ich muss dazu sagen ich
bin einfach ein webnererd und Web kenne
ich mich halbwegs aus und in anderen
Sachen kenne ich mich leider nicht aus
das ma nichts das trotzdem eine super
Information also ich glaube mit den
Angeboten rund um Tabellenkalkulation
muss man sich e überlegen was man damit
macht und das erstmal ausprobieren
m eine Frage die ich noch ganz
interessant finde ist ob es eigentlich
irgendwo sei jetzt auf Social Media oder
in anderen Bereichen schon die
Möglichkeit gibt
audioildbeschreibung zu machen also
nicht Text sondern gesprochenes Wort mit
audiateien und wie das dann
aussieht das weiß leider nicht
okay ja gut schade aber trotzdem das
schön ich glaub vielleicht weiß ja
jemand von den
zuschauenden eine Antwort und kann die
gerne noch posten mit dem passenden
Hashtag dann wissen wir es vielleicht
weil das ist ja schon interessant
Dinge
einzusprechen ja wobei ich auch gar
nicht so sicher bin wieder also
ähm ich muss selber dazu sagen jetzt
kurz ich bin selber jetzt
ich habe keine Behinderung aber z.B von
dem was ich weiß ähm ist es auch so dass
z.B Menschen die Screenreader benutzen
häufig die Screenreader sehr schnell
eingestellt haben dass sie dass sie den
Text sehr schnell Vorlesen das kann ich
könnte mir vorstellen wenn ich mir dann
so eine sage ich mal
durchschnittsgeschwindigkeitseingesprochene
Bildbeschreibung anhören müsste dass
mich das vielleicht sogar dann eher
nerven würde was dann nicht so schnell
geht wie wenn ich das von meinem Screen
wieder vorgelesen bekomme aber wie
gesagt Disclaimer
das ist ne eine Vermutung von
mir interessanter zum Bedenken auf jeden
Fall
mhm okay ähm du hattest jetzt ähm ganz
viele Daten vom Statistischen Bundesamt
gezeigt also Zahlen ähm mhm oder oder
Abbildung ähm gibt es bestimmte ähm
Bereiche wo du sagst oder wo besonders
viele Beispiele auftauchen
ähm wo Visualisierung nicht gut gelungen
sind also gibt es Bereiche und welche
sind es in denen man besonders
Nachholbedarf hat an Barriere am
Visualisierung im
Web ich bin nicht ganz sicher ob ich die
Frage
verstehe was was meinst du mit Bereichen
ähm na ja ist das Statistische Bundesamt
generell schlecht in Visualisierung oder
gibt es äh bestimmte Webseiten oder
bestimmte Anbieter Social Media
Plattformen die ähm da noch viel zu tun
haben oder welche anders gefragt die es
richtig gut machen also wirklich
positive Beispiele
sind okay ich möchte nur kurz einen
Disclaimer geben die Daten die ich
verwendet habe waren vom Statistischen
Bundesamt die Abbildung habe ich selber
gemacht halt eben für diese Präsentation
habe ich halt die Beispiele
gemacht deswegen
jetzt über die Qualität
Datenvisualisierung beim sttischen
Bundesamt kann ich jetzt selber auch gar
nichts sagen weil ich nur die Daten von
da hab und ich kann es leider auch gar
nicht sagen jetzt in welchen Bereichen
es z jetzt besser oder schlechter
funktioniert
bisher okay super danke dann gucke ich
gerade mal noch ob weitere
frag
re
tatsächlich
keine okay gut
dann sage ich trotzdem auf jeden Fall
ganz ganz herzlichen
Dank vielen Dank euch ich muss auch noch
mal sagen ich freue mich super dass ich
die Gelegenheit hatte dass ich hier auch
ein Teil von meiner Recherche von der
Masterarbeit präsentiere das einfach das
nicht nur irgendwie in irgendeiner
Schublade verschwindet was ich an
Recherche mache sondern ich das hier
irgendwie auch weitergeben kann und ich
beschäftige mich noch weiter damit meine
Mass jemand daser Fragen hat hat zögert
nicht zu schreiben auf
ma oder wenn ihr Tipps für mich habt
super dann ähm würde ich sagen vielen
Dank an Dich vielen Dank an euch die
hier Fragen gestellt habt und
an alle die im Hintergrund
[Musik]
arbeiten