„Barrierefreiheit bedeutet, deine Webseiten f\u00fcr so viele Menschen wie m\u00f6glich nutzbar zu machen. Traditionell denken wir dabei an Menschen mit Behinderungen, aber die Praxis, deine Webseiten zug\u00e4nglich zu machen, kommt auch anderen Gruppen zugute, z. B. denen, die mobile Ger\u00e4te benutzen, oder denen mit langsamen Netzwerkverbindungen.“ (Quelle<\/a>)<\/em><\/p><\/blockquote>\n Je zug\u00e4nglicher deine Webseite ist, desto mehr Menschen k\u00f6nnen sie nutzen. Wenn eine Webseite weniger zug\u00e4nglich ist oder die Barrierefreiheit keine Priorit\u00e4t hat, wird ein Teil deines Publikums abgeschreckt oder ganz davon abgehalten, alle Informationen zu erhalten, die deine Webseite zu bieten hat.<\/p>\n In diesem Beitrag erkl\u00e4ren wir, warum Barrierefreiheit wichtig ist, was sie bedeutet, inwieweit WordPress bereits barrierefrei ist, wie Webseiten-Ersteller\/innen ihre Webseiten barrierefrei gestalten k\u00f6nnen und wie man die Barrierefreiheit einer Webseite testet.<\/p>\n Los geht’s!<\/p>\n Barrierefreiheit im Internet bedeutet, dass eine Webseite so gestaltet und entwickelt wird, dass alle Menschen sie nutzen k\u00f6nnen. Dazu geh\u00f6rt auch, wie sie die Webseite verstehen, navigieren<\/a>, mit ihr interagieren und zu ihr beitragen k\u00f6nnen.<\/p>\n Ein guter Weg, um Barrierefreiheit zu definieren und zu verstehen, ist es, mit einigen Mythen aufzur\u00e4umen.<\/p>\n\n Eine barrierefreie Webseite sollte auch von Menschen mit auditiven, kognitiven, neurologischen, k\u00f6rperlichen, sprachlichen und visuellen Behinderungen genutzt werden k\u00f6nnen. Menschen mit Behinderungen stehen bei den Bem\u00fchungen um Barrierefreiheit im Mittelpunkt. Sie sind jedoch nicht die einzigen, die von einer barrierefreien Webseite profitieren.<\/p>\n Barrierefreiheit im Internet verbessert das Nutzererlebnis f\u00fcr alle folgenden Personen und Situationen:<\/p>\n Wahrscheinlich hast du in den letzten Jahren mehr und mehr \u00fcber Barrierefreiheit im Internet geh\u00f6rt. Da das Internet w\u00e4chst und sich immer mehr Menschen darauf verlassen, wird Barrierefreiheit zu einem immer wichtigeren Thema. Aber es ist nicht nur eine Modeerscheinung.<\/p>\n „Digitale Barrierefreiheit ist ein B\u00fcrgerrecht und ein Menschenrecht von Menschen mit Behinderung auf der ganzen Welt.“<\/em> Im Laufe der Zeit und mit der zunehmenden Verbreitung des Internets steigt auch der Bedarf an Barrierefreiheit im Internet. Wenn eine Webseite nicht vollst\u00e4ndig gem\u00e4\u00df den WCAG-Richtlinien zug\u00e4nglich ist, k\u00f6nnen Einzelpersonen rechtliche Schritte gegen den Entwickler oder Betreiber der Webseite einleiten.<\/p>\n Ein Blick auf die Zahl der Klagen zum Thema Barrierefreiheit im Internet zeigt, wie ernst die Menschen dieses Thema nehmen. Die Zahl der Klagen hat sich von 2017 bis 2018 fast verdreifacht<\/a>. Seitdem liegt die Zahl bei durchschnittlich 2.345 Klagen pro Jahr. Sogar w\u00e4hrend der COVID-19-Pandemie im Jahr 2020 stieg die Zahl der ADA Title III Webseiten-Zug\u00e4nglichkeitsklagen vor Bundesgerichten auf 12% im Vergleich zum Vorjahr.<\/p>\n Barrierefreiheit im Internet ist ein Dauerbrenner. Bei der Entwicklung von Software und Webseiten<\/a> m\u00fcssen wir die Barrierefreiheit in unsere Prozesse einbeziehen. Das ist nicht nur notwendig, weil niemand gerne verklagt wird, sondern auch, weil das Internet die Bed\u00fcrfnisse aller Menschen erf\u00fcllen muss, ganz gleich, welche Bed\u00fcrfnisse sie haben.<\/p>\n Wenn du erst einmal verstanden hast, warum Barrierefreiheit wichtig ist – und dass es Konsequenzen haben kann, wenn du ihr keine Priorit\u00e4t einr\u00e4umst -, hast du es vielleicht eilig, sicherzustellen, dass deine Webseite WCAG-konform ist.<\/p>\n Einer der beliebtesten Mythen \u00fcber Barrierefreiheit im Internet ist, dass du ein einfaches Plugin herunterladen<\/a> oder eine Software installieren kannst, die deine Webseite mit einem Fingerschnippen vollst\u00e4ndig barrierefrei macht. Das ist schlichtweg unm\u00f6glich.<\/p>\n Laut a11yproject.com<\/a> sind Barrierefreiheitsprobleme entweder objektiv oder subjektiv. Objektive Probleme k\u00f6nnen durch Code erkannt werden, w\u00e4hrend subjektive Probleme ein menschliches Urteil erfordern. Code kann Probleme, die in die letztgenannte Kategorie fallen, nie genau l\u00f6sen, und Versuche, dies zu tun, schaden oft mehr als sie n\u00fctzen.<\/p>\n „Overlay“-L\u00f6sungen sind automatisierte Softwarel\u00f6sungen, die, wie wir wissen, nur ~30% der WCAG-Probleme von vornherein erkennen k\u00f6nnen. Das liegt daran, dass die WCAG nuanciert und interpretierbar sind. Maschinen sind darin nicht gut.“ (Quelle<\/a>)<\/em><\/p><\/blockquote>\n Denke daran, dass es bei der Barrierefreiheit nicht um Risikovermeidung geht, sondern darum, allen Nutzern ein optimales Erlebnis zu bieten.<\/p>\n Die Web Accessibility Initiative hat eine Reihe von Zug\u00e4nglichkeitsrichtlinien f\u00fcr Webinhalte<\/a> (Web Content Accessibility Guidelines – WCAG) entwickelt, die dir dabei helfen k\u00f6nnen, sicherzustellen, dass deine Webseite den Richtlinien entspricht und vollst\u00e4ndig zug\u00e4nglich ist. Wenn du eine Webseite gestaltest, entwickelst oder supportest, solltest du mit diesen Richtlinien bestens vertraut sein.<\/p>\n Barrierefreiheit ist nicht nur ein Thema f\u00fcr Entwickler\/innen, sondern auch f\u00fcr Designer\/innen, Vermarkter\/innen, Inhaltsautor\/innen, Projektmanager\/innen und viele mehr. Barrierefreiheit sollte w\u00e4hrend des gesamten Prozesses der Erstellung deiner Webseite, von der Planung bis zum Start, eine Priorit\u00e4t sein. Du solltest die Barrierefreiheit einer Webseite auch nach dem Start kontinuierlich verbessern.<\/p>\n Dies ist eine der wichtigsten Fragen, die sich viele Menschen stellen, wenn sie WordPress als Option f\u00fcr die Erstellung einer Webseite in Betracht ziehen: Wie zug\u00e4nglich ist es bereits, und wie viel Arbeit muss man leisten, um WordPress zug\u00e4nglich zu machen? Da es darauf keine pauschale Antwort gibt, wollen wir uns ansehen, inwieweit WordPress bereits barrierefrei ist.<\/p>\n Die gute Nachricht ist, dass WordPress im Laufe der Zeit immer zug\u00e4nglicher geworden ist<\/a>. Mit jeder neuen Version werden kleine Schritte und Fortschritte im Hinblick auf Barrierefreiheit gemacht. Je mehr Menschen sich mit dem Thema Barrierefreiheit auseinandersetzen, desto mehr Menschen k\u00f6nnen ihm Priorit\u00e4t einr\u00e4umen.<\/p>\n Au\u00dferdem setzen sich viele Menschen in der WordPress-Community leidenschaftlich und lautstark f\u00fcr diese Themen ein. Jedes neue Standard-WordPress-Theme<\/a> unternimmt zus\u00e4tzliche Schritte, um barrierefrei zu werden. Entwicklerinnen und Entwickler entwickeln neue Tools und schreiben st\u00e4ndig Anleitungen und Artikel \u00fcber Barrierefreiheit in WordPress. So bist du auf deinem Weg zur Barrierefreiheit von WordPress nie allein.<\/p>\n Wenn du mehr \u00fcber WordPress und Barrierefreiheit erfahren m\u00f6chtest, besuche WordPress.tv und schau dir diese Vortr\u00e4ge \u00fcber Barrierefreiheit an<\/a>.<\/p>\n Trotz der j\u00fcngsten Fortschritte ist WordPress nicht immer zu 100% barrierefrei. Jede WordPress-Version steht in der Kritik, wenn sie nicht barrierefrei ist. Anfang 2019 f\u00fchrte WPCampus eine umfassende Pr\u00fcfung der damals neuesten Gutenberg<\/a>-Version durch. Arbeiten wie diese sind unglaublich wichtig; seit diesem Audit wurden 116 Probleme im Zusammenhang mit der Barrierefreiheit behoben<\/a>.<\/p>\n F\u00fcr behinderte Inhaltsersteller\/innen kann es schwierig sein, mit WordPress zu ver\u00f6ffentlichen. Da es unm\u00f6glich ist, alle Aspekte der barrierefreien Gestaltung und Entwicklung zu automatisieren, kann jeder mit WordPress unzug\u00e4ngliche Webseiten erstellen.<\/p>\n „Das Frontend von WordPress ist so ziemlich das, was es schon seit Jahren ist: Es ist durchaus in der Lage, barrierefrei zu sein, aber es h\u00e4ngt ganz vom Entwickler ab, der deine Webseite erstellt. Ein schlechtes Theme oder unzug\u00e4ngliche Plug-ins machen den Unterschied aus. Der Admin hat sich weiter verbessert – es war ein harter Weg, den Gutenberg-Editor in Richtung Barrierefreiheit zu entwickeln, aber es gibt Fortschritte zu verzeichnen. Dennoch ist es ein st\u00e4ndiger Kampf, R\u00fcckschritte bei der Barrierefreiheit mit jeder neuen Interface-Komponente zu vermeiden.“ (Quelle<\/a>)<\/em><\/p><\/blockquote>\n Was bedeutet das f\u00fcr dich als WordPress-Entwickler<\/a> oder Designer? Dein Weg zu einer vollst\u00e4ndig barrierefreien Webseite ist etwas k\u00fcrzer, wenn du mit WordPress beginnst. Trotzdem ist es noch ein weiter Weg, bis du die Ziellinie erreichst.<\/p>\n Kommen wir nun zu den Schritten, die du unternehmen kannst, um sicherzustellen, dass eine WordPress Webseite f\u00fcr alle Nutzer\/innen zug\u00e4nglich ist.<\/p>\n Egal, was du tust, lass die Barrierefreiheit nie als eine Aufgabe am Ende des Projekts stehen. Es sollte eine Priorit\u00e4t sein, die von Anfang an in deinen Prozess integriert wird. Und es sollte ein kontinuierliches Ziel sein, sobald deine Webseite online ist.<\/p>\n Es gibt keine Checkliste, die man befolgen oder automatisieren kann, um 100%ige Barrierefreiheit zu gew\u00e4hrleisten. Ein Gro\u00dfteil der Arbeit h\u00e4ngt von deinen Plugins, deinem Theme und deinem Inhalt<\/a> ab.<\/p>\n Die Erstellung einer barrierefreien Webseite ist wie der Bau eines sicheren Geb\u00e4udes – es gibt zwar Richtlinien, aber individuelle Aufmerksamkeit, Instandhaltung und durchdachte Renovierungen sind unerl\u00e4sslich, um das Ziel zu erreichen.<\/p>\n Beginnen wir mit einigen Best Practices f\u00fcr die barrierefreie Gestaltung<\/a> von WordPress Webseiten, aufgeschl\u00fcsselt nach Arten. Diese Informationen sollen dir als solide Grundlage f\u00fcr deine Ausbildung in Sachen Barrierefreiheit dienen.<\/p>\n Alle Bilder auf deiner Webseite m\u00fcssen f\u00fcr alle Nutzer\/innen zug\u00e4nglich sein. Da nicht alle Nutzerinnen und Nutzer Bilder sehen k\u00f6nnen, verwenden manche vielleicht Hilfsmittel, um visuelle Elemente zu verstehen, und deine Webseite sollte daher bereit sein, mit dieser Technologie zu arbeiten.<\/p>\n Der Alternativtext (oder „alt“) ist eine schriftliche Beschreibung, die du an ein Bild anh\u00e4ngst. Bildschirmleseger\u00e4te lesen diese Beschreibung laut vor, wenn ein Gast das Bild nicht sehen kann. Alt-Text sollte f\u00fcr alle Bilder verwendet werden, die hilfreiche Informationen auf der Seite liefern. Das gilt f\u00fcr alle Bilder, von Fotos<\/a> \u00fcber Symbole bis hin zu Infografiken.<\/p>\n Die einzige Ausnahme ist, wenn ein Bild als rein „dekorativ“ angesehen wird. Hintergrundbilder<\/a>, Trennlinien oder Bilder, die Text auf der Seite selbst zeigen, brauchen nicht unbedingt einen Alt-Text.<\/p>\n Wenn du einen Alt-Text schreibst, solltest du das Bild nicht so beschreiben, wie es ist. Gib stattdessen an, was das Bild im Kontext der Seite bedeutet. Hier sind einige gute Richtlinien, die dir helfen, einen guten Alternativtext zu schreiben:<\/p>\n Das Hinzuf\u00fcgen von Alt-Text zu den Bildern auf deiner Webseite ist einfacher, als du vielleicht denkst. Du kannst diesen Text an der gleichen Stelle hinzuf\u00fcgen, an der du auch die Bildunterschrift einf\u00fcgst<\/a>.<\/p>\n \u00d6ffne deine Mediathek<\/strong> und w\u00e4hle das Bild aus, das du bearbeiten m\u00f6chtest. Daraufhin \u00f6ffnet sich der Einstellungsbildschirm<\/strong> f\u00fcr dieses Bild. F\u00fcge im Feld Alternativer Text<\/strong> deinen Alt-Text ein und klicke dann auf Speichern<\/strong>:<\/p>\n Bei der Gestaltung einer barrierefreien Webseite ist ein angemessener Farbkontrast wichtig. Ein schlechter Farbkontrast kann die Lesbarkeit deiner Webseiten in vielen F\u00e4llen beeintr\u00e4chtigen, z. B. f\u00fcr Menschen mit Sehschw\u00e4che, Farbenblinde oder Menschen, die bestimmte Ger\u00e4te benutzen. Bilder, Texte und Elemente wie Schaltfl\u00e4chen brauchen alle einen angemessenen Farbkontrast.<\/p>\n Der Farbkontrast gibt an, wie hell oder dunkel Farben erscheinen, wenn sie gegeneinander oder sehr nahe beieinander stehen. Zum Beispiel hat schwarzer Text auf wei\u00dfem Hintergrund einen viel h\u00f6heren Farbkontrast (21:1) als gelber Text auf wei\u00dfem Hintergrund (1,08:1). WCAG 2.0 AA verlangt ein Mindestverh\u00e4ltnis von 4,5:1 f\u00fcr normalen Text und 3:1 f\u00fcr gr\u00f6\u00dferen Text (fett 18px oder Standard 24px und gr\u00f6\u00dfer).<\/p>\n Was bedeutet das genau? Die einfachste Methode, um herauszufinden, ob deine Farben gut zusammenpassen<\/a>, ist, sie in ein Tool zum Testen des Kontrasts einzugeben, z. B. den WebAIM Contrast Checker<\/a>. Es gibt viele kostenlose Tools im Internet.<\/p>\n Mehr \u00fcber das Testen von Farben erf\u00e4hrst du in unserem Testbereich<\/a>.<\/p>\n Wenn du mehr und mehr Farbkombinationen ausprobierst, wirst du immer besser in der Lage sein, allein vom Sehen her zu bestimmen, welche Farbkombinationen funktionieren und welche nicht.<\/p>\n Du musst auch darauf achten, dass du die Farbe nicht als Hauptunterscheidungsmerkmal einsetzt. Viele Webseiten haben zum Beispiel Links, die eine andere Farbe haben als der umgebende Text. Wenn die Farbe jedoch aus irgendeinem Grund schwer zu erkennen ist, k\u00f6nnte es f\u00fcr den Nutzer unm\u00f6glich sein, zwischen einem verlinkten und einem nicht verlinkten Wort zu unterscheiden. Verwende Farbe, um einen Link zu versch\u00f6nern, aber f\u00fcge eine Unterstreichung unter den Text, um den Link zug\u00e4nglich zu machen.<\/p>\n Ein Gro\u00dfteil dessen, was wir im Internet erleben, ist Text. Wir nutzen Webseiten, um Artikel, Rezepte, Geschichten und vieles mehr zu lesen. Du liest jetzt gerade diesen Beitrag! Deshalb muss der Text f\u00fcr alle Leserinnen und Leser optimiert werden – egal, ob sie mit den Augen oder den Ohren lesen.<\/p>\n Wenn es um Barrierefreiheit geht, gibt es vor allem zwei M\u00f6glichkeiten, \u00fcber Text zu sprechen: Schriftarten<\/a> und -gr\u00f6\u00dfen.<\/p>\n Eine barrierefreie Schrift ist sowohl in kleinen als auch in gro\u00dfen Gr\u00f6\u00dfen<\/a> gut lesbar. Schriftarten wie Tahoma, Calibri, Helvetica, Arial, Verdana, Times New Roman, Arvo, Museo Slab und Rockwell sind alle barrierefrei. Lesern mit Legasthenie kann es schwerfallen, bestimmte Schriften zu lesen, darunter viele Serifenschriften. Serifenlose Schriftarten<\/a> f\u00fcr Flie\u00dftext sind in der Regel die sicherere Wahl. Am besten vermeidest du Display-Schriften wie Handschrift<\/a> oder Kursivschrift<\/a>, es sei denn, der Text ist gro\u00df, sp\u00e4rlich und haupts\u00e4chlich dekorativ.<\/p>\n Die Gr\u00f6\u00dfe der Schrift<\/a> ist f\u00fcr die Barrierefreiheit unglaublich wichtig. Im Folgenden werden einige Faustregeln f\u00fcr barrierefreie Schriftgr\u00f6\u00dfen vorgestellt.<\/p>\n Standardschriftarten sollten mindestens 9pt oder 12px gro\u00df sein. 12 pt oder 16 px werden empfohlen. Nach den WCAG-Richtlinien sollte der Text bei einer Vergr\u00f6\u00dferung von 200% lesbar sein. Es wird empfohlen, die Schriftgr\u00f6\u00dfe in Prozent oder em anstelle von Pixeln oder Punkten festzulegen. Unterschiedliche Schriftgr\u00f6\u00dfen zu verwenden, ist in Ordnung, aber achte darauf, dass dein Text gro\u00df genug ist, um ihn lesen zu k\u00f6nnen, wenn du eine leichte Schrift verwendest.<\/p>\n Dies ist nicht das A und O f\u00fcr eine barrierefreie Gestaltung. Aber es ist wichtig, dass du wei\u00dft, wo du anfangen kannst. Wenn du dich eingehender mit dem Thema Barrierefreiheit besch\u00e4ftigen willst, solltest du dir diese Ressourcen ansehen:<\/p>\n Bei der Entwicklung einer Webseite oder der dazugeh\u00f6rigen Software (wie Themes und Plugins) gibt es wichtige Dinge, die du im Hinblick auf Barrierefreiheit beachten musst. Einiges davon \u00fcberschneidet sich mit dem Design, aber im n\u00e4chsten Abschnitt geht es vor allem darum, wie deine Webseite funktioniert und wie deine Nutzer\/innen mit ihr interagieren.<\/p>\n Die Nutzer\/innen sollten in der Lage sein, mit deiner Webseite zu interagieren und sie relativ einfach zu nutzen. Dazu geh\u00f6rt nicht nur das Betrachten von Bildern und das Lesen von Texten, sondern auch die Interaktion mit Men\u00fcs, Formularen<\/a>, Schaltfl\u00e4chen und Videos<\/a>.<\/p>\n Achte beim Aufbau deiner Webseite darauf, dass alle interaktiven Elemente leicht zu erkennen sind. Alle Navigationsmen\u00fcs – von der Kopf- bis zur Fu\u00dfzeile<\/a> – sollten mit der Tastatur bedienbar sein. Das Aussehen von Links und Schaltfl\u00e4chen sollte sich \u00e4ndern, wenn sie mit dem Mauszeiger Die Navigation auf deiner Webseite<\/a> sollte einheitlich und klar sein. Wie du die Navigationslinks benennst, gestaltest und positionierst, ist unglaublich wichtig. Durchdachte Breadcrumbs<\/a> und klare \u00dcberschriften erm\u00f6glichen es den Nutzern, sicher mit deinen Inhalten zu interagieren.<\/p>\n Wahrscheinlich hast du ein oder zwei<\/a> Formulare auf deiner Webseite. Du wirst \u00fcberrascht sein, wie viele Formulare unzug\u00e4nglich sind. Deine Formularelemente m\u00fcssen entweder auf der linken Seite oder oberhalb des Feldes beschriftet sein. (Kontrollk\u00e4stchen und Optionsfelder k\u00f6nnen auf der rechten Seite platziert werden.) Es sollte f\u00fcr die Nutzer\/innen klar ersichtlich sein, wof\u00fcr jedes Formularfeld gedacht ist.<\/p>\n Wenn du Inhalte auf deiner Webseite hast, die automatisch abgespielt werden, wie z. B. GIFs<\/a>, Slider<\/a>, Karussells, Videos oder Musik<\/a>, sollte es sichtbare Steuerelemente geben, mit denen der Nutzer die Animation oder den Ton anhalten kann. Am besten ist es, wenn du die M\u00f6glichkeit hast, das Element anzuhalten, zu pausieren oder ganz auszublenden.<\/p>\n Wenn du als Entwicklerin oder Entwickler tief in die Entwicklung von barrierefreien Websites eintauchen willst, schau dir diese Tipps direkt vom W3C an<\/a>.<\/p>\n Wenn du deine Webseite selbst erstellst, kannst du vieles von dem, was in diesem Beitrag beschrieben wird, durch die Wahl eines barrierefreien Themes erreichen. F\u00fcr Entwickler\/innen ist es wichtig zu verstehen, was ein Theme barrierefrei macht, damit sie es bei ihren Projekten vorrangig einsetzen k\u00f6nnen.<\/p>\n WordPress Themes<\/a> bestimmen, wie deine Webseite aussieht. Viele Themes werden bereits mit Farbschemata und Schriftfamilien ausgeliefert. Du musst unbedingt sicherstellen, dass diese Farben und Schriftarten den oben genannten Anforderungen entsprechen. Viele Themes preisen sich selbst als „barrierefrei“ an, aber das stimmt nicht immer. Teste selbst, ob ein Theme barrierefrei ist oder nicht.<\/p>\n Das Accessibility-Team von WordPress.com hat eine Liste mit 92 kostenlosen Themes im WordPress-Repository<\/a> zusammengestellt, die du sofort nutzen kannst.<\/p>\n Wenn du ein barrierefreies Theme erstellst, solltest du von Anfang an mit den WCAG-Anforderungen vertraut sein. Zu den Bereichen, die bei der Entwicklung ber\u00fccksichtigt werden m\u00fcssen, geh\u00f6ren:<\/p>\n Setze ein Lesezeichen f\u00fcr die WordPress-Richtlinien zur Barrierefreiheit<\/a>, damit du sie bei der Erstellung deines Themes schnell zur Hand hast.<\/p>\n Mit WordPress Plugins<\/a> kannst du deiner Webseite Plug-and-Play-Funktionen hinzuf\u00fcgen. Es gibt zwei Arten von WordPress-Plugins f\u00fcr Barrierefreiheit: solche, die dir helfen, eine barrierefreie Webseite zu erstellen, und solche, die eine bestehende Webseite f\u00fcr Nutzer\/innen zug\u00e4nglich machen.<\/p>\n H\u00fcte dich vor WordPress Plugins, die dir Garantien wie „Barrierefreiheit mit einem Klick“ oder „automatisch barrierefrei“ geben. Diese Dinge sind unm\u00f6glich. Plugins sind Tools, die dir helfen k\u00f6nnen, deine Ziele in Sachen Barrierefreiheit zu erreichen, und keine Zauberst\u00e4be, die dir die ganze Arbeit abnehmen. Manchmal k\u00f6nnen Plugins deine Bem\u00fchungen um Barrierefreiheit sogar behindern – sei also vorsichtig!<\/p>\n Es gibt unz\u00e4hlige Plugins, die versprechen, die Barrierefreiheit zu verbessern, zu \u00fcberwachen oder zu beheben. Sie k\u00f6nnen deine Webseite \u00fcberpr\u00fcfen und dir sagen, wo du Verbesserungen vornehmen musst. Oder sie stellen Frontend-Tools zur Verf\u00fcgung, mit denen du deine Webseite leichter barrierefrei gestalten kannst.<\/p>\n Einige davon sind sehr hilfreich. Andere hingegen machen falsche Versprechungen. \u00dcberpr\u00fcfe ein solches Plugin immer gr\u00fcndlich, bevor du es einsetzt.<\/p>\n Einige Plugins erstellen interaktive Inhalte, wie Quizze und Slider. Wie bereits erw\u00e4hnt, m\u00fcssen diese Elemente besonders beachtet und getestet werden, um sicherzustellen, dass sie vollst\u00e4ndig zug\u00e4nglich sind. Teste ein interaktives Plugin immer gr\u00fcndlich auf einer Staging- oder Entwicklungsseite<\/a>, bevor du es live schaltest<\/a>.<\/p>\n Das Gleiche gilt f\u00fcr Formular Plugins<\/a>. Leider haben viele von ihnen Probleme mit der Zug\u00e4nglichkeit. Wenn du das feststellst, sind individuell programmierte Formulare eine gute Alternative.<\/p>\n Eine beliebte Kategorie von Plugins sind Page Builder Plugins<\/a>. Mit ihnen kannst du schnell robuste und anspruchsvolle Drag-and-Drop-Designs erstellen. Allerdings bringen sie oft mehr Probleme mit der Barrierefreiheit mit sich, als sie l\u00f6sen. Es gibt keine Patentl\u00f6sung f\u00fcr dieses Problem, also halte dein Design einfach und stelle sicher, dass du alle Elemente auf ihre Zug\u00e4nglichkeit hin testest.<\/p>\n Eine Zug\u00e4nglichkeitserkl\u00e4rung ist eine Seite auf deiner Webseite, auf der du deine internen Richtlinien, deine Ziele in Bezug auf die Zug\u00e4nglichkeit und deine bisherigen Erfolge bei der Zusammenarbeit mit Menschen mit Behinderungen darlegst.<\/p>\n Du solltest aus den folgenden Gr\u00fcnden eine Erkl\u00e4rung zur Barrierefreiheit auf deiner Webseite erstellen und ver\u00f6ffentlichen:<\/p>\n Du kannst deine eigene Zug\u00e4nglichkeitserkl\u00e4rung nach diesen Richtlinien des W3C verfassen<\/a> oder einen Generator f\u00fcr Zug\u00e4nglichkeitserkl\u00e4rungen<\/a> verwenden.<\/p>\n Bei Barrierefreiheit geht es nicht darum, die richtigen Kn\u00f6pfe zu dr\u00fccken und dann wegzugehen. Um sicherzustellen, dass eine Webseite vollst\u00e4ndig zug\u00e4nglich ist, sind Tests unerl\u00e4sslich<\/a>. Sowohl automatisierte als auch manuelle Tests k\u00f6nnen sicherstellen, dass du alles im Griff hast.<\/p>\n Automatisierte Tests<\/a> sind hilfreich, um herauszufinden, wo du anfangen sollst. Wenn du dich zum ersten Mal mit Barrierefreiheit besch\u00e4ftigst oder dir nicht sicher bist, wo du anfangen sollst, solltest du mit automatischen Tests und Auswertungen beginnen.<\/p>\n Die meisten automatischen Tests erkennen Dinge wie schlechte Farbkontraste, fehlende Alt-Texte, leere Links, Probleme mit Strukturelementen und so weiter. Anhand dieser Tests kannst du eine Liste mit Problemen erstellen, die du in Angriff nehmen musst. Solche Tests sind besonders hilfreich, wenn es darum geht, Fehler im Code zu finden, die mit blo\u00dfem Auge nicht so leicht zu erkennen sind, die aber f\u00fcr einige deiner Nutzer\/innen von gro\u00dfer Bedeutung sind.<\/p>\n Ein Beispiel f\u00fcr einen kostenlosen Barrierefreiheitstest ist das WebAim Tool<\/a>. Es pr\u00fcft deine gesamte Webseite und erstellt eine Liste mit Fehlern. Es zeigt dir sogar genau an, wo auf der Seite diese Fehler auftreten.<\/p>\n Es gibt eine Menge individueller Tools, die dir bei bestimmten Problemen helfen. Verwende zum Beispiel einen Kontrast-Checker<\/a>, bevor du mit der Gestaltung beginnst, um sicherzustellen, dass die Farben in deiner Palette gut zusammenpassen.<\/p>\n Denke immer daran, dass kein automatisierter Test perfekt und narrensicher ist und die manuelle Pr\u00fcfung nicht ersetzen kann.<\/p>\n Da es bei der Barrierefreiheit von WordPress um echte menschliche Anwendungsf\u00e4lle geht, m\u00fcssen echte Menschen das letzte Wort dar\u00fcber haben, ob eine Webseite barrierefrei ist oder nicht. Daher ist es unglaublich wichtig, Zeit und Ressourcen f\u00fcr manuelle Tests zu reservieren.<\/p>\n Wie kannst du also einen manuellen Test durchf\u00fchren? Hier sind ein paar Dinge, mit denen du die Barrierefreiheit einer Webseite ohne ausgefallene oder teure Tools oder Programme testen kannst:<\/p>\n Im Zweifelsfall solltest du dich an ein Unternehmen wenden, das manuelle Zug\u00e4nglichkeitstests durchf\u00fchrt. Experten f\u00fcr Barrierefreiheit und Web-Design und -Entwicklung k\u00f6nnen eine manuelle Pr\u00fcfung schnell durchf\u00fchren und dir genau sagen, welche Bereiche \u00fcberarbeitet werden m\u00fcssen.<\/p>\nSchau dir unseren Video-Leitfaden<\/a> zur Barrierefreiheit von Webseiten an<\/h3>\n
Was Barrierefreiheit im Internet bedeutet<\/h2>\n
Mythos eins: Es ist nur f\u00fcr Blinde<\/h3>\n
\n
Mythos zwei: Es ist eine Modeerscheinung oder ein Trend<\/h3>\n
\nLainey Feingold<\/a>, Anw\u00e4ltin f\u00fcr Behindertenrechte und Autorin<\/p><\/blockquote>\n![\"Eine](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/09\/Web-Data-2017-2020-1.png\")
Mythos 3: Du kannst Barrierefreiheit vollst\u00e4ndig automatisieren<\/h3>\n
Richtlinien f\u00fcr die Zug\u00e4nglichkeit von Webinhalten<\/h2>\n
Wie barrierefrei ist WordPress von Haus aus?<\/h2>\n
Wo WordPress Barrierefreiheit gut macht<\/h3>\n
![\"Das](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-07-at-9.01.06-AM-1024x688.png\")
Wo WordPress das Ziel verfehlt<\/h3>\n
Wie du eine barrierefreie WordPress Webseite erstellst<\/h2>\n
Best Practices f\u00fcr barrierefreies Design<\/h3>\n
Bilder<\/h4>\n
![\"In](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-08-24-at-11.38.11-AM-1024x691.png\")
\n
![\"Der](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-08-24-at-11.27.34-AM-1024x405.png\")
Farben<\/h4>\n
![\"Der](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-07-at-9.05.34-AM.png\")
Text<\/h4>\n
![\"Ein](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/09\/7a7eb38089ed87ddf2a9ca0faf515773.png\")
<\/a>\n
Best Practices der barrierefreien Entwicklung<\/h3>\n
Interaktive Elemente<\/h4>\n
hover<\/code>, focus<\/code> oder click<\/code> werden.<\/p>\n![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-07-at-9.08.15-AM.png\")
![\"Kinsta](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/09\/kinsta-breadcrumbs-example-1-1024x584.png\")
![\"Umrandungen](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/09\/dont-remove-borders-1024x318.png\")
WordPress-Themes<\/h3>\n
\n
WordPress Plugins<\/h3>\n
Zug\u00e4nglichkeitserkl\u00e4rungen<\/h3>\n
\n
So testest du die Zug\u00e4nglichkeit deiner WordPress Seite<\/h2>\n
Wie man automatisierte Tests durchf\u00fchrt<\/h3>\n
![\"Wenn](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-07-at-9.13.49-AM.png\")
So f\u00fchrst du manuelle Tests durch<\/h3>\n
\n