{"id":52688,"date":"2019-12-12T07:00:00","date_gmt":"2019-12-12T15:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=52688"},"modified":"2025-01-16T11:40:00","modified_gmt":"2025-01-16T19:40:00","slug":"barrierefreiheit-des-wordpress-blogs-verbessern","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/de\/barrierefreiheit-des-wordpress-blogs-verbessern\/","title":{"rendered":"Wie Sie die Zug\u00e4nglichkeit Ihres WordPress-Blogs verbessern (und warum es wichtig ist)"},"content":{"rendered":"\n<p>Sie haben vielleicht schon von <span style=\"text-decoration: underline;\"><a href=\"https:\/\/www.dreamhost.com\/blog\/de\/machen-sie-ihre-website-barrierefrei\/\">Webzug\u00e4nglichkeit<\/a><\/span> geh\u00f6rt, aber das Verstehen und Umsetzen der Richtlinien mag unerreichbar erscheinen. Ressourcen zu finden, die Ihnen helfen, Zug\u00e4nglichkeitsprobleme anzugehen, kann auch eine H\u00fcrde f\u00fcr Ihre Webprojekte sein.<\/p>\n\n\n\n<p>Gl\u00fccklicherweise macht <span style=\"text-decoration: underline;\"><a href=\"https:\/\/make.wordpress.org\/accessibility\/\">WordPress Fortschritte<\/a><\/span> bei der Bereitstellung von Werkzeugen, um Websites zug\u00e4nglicher zu machen. Zus\u00e4tzlich gibt es <span style=\"text-decoration: underline;\"><a href=\"https:\/\/www.w3.org\/WAI\/\">viele Ressourcen<\/a><\/span> online, die Ihnen Anleitung bieten k\u00f6nnen. Ihre WordPress-Website zug\u00e4nglich zu machen, ist nicht nur eine gute Designpraxis, sondern stellt auch sicher, dass jeder gleichberechtigten Zugang zu Webinhalten und Anwendungen hat.<\/p>\n\n\n\n<p>In diesem Artikel werfen wir einen Blick auf <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/grossartige-beispiele-fur-web-barrierefreiheit\/\">was Barrierefreiheit online bedeutet<\/a>. Wir werden uns auch einige der neuen Zus\u00e4tze von WordPress ansehen, die <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/leitfaden-zur-web-zuganglichkeit-fur-designer\/\">barrierefreies Design erleichtern<\/a>. Es gibt viel zu besprechen, also fangen wir an!<\/p>\n\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      Erstellen Sie eine Website f\u00fcr alle\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Wir sorgen daf\u00fcr, dass Ihre Website schnell und sicher ist, damit Sie sich auf das Wesentliche konzentrieren k\u00f6nnen.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/de\/hosting\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            W\u00e4hlen Sie Ihren Tarif                    <\/a>\n\n  <\/div>\n<\/div>\n\n\n<h2 id=\"h-what-web-accessibility-is-and-why-it-matters\" class=\"wp-block-heading\"><span style=\"font-weight: bold;\">Was Webzug\u00e4nglichkeit ist und warum sie wichtig ist<\/span><\/h2>\n\n\n\n<p>In diesem Kontext bedeutet \u201eZug\u00e4nglichkeit\u201c, Websites und Webanwendungen so zu gestalten, dass niemandem die Nutzung verwehrt wird. Das bedeutet, dass jeder Besucher, unabh\u00e4ngig von Behinderung oder Beeintr\u00e4chtigung, in der Lage sein sollte, Ihre Seite zu betreten und zu nutzen.<\/p>\n\n\n\n<p>Dies ist wichtig, wenn man bedenkt, dass <span style=\"text-decoration: underline;\"><a href=\"https:\/\/www.cdc.gov\/ncbddd\/disabilityandhealth\/infographic-disability-impacts-all.html\">einer von vier Erwachsenen in den Vereinigten Staaten<\/a><\/span>&nbsp;eine Art von Behinderung hat. Mit anderen Worten, wenn Sie nicht mit Barrierefreiheit im Sinn bauen, k\u00f6nnte bis zu einem Viertel Ihrer Website-Besucher Schwierigkeiten haben, auf Ihre Inhalte zuzugreifen.<\/p>\n\n\n\n<p>Gl\u00fccklicherweise gibt es einen Satz von Richtlinien, den Sie verwenden k\u00f6nnen, um Ihr Webdesign und die Funktionalit\u00e4t zu \u00fcberpr\u00fcfen. &nbsp;Die <span style=\"text-decoration: underline;\"><a href=\"https:\/\/www.w3.org\/WAI\/fundamentals\/accessibility-intro\/\">W3C-Standards<\/a><\/span>&nbsp;legen mehrere Ebenen der Zug\u00e4nglichkeit fest. Dies schlie\u00dft eine Mindestschwelle ein, die als akzeptabel angesehen wird. Nat\u00fcrlich werden Sie auch <span style=\"text-decoration: underline;\"><a href=\"https:\/\/www.w3.org\/WAI\/policies\/\">Gesetze und Vorschriften ber\u00fccksichtigen wollen<\/a><\/span>, da Barrierefreiheit auch eine rechtliche Angelegenheit ist.<\/p>\n\n\n\n<p>Mit Barrierefreiheit zu bauen unterscheidet sich nicht sehr von der Befolgung der Standard-Best-Practices f\u00fcr Webdesign und Optimierung. Tats\u00e4chlich sind viele der Prinzipien und Techniken dieselben. Das bedeutet konkret, dass barrierefreies Design f\u00fcr niemanden unerreichbar ist \u2014 insbesondere, wenn Sie WordPress verwenden.<\/p>\n\n\n<div class=\"single__related-article\">\n\t<span>Related Article<\/span>\n\t<div class=\"single__related-article__wrap\">\n\t\t<div class=\"single__related-article__title\">\n\t\t\tHow To Design An Accessible Website (A Complete Guide)\n\t\t<\/div>\n\t\t<a href=\"https:\/\/www-dev.dreamhost.com\/blog\/make-your-website-accessible\/\" class=\"btn btn--sm btn--brand\" target=\"_blank\" rel=\"noopener\">\n\t\t\tRead More\n\t\t<\/a>\n\t<\/div>\n<\/div>\n\n\n<h2 id=\"h-exploring-the-block-editor-s-accessibility-features\" class=\"wp-block-heading\"><span style=\"font-weight: bold;\">Erforschung der Barrierefreiheitsfunktionen des Block-Editors<\/span><\/h2>\n\n\n\n<p>WordPress hat sich bem\u00fcht, die <span style=\"text-decoration: underline;\"><a href=\"https:\/\/make.wordpress.org\/accessibility\/\">Web-Zug\u00e4nglichkeit<\/a><\/span> in der Codebasis seines st\u00e4ndig weiterentwickelten Content Management Systems (CMS) zu verbessern. Tats\u00e4chlich wurden <span style=\"text-decoration: underline;\"><a href=\"https:\/\/make.wordpress.org\/core\/handbook\/best-practices\/coding-standards\/accessibility-coding-standards\/\">Standards eingef\u00fchrt<\/a><\/span>, um einen Mindeststandard an Zug\u00e4nglichkeit bei allen neuen oder aktualisierten Codes zu gew\u00e4hrleisten, die ver\u00f6ffentlicht werden.<\/p>\n\n\n\n<p>Zus\u00e4tzlich haben WordPress-Entwickler ein <span style=\"text-decoration: underline;\"><a href=\"https:\/\/make.wordpress.org\/accessibility\/handbook\/best-practices\/\">Handbuch zur Barrierefreiheit<\/a><\/span>&nbsp;erstellt, das darlegt, wie Programmierer Produkte f\u00fcr das CMS erstellen sollten. Zum Beispiel muss aller WordPress-Code die <span style=\"text-decoration: underline;\"><a href=\"https:\/\/www.w3.org\/WAI\/standards-guidelines\/wcag\/\">Richtlinien f\u00fcr barrierefreie Webinhalte (WCAG)<\/a><\/span>&nbsp;2.0 auf Ebene AA erf\u00fcllen. Dies wird als weltweiter Standard angesehen und wird auch f\u00fcr Websites von Regierungen und \u00f6ffentlichen Diensten verwendet.<\/p>\n\n\n\n<p>Wenn Sie sich insbesondere den <span style=\"text-decoration: underline;\"><a href=\"https:\/\/www.dreamhost.com\/blog\/most-exciting-features-gutenberg-wordpress-editor\/\">Block Editor<\/a><\/span> ansehen, gibt es einige hilfreiche integrierte Funktionen, die das Erstellen von barrierefreiem Inhalt unterst\u00fctzen. Zum Beispiel bedeutet das blo\u00dfe Vergr\u00f6\u00dfern und Fettschreiben Ihrer Schrift nicht, dass es den Kopf eines Abschnitts darstellt. Der Block Editor macht es einfach, die passende \u00dcberschrifts-Auszeichnung zu verwenden, indem er einen <span style=\"font-style: italic;\">Heading<\/span>&nbsp;Block bereitstellt.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2019\/12\/4ed0be75-28f3-43c3-ad38-82eee56d737e_DreamHost-how-to-improve-accessibility-2.jpg\" alt=\"Der Header-Block.\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure><\/div>\n\n\n<p>Dies bedeutet, dass Ihr Inhalt automatisch mit den richtigen \u00dcberschriften strukturiert wird. Dies hilft nicht nur Screenreadern, Ihren Inhalt angemessen zu navigieren, sondern <span style=\"text-decoration: underline;\"><a href=\"https:\/\/yoast.com\/how-to-use-headings-on-your-site\/#headings-seo\">bietet auch bessere Informationen f\u00fcr Suchmaschinen<\/a><\/span> ebenfalls.<\/p>\n\n\n\n<p>Der Block-Editor enth\u00e4lt auch eine integrierte <span style=\"font-style: italic;\">Inhaltsverzeichnis<\/span>&nbsp;Funktion, die es Ihnen erm\u00f6glicht, schnell Ihre \u00dcberschriften zu \u00fcberpr\u00fcfen, um sicherzustellen, dass Ihr Inhalt einer logischen Hierarchie folgt.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2019\/12\/8c2e4293-23fb-4693-ac86-d4ff038fbd17_DreamHost-how-to-improve-accessibility-1.jpg\" alt=\"\u201cDie Dokumentenstruktur in WordPress.\u201d\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure><\/div>\n\n\n<p>Nat\u00fcrlich sind dies nicht die einzigen M\u00f6glichkeiten, zug\u00e4ngliche Inhalte zu gestalten. Wie sich herausstellt, bietet WordPress viele M\u00f6glichkeiten, um sicherzustellen, dass alle Besucher auf Ihre Inhalte zugreifen und sie sch\u00e4tzen k\u00f6nnen.<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<h2 id=\"h-5-ways-to-make-your-wordpress-blog-more-accessible\" class=\"wp-block-heading\"><span style=\"font-weight: bold;\">5 Wege, Ihren WordPress-Blog zug\u00e4nglicher zu machen<\/span><\/h2>\n\n\n\n<p>Wie wir bereits erw\u00e4hnt haben, kann die Erf\u00fcllung von Barrierefreiheitsstandards Ihrem gesamten Webdesign und den Bem\u00fchungen um Suchmaschinenoptimierung (SEO) zugutekommen. Zudem hilft es Ihnen, Ihr Publikum zu vergr\u00f6\u00dfern und wichtige Vorschriften einzuhalten. In diesem Sinne gibt es hier f\u00fcnf einfache Wege, um die Zug\u00e4nglichkeit Ihrer Website zu verbessern.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-add-alt-tags-to-images\">1. F\u00fcgen Sie Alt-Tags zu Bildern hinzu<\/h3>\n\n\n\n<p>\u201eAlt-Tags\u201c zu Ihren Bildern hinzuzuf\u00fcgen, ist eine der einfachsten Methoden, um einige Ihrer Inhalte zug\u00e4nglich zu machen. Ein Alt-Tag erm\u00f6glicht es Screenreader-Software, das verbundene Bild zu \u201elesen\u201c und dem Benutzer zu erkl\u00e4ren, was es ist und wie es in den Kontext der Seite passt.<\/p>\n\n\n\n<p>Sie k\u00f6nnen Ihren Bildern in WordPress ganz einfach Alternativtext hinzuf\u00fcgen. Sobald Sie ein Bild zu Ihrem Beitrag oder Ihrer Seite hinzugef\u00fcgt haben, geben Sie eine kurze Phrase oder einen Satz, der es beschreibt, in das <span style=\"font-style: italic;\">Alt Text<\/span>&nbsp;Feld auf der rechten Seite des Editors ein.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2019\/12\/7e7b4b80-e046-43a2-b954-2e4de5f904ea_DreamHost-how-to-improve-accessibility-4.jpg\" alt=\"\u201cDie Bildeinstellungen.\u201d\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure><\/div>\n\n\n<p>Unter diesem Feld k\u00f6nnen Sie auch klicken, um n\u00fctzliche <span style=\"text-decoration: underline;\"><a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/decision-tree\/\">Richtlinien f\u00fcr Alt-Bilder<\/a><\/span> einzusehen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-use-accessible-color-palettes\">2. Verwenden Sie zug\u00e4ngliche Farbpaletten<\/h3>\n\n\n\n<p>Ein weiterer WCAG-Zug\u00e4nglichkeitsstandard betrifft die <span style=\"text-decoration: underline;\"><a href=\"https:\/\/webaim.org\/articles\/contrast\/\">Farbpaletten, die Sie verwenden<\/a><\/span>. Einige Farbpaletten k\u00f6nnen Probleme f\u00fcr Besucher mit Farbenblindheit, schlechtem Sehverm\u00f6gen und \u00e4hnlichen Problemen verursachen. Allgemein gesprochen, sollten Sie Farben mit hohem Kontrast verwenden, damit Ihr Text leicht zu erkennen ist.<\/p>\n\n\n\n<p>Um Ihnen den Einstieg zu erleichtern, verf\u00fcgt WordPress \u00fcber eine <span style=\"text-decoration: underline;\"><a href=\"https:\/\/make.wordpress.org\/accessibility\/handbook\/design\/use-of-color\/\">n\u00fctzliche Ressource<\/a><\/span>&nbsp;in seinem Webentwickler-Handbuch bez\u00fcglich des angemessenen Gebrauchs von Farbe. Zus\u00e4tzlich erhalten Sie eine Benachrichtigung im rechten Bearbeitungsmen\u00fc, wenn Sie in WordPress arbeiten und sich entscheiden, die Farbe einiger Ihrer Texte zu \u00e4ndern, falls Ihre Farbwahl Probleme verursachen k\u00f6nnte.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2019\/12\/125d81d1-32af-4a37-b5ae-1625a28d21be_DreamHost-how-to-improve-accessibility-3.jpg\" alt=\"\u201eDie Farbeinstellungen.\u201c\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure><\/div>\n\n\n<p>Die Einhaltung dieser einfachen Standards f\u00fcr die Farbauswahl bedeutet, dass die Benutzer Ihrer Website den Text leichter lesen k\u00f6nnen, unabh\u00e4ngig davon, ob sie Sehbehinderungen haben.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-organize-headings-hierarchically\">3. \u00dcberschriften hierarchisch organisieren<\/h3>\n\n\n\n<p>Wie wir zuvor erw\u00e4hnt haben, erleichtert der Block-Editor die Verwendung von passenden \u00dcberschriften und Header-Tags. Wann immer Sie eine neue \u00dcberschriftsebene verwenden m\u00f6chten, k\u00f6nnen Sie den <span style=\"font-style: italic;\">Heading<\/span>&nbsp;Block aus dem <span style=\"font-style: italic;\">Block Menu<\/span> ausw\u00e4hlen.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2019\/12\/6607f6c6-b97e-47b0-9a68-ddb2d1ede927_DreamHost-how-to-improve-accessibility-7.jpg\" alt=\"\u201cDie \u00dcberschriftenebenen.\u201d\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure><\/div>\n\n\n<p>Sie haben mehrere \u00dcberschriftenebenen zur Auswahl. Sie werden jedoch feststellen, dass <span style=\"font-style: italic;\">H1<\/span>&nbsp;nicht in den Blockoptionen aufgef\u00fchrt ist. Dies liegt daran, dass es am besten ist, H1s nicht innerhalb Ihres Beitrags oder Seiteninhalts zu verwenden, da dies Bildschirmleser verwirren kann. H1s sollten f\u00fcr den Haupttitel jeder Seite oder jedes Beitrags reserviert sein, w\u00e4hrend Sie H2s und darunter verwenden k\u00f6nnen, um den Rest des Inhalts zu strukturieren.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-4-make-sure-your-forms-are-accessible\">4. Stellen Sie sicher, dass Ihre Formulare zug\u00e4nglich sind<\/h3>\n\n\n\n<p>Formulare sind ein weit verbreitetes Element auf vielen Websites. Sie k\u00f6nnen Interaktivit\u00e4t schaffen und Gesch\u00e4ftsinhabern helfen, Informationen \u00fcber ihre Kunden zu sammeln. Sie k\u00f6nnen jedoch auch eine Herausforderung f\u00fcr Personen darstellen, die assistive Technologien verwenden.<\/p>\n\n\n\n<p>Zum Gl\u00fcck k\u00f6nnen Sie Formulare erstellen, die <span style=\"text-decoration: underline;\"><a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/forms\/\">gr\u00f6\u00dfere Zug\u00e4nglichkeit<\/a><\/span>&nbsp;gleich integriert haben. Eine Option ist die Verwendung eines Plugins wie <span style=\"text-decoration: underline;\"><a href=\"https:\/\/wordpress.org\/plugins\/formidable\/\">Formidable Forms<\/a><\/span>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2019\/12\/f632ff3b-8c05-454d-8cee-ab3ffb490010_DreamHost-how-to-improve-accessibility-5.jpg\" alt=\"&quot;Das Banner des Formidable Forms Plugins.\u201d\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure><\/div>\n\n\n<p>Dieses Werkzeug bietet einen Formular-Builder mit WCAG 2.0-Standardkonformit\u00e4t <span style=\"text-decoration: underline;\"><a href=\"https:\/\/formidableforms.com\/features\/wcag-accessible-forms\/\">als ein Schl\u00fcsselmerkmal<\/a><\/span>. Dies kann besonders hilfreich sein, besonders angesichts des Aufwands, der in die <span style=\"text-decoration: underline;\"><a href=\"https:\/\/make.wordpress.org\/accessibility\/handbook\/markup\/web-forms\/\">Barrierefreiheit von Formularen<\/a><\/span> flie\u00dft.<\/p>\n\n\n\n<p>Zum Beispiel hilft das Beschriften der Felder Ihres Formulars den Benutzern, diese mit und ohne Assistenztechnologie zu navigieren. Eine andere g\u00e4ngige Praxis f\u00fcr Formulardesigner ist die Verwendung von Platzhaltern \u2014 Text, der im Formularfeld als Beispiel erscheint. Beides ist n\u00fctzlich f\u00fcr die Zug\u00e4nglichkeit, da Beschriftungen den Benutzern sagen, <span style=\"font-style: italic;\">was<\/span>&nbsp;ausgef\u00fcllt werden soll, w\u00e4hrend Platzhalter erkl\u00e4ren, <span style=\"font-style: italic;\">wie<\/span>&nbsp;es auszuf\u00fcllen ist.<\/p>\n\n\n\n<p>Es ist auch klug, klare Anweisungen einzuschlie\u00dfen, um den Benutzern beim Ausf\u00fcllen von Formularen zu helfen. Viele Webnutzer haben sogenannte &#8220;unsichtbare&#8221; Behinderungen. Das bedeutet, dass sie m\u00f6glicherweise keine assistive Technologie wie einen Bildschirmleser verwenden. Stattdessen k\u00f6nnten sie kognitive Beeintr\u00e4chtigungen haben, bei denen klare Anweisungen und andere zug\u00e4ngliche Formulargestaltungspraktiken helfen k\u00f6nnen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-5-make-your-site-keyboard-friendly\">5. Machen Sie Ihre Website tastaturfreundlich<\/h3>\n\n\n\n<p>Damit eine WordPress-Website wirklich f\u00fcr jeden zug\u00e4nglich ist, muss sie so gestaltet sein, dass sie <span style=\"text-decoration: underline;\"><a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/keyboard-operation-keyboard-operable.html\">nur mit einer Tastatur<\/a><\/span> navigiert werden kann. Dies stellt sicher, dass blinde und sehbehinderte Benutzer sowie jeder, der eine alternative Tastatur oder einen Tastaturemulator ben\u00f6tigt, Ihre Website nutzen k\u00f6nnen.<\/p>\n\n\n\n<p>Typischerweise umfasst die Tastaturnavigation auf einer Webseite die Verwendung der <span style=\"font-style: italic;\">Tab<\/span>&nbsp;Taste. Dies erm\u00f6glicht es dem Benutzer, von einem Element des verlinkten Inhalts zum n\u00e4chsten zu springen. Diese Bereiche haben programmierte Fokusindikatoren, die mit der Tastatur aktiviert werden k\u00f6nnen. Ein sehender Benutzer wird eine visuelle \u00c4nderung (wie eine Umrandung, einen Rand oder eine Hintergrundfarbe) sehen, wenn die Tastatur einen bestimmten Bereich aktiviert.<\/p>\n\n\n\n<p>Sie k\u00f6nnen diese Funktion am folgenden Beispiel sehen, wo \u201eweb accessibility\u201c&nbsp;einen visuellen Indikator um sich hat, was darauf hinweist, dass der Benutzer mit der Tastatur darauf navigiert ist.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2019\/12\/65ba34d6-99fd-41d5-9755-a5f945128f12_DreamHost-how-to-improve-accessibility-6.jpg\" alt=\"\u201cEin Beispiel f\u00fcr Tastaturfokus.\u201d\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure><\/div>\n\n\n<p>Plugins wie <span style=\"text-decoration: underline;\"><a href=\"https:\/\/wordpress.org\/plugins\/wp-accessibility\/\">WP Accessibility<\/a><\/span>&nbsp;k\u00f6nnen Ihnen helfen, eine bessere Tastaturfokussierung f\u00fcr Ihre WordPress-Website zu entwickeln, unter anderem Verbesserungen.<\/p>\n\n\n\n<p>In Bezug auf die Bildschirmnavigation wird ein Screenreader den Inhalt Ihrer Website anhand ihres Quellcodes verstehen. Daher muss Ihr Code mit einer logischen Seitennavigation im Sinn geschrieben sein. Es gibt viel zu verstehen \u00fcber die Gestaltung einer tastaturfreundlichen Website. Gl\u00fccklicherweise gibt es viele <span style=\"text-decoration: underline;\"><a href=\"https:\/\/webaim.org\/techniques\/keyboard\/\">Ressourcen<\/a><\/span>&nbsp;zur Verf\u00fcgung, um Sie zu f\u00fchren!<\/p>\n\n\n<div class=\"single__related-article\">\n\t<span>Related Article<\/span>\n\t<div class=\"single__related-article__wrap\">\n\t\t<div class=\"single__related-article__title\">\n\t\t\tYour Complete Introduction to WordPress Plugins\n\t\t<\/div>\n\t\t<a href=\"https:\/\/www-dev.dreamhost.com\/blog\/intro-to-wordpress-plugins\/\" class=\"btn btn--sm btn--brand\" target=\"_blank\" rel=\"noopener\">\n\t\t\tRead More\n\t\t<\/a>\n\t<\/div>\n<\/div>\n\n\n<h2 id=\"h-empower-all-wordpress-users\" class=\"wp-block-heading\"><span style=\"font-weight: bold;\">Bef\u00e4higen Sie alle WordPress-Benutzer<\/span><\/h2>\n\n\n\n<p>Die Navigation durch die Welt der Zug\u00e4nglichkeitsstandards kann verwirrend sein. Gl\u00fccklicherweise bietet WordPress Ressourcen, die Sie nutzen k\u00f6nnen, um <span style=\"text-decoration: underline;\"><a href=\"https:\/\/make.wordpress.org\/accessibility\/handbook\/test-for-web-accessibility\/\">Ihre Website auf Zug\u00e4nglichkeitsprobleme zu testen<\/a><\/span>, und dann Verbesserungen vorzunehmen.<\/p>\n\n\n\n<p>Sicherzustellen, dass Sie die richtigen Werkzeuge haben, kann Ihnen helfen, inklusiveren Inhalt zu erstellen. Hier bei DreamHost glauben wir an die Offenheit und Verf\u00fcgbarkeit von Online-Ressourcen f\u00fcr jeden. Au\u00dferdem bieten wir erstklassige Unterst\u00fctzung f\u00fcr barrierefreie Websites in unseren <span style=\"text-decoration: underline;\"><a href=\"https:\/\/www.dreamhost.com\/de\/wordpress\/\">kosteng\u00fcnstigen Shared Hosting Pl\u00e4nen<\/a><\/span>!<\/p>\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>Sie haben vielleicht schon von Web-Zug\u00e4nglichkeit geh\u00f6rt, aber das Verst\u00e4ndnis und die Umsetzung der Richtlinien mag unerreichbar erscheinen. Ressourcen zu finden, die Ihnen helfen, Zug\u00e4nglichkeitsprobleme anzugehen, kann auch eine Barriere f\u00fcr Ihre Webprojekte sein. Gl\u00fccklicherweise hat WordPress Fortschritte gemacht, um Werkzeuge bereitzustellen, die dabei helfen, Websites zug\u00e4nglicher zu machen. Zus\u00e4tzlich gibt es viele verf\u00fcgbare Ressourcen [\u2026]<\/p>\n","protected":false},"author":1062,"featured_media":24000,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"","toc_headlines":"[[\"h-what-web-accessibility-is-and-why-it-matters\",\"Was Webzug\u00e4nglichkeit ist und warum sie wichtig ist\"],[\"h-exploring-the-block-editor-s-accessibility-features\",\"Erforschung der Barrierefreiheitsfunktionen des Block-Editors\"],[\"h-5-ways-to-make-your-wordpress-blog-more-accessible\",\"5 Wege, Ihren WordPress-Blog zug\u00e4nglicher zu machen\"],[\"h-empower-all-wordpress-users\",\"Bef\u00e4higen Sie alle WordPress-Benutzer\"]]","hide_toc":false,"footnotes":""},"categories":[14495,14511],"tags":[],"class_list":["post-52688","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials-de","category-wordpress-de"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Wie Sie die Zug\u00e4nglichkeit Ihres WordPress-Blogs verbessern (und warum es wichtig ist) - DreamHost Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/de\/barrierefreiheit-des-wordpress-blogs-verbessern\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie Sie die Zug\u00e4nglichkeit Ihres WordPress-Blogs verbessern (und warum es wichtig ist)\" \/>\n<meta property=\"og:description\" content=\"Sie haben vielleicht schon von Web-Zug\u00e4nglichkeit geh\u00f6rt, aber das Verst\u00e4ndnis und die Umsetzung der Richtlinien mag unerreichbar erscheinen. Ressourcen zu finden, die Ihnen helfen, Zug\u00e4nglichkeitsprobleme anzugehen, kann auch eine Barriere f\u00fcr Ihre Webprojekte sein. Gl\u00fccklicherweise hat WordPress Fortschritte gemacht, um Werkzeuge bereitzustellen, die dabei helfen, Websites zug\u00e4nglicher zu machen. Zus\u00e4tzlich gibt es viele verf\u00fcgbare Ressourcen [\u2026]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/de\/barrierefreiheit-des-wordpress-blogs-verbessern\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-12-12T15:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-16T19:40:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2019\/12\/1b529965-ec6a-4569-836c-b720d6b0d069_Accesibility20opt.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"598\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jason Cosper\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jason Cosper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Wie Sie die Zug\u00e4nglichkeit Ihres WordPress-Blogs verbessern (und warum es wichtig ist) - DreamHost Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/de\/barrierefreiheit-des-wordpress-blogs-verbessern\/","og_locale":"en_US","og_type":"article","og_title":"Wie Sie die Zug\u00e4nglichkeit Ihres WordPress-Blogs verbessern (und warum es wichtig ist)","og_description":"Sie haben vielleicht schon von Web-Zug\u00e4nglichkeit geh\u00f6rt, aber das Verst\u00e4ndnis und die Umsetzung der Richtlinien mag unerreichbar erscheinen. Ressourcen zu finden, die Ihnen helfen, Zug\u00e4nglichkeitsprobleme anzugehen, kann auch eine Barriere f\u00fcr Ihre Webprojekte sein. Gl\u00fccklicherweise hat WordPress Fortschritte gemacht, um Werkzeuge bereitzustellen, die dabei helfen, Websites zug\u00e4nglicher zu machen. Zus\u00e4tzlich gibt es viele verf\u00fcgbare Ressourcen [\u2026]","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/de\/barrierefreiheit-des-wordpress-blogs-verbessern\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2019-12-12T15:00:00+00:00","article_modified_time":"2025-01-16T19:40:00+00:00","og_image":[{"width":900,"height":598,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2019\/12\/1b529965-ec6a-4569-836c-b720d6b0d069_Accesibility20opt.jpg","type":"image\/jpeg"}],"author":"Jason Cosper","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Jason Cosper","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/barrierefreiheit-des-wordpress-blogs-verbessern\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/barrierefreiheit-des-wordpress-blogs-verbessern\/"},"author":{"name":"Jason Cosper","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4"},"headline":"Wie Sie die Zug\u00e4nglichkeit Ihres WordPress-Blogs verbessern (und warum es wichtig ist)","datePublished":"2019-12-12T15:00:00+00:00","dateModified":"2025-01-16T19:40:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/barrierefreiheit-des-wordpress-blogs-verbessern\/"},"wordCount":1584,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/barrierefreiheit-des-wordpress-blogs-verbessern\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2019\/12\/1b529965-ec6a-4569-836c-b720d6b0d069_Accesibility20opt.jpg","articleSection":["Tutorials","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/barrierefreiheit-des-wordpress-blogs-verbessern\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/de\/barrierefreiheit-des-wordpress-blogs-verbessern\/","name":"Wie Sie die Zug\u00e4nglichkeit Ihres WordPress-Blogs verbessern (und warum es wichtig ist) - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/barrierefreiheit-des-wordpress-blogs-verbessern\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/barrierefreiheit-des-wordpress-blogs-verbessern\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2019\/12\/1b529965-ec6a-4569-836c-b720d6b0d069_Accesibility20opt.jpg","datePublished":"2019-12-12T15:00:00+00:00","dateModified":"2025-01-16T19:40:00+00:00","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/barrierefreiheit-des-wordpress-blogs-verbessern\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/de\/barrierefreiheit-des-wordpress-blogs-verbessern\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/barrierefreiheit-des-wordpress-blogs-verbessern\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2019\/12\/1b529965-ec6a-4569-836c-b720d6b0d069_Accesibility20opt.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2019\/12\/1b529965-ec6a-4569-836c-b720d6b0d069_Accesibility20opt.jpg","width":900,"height":598},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/barrierefreiheit-des-wordpress-blogs-verbessern\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Wie Sie die Zug\u00e4nglichkeit Ihres WordPress-Blogs verbessern (und warum es wichtig ist)"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4","name":"Jason Cosper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","caption":"Jason Cosper"},"description":"Jason is DreamHost\u2019s WordPress Product Advocate, based out of Bakersfield, CA. He is currently working on making our DreamPress product even better. In his free time, he likes to curl up on the couch and watch scary movies with his wife Sarah and three very small dogs. Follow him on Twitter.","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/jasoncosper\/"}]}},"lang":"de","translations":{"de":52688,"es":28991,"en":23992,"pt":52684,"pl":53807,"ru":53810,"uk":53888,"it":68870,"fr":71329,"nl":71359},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/52688","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1062"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=52688"}],"version-history":[{"count":4,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/52688\/revisions"}],"predecessor-version":[{"id":62937,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/52688\/revisions\/62937"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/24000"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=52688"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=52688"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=52688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}