{"id":700,"date":"2024-05-16T13:43:23","date_gmt":"2024-05-16T13:43:23","guid":{"rendered":"https:\/\/erdbeerbeet.com\/?p=700"},"modified":"2024-05-16T14:03:40","modified_gmt":"2024-05-16T14:03:40","slug":"digitale-barrierefreiheit-der-comic","status":"publish","type":"post","link":"https:\/\/erdbeerbeet.com\/de\/digitale-barrierefreiheit-der-comic","title":{"rendered":"Digitale Barrierefreiheit &#8211; Der Comic"},"content":{"rendered":"\n<p>Da ich sp\u00e4testens seit meiner Masterarbeit eine gewisse Affinit\u00e4t zu Comics entwickelt habe, bot es sich ab einem gewissen Punkt einfach an, meine gesammelten Erkenntnisse zum Thema Barrierefreiheit in einen Comic zu gie\u00dfen.<\/p>\n\n\n\n<p>Das Thema digitale Barrierefreiheit \u00fcbersichtlich auf nur 12 Seiten erkl\u00e4rt. Viel Spa\u00df beim Lesen.<\/p>\n\n\n\n<div data-wp-interactive=\"core\/file\" class=\"wp-block-file\"><object data-wp-bind--hidden=\"!state.hasPdfPreview\" hidden class=\"wp-block-file__embed\" data=\"https:\/\/erdbeerbeet.com\/wp-content\/uploads\/2024\/05\/Digitale-Barrierefreiheit-Comic.pdf\" type=\"application\/pdf\" style=\"width:100%;height:900px\" aria-label=\"Embed of Digitale-Barrierefreiheit-Comic.\"><\/object><a id=\"wp-block-file--media-db4b6513-1a86-4d19-a1b7-6a3caf7bcf07\" href=\"https:\/\/erdbeerbeet.com\/wp-content\/uploads\/2024\/05\/Digitale-Barrierefreiheit-Comic.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">Digitale-Barrierefreiheit-Comic<\/a><a href=\"https:\/\/erdbeerbeet.com\/wp-content\/uploads\/2024\/05\/Digitale-Barrierefreiheit-Comic.pdf\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-db4b6513-1a86-4d19-a1b7-6a3caf7bcf07\">Download PDF<\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Transkription &#8211; Screenreadable Version des Comics<\/h2>\n\n\n\n<p>Digitale Barrierefreiheit &#8211; Der Comic. Von Fenja Hanisch.<br>Titelbild mit einer bebrillten, wei\u00dfen Frau &#8211; Fenja, die eine Baustellen-Absperrung wegtr\u00e4gt<\/p>\n\n\n\n<p>Das Internet\u2026 Das Bild zeigt die Weltkugel im All, umrundet von blau leuchtenden Buchstaben &#8220;WWW&#8221;.<br>&#8220;Die Kraft des Internets liegt in seiner Allgemeing\u00fcltigkeit. Der Zugang f\u00fcr alle, unabh\u00e4ngig von ihrer Behinderung, ist ein wesentlicher Aspekt.&#8221; &#8211; Ein Zitat von Tim Berners Lee.<br>Aber.<\/p>\n\n\n\n<p>Einige Zahlen zur Barrierefreiheit:<br>Von allen Webseiten haben:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>86% schwachen Farbkonstrast<\/li>\n\n\n\n<li>66% keine Alternativtexte<\/li>\n\n\n\n<li>60% fehlerhafte Links<\/li>\n\n\n\n<li>34% fehlende Steuerelemente<\/li>\n<\/ul>\n\n\n\n<p>Quelle: statista (Februar 2020)<\/p>\n\n\n\n<p>In Deutschland:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>7,8 Millionen Schwerbehinderte<\/li>\n\n\n\n<li>334.600 mit Sehbehinderung<\/li>\n\n\n\n<li>fast 30.000 mit Sprach- oder Sprechst\u00f6rung<\/li>\n\n\n\n<li>mehr als 60% der Erwachsenen haben eine Fehlsichtigkeit<\/li>\n\n\n\n<li>12% leiden an Rot-Gr\u00fcn-Schw\u00e4che<\/li>\n<\/ul>\n\n\n\n<p>Quelle: statistisches Bundesamt (2021)<\/p>\n\n\n\n<p>Ein Gro\u00dfteil der Webseiten ist f\u00fcr viele nicht\/kaum nutzbar.<br>Fenja lehnt an der EU-Flagge und sagt, &#8220;Das soll eine EU-Richtlinie \u00e4ndern.&#8221;<br>Im n\u00e4chsten Bild hebt sie wieder eine Absperrung hoch. &#8220;Aber erst einmal schauen wir uns diese so genannten Barrieren genauer an.<br>&#8220;Offiziell betroffen sind nur etwa 13%. Aber!&#8221; Fenja hat ein Kuchendiagram mit einem Kuchenst\u00fcck der 13% in der Hand.<br>Drei Charaktere aus der Serie IT-Crowd halten sich Ohren, Augen oder Mund zu und sagen gemeinsam, &#8220;Wer nicht permanent betroffen ist, der kann tempor\u00e4r beeintr\u00e4chtigt sein, oder sich in einer beeintr\u00e4chtigenden Situation befinden.&#8221;<br>Dargestellt ist die &#8220;Microsoft Inklusiv Desing Matrix&#8221;. Gegen\u00fcbergestellt werden Beeintr\u00e4chtigungsdauer (permanent, tempor\u00e4r, situationsbedingt) und die verschiedenen Interaktionsm\u00f6glichkeiten (anfassen, sehen, h\u00f6ren, sprechen). Die Zellen enthalten Beispiele.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><\/td><td>Permanent<\/td><td>Tempor\u00e4r<\/td><td>Situationsbedingt<\/td><\/tr><tr><td>Anfassen<\/td><td>Einarming<\/td><td>Armverletzung<\/td><td>Junge Eltern<\/td><\/tr><tr><td>Sehen<\/td><td>Blind<\/td><td>Grauer Star<\/td><td>Abgelenkter Fahrer<\/td><\/tr><tr><td>H\u00f6ren<\/td><td>Taub<\/td><td>Ohr-Infektion<\/td><td>Barkeeper<\/td><\/tr><tr><td>Sprechen<\/td><td>Stumm<\/td><td>Grippe<\/td><td>Starker Akzent<\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\">Microsoft Inklusiv Design Matrix<\/figcaption><\/figure>\n\n\n\n<p>&#8220;Woher wei\u00df ich, ob eine Anwendung barrierefrei ist?&#8221; Fenja tr\u00e4gt einen gro\u00dfen Piratenhut. &#8220;Es gibt da Richtlinien.&#8221;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">WCAG<\/h3>\n\n\n\n<p>Die Web Content Accessibility Guidelines, 13 Richtlinien des W3C (World Wide Web Consortium). Link: w3.org\/TR\/WCAG22\/.<br>Fenja liest die Richtlinien vor. &#8220;Die WCAG stellt eine Checkliste mit 86 Erfolgskriterien bereit, aufgeteilt in 4 Prinzipien.&#8221;<br>Es folgen die 4 Prinzipien:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Wahrnehmbar<\/h4>\n\n\n\n<p>(engl. erceiveable) Alle Inhalte auf Webseiten m\u00fcssen vom Benutzer wahrgenommen werden k\u00f6nnen und erkennbar sein.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Bedienbar<\/h4>\n\n\n\n<p>(engl. operable) Die Benutzer m\u00fcssen die Webseite bedienen k\u00f6nnen.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Verst\u00e4ndlich<\/h4>\n\n\n\n<p>(engl. understandable) Inhalte und Navigation m\u00fcssen f\u00fcr die Benutzer verst\u00e4ndlich sein.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Robust<\/h4>\n\n\n\n<p>(engl robust) Die Anwendung muss robust sein, damit sie mit einer Vielzahl von Werkzeugen genutzt werden kann.<\/p>\n\n\n\n<p>&#8220;F\u00fcr einen ersten Aufschlag gibt es Quick-Checks und Analyse-Tools.&#8221; Fenja schaut mit einer Lupe, gezeigt wird das Ergebnis des Tools Lighthouse mit einer Punktzahl von 94 f\u00fcr Barrierefreiheit. Link: wave.org.<br>Aber Achtung, Tools finden nur etwa 30% aller Probleme. F\u00fcr den Rest muss der Mensch ran.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Farbe und Kontrast<\/h3>\n\n\n\n<p>Es werden drei Farbr\u00e4der gezeigt. Eines in normal, eines, wie es mit Rot-Gr\u00fcn-Schw\u00e4che aussieht und eines in Graunt\u00f6nen, wie es sich f\u00fcr Farbenblinde darstellen w\u00fcrde. Die Bilder der Seite sind eingef\u00e4rbt, um Rot-Gr\u00fcn-Schw\u00e4che, bzw. Farbenblindheit aufzuzeigen. Fenja in schwarz-wei\u00df erkl\u00e4rt, &#8220;Farben sind sch\u00f6n, aber nicht jeder kann sie wahrnehmen.&#8221;<br>&#8220;Informationen, die von Farbe abh\u00e4ngen, k\u00f6nnen verloren gehen.&#8221; Fenja steht mit zwei Kellen da, die gleich aussehen, bei normalen Farben aber rot und gr\u00fcn w\u00e4ren. Ebenso die Symbole im Hintergrund mit der Anweisung &#8220;Rot ausw\u00e4hlen&#8221;, was bei der aktuellen Farbgebung unm\u00f6glich zu erkennen ist.<br>Fenja zeigt links und rechts Texte in dunkelgelb auf hellgelb, bzw. gelb auf hellgelb, die schwer zu lesen sind. Sie erkl\u00e4rt, &#8220;Au\u00dferdem kann es anstrengend sein, Text mit geringem Kontrast zu lesen. Oder unm\u00f6glich.&#8221;<br>&#8220;Um das zu vermeiden gibt es Contrast-Checker, die Hintergrundfarbe und Textfarbe vergleichen.&#8221; Fenja steht im Chemielabor und mischt Farben miteinander. Daneben sieht man verschiedene Farbkombinationen und den jeweiligen Kontrast.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Fail: 2.76:1<\/li>\n\n\n\n<li>Level A: 4.5:1<\/li>\n\n\n\n<li>Level AAA: 7.5:1<\/li>\n<\/ul>\n\n\n\n<p>Bereits im Design sollte man auf eine barrierefreie Farb-Palette achten. Es folgen f\u00fcnf bunte Kringel, die allerdings nur unterschiedlich grau dargestellt werden.<br>Fenja sitzt zuletzt vor einem Monitor und sieht den Text &#8220;Hier ist der Link&#8221;, in dem nicht ersichtlich ist, welches Wort farblich als Link hervorgehoben ist. &#8220;Trotzdem gibt es noch viele Situationen, wo man sich auf Farbe verl\u00e4sst.&#8221;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Layout<\/h3>\n\n\n\n<p>Die Seite ist gedreht um den Lesenden ein anderes Format aufzudr\u00e4ngen, wie es auch f\u00fcr viele eingeschr\u00e4nkte Nutzende der Fall ist.<br>Das erste Bild ist heran gezoomt, sodass nur ein Teil sichtbar ist, Fenja mit einer Lupe und ein Ausschnitt der Sprechblase &#8220;\u2026 Seite, um\u2026 zu k\u00f6nnen.&#8221;<br>Im n\u00e4chsten Bild steht Fenja normalgro\u00df mit einer Lupe und einem Buchstaben da. Der Text in der Sprechblase ist diesmal gezoomt, sodass nur ein Teil zu lesen ist: &#8220;andere zoomen nur den Text.&#8221;<br>Die Richtlinien besagen Zoom bis 200%, Nur-Text-Zoom bis 200% und Orientierung.<br>Man sieht ein Ger\u00e4t einmal im Portr\u00e4t- und im Landschafts-Modus. \u00dcber beide verteilt ist der Text, &#8220;Manche k\u00f6nnen ihr Ger\u00e4t nur in einer Ausrichtung nutzen. Z.B. weil es fixiert ist.&#8221;<br>&#8220;Inhalte m\u00fcssen sich responsiv anpassen&#8221;, demonstriert Fenja, indem sie an einem Bild zieht. Inhalte sollten immer die gleiche Reihenfolge beibehalten wie im Quelltext. Es d\u00fcrfen niemals zwei Scrollbalken n\u00f6tig sein, um einen Text\u2026 Der rest ist leider nicht zu lesen, da zwei Scrollbalken angezeigt werden.<br>&#8220;Zur einfachen Orientierung m\u00fcssen alle Seiten gleich aufgebaut sein. Das gilt besonders f\u00fcr Sonderfunktionen wie Login, Suche und Hilfe.&#8221; Fenja h\u00e4lt drei Seiten einer Anwendung hoch, die gleiche Struktur, wenn auch unterschiedlichen Inhalt haben. Im Hintergrund sind Login, Suche und Hilfe hervorgehoben.<br>Um sich auf einer Seite zurecht finden zu k\u00f6nnen, braucht es<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">h1. \u00dcberschriften<\/h4>\n\n\n\n<p>Da die meisten Nutzer Seiten nur \u00fcberfliegen, braucht es diese, um schnell die richtige Information zu finden.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">h2. Formatierung<\/h5>\n\n\n\n<p>Der Inhalt wird so strukturiert und gegliedert. Die Ebenen dabei absteigend und ohne L\u00fccken.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">h2. Semantisches HTML<\/h5>\n\n\n\n<p>Elemente k\u00f6nnen so leichter erkannt und vorgelesen werden.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Beschriftung<\/h3>\n\n\n\n<p>Das Bild ist schwarz, man kann also nichts sehen. Aber h\u00f6ren, was Fenja sagt. &#8220;Nicht jede Nutzerin kann Inhalte sehen&#8221;<br>&#8220;\u2026 oder ausreichend erkennen.&#8221; Dieses Bild ist stark verschwommen. Man erkennt vage Fenja und zwei weitere Bilder, die Anweisung &#8220;Kaktus w\u00e4hlen&#8221; ist allerdings kaum umsetzbar.<br>&#8220;Daf\u00fcr werden Bilder und Grafiken mit Alternativ-Text versehen. Gute Alt-Texte sind eine Kunst f\u00fcr sich.&#8221; Gezeigt werden dazu drei Bilder mit zugeh\u00f6rigem Alt-Text.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Foto Fenja<\/li>\n\n\n\n<li>Logo SI<\/li>\n\n\n\n<li>Komplizierte Grafik\u2026<\/li>\n<\/ul>\n\n\n\n<p>Weiter geht es mit besonderen Bildern, den Icons. &#8220;Auch Icons sind nicht eindeutig. Deswegen immer mit Text kombinieren.&#8221; Man sieht links einzelne Icons wie eine Figur, Wolke, drei Striche und ein Stift. Rechts daneben die gleichen Icons mit Text. Figur mit &#8220;Anmelden&#8221;, Wolke mit &#8220;Speichern&#8221;, drei Striche und &#8220;Menu&#8221; und der Stift mit &#8220;Unterschreiben&#8221;.<br>&#8220;Dynamische Inhalte sollten vom Screen-Reader vorgelesen werden.&#8221; passend dazu sieht man ein Display von einem Shopping-System, wo ein Artikel hinzugef\u00fcgt wird, woraufhin sich der Gesamtpreis des Warenkorbs erh\u00f6ht. Es wird vorgelesen &#8220;neuer Gesamtpreis 42 Euro&#8221;. Hier hilft ARIA.<br>Zuletzt werden Button und Link gegen\u00fcber gestellt. Der Unterschied ist wichtig, denn\u2026<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Button<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Buttons f\u00fchren eine Aktion aus<\/li>\n\n\n\n<li>haben ein click-Event<\/li>\n\n\n\n<li>werden ohne Event nicht vorgelesen<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Link<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>f\u00fchren eine Navigation aus<\/li>\n\n\n\n<li>haben ein href mit Link-Ziel<\/li>\n\n\n\n<li>werden ohne href nicht vorgelesen<\/li>\n<\/ul>\n\n\n\n<p>Die Beschriftung sollte auf die Aktion, bzw. das Ziel hinweisen. Beispielhaft werden hierzu drei Buttons dargestellt, alle mit dem Text &#8220;Hier buchen&#8221;. Denkt ans Vorlesen!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Tastatur<\/h3>\n\n\n\n<p>Mit kleinen Bildern werden verschiedene Tools aufgef\u00fchrt:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Touchpad<\/li>\n\n\n\n<li>Finger<\/li>\n\n\n\n<li>Maus<\/li>\n\n\n\n<li>Joystick<\/li>\n\n\n\n<li>Sipp-And-Puff \/ Strohhalm<\/li>\n\n\n\n<li>Tastatur<\/li>\n<\/ul>\n\n\n\n<p>Dazu erkl\u00e4rt Fenja, &#8220;Es gibt verschiedene Eingabem\u00f6glichkeiten. Und genauso viele Gr\u00fcnde, warum sie nicht genutzt werden k\u00f6nnen.&#8221; Passend dazu hat Fenja einen Arm in der Schlinge und der andere ist geschient.<br>&#8220;Stellvertretend f\u00fcr alle assistiven Eingabeger\u00e4te muss eine Anwendung ausschlie\u00dflich per Tastatur bedienbar sein.&#8221; Das Bild zeigt in der Hauptsache eine Tastatur, auf die Fenja mit einem Finger tippt. Mehr sollte nicht n\u00f6tig sein, deswegen sagt sie, &#8220;Und zwar Single-Pointer. Navigation. Und s\u00e4mtliche Funktionen.&#8221;<br>Die wichtigste Taste hierf\u00fcr ist die Tab-Taste, die Fenja im n\u00e4chsten Bild hochh\u00e4lt und sagt, &#8220;Daf\u00fcr muss die Reihenfolge stimmen, sodass die Tab-Taste genutzt werden kann.&#8221; Im Bild sieht man au\u00dferdem wichtige Elemente:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&#8220;Zum Inhalt&#8221; Element, das bei Tab Navigation angezeigt werden sollte, um die Navigation und<\/li>\n\n\n\n<li>Header-Inhalte zu \u00fcberspringen<\/li>\n\n\n\n<li>Tab-Navigation mit Fokus und aktivem Tab<\/li>\n\n\n\n<li>Radiogroup<\/li>\n\n\n\n<li>Dropdown<\/li>\n<\/ul>\n\n\n\n<p>Der Fokus muss eindeutig ersichtlich sein.<br>&#8220;Die meisten Elemente funktionieren von Haus aus.&#8221; Im Bezug auf den &#8220;Tab Index&#8221;. Besonders bei Eigenbau darauf achten, dass alles per Tastatur verf\u00fcgbar ist.<br>Achtung! Keyboard-Traps sind Zust\u00e4nde, aus denen per Tastatur nicht heraus navigiert werden kann.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">ScreenReader<\/h3>\n\n\n\n<p>Das Bild ist wieder schwarz, wie schon bei der Beschriftung. Man sieht nur die Aussprache &#8220;Schon wieder schwarze Bilder?&#8221;<br>Im n\u00e4chsten Bild kommt die Antwort. &#8220;Ja, aber fortgeschritten&#8221;, zudem wird der Schriftzug &#8220;Level 02&#8221; angezeigt. Die Sprache kommt aus einem Lautsprecher.<br>&#8220;Diesmal geht es darum, Elemente vorlesbar zu machen. Daf\u00fcr m\u00fcssen sie in erster Linie semantisch korrekt sein.&#8221;<br>Jetzt ist Fenja wieder sichtbar und verteilt Schilder an HTML-Elemente, wie &#8220;collapsed&#8221;, &#8220;aktiv&#8221; und &#8220;inaktiv&#8221; und erkl\u00e4rt dazu &#8220;Bei reaktiven Elementen (Akkordeon, Dropdown, Links, \u2026) muss der Zustand erkennbar sein.&#8221;<br>&#8220;Zusammengeh\u00f6rige Elemente m\u00fcssen entsprechend geschachtelt werden.*&#8221; Der Stern verweist auf eine Fu\u00dfnote, die unterhalb von Fenjas F\u00fc\u00dfen angezeigt wird: Und Verweise wie Fu\u00dfnoten werden direkt mit vorgelesen.<br>&#8220;Alle komplexen Elemente brauchen Beachtung, ob sie barrierefrei sind.&#8221; Aufgef\u00fchrt, um Fenja herum, werden besonders problematische Elemente:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tooltip<\/li>\n\n\n\n<li>Autocomplete<\/li>\n\n\n\n<li>Dialog<\/li>\n\n\n\n<li>Akkordeon<\/li>\n\n\n\n<li>Karussel<\/li>\n\n\n\n<li>Datepicker<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">ARIA<\/h4>\n\n\n\n<p>&#8220;Zum Nachhelfen gibt es ARIA&#8221; Accessible Rich Internet Applications<br>Rollen (role) definieren die Art eines Elements. Zust\u00e4nde (state) und Eigenschaften (properties) erg\u00e4nzen die aktuell g\u00fcltigen Informationen, passend zur Rolle.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Formulare<\/h3>\n\n\n\n<p>Fenja pr\u00e4sentiert eine Login-Maske. &#8220;Zur Nutzerinteraktion braucht es Formulare.<br>&#8220;Da wir etwas vom Nutzer wollen, sollten wir es ihm so einfach wie m\u00f6glich machen.&#8221; Passend dazu bringt Fenja ein Namens-Label und ein Input mit dem Placeholder &#8220;nutzername&#8221; zusammen.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Input<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Label (verkn\u00fcpft mit Input) &#8211; eindeutig (Bsp. Name)<\/li>\n\n\n\n<li>Placeholder &#8211; beispielhafte Eingabe, ersetzt nicht das Label<\/li>\n\n\n\n<li>Pflichtfeld-Kennzeichnung &#8211; m\u00f6glichst nur Pflichtfelder abfragen<\/li>\n\n\n\n<li>Fehlermeldung &#8211; soll bei Fehlerbehebung helfen, nicht &#8220;Eingabe falsch&#8221;<\/li>\n<\/ul>\n\n\n\n<p>&#8220;Inhalte die zusammengeh\u00f6ren, m\u00fcssen entsprechend strukturiert sein.&#8221; Fenja zeigt ein Formular, indem pers\u00f6nliche Angaben und Passwort mit einer Linie von einander abgegrenzt sind.<br>&#8220;Die Autofill-funktion erm\u00f6glicht besonders einfaches Ausf\u00fcllen. Daf\u00fcr m\u00fcssen die Felder nur sinnvoll benannt sein. Ggf. mit dem autofill-Attribut nachhelfen.&#8221; Gezeigt wird die Autofill-Funktion eines Browsers die es erm\u00f6glicht, abgespeicherte Personendaten automatisch einzugeben.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Fehler<\/h4>\n\n\n\n<p>Fehlermeldungen werden an fehlerhaften Feldern angezeigt.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pr\u00e4vention durch Hilfestellung<\/li>\n\n\n\n<li>Kennzeichnen der fehlerhaften Felder (nicht nur mit Farbe)<\/li>\n\n\n\n<li>Hilfe zur Korrektur durch Fehlermeldung<\/li>\n<\/ul>\n\n\n\n<p>Nach dem Ausf\u00fcllen des Formulars\u2026 \u00dcberpr\u00fcfbar? Korrektur? Was bewirkt Abschicken?<br>&#8220;Und nach dem Abschicken braucht es eine R\u00fcckmeldung&#8221; Zum Beispiel &#8220;Danke f\u00fcr die Anmeldung zum Newsletter.&#8221;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Video &amp; Audio<\/h3>\n\n\n\n<p>Man sieht, dass Fenja redet. Sie h\u00e4lt inne, dann f\u00e4llt ihr auf, dass man sie nicht h\u00f6rt. Schlie\u00dflich schaltet sie Untertitel an und man liest &#8220;Nicht jeder kann (zu) h\u00f6ren&#8221;<br>Nun tr\u00e4gt Fenja zufrieden Kopfh\u00f6rer. &#8220;Je nach Art des Inhaltes gibt es unterschiedliche Text-Alternativen.&#8221;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Untertitel<\/h4>\n\n\n\n<p>Gesprochenes in Textform (Wenn Audio nicht verf\u00fcgbar ist oder das Gesprochene schwer verst\u00e4ndlich)<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Transkript<\/h4>\n\n\n\n<p>Enth\u00e4lt neben dem Gesprochenen auch Regieanweisungen<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Audio Description<\/h4>\n\n\n\n<p>Zus\u00e4tzlich zum Transkript vermittelt ein Erz\u00e4hler wichtige, visuelle Informationen<\/p>\n\n\n\n<p>Fenja steht vor einem Videoplayer mit Baustellenabsperrung und zeigt auf, &#8220;Die Bedienelemente eines Players m\u00fcssen barrierefrei sein. Alternativtexte m\u00fcssen in der N\u00e4he zu finden sein.&#8221;<br>Im n\u00e4chsten Bild stellt sie sich vor den pausierten Player, denn &#8220;Videos d\u00fcrfen nicht automatisch starten. Sound darf nicht automatisch abspielen.&#8221;<\/p>\n\n\n\n<p>&#8220;Dieser Comic ist keine vollst\u00e4ndige Anleitung. Besonders dynamische oder selbstgebaute Elemente brauchen viel Aufmerksamkeit.&#8221; Hinter Fenja sieht man entsprechende Elemente durch die Gegend schwirrend, wie eine digitale Zeitanzeige, einen Ladebalken, Kalender, Wecker und ein Quietscheentchen.<br>Im n\u00e4chsten Bild sieht man drei Menschen mit unterschiedlicher Behinderung, die digitale Produkte testen. &#8220;Das Wichtigste ist es, sich in die Anwendenden hinein zu versetzen und Betroffene um Unterst\u00fctzung zu bitten.&#8221;<br>&#8220;Los geht&#8217;s und viel Erfolg&#8221;, winkt Fenja, w\u00e4hrend sie im Raumanzug durch den Weltraum der ersten Seite, mit dem Globus und dem WWW fliegt.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Digitale Barrierefreiheit &#8211; Der Comic&nbsp;\u00a9 2024&nbsp;by&nbsp;Fenja Hanisch&nbsp;is licensed under&nbsp;CC BY-ND 4.0.&nbsp;To view a copy of this license, visit<a href=\"http:\/\/creativecommons.org\/licenses\/by-nd\/4.0\/\">http:\/\/creativecommons.org\/licenses\/by-nd\/4.0\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Um das Thema Digitale Barrierefreiheit leichter zu vermitteln, gibt es hier einen Comic, der in 12 Seiten durch die verschiedenen Themenfelder f\u00fchrt.<\/p>\n","protected":false},"author":1,"featured_media":695,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[70],"tags":[78,71],"class_list":["post-700","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-accessibility","tag-comic","tag-digital-accessibility"],"translation":{"provider":"WPGlobus","version":"3.0.0","language":"de","enabled_languages":["en","de"],"languages":{"en":{"title":true,"content":true,"excerpt":true},"de":{"title":false,"content":false,"excerpt":false}}},"_links":{"self":[{"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/posts\/700","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/comments?post=700"}],"version-history":[{"count":5,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/posts\/700\/revisions"}],"predecessor-version":[{"id":710,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/posts\/700\/revisions\/710"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/media\/695"}],"wp:attachment":[{"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/media?parent=700"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/categories?post=700"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/tags?post=700"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}