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/2825 Danke!
den Anfang macht Annika Brinkmann Annika
Brinkmann ist Designerin für digitale
Barrierefreiheit und liebt es in HTML
und CSS technische Lösungen für
gestalterische Ideen zu finden und sie
an verschiedene Bedingungen anzupassen
sie möchte mit ihrer Arbeit sinnvoll
dazu beitragen dass Webseiten für
möglichst viele Menschen und nicht nur
versuchmaschinen und Geräte optimiert
werden
könen Responsive Webdesign stand lange
Zeit nur für die Technik Webseiten an
verschiedene Bildschirmgrößen anpassen
zu können dabei gibt es viel mehr
Möglichkeiten Webseiten nicht nur für
Geräte anzupassen sondern auch an
individuelle Bedürfnisse der Benutzerin
anzupassen Annika Bringmann stellt dazu
jetzt ihren neuen Ansatz erstmals vor
Ryan responsive individual accessibility
Leads herzlich willkommen hier beim
fechance bei meinem Talk Ryan responsive
to individual accessibility needs fangen
wir mit der digitalen Barrierefreiheit
an zunächst einmal ist natürlich immer
die Frage warum brauchen wir
barrierefreie Webseiten überhaupt die
Antwort ist in meinen Augen ganz einfach
wir brauchen Sie um Menschen zu
inkludieren die aufgrund von bestimmten
beherungen und anderen
Einschränkungen darauf angewiesen sind
denn dadurch dass sie ihre Webseiten die
Inhalte die sie konsumieren wollen
selbständig nutzen können erfahren Sie
mehr Selbstwirksamkeit und haben eine
größere Privatsphäre weniger Frust ist
damit verbunden und auch weniger
Assistenzbedarf für anbetende liegt es
für mich eigentlich auch auf der Hand
die Zielgruppe ist schlichtweg größer
sie können ein klares Statement zu
Inklusion vermitteln und sie haben
schlichtweg bessere Webseiten als wenn
sie die Barrierefreiheit
ignorieren grundsätzlich kann eine
Behinderung jeden von uns treffen so es
nicht schon geschehen L
es wird davon ausgegangen dass 10 bis
15% aller Menschen mit einer permanenten
Behinderung leben es sind allerdings nur
4% von diesen Behinderungen ab der
Geburt vorhanden das heißt 96% erwerben
die Behinderung im Laufe des Lebens das
kann durch Unfälle sein durch Krankheit
durch
altersbegleiterscheinung teilweise auch
durch genetische Anlagen die er im Laufe
des Lebens zum Vorschein
kommen wie gesagt wird gr sich davon
ausgegangen dass diese 10 bis 15% ihre
Behinderung permanent haben es gibt aber
auch Behinderungen die wie schon erwähnt
progressiv sind wo sich Sachen im Laufe
des Lebens verschlechtern schwieriger
werden wenige Behinderungen sind im
Laufe des Lebens heilbar da tut sich
zwar in der Medizin gerade ganz viel
aber wir können schlichtweg nicht drauf
warten dass in paar Jahren vielleicht
ein paar mehr Menschen geheilt werden
von Behinderung von Sachen die sie
derzeit behindern sondern wir sind
gefragt das Web zu dem zu machen was es
eigentlich sein sollte nämlich für ein
zu einem Web das für alle da ist und das
alle nutzen
können der eine oder andere von uns die
eine oder andere von uns hat sicherlich
schon mal temporär eine Behinderung
gehabt es kann sein dass man nach einer
OP eingeschränkt ist sowohl im
Bewegungsapparat als auch mit der feinen
Motorik gibs trägt oder
ähnliches oder W eine Brille hat kann
die leicht mal verlegen und muss dann
zumindest ohne Brille die Brille
wiederfinden grundsätzlich wird
unterschieden in verschiedener Arten von
Einschränkung da sind natürlich die
körperlichen Behinderung da sind aber
auch
Lernschwierigkeiten und das sind
neurodivergenzen dann gibt es noch
soziale Faktoren das kann z.B veraltete
Hardware oder sehr geringe Bandbreite
beim Download von Daten sein
dann gehören da auch die
Alterserscheinungen zu und das sind
natürlich die größte Gruppe von
progressiven ähm Einschränkungen und äh
das ist das wo wir am allerwenigsten
wissen was uns im der Zukunft selbst
noch erwarten wird grundsätzlich sind
alle diese Faktoren darauf hin ähm
ähnlich dass sie sich negativ auf die
Teilhabe am sozialen Leben auswirken und
auch an die Teilhabe am
Arbeitsmarkt wie es verschiedene
Einschränkungen gibt liegt relativ
schnell auf der Hand wir brauchen auch
verschiedene Arten von
Lösungen bei körperlichen Behinderung
kann es sein dass eine spezielle Technik
eine mundmaus eine fußmaus
und ähnliche andere technische
Hilfsmittel geeignet sind um das was
nicht gut selbst gekonnt wird zumindest
teilweise auszugleichen bei motorischen
Schwierigkeiten kann es z.B sehr
hilfreich sein wenn links gut
erleichtbar sind das heißt schon dass
sie nicht zu klein sein dürfen das heißt
dass sie nicht irgendwo ganz weit von
dem Finger entfernt sein dürfen von dem
Rand an dem man sie erreichen
kann wenn jetzt jemand blind ist dann
ist es ganz wichtig dass der Screen
readader Zusatzinformationen auf der
Webseite findet die der blinden Person
mitteilt was dem Auge entsprechend
verborgen bleibt also wenn sich z.B
irgendwo ein Pop-Up
öffnet Menschen die auf geberdensprache
angewiesen sind weil sie aufgrund ihrer
Taubheit nie die gesprochene Sprache und
eventuell auch die Schriftsprache
erlernen konnten benötigen natürlich
Informationen in
geberdensprache Menschen die aufgrund
ihrer lernschwierigkeit einen
verringerten Wortschatz und auch ein
eingeschränktes Sprachverständnis haben
benötigen Informationen in leichter
sprach neurodivergenzen wichtig ist
Reize zu reduzieren und Seiten nicht mit
viel Bewegung und Bling Bling zu
überfraagen was die sozialen Faktoren
betrifft ist es an uns Webseiten quasi
erschwinglicher zu machen was die
Alterserscheinungen betrifft da sind es
vor allem Sachen der Bedienbarkeit
natürlich gibt es auch offizielle
Beschreibung wie Barrierefreiheit im Web
definiert wird diesem slide stehen dazu
die BITV die
barriereinationstechnologieverordnung
aus Deutschland die
en301549 das ist das gleiche auf
euebene und die WCAG oder auch weack die
Webcontent accessibility guidelines des
W3C Konsortium inzwischen sind es 79
Einzelkriterien die in der WCAG genannt
sind sind die sind alle vier Prinzipien
zugeordnet es gibt noch eine zweite
Dimension auf neben den Prinzipien und
zwar die
konformitätsstufen da ist in die
Buchstaben einfach a Doppel a und
dreifach a
eingeteilt wie wichtig ist für eine
grundlegende für eine durchschnittliche
und eine erweiterte barrierefreiheit ist
dass dieses Kriterium abgedeckt wird die
B TV die derzeit in der Version 2.0
aktuell ist in Deutschland enthält 98
Einzelkriterien die von der en
301549 abgeleitet sind da sind fast alle
der 79 Kriterien aus der WCAG mit
drinnen und darüber hinaus noch ein paar
zusätzliche Kriterien die vier
Prinzipien sind perceivable
operable able und robust alle
Informationen die auf einer Webseite
sind wahrnehmbar bedienbar verständlich
und robust sein
sollen das ist natürlich so dass Sachen
die wahrnehmbar sind für die eine Person
für die andere Person vielleicht nicht
wahrnehmbar sind ich habe den Film
paraplü von Markus kempkin von 2008
neulich
wiedergefunden ich beschreibe mal für
diejenigen die es nicht sehen was in
diesem Film in diesem Kurzfilm
passiert ist die Szenerie wir sehen eine
Bushaltestelle wir sehen einen
verregneten Himmel im Hintergrund fährt
im ersten Bild ein doppeldeckerbs von
links nach rechts an dem Bushalte Schild
steht eine Person mit geöffneten
Regenschirm unter ihrem Regenschirm im
Trocknen im zweiten Bild gesellt sich
eine zweite Person ebenfalls mit
Regenschirm ebenfalls im Trocknen
dazu im dritten Bild kommt eine dritte
Person die ihren Regenschirm unterm Arm
hält wird entsprechend nass im vierten
Bild hat diese dritte Person ihren
Regenschirm aufgespannt wird nach wie
vor nass denn nun ist etwas Seltsames
passiert der Regen der zu Zeit vorher
quasi die gesamte Szene ausgemacht hat
findet nun auf einmal nur unter dem Bild
unter dem Regenschirm der dritten Person
statt die beiden anderen stehen im
Trocknen Person 1 wundert sich schließt
Regenschirm und nun passiert wieder was
seltsames Person 1 bleibt jetzt trocken
obwohl kein Regenschirm da ist aber
Person 2 wird unter ihrem Regenschirm
ebenfalls
nass im sechsten Bild hat Person 3 den
Regenschirm wieder unter den Armen
geklemmt nun werden Person 1 und 3 nass
und Person 2 geschieht das was man
erwarten würde nämlich unter ihrem
Regenschirm bleibt die Person
trocken im siebten Bild hat Person 1
wieder den Regenschirm geöffnet und
jetzt sind wir quasi wieder bei Bild 3
Person 3 trägt den Regenschirm unterm
Arm wird
nass nun ist es aber Person 2 die
testweise ihren Regenschirm schließt und
nun sind wieder die anderen beiden im
Nassen unter ihren Regenschirm und
Person 2 bleibt
trocken im neunten und letzten Bild auf
dieser Seite hat Person 2 ebenso wie
Person 1 und 3 den Regenschirm wieder
geöffnet und alle sind unter ihren
Regenschirmen im trocknen und der Regen
hat
aufgehört so in etwa fühlt es sich
manchmal an wenn man versucht eine
Webseite so barrierefrei zu machen dass
sie für alle barrierefrei ist und das
was bisher die große Kunst war und das
was bisher auch wirklich ein
Zusatznutzen von einzelnen Webseiten ist
und leider sehr sehr Rah das wird mit
der Gesetzgebung sich demnächst ändern
und zur Pflicht werden und zwar ab dem
28.62025 wenn der European accessibility
act in Kraft tritt dann regelt das
Gesetz endlich was der Markt bisher
versäumt hat es sind heute am
27.12223 noch
549 Tage
insgesamt die Wochen abziehen bleiben
393 und wenn wir Urlaubstage Krankentage
Feiertage kindkranktage etc auch noch
davon abziehen sind es nur noch 314
Arbeitstage die wir Zeit haben um so
viel wie möglich barrierefrei zu machen
und uns überhaupt erstmal einzuarbeiten
in die Materie und das ganze dann noch
umzusetzen kommen wir zu den schnellen
Lösungen ist doch alles eigentlich gar
kein Problem der Markt wird's schon
richten schließlich gibt es inzwischen
accessibility Overlay Tools zu deutsch
barrierefreiheits überlagerungswerkzeug
bei diesen accessibility Tools geht's
darum dass sie Funktionen von Webseiten
nachträglich kostengünstig barrierefrei
machen sollen das Problem ist aber
Webseiten sehen dann zwar für den Lin so
aus als ob sie barrierefrei sind aber
sie sind nicht
beii natürlich haben Overlay Tools
Vorteile und nach Teile bei Vorteilen
habe ich nur eins ausgemacht nämlich es
es einfach einzubinden meistens ist es
eine Zeile Javascript Code die dann
entsprechend nachlädt nachinstalliert
was an Funktionalität gewünscht
ist die großen Nachteile sind die dass
es eben zwar Plug ist aber nicht play
denn tatsächlich ist das nur der Versuch
einen schlechten Code mit einem
zusätzlichen Code zu verändern zu
verbessern habe ich hier geschrieben
aber oft ist es das leider nicht oft
stellen diese Tools eine zusätzliche
Barriere da es geht z.B schon damit los
dass sie nicht immer gut mit der
Tastatur erreichbar sind oder dass z.B
eine Webseite komplett mit Animationen
überfrachtet ist und man überhaupt nicht
die Geduld hat als neurodivergenter
Mensch erstmal die Stelle zu finden wo
die Animation abschaltbar ist des
Weiteren ignorieren diese Overlay Tools
sämtlich Voreinstellung manche dieser
Tools bieten einen Login an um die
eigenen Einstellungen zu speichern das
ist zwar vom Prinzip her schön aber hat
wiederum den Nachteil dass ich dann
eigentlich nur noch Seiten nutzen kann
die das gleiche Overlay Tool beinhalten
mich da jeweils wieder einloggen muss
und dann entsprechend
hoffentlich ähnlich gute Usability oder
Barrierefreiheit auf der anderen Seite
wiederfinde aber nur weil es auf der ein
Seite vielleicht funktioniert weil die
Website insgesamt schon recht
barrierefrei ist heißt das noch lange
nicht dass es auf der nächsten dann auch
funktioniert Overlay Tools sind Pflaster
auf einer Wunde die von Anfang an
vermeidbar gewesen wäre
ungefähr das ist auch was die bfit Bund
sagt die Stelle für barrierefreie
Informationstechnologie die schreibt
nämlich
dazu Overlay Tools können eine schon
vorhandene Barrierefreiheit verbessern
ausung aktuell sind Overlay Tools nicht
in der Lage einen Webauftritt der
Barrieren ausweist komplett barrierefrei
darzustellen häufig kommt es vor dass
durch den Einsatz solcher Tools weitere
Barrieren im Webauftritt entstehen die
ohne das Tool gar nicht existiert hätten
oder um noch mal auf den Film
zurückzukommen es ist in etwa so als
hätten wir was gebaut was für einige
schon zugänglich war und dann haben wir
ein Overlay Tool installiert und dann
passiert das womit paraplü endet der Bus
vom Anfang ist von rechts nach links
durchs Bild Gefahren durch eine
riesengroße schlampfürtze und hat unsere
drei Personen samt ihrer Regenschirme
von oben bis unten mit schlam gespritzt
wenn wir uns dem accessibility Burger zu
ich habe für einen Artikel mal diese
Dimension der digitalen Barrierefreiheit
als überblickgfik erstellt
inhaltstruktur und Medium Interface und
Interaktionsdesign
frontendtechnologie sowie individuell
benötigt Setup der Nutzer die
Inhaltsstruktur und das Medium die
basiert bei mir auf vier Kacheln nämlich
den Inhalt und zwar meine ich damit
sowohl den Inhalt wie auf die
verschiedenen Seiten aufgeteilt ist als
auch die Struktur innerhalb der Seite
die zweite Kachel da geht es um Sprache
und zwar in erster Linie natürlich um
verständliche Sprache und auch um
Sprache die richtig ausgezeichnet ist
die dritte Kachel sind Bilder Bilder
benötigen eine Bildbeschreibung oder
müssen explizit einen leeren altteag
haben damit Screen Reader nicht einfach
denken okay ich finde keinen alttech
dann lese ich mal den Namen der Datei
vor die vierte Kachel ist die Multimedia
Kachel die auch noch zusätzlich mit
medienredundanz unterschrieben
ist nicht jedes Medium ist für alle
Menschen gleich gut
konsumierbar am einfachsten ist
natürlich zu verstehen dass ein Podcast
z.B für eine Taube Person nicht
zugänglich ist weil sie den Podcast
nicht hören kann auf der zweiten
dimensionsebene habe ich das
Design und da steht schon so ein kleiner
Hinweis auf den weiteren Verlauf dieses
talks drin nämlich variables aussehen da
kommen wir später noch ausreichend
zu die mittlere Kachel ist Usability die
offizielle Definition von Usability ist
dass es effizient effektiv und
zufriedenstellend möglich sein muss das
eigene Ziel mit dieser Webseite zu
erreichen ihr könnt euch vorstellen wenn
ich
eine Behinderung habe die bedeutet dass
ich z.B nur mit der Tastatur navigieren
kann und ich sehe nicht als seende
Person wo sich gerade der Fokus befindet
oder ich sehe da soll ein Link sein aber
ich komme mit der Tastatur nicht dran
dann kann ich natürlich effizient da gar
nichts machen es geht überhaupt nicht
schnell und und ich kann effektiv auch
gar nichts machen also es geht überhaupt
nicht dass ich diese Seite bediene und
entsprechend ist der dritte Punkt die
Zufriedenstellung für mich in sehr sehr
weiter Ferne das heißt jeder Usibility
Test der nur mit Menschen durchgeführt
wird die
alle in Anführungszeichen normalen
Fähigkeiten mitbringen ist eigentlich
nie aussagekräftigt weil er immer 10 bis
15% mindestens ausschließt die dritte
kache hier in Interface und
Interaktionsdesign ist die
Funktionalität da geht es darum wie
können Eingaben vorgenommen werden z.B
in Formularen und wie wird sowas
ausgegeben hat natürlich alles viel mit
Javascript zu tun JavaScript finden wir
in der dritten Ebene der der
frontendtechnologie ich habe jetzt
sämtliche Frameworks etc außen
vorgelassen und meine hier tatsächlich
primär die rohformen H ml spreche ich
von HTML5 und dem was da state of the
art ist alle alteren Derivate würde ich
nicht mehr nutzen und ich spreche bei
CSS von CSS
2.2 und das steuert die
Darstellung die vierte Dimension ist das
individuell benötigte Setup der Nutzer
inen natürlich kann eine Website immer
nur im Browser dargestellt werden
dieser Browser ist auf einer bestimmten
Hardware die wiederum mit einem
bestimmten Betriebssystem ausgestattet
ist und nun kann dieser Hardware
Standard Hardware sein es kann aber auch
eine spezielle Hardware sein und so ist
es z.B so dass für die Ausgabe für die
meisten Menschen der Bildschirm relevant
ist aber für blinde Menschen z.B ist es
eher der Audioausgang oder auch die
brailzeile der anderen Seite habe ich
extra Hardware für die Eingabemethoden
standardradwer natürlich auch das kann
sein dass der Finger wie erwartet bei
dem Touchdisplay zum Einsatz kommt die
Maus wie erwartet wahrscheinlich auf
einem desktopcuter oder vielleicht auch
zusätzlich zum Trackpad auf einem
Laptop das ist aber nicht so dass wir da
immer von ausgehen können denn es ist
auch möglich z.B Mäuse die mit dem Mund
bedient werden entweder durch z.B
reinpusten oder durch
Lippenbewegung z.B an das Smartphone
anzuschließen und dann haben wir auf dem
Smartphone nicht die Möglichkeit zu
swipen wir haben nicht die Möglichkeit
zu pinschen reinzuoomen rauszuoomen etc
sondern wir haben lediglich die
Möglichkeit zu klicken der letzte Punkt
hier unten ist Zusatzsoftware nehmen den
Einstellungen die ich im Betriebssystem
vornehmen kann oder auch im
Browser habe ich auch die Möglichkeit
z.B mit einer zusätzlichen Software den
Zoom stark zu steuern oder ich habe die
Möglichkeit mit dieser Software auch z.B
die Eingabe der
Sprache zu
vorzunehmen ich habe das noch mal anders
dargestellt und zwar einfach in vier
verschiedenen Schichten und Seiten
darstellen zu können sind nämlich
verschiedene technische Schichten nötig
um überhaupt was anzeigen zu können im
Frontend ganz unten schon erwähnt ist
die Hardware ohne ein Gerät auf dem ich
es anschauen kann kann ich nicht
anschauen die Hardware hat das
Betriebssystem installiert und im
Betriebssystem wiederum ist ein Browser
oder mehrere verschiedene Browser
installiert und das ist z.B teilweise
unabhängig voneinander wenn ich einen
Screen Reader nutze der z.B auf dem
Betriebssystem von Apple läuft das ist
VoiceOver bin ich drauf angewiesen den
Safari zu nutzen als Browser denn mit
allen anderen Browsern funktioniert
VoiceOver nicht
zuverlässig die vierte Ebene ganz oben
das ist die Ebene der Webseite selber da
habe ich HTML also Hypertext Markup
Language für die Struktur ich habe by
Aria by Aria enthält die Screen readader
Infos die ich extra hinzufügen sollte
nicht allzu viele aber ein paar sind
elementar wichtig das nächste was ich
brauche ist CSS um die Anzeige der
Webseite gestalten zu können und
Javascript für die
Funktionalität und weil es sich durchaus
bewährt hat Sachen mal unterschiedlich
darzustellen weil alle mit
unterschiedlichen Darstellungen
unterschiedlich gut arbeiten können um
ihre mentalen Modelle besser matchen zu
können habe ich noch eine dritte auf der
linken Seite habe ich einen großen
gelben Kreis mit schwarzen nicht ganz
runden Punkten die zufällig drauf
angeordnet sind um diesen schwarzen
Kreis herum ist zunächst eine schwarze
outline und dann noch mal eine lilane
das ist der accessibility Burger um den
es hier in dem Kapitel geht und zwar von
oben
ich möchte damit darauf hinaus dass
Barrierefreiheit eine Perspektive ist
oder eine Frage der Perspektive wenn du
mich immer nur von einer Seite ausschaut
der verpasst alle anderen
Blickwinkel weit verbreitet aber ist ein
anderes Thema von der Seite aus ist der
Burger schon viel besser als solches zu
erkennen das ist der accessibility
Burger zwar habe ich die Theorie dass
barrierefreie Webseiten wie ein Burger
sind sie bestehen aus mehrere Schicht
und manche konsumieren den Burger wie im
Menü beschrieben und andere haben aber
extra Wünsche ganz wichtig ist dass wir
verschieden liefern können noch einmal
zurück zum Modell von vorher mit den
Ebenen
übereinander wir können nämlich
tatsächlich
einige Aspekte aus diesen Schichten der
Hardware den Betriebssystem und den
Browser mit in unsere Webseiten
integrieren bei und Betriebssystem sind
vor allem die Einstellungen die nutzende
machen können und bei der Hardware sind
es natürlich ganz klar die
Besonderheiten die wir einfach
vorfinden wie machen wir
das wir machen eigentlich alles außer
die Struktur mit CSS auf dem Browser
können wir damit reagieren dass wir
bestimmte CSS Einheiten nutzen das sind
gar nicht viele aber müssen zwei drei
Sachen ordentlich aufeinander abgestimmt
werden für das Betriebssystem haben wir
die User preference
Features ich noch näher vorstellen werde
und für die Hardware haben wir die Media
Queries Media Queries da war doch was
kommen wir zum Responsive Webdesign denn
das Responsive Webdesign das nutzt die
Media Queries bereits eine ganze Weile
und zwar dazu dass Webseiten auf
verschiedene große Displays angepasst
werden kurzer Blick in die Geschichte
wie es denn vor Media quies war oder in
Jahreszahlen vor 2010 und zwar mit dem
mobilen Web damals war es so dass die
verschiedenen Geräte sehr
unterschiedlich große Displays hatten
sehr unterschiedliche htmlvsionen
unterstützt hatten jedes dieser Geräte
hat seit jeher ist auch heute noch so
einen individuellen Useragent oder ein
Useragent Profil
m das bei der Anfrage einer Webseite an
den Server verschickt wird vor 2010 gab
es Firmen die angeboten haben diesen
User Agent
auszulesen und anhand einer device
Datenbank zu gucken welches Gerät es ist
welche Bildschirmgröße pauserversion
htmlvsion und 200 anderen Parameter bei
dem Gerät unterstützt wird im
Browser und dann wenn das richtige Gerät
in der Datenbank gefunden wurde dann
wurde das was zuvor in einer eigenen
Markup Language als Webseite hinterlegt
wurde zu dem jeweiligen chtml XHTML
ihtml Derivat
kompiliert das dann
entsprechend an das Gerät ausgeliefert
wurde manchem wird jetzt sich
wahrscheinlich Widerstand gegen das Wort
kompilieren
ja ergeben haben richtig kompiliert war
es nicht aber es wurde
umgeschrieben
2010 also und zwar am 25 Mai ist dazu
der Artikel von Eon marcott erschienen
der diesen Ansatz Responsive Webdesign
kurz RWD oder
RWD getauft hat und in dem beschreibt
der dass sich Webseiten eben an die
Breite anpassen sollten der Grund dafür
war unter anderem dass ein solches
Hosting wie ich eben gezeigt habe gute
300 € im Monat Minimum verschlungen hat
es gab keine einheitliche URL es gab
doppelte contentpflege es war ein
riesengroßer extraauwand und
dementsprechend auch ein Grund weshalb
das mobile Web eine Weile gebraucht hat
um sich durchzusetzen weil es war
einfach sehr TEU und wo nichts ist kann
auch kein Nutzer irgendwas finden und
hat auch entsprechend keinen
Bedarf dafür habe ich ein showbild und
zwar sehen wir hier eine
HTML Seite schematisch dargestellt und
die ist verknüpft mit einer CSS Datei
und von dieser CSS Datei aus gehen pile
zu verschiedenen großen
Geräten und das ist das was sozusagen
auch die Breakpoints ausmacht das heißt
es wird vorher festgelegt oder im Laufe
der Entwicklung festgelegt bei welcher
Bildschirmgröße welche cssreel geändert
wird ja und das was eben 2010
beschrieben wurde als Responsive
Webdesign also quasi
als aktuelle state of the art Technik
mit der Webseiten umzusetzen sind ist
auch in die bere freiheitskriterien
eingeflossen darin heißt es dass Inhalte
bei Breiten zwischen 320 und 1280 Pixeln
konsumierbar sein müssen ohne das
horizontal gescrollt werden muss kommen
wir zu Ryan denn Ryan soll mit den ja
Widrigkeiten des Lebens ein kleines
bisschen aufräumen und die Welt besser
machen ry steht wie schon im Titel des
Vortrags zu erkennen ist für responsive
individ accessibility needs habe das
ganze auch mal auf Deutsch versucht mit
einem Namen zu versehen da habe ich
übersetzt reagiert auf individuelle
zugänglichkeitsbedürfnisse habe es
abgekürzt
Reiz bevor ich in die Details von Ryan
gehe möchte ich erstmal zeigen wie eine
Webseite die mit Ryan umgesetzt wird
aussehen kann vorab eine gut gemachte
barrierefrei Webseite muss mit nichten
aussehen als wre sie barrierefrei sie
sieht normal aus ich habe hier
schematisch dargestellt einen Header der
wieder den Farbverlauf von türkis nach
lila in relativ hell
enthält da steht company name und claim
Beschreibung der Company der Firma ich
habe ein Klappmenü mit dem ich ein Menü
öffnen kann da ist auch kein Burger Icon
sondern explizit sieht eben steht dort
Menü öffnen denn auch wenn das Burger
Icon für viele funktioniert komplett
barrierefrei ist es z.B nicht unter dem
Header befindet sich eine Headline eine
Überschrift 1 dann folgt ein Text mit
einem relativ hohen Zeilenabstand der
Text ist in dunkelgrau gesetzt die
Headline in einem
Blauton ein Teil des Textes ist
selektiert er ist dafür mit einem hellen
Lilaton der sich auch schon im Header
wiederfindet
hinterlegt dann kommt eine
unstrukturierte eine unordered List wo
sich mehrere Links befinden und zwar ein
Link um ein PDF
herunterzuladen bzw ein Link auf ein PDF
mit
hover und dann kommt noch ein externer
Link der schon besucht wurde
ganz unten der letzte Link der hat
derzeit ein Fokus und ist entsprechend
mit einer outline versehen die ich hier
für dieses Design gepunktet
habe darunter folgen zwei klappmenüs und
zwar einmal im normalen Status da ist es
bei mir blau geraten in dem Design und
wenn ich mit der Maus drüber bin ist es
in dem hellen lila darunter kommt noch
eine Box die zwar wesentlich dunkler ist
als der Seitenhintergrund der hier weiß
ist auf der allerdings die dunkle
Schrift nach wie vor gut lesbar ist die
Box hat
kleines CSS Gimick das sieht so ein
bisschen aus als wäre unten rechts eine
Ecke umgeklappt wie so ein kleines
Eselsohr was man von Papier
kennt ja so sieht eine normale Webseite
aus und so sieht sie auch normal aus was
ist der Unterschied wer es gesehen hat
wird
feststellen hier ist die Schrift heller
be dieser Version ist die Schrift
dunkler und hat einen höheren Kontrast
zum
Hintergrund die Seite sieht aber auch
normal aus wenn sie so aussieht jetzt
sind die Schriften die nicht verlinkkt
sind alle schwarz die selektierte
Schrift hat eine dunkellila Hinterlegung
und weiße Schrift von unserem
Farbverlauf ist überhaupt nichts mehr zu
sehen dafür hat das Logo was hier
exemplarisch einfach nur als türkiser
Punkt mit dunkler outline dargestellt
wurde nach wie vor die gleiche
Farbe sämtliche Links und auch die Icons
zu den Links sind blau alle im gleichen
blau der Header hat jetzt eine Linie
nach unten um ihn vom Rest visuell
abzuheben und die klappmenüs haben eine
outline auch die SP speelle Box mit den
sonnerinformationen hat eine outline und
diese
abgeknickte Ecke das Esels Ohr ist
verschwunden die Seite sieht aber auch
normal aus wenn sie so dargestellt wird
jetzt haben wir nach wie vor das was wir
eben hatten dass alle Links die gleiche
Farbe haben lediglich das was den Fokus
hat hat die gleiche Farbe wie die
Selektion
jetzt ist allerdings die
Hintergrundfarbe schwarz und die
Schriftfarbe
weiß und Links werden in knallgelb
dargestellt die Website ist mit Ryan
aber auch so normal
dargestellt haben wir nach wie vor eine
dunkle Hintergrundfarbe aber ein sehr
sehr dunkles bla lila wir haben
eine Headline wieder in blau aber in
einem sehr hellen Blau der Fließtext ist
weiß genau wie der Name der Firma und
der Claim darunter genauso wie die
Schrift im Menü öffnen und wir haben
jetzt wieder unterschiedliche Farben für
den Link der ein hover hat für den der
normal ist ohne hover für den der schon
besucht ist und auch hier haben wir
wieder eine
fokusfarbe wir haben jetzt einen
Farbverlauf im Hintergrund links grün
und rechts lila aber das wesentlich
dunkler so dunkel das weiße Schrift gut
darauf zu lesen ist
und unsere spezielle Box hat wieder ihr
Eselsohr allerdings ist sie diesmal
dunkellila und das Esels Ohr ist
hellblau die Webseite mit Ryan sieht
aber auch so normal aus was hat sich
jetzt geändert jetzt ist ein
klitzekleines bisschen die Textfarbe
wieder anders der Text ist nicht mehr
rein weiß sondern in einem hellen
Grauton so kann es auch sein in einem
etwas dunkleren Grauton und mit etwas
zurückgenommenen
hinterlegungsfarbung bei dem Klappmenü
und der speziellen Box das heißt hier
ist vom Header einmal abgesehen auch um
den Kontrast zu zeigen wesentlich
geringerer Kontrast auf der
Seite es kann aber auch sein dass unsere
Website ganz normal aussieht wenn sie so
aussieht und jetzt ist alles nur noch
schwarz-weiß bzw nicht schwarz-weiß
sondern in
Graustufen denn es ist natürlich möglich
dass eine Person unsere Website auf
ihrem eReader oder ihrem eBook anschaut
und dort entsprechend gar kein
Farbdisplay vorhanden ist auch das ist
übrigens ein Case für den es sehr gut
ist wenn eine Webseite recht wenig bites
hat geladen werden muss müssen sondern
sehr schlank und schnell ist das wäre
jetzt die Variante wenn ein dark Mode
eingestellt ist mit dem light Mode sieht
entsprechend so aus das heißt alles was
ich vorher an Farben hatte um das Auge
zu lenken Set plötzlich weg jetzt sehen
wir auf einmal nicht mehr
unten die sonderbox mit dem Eselsohr
sondern die Abstände zwischen den Links
haben sich vergrößert und auch die
klickflächen für das Klappmenü sind
größer geworden jetzt ist auf einmal die
Schrift riesig groß die vom flieex und
vom her noch größer als die vom Menü
öffnen und von companyn und abgesehen
davon dass die ersten drei Wörter vom
Fließtext zu sehen sind ist alles was
vorher noch an Inhalt da war nicht mehr
zu
sehen umgekehrt kann die Website auch so
ganz normal aussehen nämlich mit sehr
sehr kleiner Schrift die Icons die bei
den Links noch unterstützen sollen um
darzustellen hier geht's zu ein
Dokument hier geht's zu einem Download
hier geht's zu einem externen Link die
sind alle mitgeschrumpft einmal zurück
zu der Metapher mit dem accessibility
Burger hTML ist in diesem Konstrukt
sozusagen die Karte die Menükarte die
ganz grundsätzlich sagt hier gibt's ein
Burger und das CSS das ist für die
Sonderwünsche zuständig wie genau denn
dieser Burger
daherkommt so diese Grafik kennen wir
schon das ist noch mal der accessibility
Burger den ich eben schon gezeigt habe
denn jetzt im nächsten Schritt möchte
ich auf die einzelnen Möglichkeiten und
Notwendigkeiten eingehen und zwar das
auf die csseinheiten die User
preferences und die Media
Queries zur Funktionsweise der Media
Queries da ist es so dass zunächst
erstmal generell im CSS Dokument
beschrieben wird denn CSS ist eine reine
Beschreibungssprache dass z.B der Body
einen weißen Hintergrund haben
soll dann kommt die Änderung für ein
bestimmtes mediaquery die Syntax ist @
Media Klammer auf
mediaquery doppelpkt
value Beispiel wenn ich jetzt ähm nicht
unbedingt das Media Query sondern
eigentlich ist das User preference
Feature
Media prefers color sheem doel dark dort
stehen habe das heißt die Person
bevorzugt einen dunklen Hintergrund dann
könnte ich im Body notieren dass der
Background schwarz sein soll schauen wir
uns die Media Queries jetzt mal näher an
grundsätzlich gibt es da nämlich viel
mehr als derzeit im responsiven
Webdesign verwendet wird das zuerst
genannte Viewport Charakteristikum ist
die WIS der Breite des Bildschirms
basiert ganz viel das Responsive
Webdesign darum ist es hier nicht nur
Geld hinterlegt sondern auch noch mit
einer outline
dargestellt das zweite ist die Höhe
Nummer 4 3 ist das aspect ratio da
geht's um das Seitenverhältnis also wie
Breite und Höhe zueinander stehen
gängigstees bekanntestes ist 16 Z9 was
ein Seitenverhältnis von Videos
beschreibt das vierte ist die
orientation die Ausrichtung des
Bildschirms dann gibt es
vier VIP Charakteristiken mit denen ich
noch gar nicht gearbeitet habe nämlich
overflow Block und overflow inline da
geht's darum ob am Ende einer Seite
sozusagen wenn man gescollt hat ob dann
ein nächste Seite geblättert wird oder
entsprechend es einfach weiter scollt
wie es im Web der Fall ist dann die
siebte Variante ist der horizontal
Viewport Segment und vertical Viewport
Segments da geht's darum dass bestimmte
Geräte
mehrere Bildschirme nebeneinander haben
können die entweder zusammen oder
getrennt voneinander betrachtet werden
könen und und das letzte der Viewport
Charakteristika ist display mode das
habe ich hier in hellblau hinterlegt und
nicht in gelb wie die anderen weil es
hier seltener zum Einsatz kommt und auch
leider nicht so einsetzbar ist wie ich
es mir wünschen würde schauen wir noch
mal an mit der Breite das kennen wir
schon das Bild nämlich dass sich die
Webseite an die Breite des Fensters vom
Browser anpasst hier steht ganz deutlich
noch Ausrufezeichen gleich Bildschirm es
ist nämlich genauso dass es eben nicht
die Bildschirmbreite ist das gab es eine
Zeit lang auch das ist allerdings
relativ schnell entfernt worden es ist
also nicht mehr möglich festzustellen
wie groß der Bildschirm insgesamt ist
sondern nur wie groß auf dem Bildschirm
der Browser ist bei der Höhe ist es so
dass wir sie auch abfragen können und da
ist es mir in erster Linie wichtig drauf
hinzuweisen wenn z.B der headder und und
der fter
in der einen
Bildschirmgröße fixiert wird dann ist es
sinnvoll zu sagen ab welcher Mindesthöhe
das der Fall sein soll denn wenn ich
einen Header und Footer mobil beide
fixiere verschwende ich sehr viel von
meinem real estate von meinem
tatsächlich verfügbaren Platz auf dem
Bildschirm es ist also sehr wichtig dass
ich das im Idealfall
ähm sage dass es erst ab einer gewissen
Höhe überhaupt der Fall sein soll
manchmal kann es reichen das an die
Breite zu binden aber da muss man da
noch ein bisschen tiefer einsteigen und
ganz besonders wichtig ist es dass zu
berücksichtigen dass auf
formularseiten mobil Header und foter
nicht fixiert werden denn sonst kann es
je nach Betriebssystem sein dass ich vom
Formular nichts mehr sehe wenn ich es
ein ausfüllen möchte weil dann die die
Tastatur Header und Footer so
zusammenzieht dass das Eingabefeld nicht
mehr zugänglich ist schon erwähnt
orientation portrait and landscape kann
ich auch nutzen und da ist tatsächlich
noch mal der Hinweis es sind oft nur
wenige kleine Änderung die vorgenommen
werden müssen aber es kann sich sehr
lohnen eine Website auch noch mal im
Querformat mobil zu betrachten und zwei
drei kleine Änderungen vorzunehmen die
dazu führen dass Menschen die zum Z ihr
Smartphone im Querformat an ihrem Bett
oder auch an ihrem Rollstuhl befestigt
haben es auch im Querformat optimal
nutzen können display mode habe ich
schon erwähnt ist nicht so toll
einsetzbar wie ich es gerne hätte der
display mode Browser sagt dass ist jetzt
im Browser und ich habe die volle
bedienmöglichkeit des Browsers zur
Verfügung das geht grundsätzlich nur auf
Desktop Geräten das hat auch damit zu
tun dass mobile Geräte die natürlich
Apps haben so ein bisschen anfälliger
sind für fishing was das betrifft denn
wenn ich ähm Abfrage oder wenn ich sogar
auch so einrichte dass eine Webseite im
Fullscreen geöffnet wird dann kann ich
nämlich ähm die Bedienelemente von einem
von einer App nachbauen und kann im
Browser so tun als wäre ich diese eine
Banking App und könnte so entsprechend
die Daten ähm von den
Menschen speichern und missbrauchen auf
Desktop Computern ist es in manchen
Browsern so dass wenn ich es in den
Fullscreen Stelle speziell im Chrome und
Firefox dann verschwinden die vor und
Zurückbutton und dann verschwindet auch
meine
URL Leiste die Adresszeile in anderen
Browsern in den ich getestet habe waren
die nach wie vor
sichtbar auf der einen Seite ganz schön
dass Sie da verschwinden auf der anderen
Seite ist natürlich also ich kann es
dann wie z.B meine Bibliothek machen
dass ich die
bibliothekswebseite
Fullscreen zur Verfügung stelle in den
Bibliotheksräumen und die Menschen
können dann diese Webseite nutzen um das
Bibliotheksverzeichnis zu durchsuchen
können aber nicht nach Herzenslust durch
die gegenurfen und was dazu führen
könnte dass die nächste Person z.B die
Webseite nicht wiederf
nun ist es aber so dass wenn ich den vor
und rück oder vor allem den Zurückbutton
nicht habe wä es durchaus schön und
sinnvoll zu sagen okay ich ersetze den
jetzt in meinem Interface ich bringe den
damit rein löse das mit Javascript
history back und biete das immer an das
wäre durchaus ein Einsatzszenario was
man sich hier anschauen kann rein
theoretisch gibt's dafür noch ein
anderes Media Query gehe ich später noch
mal drauf ein aber das ist leider gar
nicht umgesetzt
worden die nächste Kategorie ist die
Bildschirmqualität die Spielen nicht so
eine große Rolle ich fange mal hinten an
die
fünfte der fünfte Eintrag den es da gibt
ist das environment blending das ist
theoretisch dafür gedacht wenn z.B
Headup Displays sogenannte Hoods in
Autos mit einem er versehen wären was
sie nicht sind aus
Sicherheitsgründen könnte hier
eingestellt werden ob schwarz
transparent sein soll oder
weiß außerdem gibt es noch die
Möglichkeit darauf einzugehen ob ein
Display generell das einmal geränderte
aktualisieren also updaten
kann der dritte Punkt der hier ist ist
das Grid Grid steht für Raster es gab
früher Handys d zßen sie noch Handys und
nicht Smartphones 2004 hatte ich ein
solches Gerät in der Hand da war ein
Raster auf dem Display allem zugrunde
liegend es war nur möglich alle 14
Punkte überhaupt ein Element zu
platzieren das heißt eine Trennlinie
dort reinzulegen hat aus zusätzlich dazu
geführt dass ich eine komplette
Leerzeile hatte bevor ich z.B ein Bild
platzieren konnte das ist sehr sehr
outdated
ich habe danach nie wieder ein Gerät mit
einem solchen Profil in die Finger
gekriegt Scan habe ich ja auch
durchgestrichen und zwar ist das
letztlich eigentlich die Unterscheidung
zwischen der Technologie die Fernseher
verwenden dass sie Zeile für Zeile das
Bild
aufbauen auch das ist auf den
computerdisplays nicht mehr relevant und
soweit ich weiß inzwischen auch bei den
digitalen Fernsehern nicht mehr was aber
hier wirklich spannend ist ist ist noch
mal die Resolution die
Auflösung und zwar kann ich da CSS
darauf hin ähm einbinden und verändern
wie groß die Seite letztlich gesunkt ist
wenn ich z.B weiß wie breit ähm das
Browserfenster ist und ähm dann kann ich
natürlich das ganze schon responsiv
machen und wenn ich jetzt aber weiß die
Person hat eine recht hohe dieice Pixel
ratio ähm das beschreibt wie viele
Pixel vom Gerät ein CSS Pixel sind dann
habe ich hier eine Möglichkeit zu sagen
okay das sind zwar nur im linken
Beispiel
288 CSS Pixel aber es ist eine sehr hohe
device Pixel Ratio von 10 dann kann ich
rausfinden letztlich ob die Person auf
einem großen Display served mit einer
hohen device Pixel ratio oder wenn es
umgekehrt ist wenn die
m CS wenn sehr viele CSS Pixel gibt hier
in Beispiel rechts wenn ich auf meinem
1440 x 900 Pixel Monitor entsprechend
die Seite sehr sehr klein gemacht habe
nur auf ein Viertel der normalen Größe
hat mein Monitor nämlich
5760 Pixel aber eine device Pixel ratio
0.5 das heißt damit kann ich auch sehr
schön spielen gucken dass ich bestimmte
Anpassungen
vornehme der nächste Punkt sind die
Color Media
featur da geht es um die
Farbmenge da könnte ich sagen dass z.B
Bilder anders dargestellt werden soll
wenn ich nur zwei oder drei B pro
Farbkanal zur Verfügung habe inzwischen
ist diese Geräteklasse doch relativ
selten wobei der ein oder andere
screenreer der jetzt Farbe abdeckt
derzeit auch einem ähnlichen Stand ist
letztlich wiederholt sich da immer noch
mal so einiges von
früher s dass man auch vor vielen Jahren
Gelerntes Handwerkszeug dort noch mal
aus der Tasche holen weil sie allerdings
wirklich sehr lange nicht en habe ist
was in dem zweiten Punkt hier ist
nämlich color
Index das nämlich wirklich bestimmte
Geräte nur z.B
256 Farben zur Verfügung kamen das war
früher auf alten Windows Geräten so da
haben wir Gifs z.B für
Webfarben
abgespeichert das sah dann teilweise
schon sehr strange aus und
wer sich dran erinnert als oder generell
diese gesamte Disziplin der animierten
Gifs da sieht man das manchmal noch dass
die Farben sehr eigenartig sind und eben
gedissert sind das heißt nichts anderes
als sie sind sozusagen so verschränkt
worden miteinander ausgetauscht und
durcheinander gewürfelt dass insgesamt
eine andere farbanmutung
entsteht den dritten Punkt finde ich
wichtig und spannend wie gesagt das sind
die monochrom Displays bei kalagamut
geht es darum dass Displays
unterschiedliche Gradationskurven haben
können das wird sehr sehr speziell und
das ist ein Feld was ich
um das ich selbst einen großen Bogen
mache denn so genau ist meine
Farbwahrnehmung gar nicht um Bilder für
solche Fälle explizit anpassen zu
können der nächste Punkt ist dynamic
range da geht es darum dass Bildschirme
quasi einen durchschnittlichen guten
Farbumfang und Kontrastumfang und
Helligkeit haben können es gibt aber
auch Geräte die das alles noch mal in
extra brilant und hochkontrast und sehr
bunt haben können diese Geräte kann man
damit
Abfangen der letzte Punkt inverted
colors da ist schon links zu sehen da
habe ich von monochrom und dynamic range
mal geschaut laut der Webseite
kenuse.com
sind die in Deutschland sehr gut
unterstützt nämlich mit 95 bzw
98% der Browser die hier zum Einsatz
kommen inverted colors ist hingegen nur
bei
20,5% Unterstützung das liegt daran dass
es nur von Safari generell unterstützt
wird wenn ich
jetzt Unterscheidung machen möchte
zwischen monochrom schwarz-weiß Displays
und
Farbdisplays kann ich das auf CSS Ebene
machen indem ich sage wenn ein
Bildschirm monochrom
ist dann hat er 256 Graustufen und dann
kann ich farbenformen etc im CSS dafür
anpassen monochrom 0 wäre entsprechend
ein Farbdisplay ohne dass ich mehr über
diese Farben die das Display kann
Bescheid
weiß ich habe auf der linken Seite einen
Bogen
Farbverlauf schräg dargestellt der ist
sehr sehr
quietschebunt und rechts daneben sehen
wir dass monochrom davon eigentlich nur
noch sehr wenige Graustufen Grautöne
überhaupt übrig bleiben ich habe
tatsächlich nach einem Gerät oder nach
einer Software geschaut mit der ich das
was auf den Bildschirm tatsächlich zu
sehen ist nämlich dass teilweise diese
Graustufen auch bei Farbverläufen z.B zu
Brüchen führen dass auf einmal so
Farbsprünge sind und es gar nicht so
musser Farbverlauf ist sondern eben mehr
so blöckchenweise aber tatsächlich wurde
das in meiner Software gar nicht mehr
unterstützt darum ist das hier nicht
ganz 100%
reliable sieht nicht ganz genauso aus
wie auf einem solchen
Gerät auf diesem Screen sind noch
weitere Sachen zu sehen zum einen habe
ich da eben noch mal erwähnt Bilder
würde ich in Graustufen anbieten extra
für solche Geräte mit einem diser denn
der diser also nicht disern ist das was
meine Software gar nicht mehr kann wie
gesagt der diser der wirbelt wirbelt
nach verschiedenen Mustern diese
verschiedenen Farben die zur Verfügung
gestellt werden durch den Export
durcheinander und erzeugt letztlich
ähm visuell bessere Ergebnisse was aber
hier auch noch zu sehen ist ist dass ich
links ähm eine Ampel abgebildet habe
bzw drei Kreise und drei Quadrate die
jeweils oben rot in der Mitte gelb und
unten grün sind auf der rechten Seite
sehen wir das daavon in Schwarz-Weiß nur
noch sehr dunkel relativ hell und
mitteldunkel übrig bleiben das heißt
wenn ich nur diese Graustufen habe und
wahrscheinlich gerade nur einen dieser
Werte sehe dann weiß ich überhaupt nicht
ist es jetzt rot gelb oder grün und das
hat gar nichts damit zu tun ob ich
selbst eine Farbsehschwäche habe oder
nicht es ist also immer besser wenn
generell Farben eingesetzt werden sollen
um
einen Status wieder zugeben rot äh wie
Achtung oder error gelb wie oh oh und
grün wie hey alles gut bitte kombiniert
das immer mit der Form immer mit einer
zusätzlichen
informationssebene hier habe ich das
Dreieck für Rot gewählt das kennen wir
von
Straßenschildern die entsprechend warnen
achtung da vorne ist die Vorfahrt
geändert z.B das Gelb gut das kommt ja
gedreht als Raute auf einer vor
fahrtsstraße zum Einsatz und grün dann
entsprechend als Kreis als hier
äh ist alles okay
ähm natürlich ist das nur für Menschen
die überhaupt sehen können ähm aber eben
z.B nicht die Farben äh ganz wichtig ist
noch zu ergänzen dass
ein solcher Status natürlich auch für
Screen Reader nutzende vorgelesen werden
muss da gibt's verschiedene Methoden das
einzubinden gibt nur leider wie so oft
nicht nur die eine die für alle
verschiedenen Varianten
zählt noch mal den Bildschirm von
vorhin hier das wäre unser Beispiel
Design für
monochrom light Mode und für monochrom
dark Mode jetzt ist hier natürlich auch
einfach generell zu gucken vielleicht es
sich zu sagen wenn ich ein
Monochromdisplay habe dass ich die
Farben dahinter doch noch mal ein
bisschen schärfen muss aber auch hier
kann natürlich zusätzlich sein dass die
Person die dieses Display nutzt
vielleicht mehr oder weniger Kontrast
haben
möchte wie gesagt dynamic range
beschreibt etwas was generell mehr
Kontrast mehr Farbumfang anbietet als
andere Displays da kann es sinnvoll V
sein zu überlegen ob man das generelle
Kontrastverhältnis was schwarz auf weiß
normalerweise mit 21 Z1 hat noch mal
etwas runter regelt
aber natürlich nur wenn die Person auch
prefers contrast less eingeschaltet hat
denn es kann natürlich sein dass es
nicht nur quasi aus Gründen der guck mal
wie toll mein Display ist gewählt worden
ist sondern es kann natürlich auch sein
dass alle anderen Kontraste alle anderen
Smartphones zu wenig Kontrast
aufgeboten haben damit es für die Person
gut lesbar ist an der Stelle rechts habe
ich noch mal das Minimum für Level
dreifach a genannt das wäre ein
Kontrastverhältnis von 7 Z1 und für
Doppel a würde eigentlich das ist hier
der gleiche Grauton allerdings eben auf
dem hellblau und nicht auf weiß
platziert ein Kontrastverhältnis von 3
zu ein ausreichen wenn die Schrift
größer als 18 Pixel Punkt bzw 24 Pixel
ist da möchte ich allerdings schon mal
daruf hinweisen dass wir natürlich die
Schriftgröße auch variabel nutzen
sollten weil nicht für jede Person die
Schriftgröße 24 Pixel gut lesbar ist das
ist auch der Grund neben
der Geschichte dass letztlich gerade die
Smartphone Displays oft runterreuliert
werden um Akku zu sparen und auch immer
in sehr unterschiedlichen Kontexten
eingesetzt werden oder in sehr
unterschiedlichen Umgebungen verwendet
werden und mit nicht die ganze Zeit wie
ein Desktop PC im korrekten Winkel zum
Bürofenster mit der optimalen
Ausleuchtung platziert
sind das ist letztlich der Grund weshalb
ich eigentlich das
Kontrastverhältnis 7 Z1 nur
unterschreide wenn ich prefers contrast
less
habe kleiner Exkurs in die Geschichte
ich habe neulich nachgeschaut
tatsächlich ist diese Empfehlung für das
Kontrastverhältnis 3 zu1 von
2008 ich bin mir nicht mehr ganz genau
sicher wann sich denn letztlich das
mobile Internet durchgesetzt hat ich
würde mal grob sagen 2012 oder
2013 das heißt diese Empfehlung ist
älter als unsere heutige
Realität der letzte Punkt aus dieser
Gruppe sind die inverted colors da ich
schon erwähnt dass es nur bei Safari der
Fall ist und da geht's nämlich genau
darum dass wenn der generierte dark Mode
Bilder auch invertiert und nicht gut
darstellt dass ich dann mit diesem Media
Query die Möglichkeit habe z.B Bilder
mit einem Filter wieder zurück in zu
invertieren das heißt ich kann mit der
richtigen Kombination von Media Queries
sagen wenn dieser Bildschirm oder wenn
hier die Einstellung vorgenommen wurde
dass Farben invertiert werden dann lasse
ich das bei allen Sachen zu außer bei
Bildern oder ich mach's noch gleich
besser so dass ich dann sage okay wenn
dort invertiert eingestellt wurde aber
kein dark Mode dann gehe ich durchaus
davon aus dass der Dark Mode nicht
gefunden worden ist und zeige den Dark
Mode den ich gestaltet habe in diesem
Fall
an in den interaction Media Features
geht es darum zu
unterscheiden ob mit einem feinen oder
einem groben Eingabe
Gerät Daten eingegeben werden bzw links
selektiert
werden da haben wir in erster Linie den
Pointer und den
hover und dann haben wir noch eine
Unterscheidung nämlich any poointer und
any hover der große Unterschied ist dass
Pointer und hover nur die
primäre Eingabemethode berücksichtigen
während anypinter und any hover
grundsätzlich auch noch mal gucken kann
ich denn hier auf dem ellen Setup
gerade komplett nur mit der Maus oder
ist dann Touch Display dann habe ich any
Pointer course um das touchdplay
anzusprechen und dann gibt es noch die
Controls ja die any Pointer Geschichte
ist wie gesagt für die Präzision der
Eingabe auch da gibt es inzwischen WCAG
Kriterien und zwar . 5.5 und
2.5.8 schon allein dass die 2.5.5 eine
niedrigere Zahl ist als die 2.5.8 gibt
uns einen Hinweis darauf dass die beiden
nicht zur gleichen Zeit entstanden sind
tatsächlich gibt es die Anforderung dass
klickbare Flächen mindestens 44 x 44 CS
Pixel sein sollen in der WCAG bedeutend
länger als die ganz neu diesen Sommer
führte Mindestgröße für Links auf
Geräten die mit der Maus navigiert
werden und das sind 24 x 24 Pixel das
ist immer noch relativ klein wenn man
bedenkt
dass Geräte die vorwiegend mit der Maus
navigiert werden inzwischen recht große
Displays haben und entsprechend habe ich
auch recht lange Wege teilweise um mit
der Maus zu einem Link zu gelangen den
ich selektieren möchte und da gibt es
tatsächlich Berechnung zu wie groß
eigentlich ein solcher Link sein
müsste wenn entsprechend mein Weg
dorthin recht weit ist und das ganze
noch mal in Abhängigkeit von der
Geschwindigkeit mit der ich den
Mauszeiger
bewege das sind Daten die ich inzwischen
meinen Studentinnen sage dass sie sich
die im Ihrem persönlichen kleinen einm1
dieses Faches aufschreiben sollen denn
natürlich sind das die Sachen die
tatsächlich am häufigsten ignoriert bzw
vergessen
werden das ganze ist dann genau das was
ich vorhin schon gezeigt habe nämlich
dass nicht nur
die Link Größe sich teilweise ändern
muss sondern vor allem gerade bei Listen
mit mehreren Links auch die Abstände
dazwischen und zwar ist es so dass wir
auf der einen Seite die Möglichkeit
haben diese linkflächen
tatsächlich mit CSS zu vergrößern indem
wir eine unsichtbare Fläche oben drüber
legen die die gesamte Breite und Höhe
von diesem Bereich
aus kleiden sozusagen und dann kann ich
nämlich
auch so ein bisschen dazwischen
klicken und muss nicht ganz genau diesen
Bereich von der Schrift
erwischen und hier auf der linken Seite
gezeigt mit der Maus das das feine das
ist ganz wunderbar dann mit der Maus zu
erreichen das sind diese 24 Pixel und
rechts die 44 Pixel jetzt ist es aber
natürlich so wenn ich als Person mit
einem Tremor
mein oder mit einer Spastik z.B meine
Bewegungen nicht ruhig und kontrolliert
ausführen kann dann kann es auch sein
dass
diese 24 x 24 Pixel mit der Maus z.B
nicht ausreichen da wäre z.B ein
fantastischer Einsatz für ein Javascript
das guckt wenn die Mausbewegung sehr
hektisch ist dass dann entsprechend
die klickfläche von links vergrößert
wird bei dem any hover geht's darum ob
wenn ich über ein Gerät also über einen
Link gehe mit einer Maus dass ich dann
die Möglichkeit habe diesen Link optisch
zu verändern
bei Touch Displays mit dem Finger geht
das nicht auch wenn manche Touch
Displays sozusagen diesen hoverstatus
nachdem ich gedrückt
habe aktivieren dann noch mal der
Hinweis auch wenn es ein bisschen out
ist nutzt diesen hover Status
grundsätzlich um anzuzeigen dass hier
ist was da passiert was es kann auf der
einen Seite natürlich durch einen
Farbunterschied sein der im Idealfall
nicht nur die Farbe sondern auch den
Kontrast betrifft zumindest in gewissen
m Rahmen macht nicht was ich hier
gemacht habe weil ich meinen h
handcurser nicht gefunden habt also seht
zu dass auch auf
klickbaren Elementen sich der Cursor
ändert
und diese kleine Hand erscheint und
was auch noch ganz wichtig für die
Barrierefreiheit ist auch wenn es nicht
so wunderlich hübsch ist für Links im
Text bitte nutzt die Unterstreichung
deaktiviert sie nicht genauso wenig
deaktiviert bitte nicht den outline für
den
Fokus Video prefix Features und
Scripting haben kaum Unterstützung
entsprechend lasse ich sie hier
aus noch mal zusammengefasst welche
mediaacat Reihen relevant sind
grundsätzlich referenzieren sie die
genutzte Hardware wir können auf die
Breite die Höhe die
Bildschirmausrichtung und ob es Screen
oder mit den entsprechenden
interaktionselementen dargestellt wird
eingehen wir können anhand der
Resolution in Kombination mit der wi
rausfinden wie weit reingezoomt wurde
und wir können auch gucken dass wir mit
dem mediaquery monochrom Bilder und
Farben anpassen für Geräte die keine
Farben unterstützen wir können im
Gegenzug auch gucken was wir mit den
Geräten machen die einen sehr hohen
Farbumfang haben dann haben wir noch die
Möglichkeit mit interaction drauf
einzugehen was mit der Größe von Links
und Buttons je nach Pointer passieren
soll und auch wie wir mit dem hover
umgehen da allerdings würde ich
tatsächlich primär immer so tun als
hätte ich ein hover zur
Verfügung dann gibt es noch na controls
das habe ich hier durchgestrichen das
wäre im Idealfall in Kombination mit dem
Display Mode dass ich dann entsprechend
sagen könnte okay wenn gerade keine
backbuttons vom Browser wirklich
angezeigt werden und ich meine nicht
damit dass sie wie auf Android Geräten
über die Hardware verfügbar sind denn
wenn ich z.B mit einer mundmaus per
Bluetooth verbunden bin dann kann ich
den hardwarebutton nicht klicken dann
sollte eigentlich der Backbutton drinen
sein jetzt ist es aber so dass diese
gesamten Media Queries eigentlich nur
wenig Hinweise auf die Nutzung geben ich
weiß auf welchem Gerät sich die Person
befindet oder kann es erahnen und wie
das Gerät gedreht
ist mit diesen Media Queries habe ich
trotzdem die Besonderheiten der Hardware
schon recht gut
ausgenutzt um meine Website an
bestimmte Besonderheiten anpassen zu
können die über das Responsive Webdesign
hinausgehen kommen wir zur zweiten
Schicht bei unserem accessibility Burger
und zwar dem
Betriebssystem dafür sind die User
preference Features relevant da gibt es
sechs von denen allerdings sich nur fünf
überhaupt nutzen lassen denn der sechste
Punkt prefers reduced data wurde bisher
noch von keinem Browser implementiert
entsprechend kann ich nicht anhand der
Präferenz der nutzenden sagen okay
diese Person möchte weniger Daten laden
entsprechend erhält sie die
Standardschrift und keinen
webfund schauen wir sie Punkt für Punkt
an und
zwar prefers reduced
Motion da geht es darum dass nutzende
teilweise eben von Animationen stark
abgelenkt werden ähm die Webseite z.B
gar nicht nutzen können weil sie nur
mühsam ähm überhaupt die Schrift
entziffern können weil ihre Augen
vielleicht nicht sonderlich gut stabil
haltbar sind und die ganze Zeit eine
leichte Bewegung drinnen haben und sie
schwer haben überhaupt zu fokussieren es
kann auch sein dass ihnen schlecht wird
durch die Animation oder wenn die
Animation gar so hektisch ist und es zu
flackern kommt dann ist natürlich
tatsächlich auch die Gefahr da dass
Menschen Anfälle bekommen und dann
tatsächlich behandelt werden
müssen ich habe als Nutzerin die
Möglichkeit in meinem Betriebssystem zu
sagen bei den Bedienungshilfen dass ich
reduzierte Animation
bevorzuge und ich habe das natürlich
testweise gemacht und sehe da es ist
leider sehr sehr selten dass darauf
Rücksicht genommen wird dabei ist es
speziell mit CSS sehr sehr einfach ich
kann einfach sagen dass prefers reduced
Motion no preference dann unter diesem
Media Query die Animation überhaupt
gestartet werden soll nur ein einziges
Mal habe ich den gegenteiligen negativen
Effekt gesehen da war es nämlich so
dass
ich das reduziert hatte und auf einer
Webseite Animation nur dann abgespielt
wurden wenn ich sie selbst gestartet
habe allerdings war es da so dass die
Animation auch nicht gestartet werden
konnte wenn ich reduced
Motion aktiviert
hatte kleines Beispiel für ein
ähm Octopus in einer Flasche den ich für
meine Studentinnen für SG Animationen
erstellt habe diese Animation basiert
rein auf CSS und ähm auf der linken
Version ist angedeutet dass wenn
animiert werden darf diese arme die aus
der Flasche unten rausgucken sich
ausbreiten und zusammenziehen und wenn
entsprechend das unterbunden werden
sollte dann ist einfach nur die
ausgebreitete Version
sichtbar nächster Punkt prefers reduce
transparency da geht's darum dass es für
manche Menschen
schwer ist den Fokus zu halten wenn sie
halbtransparente Flächen haben durch die
Hintergründe und vor allem Text im
Hintergrund sichtbar sind da ist es so
wenn ich nur preference sage dann kann
natürlich sehr gerne die opacity runter
gesetzt werden oder auch mit rgba Werten
also mit Alpha Transparenzen gearbeitet
werden das ist so ein bisschen wie wir
früher mit
modernizer oder inzwischen mit AD
supports arbeiten dass wir sagen nur in
dem Fall wo der Browser das unterstützt
soll jetzt diese cssregel gelten nur
dass wir jetzt nicht auf den Browser
gucken nicht auf die Technik sondern auf
den Menschen der diese Technik nutzt
wenn ich aber reduce gesagt habe dann
möchte ich wirklich keine transparenten
Flächen im Design sehen tatsächlich ist
mir ich zeig erstmal wie es aussehen
soll auf der linken Seite ist ein Pop-Up
ein Overlay
z.B für den Cookie wenner und der Text
der vorher mit hohen Kontrast dahinter
sichtbar war der ist jetzt gerade
ausgeblendet ausge graut sozusagen weil
eine andere Fläche noch da drüber liegt
die halbtrparent
ist das kann natürlich dazu führen dass
es unschön ist das zu benutzen schöner
wäre es wenn ich das Overlay was
hoffentlich auch für Screenreader
nutzende richtig ausgezeichnet wurde
dass sie auch mitbekommen dass dort sich
was geändert hat und dort etwas ist mit
dem sie interagieren
müssen gleichzeitig den Text nicht mehr
darstellt der dahinter liegt da möchte
ich dazu pläieren es nicht so zu machen
wie es jetzt ein paar mal gesehen habe
dass dann der Bereich darum einfach nur
grau ist dass sie zum ein sehr unschön
aus man hat dann das Gefühl eigentlich
gar nicht mehr auf der Webseite zu sein
sondern eher auf irgendeiner anderen
Seite per Klick auf einen Werbebanner
z.B gelandet zu
sein dem Punkt muss ich natürlich drauf
eingehen dass Werbung aktuell so quasi
das Schlimmste für Barrierefreiheit
überhaupt ist denn zum einen sind die
ganzen Grafiken selten mit einem
altteag Versehen dann ist Werbung oft
stark animiert um die Aufmerksamkeit der
nutzenden auficht zu ziehen und zu guter
Letzt sind die Seiten die beworben
werden nur seltenst barrierefrei also da
kann ich jeden
verstehen der sich entsprechend einen
Adblocker
installiert nächster Punkt prefers
Kontrast da habe ich schon erwähnt es
ist möglich den Kontrast zu erhöhen und
zu verringern das waren diese alen
Unterschiede die ich am Anfang gezeigt
habe das heißt ich würde das tatsächlich
primär bei der Textfarbe machen und nur
in wenigen Bereichen auch die
Hintergrundfarben mit
berücksichtigen grundsätzlich kann ich
hier expliz drauf eingehen wenn keine
Präferenzen getroffen worden sind dann
würde ich allerdings tatsächlich einfach
das machen was ich aus verschiedenen
anderen gestalterischen Überlegungen und
Überlegungen für ein barrierefrei
Farbspektrum und Farbkontraste
festgelegt habe als Designerin ich kann
aber auch sagen dass ist jetzt der
Bereich in dem weniger oder mehr
Kontrast erwünscht sind entsprechend
mache ich das der letzte Punkt mit den
Custom da ist tatsächlich so dass wir da
noch ein paar Anpassungen machen wenn
eigene Paletten zusammen mit forstcors
hinterlegt wordurden das ist allerdings
gar nicht mal so leicht zu testen denn
dafür müssten erstm Menschen gefunden
werden die das tatsächlich nutzen um
genau zu schauen was Ihre
Herausforderungen ihre Paletten sind es
kann sein dass wir diese Farben ganz
gruselig finden als Designer innen es
kann aber auch sein ähm dass wir da
tatsächlich eigentlich recht wenig sehen
aber für die Person das genau das
optimale lese äh Farbspektrum sein
kann sieht dann eben z.B so aus den
Screen kennen wir schon nur mit
anderer mit anderen
Werten bei for
colors geht es eben genau darum wir
können das Kontrastverhältnis insgesamt
erhöhen oder verringern wenn wir es
forsieren und dann sind eben alle Farben
nur in einem Spektrum sichtbar das heißt
das sind wirklich diese
vorgelegten vordefinierten
Farben das heißt ich habe wenn ich den
light Mode aktiviert habe for colors
aktiv ist alles in Schwarz auf Weiß und
wenn ich darkme dazu aktiviert habe in
Weiß auf
Schwarz ja und der letzte Punkt hier das
ist eigentlich mein absoluter
lieblingspunkt nämlich prefers color
Shem persönlich bevorzuge ich den Dark
Mode ich entschuldige mich bei allen
denen es ähnlich geht bezüglich meiner
Folien ich hoffe ihr habt hier
vielleicht doch auch und so den
Invertierung am
Laufen tatsächlich sind barrierefreie
slides die sich anpassen derzeit noch
ich würde mal sagen hoffentlich nur in
dre Jahren
Entfernung hier geht's grundsätzlich
darum dass wir im
HTML darauf eingehen können ob der
lightm oder der darkmod präferiert wird
das heißt wir können davon ausgehen dass
die nutzenden entsprechend das was sie
bevorzogen auch aktiv haben wobei auch
da kann es wie bei allen anderen sein
dass Menschen noch gar nicht
rausgefunden haben dass
das überhaupt geht und hier finde ich es
immer sehr unschön gerade wenn ich
abendsurfe wenn Webseiten nicht drauf
eingehen oder es eine Weile dauert
nachdem während sie laden dass sich der
Hintergrund von hell auf dunkel
umschaltet hier noch der Hinweis bitte
bitte versucht nicht beides miteinander
zu mixen denn da gibt's derzeit noch
keine Möglichkeit das
abzufangen zumindest keine offizielle
hier noch mal die beiden Seiten
nebeneinander gestellt oder die beiden
Darstellungen der Seite light Mode und
Dark Mode nebeneinander ich würde immer
dazu pläieren beides wirklich zu
gestalten denn wenn wir das nicht tun
und das von Tools übernommen wird wird
entsprechend überhaupt keine Kontrolle
unsererseits mehr darüber geben wie
unsere Brand dargestellt
wird zusammenfassend ist es so dass wir
mit den User preference Features eben
auf die Einstellungen im Betriebssystem
eingehen
könen die dritte Schicht im
accessibility Burger ist die der
Einstellung im Browser
selbst bitte bitte bitte nutzt als
Schrift Größe immer ein
remem diese Größe ist von den
herstellenden wunderbar abgestimmt
EM ist eine Größe die sich auf die Höhe
des MS in einer bestimmten Schriftgröße
wie auch immer
bezieht auf jeden Fall ist es so dass
ein remem gleich der Größe entspricht
die im Browser von der nutzenden Person
als die Standardgröße festgelegt
wurde wenn keine Änderung vorgenommen
wurde dann ist es ab Werk 16 Pixel und
zwar 16 CSS Pixel diese Größe ist auf
den Geräten
im Standard so man davon ausgehen kann
in dem Abstand den nutzende meistens zu
diesem Monitor haben gut lesbar ist seid
denn ich brauch's größer oder kleiner
hier noch mal der Hinweis groß ist eben
nicht automatisch bei barrierefrei
manchmal kann extra groß notwendig sein
wenn ich eben nur dann genügend sehe von
dem Wort wenn ich dann aber eine
Einschränkung habe bei der z.B mein
Sichtfeld sich reduziert wie das bei
manchen progressiven seebehinderungen
der Fall ist dann kann es sein dass ich
die Schrift im Gegensatz sehr klein
benötige weil ich sonst z.B lange
brauche um ein großes e ab zu tasten ob
es denn wirklich ein E ist und kein
f die nächste Einstellung die da ganz
zwingend mit einhergehen muss ist dass
dieses
remem natürlich mit Body 100% oder
vielleicht mal 105 oder so verwendet
wird aber nicht mehr und ganz wichtig
ist auch dass padding und margin nicht
mit remem angegeben werden links sehen
wir die Variante die gut ist und rechts
die die nicht gut ist und zwar ist links
das seitliche padding bzw margin nicht
mitgewachsen das sind nach wie vor 16
Pixel und rechts ist es mit gewwachsen
und dann hat es sich potenziert auf hier
ich glaube 144 hatte ich für das
Beispiel genommen und das hat
das Problem dass dann entsprechend die
Abstände nach außen mitwachsen und für
die Zeilenlänge nur sehr wenig übrig
bleibt und gerade wenn ich eine
Bildschirmlupe nutze muss ich erstmal
den gesamten Bildschirm von links nach
rechts absuchen bis ich überhaupt dort
bin wo entsprechend überhaupt Text steht
und wenn ich das bei der nächsten Zeile
wieder und wieder machen muss ähm ist
das natürlich doppelt
mühselig der nächste Punkt bitte bitte
bei
a doppelp focus die pseudoklasse nutzen
um die Outline auf drei Pixel und farbig
bunt zu setzen auf jeden Fall mindestens
zwei Pixel besser drei und auf jeden
Fall auch drauf zu achten dass sich die
Farbe gut vom Hintergrund abhebt egal
welcher Link auf welchem Hintergrund
steht die Linkfarbe bzw die fokusfarbe
muss ich immer gut davon absetzen leider
ist oft zu beobachten dass der Fokus mit
Absicht ausgeschaltet wird bzw die ine
aufin gesetzt wird standardmäßig ist sie
immer da dann allerdings im Blau das
funktioniert nicht für alle Designs aber
wenn sie deaktiviert wird und man
versucht mit
der Tastatur zu navigieren kommt man
ganz stark an seine Grenzen und sieht
nicht welcher Link aktuell den Fokus hat
und welchen man aussuchen würde m es se
denn man guckt unten links in die Ecke
wo es in winzig kleiner Schrift steht
das wir wiederum ist auch aus anderen
Gründen nicht barrierefrei und zu guter
Letzt möchte ich noch darauf hinweisen
wenn der Viewport Tag korrekt gesetzt
wurde macht nicht den Fehler und sagt im
CSS dass die gesamte Seite eine gewisse
Mindestbreite haben soll denn dann habe
ich wieder genau den Punkt ich muss
horizontal scrollen es ist nicht
responsiv und es recht nicht
barrierefrei also mit einer Worten diese
paar cssreeln für den Browser um die
Einstellung ja abzufragen zu
berücksichtigen was leider nicht an
allen Geräten funktioniert aber
grundlegend das sind diese Paar gewesen
mit denen ich auf Schriftgröße seitenzom
und tnavigation einwirken
kann zusammenfassend möchte ich noch
einmal die Pyramide der Ryan
Webtechniken zeigen das A und O ist
wirklich eine valide HTML Struktur und
ich pläiere auch für wirklich
kaskadierendes stseds je mehr ich von
meinem Design in die HTML Struktur durch
die Verschachtelung der verschiedenen
Tags festzementiere umso weniger kann
ich die Webseite an verschiedene
individuelle
barrierefreiheits Anforderungen
anpassen grundsätzlich brauche ich schon
relativ viel CSS um eine
Seite gut
umzusetzen ich brauche aber recht
weniger recht wenig Media Features und
Media Feature queries um entsprechend
die Webseite anpassen zu
können ich benötige aber sehr wenige
Media Queries und
M
Feature queries um die Webseite anpassen
zu
können bei den
Dimensionen möchte ich noch einmal diese
Darstellung zeigen und zwar kann ich mit
Ryan
auf die Hardware Betriebssystem
Einstellung Einstellung im Browser und
auch auf extra
Eingabemethoden zugreifen und kann
entsprechend im CSS diese nutzen um ein
variables optimales Aussehen für
Menschen die genau diese Darstellungen
benötigen um barrierefrei surfen zu
können anwenden
über alle Schichten übereinander
anschauen dann haben wir jetzt mit dem
Ryan oder Reiz Prinzip eine große
Bandbreite von Einstellungen und
individuellen Settings abgedeckt in der
Hardware im Betriebssystem und im
Browser für diejenigen die sich jetzt
fragen ja warum mache ich denn den
ganzen Aufwand überhaupt muss ich das
denn überhaupt möchte ich noch darauf
eingehen welche Prüfschritte reyan mit
abdecken als erstes 11.7 die
benutzerdefinierten Einstellung dann
9.1.3.4 keine Beschränkungen der
Bildschirmausrichtung
9.1.4.1 dass alles ohne Farbe nutzbar
ist da sind wir wieder bei den
schwarz-weiß Displays aber auch bei
Menschen mit einer
Farbsehschwäche in
9.1.4.3 das Kontraste von Texten
ausreichend sind
9.1.4.4 sagt dass Text auf 200%
vergrößerbar sein soll ich habe hier
Texte gezeigt die noch viel größer
einzustellen waren und dadurch dass ich
alles komplett quasi nicht nur einfach
sondern maximal responsiv anlege
ist das mit der Vergrößerung auf 200%
absolut überhaupt kein Problem dann
9.1.4.10 das Responsive Webdesign dort
inhaltebrechen umgenannt
9.1.4.11 das Kontraste von Grafiken und
grafischen Bedienelementen ausreichend
sind gerade auch in diversen Mediatheken
leider nicht immer zu beobachten
9.2.2.2 das bewegte Inhalte abschaltbar
sind oder wie ich es bei rein machen
würde im Gegensatz explizit angeschaltet
werden müssen und
9.2.4.7 dass die aktuelle Position des
Fokus deutlich sein
muss drei Punkte sind noch nicht in der
betv oder en entschienen weil sie
relativ neu in der WCAG erst sind und
das sind Focus appearance dort
2.4.13 und
2.5.5 die Targets heiß enhanced das war
die für touchgeräte von 44 x 44 Pixel
und
2.5.8 taret SII Minimum die 24 x 24
Pixel für die Bedienung mit einer Maus
abschließend noch mal auf den
accessibility Burger eingehend
barrierefreie Webseiten sind wie Burger
sie bestehen aus mehreren Schichten
manche konsumieren Burger wie im Menü
beschrieben andere haben
Sonderwünsche wichtig ist dass wir alles
liefern können und so funktioniert Ryan
responsive to individual accessibility
needs stehe euch gerne noch für Fragen
im Chat zur Verfügung und ansonsten
freue ich mich wenn ihr mich
kontaktiert herzlichen Dank danke für
deinen talk äh alles sehr interessant
wir haben ein paar Fragen für dich ähm
wenn man jetzt so eine eine Webseite mit
Ryan Design in also wenn man das dieses
Konzept dieses mindset hat
ist die dann zu 100%
barrierefrei die Barrierefreiheit hängt
in erster Linie tatsächlich auch an dem
HTML Konstrukt also wenn das HTML nicht
barrierefrei ist kann man mit rein
natürlich die Farben noch mal ändern
aber man kann da nicht mehr allzu viel
retten also man braucht beides es ist es
ist also wichtig dass man nicht nur
quasi das Design korrekt macht sondern
auch semantisch hat das HML korrekt
schreibt das auf jeden Fall das ist
eigentlich sogar das A und O und das wo
ich auch die meisten Fehler immer wieder
finde wenn wenn ich jetzt Ryan einmal
komplett
durchimplementiere kann ich es mir dann
sparen meine meine Webseite direkt zu
testen muss ich die dann trotzdem noch
mus ich dann trotzdem noch UX Test
durchführen oder reicht das
dann testen ist garantiert immer eine
gute Idee letztlich ist es ja auch so
dass Ryan primär visuelle Sachen
abdeckt und eben im CSS noch einiges
abdeckt aber ich habe auch mal
die ganzen Prüfschritte angeschaut und
davon sind
33 sind auf die HTML Semantik und
Struktur bezogen wie gesagt ohne die
Macht ry da auch gar nichts gut und
tatsächlich ist es so individuell was
Menschen brauchen R deckt schon einiges
ab aber eben auch noch nicht
alles das ist tatsächlich direkt gute
Überleitung zur zur nächsten Frage ist
ry mit dem was du uns heute in diesem
Talk beschrieben hast schon vollständig
oder fehlen da noch fehlen noch Punkte
in diesem Konzept die noch klar
definiert werden
müssten also so ein paar Edge cases habe
ich noch nicht
ausprobiert was jetzt z.B so ein Fall
ist wenn ich eine sehr kleine Schrift
brauche aber auch ein Touch Display habe
wie kann ich sicherstellen dass dann
wenn ich den einen Link gefunden habe
der groß genug ist dass ich ihn
anklicken kann dass ich den nächsten
auch gut
finde außerdem ist es so dass es gar
nicht alles was ich eigentlich
zusätzlich noch gerne mir wünschen würde
auch derzeit schon in den Einstellungen
gibt und solange es nicht auf dem
Betriebssystem einstellbar ist wird es
auch keine
HTML oder mediaquery Geschichte dazu
geben das heißt aktuell
ist z.B sehr unterrepräsentiert die
Gruppe derer die
ihre Hände nutzen können aber nicht voll
umfänglich die z.B
Laptops mit touchdplays nutzen und nur
mit sehr großer Mühe die Mitte des
Displays erreichen können für die es
wesentlich angenehmer einfacher und
schneller zu nutzen wäre wenn sie z.B
alle lings an einer Seite des
Bildschirms platzieren können aber das
heißt da gehen wir dann auch wirklich in
die Anordnung der Elemente und nicht nur
in die farbgeschichten rein aber dass
man das dann mit mediaqueries oder so
sinnvoll implementieren kann braucht man
erst die Browserhersteller die qu einmal
hergehen und sagen wir fügen
Konfigurationsoptionen für äh ich möchte
alle Elemente auf der linken Seite auf
der rechten Seite etc haben weil ohne
das geht das ja nicht oder also wir
können das natürlich solange das nicht
der Fall ist können wir das mit
Javascript z.B mit Buttons mit denen wir
entsprechende CSS Klassen an die wir
auch unsere Darstellung binden können äh
händisch nachrüsten müssen wir dann
allerdings auch ne und da muss man dann
natürlich auch gucken dass z.B der
Button für richte mir alles Links oder
richte mir alles rechts erreichbar aus
auch links bzw rechts überhaupt
verfügbar ist den wenn ich nicht
einstellen kann dann NZT es mir nichts
dass ich es einstellen
ja warum ist medienredondanz wichtig und
vielleicht was ist denn medienredondanz
überhaupt ja da geht's darum dass nicht
einfach nur ein Podcast produziert und
live gestellt wird sondern neben der
Spur das ganze am besten auch
transkribiert wurde
da gibt's natürlich ai Tools aber es ist
immer noch mal besser das zum einen
gegenzulesen und auch noch mal
stellenweise auszubessern oder direkt
auch händisch zu erfassen weil
selbst wenn ich hören kann und von daher
der
Audio Podcast kein Problem sein sollte
für mich kann es sein dass ich aufgrund
von z.B
äh mich nicht so drauf konzentrieren
kann auf das gesprochene Wort und dass
für mich ein Text den ich z.B auch
durchsuchen kann den ich
mit den Augen nach Schlagworten
durchscannen kann äh für mich besser
funktioniert das kenne ich tatsächlich
auch von mir selbst wenn ich online
irgendetwas recherchiere und dann nur
videoergebnisse ohne irgendwie eine
detaillierte Beschreibung finde und dann
erstmal dieses Video einmal durchschauen
muss das ist unglaublich frustrierend
wenn ich einfach nur schnell eine
einzelne Information aus diesem Video
brauche oder einen einen Link brauche um
irgendwas von dem Hersteller
runterzuladen oder so und das im Video
nur in in Videoform drin ist und nicht
in Text ich nebenher dur suchen
kann ja wür ich direkt ger
einhaken und zwar hast du damit eine
Erfahrung die relativ nah an dem ist was
ein bmer Mensch der den Screenreader
nutzt hat wenn nämlich e eben bei einer
Webseite mit viel langem Text oder auch
bei einem langen PDF die Überschriften
nicht ordentlich ausgezeichnet sind und
nicht vom Screen readader als solche
vorgelesen werden können dann ist
nämlich genau das die Durchsuchbarkeit
geht völlig verloren und auch wenn wir
manche Sachen im HTML mit by Aria
auszeichnen sollten welcher Seite wir
uns z.B gerade befinden im Menü ähm
äh ist es trotzdem so dass wenn wir zu
viel davon machen dann erfor erzeugen
wir so eine Art Gewitter von unnützer
Information die die wirklich relevante
Information noch schlechter zugä heißt
wenn wir anfangen jeden einzelnen Knopf
in Detail zu beschreiben und äh da quasi
dann bevor man überhaupt zum Inhalt der
Webseite kommt erstmal 50 Knöpfe im Menü
beschreibt dann geht die der eigentliche
Inhalt der Webseite
unter genau ne also darum sollten wir
z.B auch auch bei Ryan nie vergessen
dass wir auch skiplings brauchen dass
wir die Möglichkeit bieten sollten um
einzelne Bereiche eben z.B die
Navigation auch per Tastatur
überspringen zu können dass nicht jedes
Mal diese gesamte Information mit ich
weiß nicht wie vielen
sich links einzeln wieder angehört
werden muss K das macht Sinn
ich würde dich gerade noch mal fragen
ich habe habe in deinen slides den
Access accessibility Burger gesehen
magst du uns die die Metapher gerade
noch mal ein bisschen bisschen erklären
was ist der accessibility Burger
me die Metapher kommt daher dass ich
immer wieder erlebe dass
BGer zwar ja im Menü mit einer
bestimmten Schichtung mit äh Fleisch
ohne Fleisch mit Salat ohne Salat
äh Fleisch roh oder durch oder veganes
Petty oder ich habe eine Zeit lang
streng lowcart gegessen habe dann z.B
wenn wir im Restaurant waren das
Brötchen drumherum weggelassen
ähm im Endeffekt ist es quasi ein Burger
solange man irgendwie mindestens zwei
Zutaten der Mix und übereinander legt
m aber das was einzelne Leute mögen oder
vielleicht auch wegen Allergenen
vertragen ist höchst unterschiedlich und
da kommt so ein bisschen die Metapher
her dass wir natürlich allen einen
Burger anbieten möchten den sie
vertragen und auch essen möchten und
auch essen können oder also weil das ja
dann dann kann man diese Metapher noch
mal eins weitert treiben manche essen
ihren Burger indem sie in die Hand
nehmen und reinbeißen aber wenn der
Burger dann zu hoch ist dann passt nicht
nicht mehin Mund und dann braucht du
halt ersatzols wie eben z.B Messer und
Gabel um den Burger trotzdem
auseinandernehmen und trotzdem weiter
essen zu
können genau und im schlimmsten Fall
muss ich Ihnen auch puriieren können
damit dann auch wenn nicht gekaut werden
kann und ja wie das so ist mit den
situativen Sachen auch da äh hat die
eine oder andere Person von uns
sicherlich schon mal Erfahrungen
mitgemacht und sei aufgrund der
weisheitszene ja ich würde gerade noch
mal schauen ob wir noch mal noch mal
fragen haben
ähm weil ich glaube ich habe meine Liste
an Fragen damit abgearbeitet
ähm ah hier eine Frage habe ich noch
mähm sind Ladebalken für up und
Downloads Animationen in dem Sinne dass
man sie ausschaltbar machen sollte oder
sind Ladebalken eher so ein statisches
UI Element was man immer animieren
kann sehr gute Frage m ich würde
Ladebalken eigentlich eher als Hilfe
sehen
denn sowohl Usability als auch
Barrierefreiheit hat auch was damit zu
tun dass ich mich auch etwas einstellen
kann wenn ich einen Ladebalken in der
Geschwindigkeit in der tatsächlich
dieser Ladevorgang ist habe dann ist das
für mich eine wertvolle
Information tatsächlich wenn ich jetzt
aber diesen Kreis nehme der nichts
darüber aussagt wie lange denn etwas lät
und der einfach nur durcheinander
belingt und dann vielleicht auch noch
irgendwelche Farbeffekte mit drin hat
etc das wäre eher was wo ich sage okay
das wäre vielleicht eine Animation auf
die ich verzichten könnte
m es
ist auch so dass leider bei den Media
Queries derzeit so diese Zwischentöne
oft nicht existieren
m und zwar beim light und Dark Modus
habe ich
letztlich mit einer recht kleinen Umfrag
Truppe mal ähm versucht
rauszufinden wie viel Prozent äh von dem
was ihr gerne mit light oder dark Modus
anschauen möchtet darf denn für euch
tatsächlich invertiert sein und die
meisten ähm die äh das einfach quasi aus
Gewohnheit haben oder aus Vorliebe
hatten jetzt kein Problem damit wenn z.B
auf einer Seite mit helellm Hintergrund
und schwarzem Text ganze
Informationsblöcke dann mit dunklem
Hintergrund und hellen Text waren aber
diejenigen die z.B aufgrund von
einer hornhautverkümung den lightmodus
benötigt haben oder im Gegensatz
diejenigen die aufgrund von einer
Migräne den darkmodus benötigt haben die
empfinden das tatsächlich schnell als
anstrengend und
entsprechend würde ich für barrierefreie
Webseiten das auch so machen dass der
Default ist das eben nicht
invertiertes ja ich spiel da gerade mit
einer Variante drum dass es eben bei mir
auch per Knopfdruck auch invertierte
Flächen gibt wenn ich das explizit
anschalte aber so ähnlich ist es mit den
Animationen
also was auf jeden Fall definitiv da
reingehört was man nicht automatisch
ablaufen lassen sollte vor allem nicht
wenn diese Einstellung gemacht worden
ist ist dass die ganze Seite sich
zusammenanimiert und von jeder Seite was
reinkommt oder auch parallaxffekte
ähm auch das wenn man über ähm wenn man
runter scrollt dass dann der Bereich für
die Werbung äh durch das Scrollen sich
verändert sowas würde ich da alles
rauslassen aber wenn es wirklich ein
hilfetool ist es nicht zu schnell sich
bewegt und eben nur ein kleiner Bereich
ist wie das bei dem Ladebalken der Fall
ist dann kann man das durchaus
auch sagen okay das ist jetzt notwendige
Information und nicht pure
überfordernde Animation
ähm noch eine Frage aus dem Chat
gibt es eine eine Webseite mit einer
Checkliste zu ry gibt es so etwas schon
oder ist das ist das bei dir noch auf
der To-Do Liste für irgendwann
mal das ist auf meiner to-doiste für
hoffentlich ganz bald
tatsächlich hatte ich die Idee für R
schon eine ganze Weile aber wirklich
ausgearbeitet habe ich jetzt tatsächlich
für diesen Vortrag also als ungefähr vor
einem Monat der V V papers geschlossen
wurde ich werde gerne über dem Verteiler
von fechance wenn das geht entsprechend
das
verkünden
mag herzlich diejenigen die es
interessiert einladen sich z.B auf
LinkedIn mit mir zu verknüpfen und und
aktuell ist es so dass ein paar Sachen
von den Backend was ich mir dafür
gerade
erstelle bisschen hängen und ja ich
hoffe dass ich auch so
bis spätestens März das Online habe erst
März weil ich auf jeden
Fall zu Ascher Mittwoch bzw das Feld mit
dem Valentinstag zusammen das
barrierenfasten wieder anbieten möchte
wo ich Zeile für ile eben auch auf den
HTML Baum für jeden Tag beschreibe was
man da besser macht das klingt
unglaublich interessant wir kommen
leider mit der Zeit ans
Ende vielen vielen Dank für deinen Talk
und dass du noch mal vorbeigekommen bist
und Fragen zu beantworten
ja
und wir wir freuen uns darauf die
weitere Entwicklung von Ryan zu
beobachten und ich freue mich sehr wenn
Leute es ausprobieren und
mit ihren eigenen Erfahrungen auf mich
zuukommen und Lust haben re weiter mit
zu tragen und
auszubauen