{"id":52221,"date":"2024-02-14T07:00:30","date_gmt":"2024-02-14T15:00:30","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=52221"},"modified":"2025-01-16T11:25:16","modified_gmt":"2025-01-16T19:25:16","slug":"machen-sie-ihre-website-barrierefrei","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/de\/machen-sie-ihre-website-barrierefrei\/","title":{"rendered":"Wie man eine barrierefreie Webseite gestaltet (Ein vollst\u00e4ndiger Leitfaden)"},"content":{"rendered":"\n<p>Egal, ob Sie <a href=\"https:\/\/www.dreamhost.com\/blog\/solutions-to-create-scalable-ecommerce-site\/\" target=\"_blank\" rel=\"noopener\">eine E-Commerce-Website<\/a> betreiben oder ein Webentwicklungsgesch\u00e4ft f\u00fchren, Sie m\u00f6chten so viele Besucher wie m\u00f6glich auf Ihre Website ziehen. Und das bedeutet, sicherzustellen, dass so viele Menschen wie m\u00f6glich Ihre Website nutzen k\u00f6nnen \u2013 indem Sie die Zug\u00e4nglichkeit der Website priorisieren.<\/p>\n\n\n\n<p>Website-Zug\u00e4nglichkeit bedeutet sicherzustellen, dass Ihre Seite von allen genutzt werden kann, einschlie\u00dflich Personen mit Behinderungen und Beeintr\u00e4chtigungen. Es gibt eine Vielzahl von Ressourcen, Werkzeugen und Tipps, die Sie nutzen k\u00f6nnen, um das Erstellen einer <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-design-lgbtq-inclusive-website\/\" target=\"_blank\" rel=\"noopener\">inklusiven Website<\/a> erheblich zu erleichtern.<\/p>\n\n\n\n<p>In diesem Beitrag behandeln wir alles, was Sie \u00fcber die Zug\u00e4nglichkeit von Websites wissen m\u00fcssen: warum sie so wichtig ist, wie Sie den aktuellen Zug\u00e4nglichkeitsstand Ihrer Website \u00fcberpr\u00fcfen (und Barrieren identifizieren) k\u00f6nnen, und ein vollst\u00e4ndiger Leitfaden zur Gestaltung hochgradig zug\u00e4nglicher Webseiten. Jetzt starten!<\/p>\n\n\n\n<h2 id=\"definition\" class=\"wp-block-heading\">Was ist die Zug\u00e4nglichkeit von Websites?<\/h2>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Barrierefreiheit<\/h3>\n    <p>Barrierefreiheit ist die Praxis, eine Website f\u00fcr m\u00f6glichst viele Nutzer zug\u00e4nglich zu machen. Barrierefreie Websites k\u00f6nnen von jedem auf jedem Ger\u00e4t eingesehen werden.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/accessibility\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Mehr lesen                    <\/a>\n\n<\/div>\n\n\n\n<p>Website-Zug\u00e4nglichkeit bezieht sich auf das Ausma\u00df, in dem eine Website von Personen mit Behinderungen genutzt werden kann. Dies kann Personen einschlie\u00dfen, die blind sind oder eine Sehschw\u00e4che haben, die geh\u00f6rlos sind oder schlecht h\u00f6ren, Menschen mit Mobilit\u00e4tseinschr\u00e4nkungen, kognitiven Behinderungen und anderen Behinderungen. Es beinhaltet das Design Ihrer Website, so dass ihre Inhalte f\u00fcr alle zug\u00e4nglich und funktional sind, einschlie\u00dflich derjenigen, die assistive Technologien wie Bildschirmleser, Spracherkennungssoftware oder spezialisierte Eingabeger\u00e4te verwenden k\u00f6nnten.<\/p>\n\n\n\n<p>Diese Idee geht \u00fcber die blo\u00dfe Unterst\u00fctzung von Einzelpersonen hinaus. Es geht darum, die Vielfalt der Webnutzer zu akzeptieren und die Bedeutung des gleichen Zugangs im Internet anzuerkennen. Indem Sie Barrierefreiheit priorisieren, erweitern Sie nicht nur Ihr Publikum, sondern f\u00f6rdern auch Inklusivit\u00e4t und soziale Verantwortung.<\/p>\n\n\n\n<p>Die Zug\u00e4nglichkeit von Websites entspricht auch verschiedenen rechtlichen Standards, wie dem <a href=\"https:\/\/www.ada.gov\/\" target=\"_blank\" rel=\"noopener\">Americans with Disabilities Act (ADA)<\/a> in den Vereinigten Staaten und \u00e4hnlichen Gesetzen weltweit. Diese Gesetze fordern, dass bestimmte Websites, insbesondere die von \u00f6ffentlichen Einrichtungen und Unternehmen, f\u00fcr Menschen mit Behinderungen zug\u00e4nglich sein m\u00fcssen, um Diskriminierung zu vermeiden.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Wer verwaltet und setzt die Regeln und Gesetze zur Barrierefreiheit von Websites durch?<\/h3>\n\n\n\n<p>Die Verantwortung f\u00fcr die Verwaltung und Durchsetzung der Regeln und Gesetze zur Barrierefreiheit von Websites wird von verschiedenen staatlichen und nichtstaatlichen Organisationen geteilt, die jeweils eine wichtige Rolle bei der Festlegung und Aufrechterhaltung der Barrierefreiheitsstandards spielen, die wir sp\u00e4ter in diesem Artikel behandeln werden.<b><\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Regierungen und staatliche Beh\u00f6rden. <\/b>In den Vereinigten Staaten ist das Justizministerium (DOJ) haupts\u00e4chlich f\u00fcr die Durchsetzung des ADA verantwortlich, zu dem auch Regeln f\u00fcr die Barrierefreiheit von Websites geh\u00f6ren. Andere L\u00e4nder haben eigene staatliche Stellen, die \u00e4hnliche Gesetze und Vorschriften \u00fcberwachen.<\/li>\n\n\n\n<li><b>Internationale Normungsorganisationen. <\/b>Das World Wide Web Consortium (W3C) hat die Web Content Accessibility Guidelines (WCAG) entwickelt, einen international anerkannten Standard, der beschreibt, wie Webinhalte zug\u00e4nglicher f\u00fcr Menschen mit Behinderungen gemacht werden k\u00f6nnen. Diese Richtlinien werden allgemein als Ma\u00dfstab f\u00fcr die Barrierefreiheit im Web akzeptiert und h\u00e4ufig in rechtlichen Anforderungen zitiert.<\/li>\n\n\n\n<li><b>Interessenverb\u00e4nde und NGOs. <\/b>Non-Profit-Organisationen und Interessenverb\u00e4nde f\u00f6rdern aktiv die Barrierefreiheit von Websites, indem sie oft Ressourcen bereitstellen, Audits durchf\u00fchren und manchmal rechtliche Schritte gegen nicht konforme Websites einleiten.<\/li>\n\n\n\n<li><b>Rechtssystem. <\/b>Das Rechtssystem wird oft in F\u00e4llen von Nichteinhaltung der Gesetze zur Barrierefreiheit im Web involviert. Klagen und rechtliche Ma\u00dfnahmen k\u00f6nnen gegen Organisationen eingeleitet werden, die die erforderlichen Standards nicht erf\u00fcllen, insbesondere unter dem ADA. Gerichtsverfahren k\u00f6nnen wichtige Pr\u00e4zedenzf\u00e4lle setzen, die zuk\u00fcnftige Standards f\u00fcr die Durchsetzung von Barrierefreiheitsregeln schaffen.<\/li>\n\n\n<\/ul>\n\n\n\n<p>Es ist wichtig zu beachten, dass sich die Landschaft der Webzug\u00e4nglichkeit st\u00e4ndig weiterentwickelt. Wir alle haben die gemeinsame Verantwortung, auf dem neuesten Stand der aktuellen Nachrichten, rechtlichen Entwicklungen und anderen Ver\u00e4nderungen zu bleiben, die Website-Administratoren betreffen.<\/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<h3 class=\"wp-block-heading\">Was sind Web-Zug\u00e4nglichkeitsstandards?<\/h3>\n\n\n\n<p>Nach den WCAG gibt es vier Prinzipien, die Sie beim Erstellen einer barrierefreien Website befolgen m\u00fcssen. Sie besagen, dass Ihre Website folgendes sein muss:<b><\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Wahrnehmbar. <\/b>Die Besucher m\u00fcssen in der Lage sein, den Inhalt und die Informationen auf Ihrer Website wahrzunehmen oder zu verstehen und sich dessen bewusst zu sein. Beispielsweise durch Zugang zu Alternativtexten.<\/li>\n\n\n\n<li><b>Bedienbar. <\/b>Die Besucher m\u00fcssen in der Lage sein, jeden Teil Ihrer Website ohne Unterbrechungen zu nutzen. Ein gut strukturiertes und organisiertes Navigationsmen\u00fc kann dies erreichen.<\/li>\n\n\n\n<li><b>Verst\u00e4ndlich. <\/b>Alle Inhalte auf Ihrer Website, ob schriftlich oder anders pr\u00e4sentiert, sollten leicht zu verstehen sein. Klare, pr\u00e4gnante Sprache und \u00fcbersichtliche, nicht \u00fcberladene Seiten k\u00f6nnen zur Kommunikation von Informationen verwendet werden.<\/li>\n\n\n\n<li><b>Robust. <\/b>Die Grundlagen Ihrer Website, wie der HTML-Code, sollten f\u00fcr alle Besucher leicht lesbar und interpretierbar sein, einschlie\u00dflich Hilfstechnologien wie Bildschirmleser. Ein weiteres Beispiel hierf\u00fcr ist die Optimierung Ihrer Website f\u00fcr verschiedene Ger\u00e4te wie Telefone und Tablets.<\/li>\n\n\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1700\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/WCAG-Standards-For-Website-Accessibility.jpg\" alt=\"Beispiele, die wahrnehmbar (ein Bild mit Alternativtext), bedienbar (ein detailliertes Dropdown-Men\u00fc), verst\u00e4ndlich (eine klare Absicht und Zweck in einer Definition) und robust (eine mobile Ansicht, die Multi-Device-Zug\u00e4nglichkeit zeigt\" class=\"wp-image-43177 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/WCAG-Standards-For-Website-Accessibility.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/WCAG-Standards-For-Website-Accessibility-282x300.jpg 282w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/WCAG-Standards-For-Website-Accessibility-964x1024.jpg 964w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/WCAG-Standards-For-Website-Accessibility-768x816.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/WCAG-Standards-For-Website-Accessibility-1446x1536.jpg 1446w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/WCAG-Standards-For-Website-Accessibility-600x638.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/WCAG-Standards-For-Website-Accessibility-1200x1275.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/WCAG-Standards-For-Website-Accessibility-730x776.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/WCAG-Standards-For-Website-Accessibility-1460x1551.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/WCAG-Standards-For-Website-Accessibility-784x833.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/WCAG-Standards-For-Website-Accessibility-1568x1666.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/WCAG-Standards-For-Website-Accessibility-877x932.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1700;\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Beispiele f\u00fcr Zugangsbarrieren online<\/h3>\n\n\n\n<p>Diese h\u00e4ufigen Barrieren k\u00f6nnen verhindern, dass Nutzer mit Behinderungen auf eine Website zugreifen oder mit ihr interagieren. Hier sind einige Beispiele f\u00fcr Barrieren und wie sie die Nutzer beeinflussen.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Fehlen von Alternativtexten f\u00fcr Bilder.<\/b> Wenn Bilder auf einer Webseite keinen Alternativtext (alt text) haben, k\u00f6nnen Screenreader, die von sehbehinderten Nutzern verwendet werden, nicht interpretieren, worum es bei dem Bild geht. Dies kann zu einem Verst\u00e4ndnismangel oder zum Verpassen wichtiger Informationen f\u00fchren.<\/li>\n\n\n\n<li><b>Unzureichende Tastaturnavigation.<\/b> Viele Nutzer mit motorischen Behinderungen sind auf Tastaturnavigation statt auf eine Maus angewiesen. Webseiten, die keine Tastaturnavigation unterst\u00fctzen oder komplexe Layouts haben, k\u00f6nnen f\u00fcr diese Nutzer unzug\u00e4nglich sein.<\/li>\n\n\n\n<li><b>Schlechter Farbkontrast.<\/b> Ein unzureichender Kontrast zwischen Text- und Hintergrundfarben kann es f\u00fcr Nutzer mit Sehbehinderungen, einschlie\u00dflich Farbenblindheit, schwierig machen, Inhalte zu lesen. Dies kann Texte f\u00fcr einige Nutzer praktisch unsichtbar machen.<\/li>\n\n\n\n<li><b>Nicht beschreibender Linktext.<\/b> Die Verwendung von vagen Phrasen wie &#8220;hier klicken&#8221; f\u00fcr Linktexte bietet nicht gen\u00fcgend Informationen \u00fcber das Ziel des Links, insbesondere f\u00fcr Nutzer von Screenreadern, die m\u00f6glicherweise Links au\u00dferhalb des Kontexts durchsuchen.<\/li>\n\n\n\n<li><b>Fehlen von Untertiteln oder Transkripten f\u00fcr Audio- und Videoinhalte.<\/b> Nutzer, die taub oder schwerh\u00f6rig sind, sind auf Untertitel oder Transkripte f\u00fcr Audio- und Videoinhalte angewiesen. Ohne diese k\u00f6nnen sie wichtige Informationen verpassen.<\/li>\n\n\n\n<li><b>Komplexe und inkonsistente Navigation.<\/b> Inkonsistente oder \u00fcberm\u00e4\u00dfig komplexe Webseitennavigation kann verwirrend sein, insbesondere f\u00fcr Nutzer mit kognitiven Behinderungen. Einfache, vorhersehbare und konsistente Navigation unterst\u00fctzt ein besseres Verst\u00e4ndnis und eine leichtere Benutzung.<\/li>\n\n\n\n<li><b>Zeitlich begrenzte Inhalte und Interaktionen.<\/b> Inhalte, die nach einer bestimmten Zeit verschwinden oder schnelle Interaktionen erfordern, k\u00f6nnen eine Barriere f\u00fcr Nutzer mit kognitiven oder motorischen Beeintr\u00e4chtigungen darstellen, die m\u00f6glicherweise mehr Zeit ben\u00f6tigen, um Inhalte zu lesen oder mit ihnen zu interagieren.<\/li>\n\n\n\n<li><b>Verwendung von Fachjargon oder komplexer Sprache.<\/b> \u00dcberm\u00e4\u00dfig komplexe Sprache oder Branchenjargon kann eine erhebliche Barriere f\u00fcr Nutzer mit kognitiven Behinderungen oder f\u00fcr diejenigen sein, die die Sprache der Webseite nicht als Muttersprache sprechen.<\/li>\n\n\n<\/ul>\n\n\n\n<h2 id=\"why\" class=\"wp-block-heading\">Warum Sie die Zug\u00e4nglichkeit von Websites priorisieren sollten<\/h2>\n\n\n\n<p>Die Weltgesundheitsorganisation (WHO) <a href=\"https:\/\/monsido.com\/web-accessibility\" target=\"_blank\" rel=\"noopener\">sch\u00e4tzt<\/a>, dass 15% der Weltbev\u00f6lkerung \u2014 bis zu einer Milliarde Menschen \u2014 mit einer Behinderung leben. Die Raten von Behinderungen nehmen zu, da die Lebenserwartung steigt und chronische Gesundheitszust\u00e4nde zunehmen. Menschen mit Behinderungen verdienen es, auf dieselben Informationen zugreifen zu k\u00f6nnen wie diejenigen ohne, weshalb es f\u00fcr uns alle so wichtig ist, zusammenzuarbeiten, um digitale Inhalte zug\u00e4nglich zu machen und Barrieren f\u00fcr die Zug\u00e4nglichkeit online zu beseitigen.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1185\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Removing-Accessibility-Barriers.jpg\" alt=\"Beseitigung von Zugangsbarrieren mit: Zoom, Farbe, Schriftart, Vorlesern, Untertiteln und Alt-Text\" class=\"wp-image-43178 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Removing-Accessibility-Barriers.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Removing-Accessibility-Barriers-300x222.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Removing-Accessibility-Barriers-1024x758.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Removing-Accessibility-Barriers-768x569.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Removing-Accessibility-Barriers-1536x1138.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Removing-Accessibility-Barriers-600x444.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Removing-Accessibility-Barriers-1200x889.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Removing-Accessibility-Barriers-730x541.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Removing-Accessibility-Barriers-1460x1081.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Removing-Accessibility-Barriers-784x581.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Removing-Accessibility-Barriers-1568x1161.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Removing-Accessibility-Barriers-877x650.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1185;\" \/><\/figure>\n\n\n\n<p>Als Website-Besitzer ist es wichtig sicherzustellen, dass Sie Menschen mit Behinderungen nicht ausschlie\u00dfen \u2013 auch nicht unbeabsichtigt. Das ADA ist ein B\u00fcrgerrechtsgesetz, das Unternehmen und Organisationen daran hindert, aufgrund von Behinderungen zu diskriminieren. Wenn Ihre Website also nicht f\u00fcr alle zug\u00e4nglich ist, k\u00f6nnte das rechtliche Probleme verursachen! Doch die Einhaltung gesetzlicher Vorschriften ist nicht der einzige Grund, warum Barrierefreiheit bei der Gestaltung Ihrer Website h\u00f6chste Priorit\u00e4t haben sollte.<\/p>\n\n\n\n<p>Die Zug\u00e4nglichkeit Ihrer Website zu gew\u00e4hrleisten, sendet die Botschaft, dass Ihr Unternehmen inklusive Werte hat, und Studien haben gezeigt, dass Unternehmen, die vielf\u00e4ltiger und inklusiver sind, bis zu 35% eher finanzielle R\u00fcckkehr \u00fcber ihrem Branchendurchschnitt erzielen k\u00f6nnen.<\/p>\n\n\n\n<p>Und w\u00e4hrend barrierefreies Webdesign es Menschen mit Behinderungen erm\u00f6glicht, Ihre Website problemlos zu navigieren, umfasst es Designprinzipien, die tats\u00e4chlich die Benutzererfahrung f\u00fcr <i>alle<\/i> Besucher Ihrer Website verbessern k\u00f6nnen.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>User Experience (UX)<\/h3>\n    <p>User Experience (UX) bezieht sich darauf, wie Online-Besucher mit einer Website interagieren. Benutzer bewerten oft ihre virtuelle Erfahrung basierend auf der Benutzerfreundlichkeit und dem Design der Website sowie ihrem allgemeinen Eindruck vom Inhalt.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/seo\/user-experience-ux\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Mehr lesen                    <\/a>\n\n<\/div>\n\n\n\n<p>Ein barrierefreies Website zu erstellen, muss weder schwierig noch zeitintensiv sein. Indem Sie nur einige einfache Schritte unternehmen, k\u00f6nnen Sie die Zug\u00e4nglichkeit Ihrer Website erheblich verbessern. Auf diese Weise k\u00f6nnen Sie Ihr Publikum erweitern und gleichzeitig zu den Bem\u00fchungen um Online-Barrierefreiheit beitragen. Sie k\u00f6nnten sogar andere inspirieren, dasselbe zu tun!<\/p>\n\n\n\n<h2 id=\"check\" class=\"wp-block-heading\">Wie Sie die Webzug\u00e4nglichkeit Ihrer Seite \u00fcberpr\u00fcfen<\/h2>\n\n\n\n<p>Bevor wir uns mit Tipps und Schritten f\u00fcr das Design einer barrierefreien Website befassen, ist es eine gute Idee, zun\u00e4chst zu wissen, wo Ihre Website derzeit steht \u2013 wie sie im Vergleich zu Barrierefreiheitsstandards und bew\u00e4hrten Verfahren abschneidet und welche Zugangsbarrieren Sie m\u00f6glicherweise mit \u00c4nderungen oder Neugestaltungen \u00fcberwinden m\u00fcssen.<\/p>\n\n\n\n<p>Es gibt viele verschiedene M\u00f6glichkeiten, die Zug\u00e4nglichkeit Ihrer Website zu \u00fcberpr\u00fcfen. Lassen Sie uns einige der einfachsten und beliebtesten Optionen erkunden.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Verwenden Sie einen Online-Zug\u00e4nglichkeitspr\u00fcfer<\/h3>\n\n\n\n<p>Eine der schnellsten und einfachsten Methoden, um die Zug\u00e4nglichkeit Ihrer Website zu \u00fcberpr\u00fcfen, ist die Verwendung eines Online-Zug\u00e4nglichkeitspr\u00fcfers, wie <a href=\"https:\/\/wave.webaim.org\/\" target=\"_blank\" rel=\"noopener\">WAVE Web Accessibility Evaluation Tools<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1089\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/WAVE-Web-Accessibility-Evaluation-Tools.jpg\" alt=\"screenshot der WAVE-Startseite, der verschiedene WAVE-Webzug\u00e4nglichkeitsbewertungstools zeigt, die aufgerufen werden k\u00f6nnen\" class=\"wp-image-43179 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/WAVE-Web-Accessibility-Evaluation-Tools.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/WAVE-Web-Accessibility-Evaluation-Tools-300x204.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/WAVE-Web-Accessibility-Evaluation-Tools-1024x697.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/WAVE-Web-Accessibility-Evaluation-Tools-768x523.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/WAVE-Web-Accessibility-Evaluation-Tools-1536x1045.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/WAVE-Web-Accessibility-Evaluation-Tools-600x408.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/WAVE-Web-Accessibility-Evaluation-Tools-1200x817.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/WAVE-Web-Accessibility-Evaluation-Tools-730x497.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/WAVE-Web-Accessibility-Evaluation-Tools-1460x994.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/WAVE-Web-Accessibility-Evaluation-Tools-784x534.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/WAVE-Web-Accessibility-Evaluation-Tools-1568x1067.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/WAVE-Web-Accessibility-Evaluation-Tools-877x597.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1089;\" \/><\/figure>\n\n\n\n<p>WAVE ist eine Suite von Bewertungstools, die Sie verwenden k\u00f6nnen, um Ihre Webseiten und Inhalte zu bewerten und sie zug\u00e4nglicher f\u00fcr Menschen mit Behinderungen zu machen. WAVE-Tools \u00fcberpr\u00fcfen die Einhaltung von Barrierefreiheitsstandards, wie die WCAG, k\u00f6nnen aber auch manuelle menschliche \u00dcberpr\u00fcfungen Ihrer Inhalte erleichtern, wenn Sie einen Schritt weiter gehen m\u00f6chten.<\/p>\n\n\n\n<p>Um WAVE zu verwenden, geben Sie einfach die URL der Webseite, die Sie bewerten m\u00f6chten, in das Feld &#8220;Webseitenadresse&#8221; ein und klicken Sie auf den Pfeil-Button. WAVE generiert dann einen Bericht, der Ihnen etwaige Fehler oder potenzielle Zug\u00e4nglichkeitsprobleme auf dieser Seite zeigt. Sie k\u00f6nnen auch WAVEs Browsererweiterungen f\u00fcr Chrome, Firefox und Edge installieren, um die Zug\u00e4nglichkeit direkt in Ihrem Webbrowser zu testen.<\/p>\n\n\n\n<p>Zus\u00e4tzlich zum Fehlerbericht gibt WAVE R\u00fcckmeldungen, wie Sie Ihre Seiten verbessern k\u00f6nnen, um deren Zug\u00e4nglichkeit zu erh\u00f6hen. Zum Beispiel kann es Sie auf Bilder hinweisen, denen der Alt-Text fehlt oder auf strukturelle Elemente, die so organisiert sind, dass sie Besucher der Website verwirren k\u00f6nnten.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Installiere eine Browser-Erweiterung f\u00fcr Barrierefreiheit<\/h3>\n\n\n\n<p>WAVE ist nicht das einzige Browser-Plugin, das automatisch Websites auf Zug\u00e4nglichkeitsprobleme \u00fcberpr\u00fcft \u2013 es gibt viele andere, die Sie herunterladen und verwenden k\u00f6nnen. Eine beliebte Wahl f\u00fcr Chrome und Firefox ist die <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/ARIA\" target=\"_blank\" rel=\"noopener\">Accessible Rich Internet Applications (ARIA) Erweiterung<\/a>.<\/p>\n\n\n\n<p>Die ARIA DevTools-Erweiterung ist eine kostenlose und Open-Source-Zug\u00e4nglichkeitsressource, die es Benutzern erm\u00f6glicht, die Art und Weise, wie sie mit Webinhalten interagieren, anzupassen. ARIA ist darauf ausgelegt, die Benutzbarkeit von Webseiten f\u00fcr Menschen mit Behinderungen zu verbessern und sie zug\u00e4nglicher f\u00fcr assistive Technologien, wie Bildschirmleseger\u00e4te, zu machen.<\/p>\n\n\n\n<p>ARIA erreicht dies durch die Bereitstellung eines Sets von Attributen, die Sie verwenden k\u00f6nnen, um die Zug\u00e4nglichkeit der HTML-Elemente Ihrer Website zu verbessern. Zum Beispiel kann das Attribut \u201earia-label\u201c als Marker f\u00fcr ein Element dienen, das sonst nicht zug\u00e4nglich ist, w\u00e4hrend das Attribut \u201aaria-describedby\u2018 verwendet werden kann, um eine Erkl\u00e4rung zu liefern.<\/p>\n\n\n\n<p>Um die ARIA-Erweiterung zu verwenden, installieren Sie sie aus dem Erweiterungsmarktplatz Ihres Browsers. Sie m\u00fcssen sie m\u00f6glicherweise aktivieren, bevor sie funktioniert.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"710\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/accessible-website-chrome-aria-dev-tools.jpg\" alt=\"Screenshot der AIRA DevTools-Erweiterung, die zu Chrome hinzugef\u00fcgt werden kann\" class=\"wp-image-43180 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/accessible-website-chrome-aria-dev-tools.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/accessible-website-chrome-aria-dev-tools-300x133.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/accessible-website-chrome-aria-dev-tools-1024x454.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/accessible-website-chrome-aria-dev-tools-768x341.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/accessible-website-chrome-aria-dev-tools-1536x682.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/accessible-website-chrome-aria-dev-tools-600x266.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/accessible-website-chrome-aria-dev-tools-1200x533.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/accessible-website-chrome-aria-dev-tools-730x324.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/accessible-website-chrome-aria-dev-tools-1460x648.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/accessible-website-chrome-aria-dev-tools-784x348.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/accessible-website-chrome-aria-dev-tools-1568x696.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/accessible-website-chrome-aria-dev-tools-877x389.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/710;\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Manuell auf h\u00e4ufige Zug\u00e4nglichkeitsprobleme pr\u00fcfen<\/h3>\n\n\n\n<p>Eine weitere M\u00f6glichkeit, um auf Zug\u00e4nglichkeitsprobleme zu pr\u00fcfen, ist die Verwendung eines manuellen Ansatzes. Nat\u00fcrlich kann dies zeitaufwendiger sein als die Verwendung von Online-Tools und Erweiterungen.<\/p>\n\n\n\n<p>Allerdings kann eine manuelle \u00dcberpr\u00fcfung gr\u00fcndlicher sein als einige digitale Werkzeuge. Zudem ist diese Methode kostenlos und f\u00fcr alle Website-Besitzer verf\u00fcgbar.<\/p>\n\n\n\n<p>Wenn Sie sich entscheiden, manuell nach Zug\u00e4nglichkeitsproblemen zu suchen, m\u00f6chten Sie vielleicht eine Checkliste verwenden, um zu beginnen und sicherzustellen, dass Sie so gr\u00fcndlich wie m\u00f6glich sind. WebAIM bietet eine <a href=\"https:\/\/webaim.org\/standards\/wcag\/checklist\" target=\"_blank\" rel=\"noopener\">umfassende WCAG 2 Checkliste<\/a> mit Eintr\u00e4gen wie:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Alle Inhalte sind f\u00fcr jeden zug\u00e4nglich, einschlie\u00dflich Menschen mit Behinderungen.<\/li>\n\n\n\n<li>Alle Bilder sind ordnungsgem\u00e4\u00df mit alternativem Text gekennzeichnet.<\/li>\n\n\n\n<li>Die Website ist nur mit einer Tastatur navigierbar.<\/li>\n\n\n\n<li>Alle Video- oder Audioinhalte auf der Website enthalten Transkripte oder Untertitel.<\/li>\n\n\n\n<li>Die Website ist frei von Farbkontrasten, die das Lesen erschweren k\u00f6nnten.<\/li>\n\n\n\n<li>Inhalte k\u00f6nnen von einer Vielzahl von Benutzeragenten interpretiert werden, einschlie\u00dflich assistiver Technologien.<\/li>\n\n\n\n<li>Inhalte erfordern keinen spezifischen Eingabetyp, wie nur Touch oder nur Tastatur, sondern unterst\u00fctzen Alternativen (zum Beispiel die Verwendung einer Tastatur auf einem mobilen Ger\u00e4t).<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Einen Web-Zug\u00e4nglichkeitsexperten einstellen, um Ihre Seite zu pr\u00fcfen<\/h3>\n\n\n\n<p>Wenn Sie die Ressourcen haben, besteht eine vierte M\u00f6glichkeit darin, einen Experten zu beauftragen, Ihre Website zu pr\u00fcfen. Dies ist oft der beste Weg, um die umfassendste \u00dcberpr\u00fcfung der Zug\u00e4nglichkeit Ihrer Website zu erhalten, was es zu einer besonders guten Wahl f\u00fcr jeden macht, der Zug\u00e4nglichkeit zu einem Kernwert seines <a href=\"https:\/\/www.dreamhost.com\/blog\/google-workspace-business-benefits\/\" target=\"_blank\" rel=\"noopener\">Online-Gesch\u00e4fts<\/a> machen m\u00f6chte.<\/p>\n\n\n\n<p>Bei DreamHost bieten wir <a href=\"https:\/\/www.dreamhost.com\/de\/professionelle-dienste\/\" target=\"_blank\" rel=\"noopener\">Pro Services<\/a> an, die <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/wordpress-webdesign-trends\/\" target=\"_blank\" rel=\"noopener\">Webdesign<\/a>, Website-Management und mehr umfassen, einschlie\u00dflich der Identifizierung und Behebung von Zug\u00e4nglichkeitsproblemen auf Ihrer Website.<\/p>\n\n\n\n<p>Unser Expertenteam wird Ihre Webseiten sorgf\u00e4ltig bewerten und Ihnen Zugangsl\u00f6sungen f\u00fcr alle Barrieren, die sie identifizieren, bereitstellen. Kontaktieren Sie uns heute, um mehr \u00fcber Pro Services zu erfahren oder um <a href=\"https:\/\/calendly.com\/dh-pro-services\/pro-service-consultation?utm_medium=web&amp;utm_campaign=overview&amp;utm_content=cta-body\" target=\"_blank\" rel=\"noopener\">eine kostenlose Beratung zu vereinbaren<\/a>.<\/p>\n\n\n\n<h2 id=\"design\" class=\"wp-block-heading\">Wie man eine barrierefreie Website gestaltet (Ein vollst\u00e4ndiger Leitfaden)<\/h2>\n\n\n\n<p>Jetzt kommt der spa\u00dfige Teil: das Entwerfen und Erstellen Ihrer Website, sodass sie jeder einfach verwenden und navigieren kann. Der Beginn Ihrer Reise zur Barrierefreiheit der Website ist aufregend, und die folgenden Schritte werden Sie durch den Designprozess f\u00fchren und helfen sicherzustellen, dass Ihre Website die rechtlichen Anforderungen und technischen Standards erf\u00fcllt, um f\u00fcr alle Nutzer zug\u00e4nglich zu sein. Lassen Sie uns eintauchen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Stellen Sie sicher, dass Ihre Website die Tastaturnavigation erm\u00f6glicht<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1700\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Most-Common-Keyboard-Shortcuts-On-A-Website.jpg\" alt=\"Ein Spickzettel der h\u00e4ufigsten Tastaturk\u00fcrzel wie Enter zum Folgen eines Links, Esc zum Stoppen einer Aktion und Pfeiltasten zur Navigation zwischen Elementen in einem Formular\" class=\"wp-image-43181 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Most-Common-Keyboard-Shortcuts-On-A-Website.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Most-Common-Keyboard-Shortcuts-On-A-Website-282x300.jpg 282w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Most-Common-Keyboard-Shortcuts-On-A-Website-964x1024.jpg 964w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Most-Common-Keyboard-Shortcuts-On-A-Website-768x816.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Most-Common-Keyboard-Shortcuts-On-A-Website-1446x1536.jpg 1446w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Most-Common-Keyboard-Shortcuts-On-A-Website-600x638.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Most-Common-Keyboard-Shortcuts-On-A-Website-1200x1275.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Most-Common-Keyboard-Shortcuts-On-A-Website-730x776.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Most-Common-Keyboard-Shortcuts-On-A-Website-1460x1551.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Most-Common-Keyboard-Shortcuts-On-A-Website-784x833.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Most-Common-Keyboard-Shortcuts-On-A-Website-1568x1666.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Most-Common-Keyboard-Shortcuts-On-A-Website-877x932.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1700;\" \/><\/figure>\n\n\n\n<p>Tastaturnavigation ist ein Grundpfeiler der Website-Zug\u00e4nglichkeit. Viele Nutzer, insbesondere solche mit motorischen Behinderungen, verlassen sich auf die Tastatur statt auf die Maus, um Websites zu navigieren. Die Gew\u00e4hrleistung der Tastaturnavigation auf Ihrer Website macht sie f\u00fcr eine breitere Nutzergruppe zug\u00e4nglich, einschlie\u00dflich derjenigen, die auf assistive Technologien angewiesen sind.<\/p>\n\n\n\n<p><b>Beste Praktiken:<\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Stellen Sie sicher, dass die Tab-Reihenfolge Ihrer Website logisch ist. Das bedeutet, dass beim Dr\u00fccken der Tab-Taste der Fokus durch interaktive Elemente in einer Reihenfolge verschoben wird, die Sinn ergibt und typischerweise dem visuellen Layout der Seite folgt.<\/li>\n\n\n\n<li>Wenn Benutzer die Tastatur zur Navigation verwenden, sollten klare visuelle Indikatoren anzeigen, welches Element gerade den Fokus hat. Dies k\u00f6nnte ein Rahmen, eine Farb\u00e4nderung oder eine andere deutliche Stil\u00e4nderung sein.<\/li>\n\n\n\n<li>F\u00fcgen Sie an der Spitze jeder Seite einen &#8220;Zum Hauptinhalt springen&#8221;-Link hinzu. Dies erm\u00f6glicht Benutzern, die auf Tastaturen angewiesen sind, wiederholende Navigationslinks zu umgehen und direkt auf den Hauptinhalt zuzugreifen.<\/li>\n\n\n\n<li>Wenn Ihre Website Dropdown-Men\u00fcs verwendet, stellen Sie sicher, dass sie mit Tastaturbefehlen navigiert und aktiviert werden k\u00f6nnen. Dies umfasst die M\u00f6glichkeit, die Men\u00fcs zu erweitern und zu kollabieren und Elemente darin auszuw\u00e4hlen.<\/li>\n\n\n\n<li>Die Implementierung benutzerdefinierter Tastenk\u00fcrzel kann die Benutzerfreundlichkeit erh\u00f6hen, aber achten Sie darauf, nicht mit bestehenden Browser- oder Screenreader-K\u00fcrzeln in Konflikt zu geraten. Dokumentieren Sie benutzerdefinierte K\u00fcrzel klar f\u00fcr die Benutzer.<\/li>\n\n\n\n<li>Stellen Sie sicher, dass Tastaturbenutzer in keinem Teil Ihrer Website stecken bleiben. Sie sollten in der Lage sein, mit nur ihrer Tastatur zu allen Elementen zu navigieren und von dort wegzunavigieren.<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Inhalte leicht sicht- und h\u00f6rbar machen<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1089\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/accessible-website-contrast-checker.jpg\" alt=\"Screenshot des Tools Kontrastpr\u00fcfer, der die Dropdown-Optionen zeigt, um Farbe auf Farbe zu pr\u00fcfen\" class=\"wp-image-43182 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/accessible-website-contrast-checker.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/accessible-website-contrast-checker-300x204.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/accessible-website-contrast-checker-1024x697.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/accessible-website-contrast-checker-768x523.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/accessible-website-contrast-checker-1536x1045.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/accessible-website-contrast-checker-600x408.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/accessible-website-contrast-checker-1200x817.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/accessible-website-contrast-checker-730x497.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/accessible-website-contrast-checker-1460x994.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/accessible-website-contrast-checker-784x534.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/accessible-website-contrast-checker-1568x1067.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/accessible-website-contrast-checker-877x597.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1089;\" \/><\/figure>\n\n\n\n<p>Es ist unerl\u00e4sslich, dass die Inhalte Ihrer Website leicht zu sehen und zu h\u00f6ren sind, um sie f\u00fcr Nutzer mit Seh- und H\u00f6rbehinderungen zug\u00e4nglich zu machen. Dies umfasst Personen, die blind sind, eine Sehschw\u00e4che haben, farbenblind sind oder taub oder schwerh\u00f6rig sind.<\/p>\n\n\n\n<p><b>Beste Praktiken:<\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Verwenden Sie hohe Kontrastfarbkombinationen zwischen Text und Hintergr\u00fcnden, um sicherzustellen, dass der Text leicht lesbar ist. Vermeiden Sie Farben, die sich bei\u00dfen oder zu eng aneinanderliegen. Verwenden Sie auch lesbare Schriftgr\u00f6\u00dfen und -stile.<\/li>\n\n\n\n<li>Verwenden Sie ein Online-Tool wie <a href=\"https:\/\/contrastchecker.com\/\" target=\"_blank\" rel=\"noopener\">Contrast Checker<\/a>, um Ihnen zu helfen, eine Farbpalette mit hohem Kontrast f\u00fcr gute visuelle Zug\u00e4nglichkeit auszuw\u00e4hlen.<\/li>\n\n\n\n<li>Stellen Sie sicher, dass Informationen, die durch Farben vermittelt werden, auch ohne Farbe verf\u00fcgbar sind, wie zum Beispiel durch Textbeschriftungen oder Muster. Dies ist besonders wichtig f\u00fcr Benutzer, die farbenblind sind.<\/li>\n\n\n\n<li>Erlauben Sie Benutzern, Textgr\u00f6\u00dfen anzupassen, ohne das Layout Ihrer Website zu zerst\u00f6ren.<\/li>\n\n\n\n<li>F\u00fcr sehbehinderte Benutzer stellen Sie sicher, dass jeglicher Audioinhalt klar, gut getaktet und beschreibend genug ist, um alle notwendigen Informationen zu vermitteln.<\/li>\n\n\n\n<li>Verwenden Sie ARIA (Accessible Rich Internet Applications) Rollen und Landmarken. Diese k\u00f6nnen Benutzern von Screenreadern helfen, das Layout zu verstehen und den Inhalt effektiver zu navigieren, insbesondere in komplexen Webanwendungen.<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3. Textalternativen bereitstellen<\/h3>\n\n\n\n<p>Textalternativen machen die nicht-textuellen Inhalte Ihrer Website f\u00fcr Menschen mit visuellen und auditiven Behinderungen zug\u00e4nglich. Diese Alternativen bieten ein textuelles \u00c4quivalent der Informationen, die durch Bilder, Videos und Audiodateien vermittelt werden, und stellen sicher, dass alle Benutzer, einschlie\u00dflich derjenigen, die Bildschirmleser oder andere assistive Technologien verwenden, Zugang zu denselben Informationen haben.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1185\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Provide-Text-Alternatives.jpg\" alt=\"Bieten Sie Textalternativen, um Bildschirmlesern, Suchmaschinen und defekten Bildern Klarheit zu verschaffen\" class=\"wp-image-43183 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Provide-Text-Alternatives.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Provide-Text-Alternatives-300x222.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Provide-Text-Alternatives-1024x758.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Provide-Text-Alternatives-768x569.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Provide-Text-Alternatives-1536x1138.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Provide-Text-Alternatives-600x444.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Provide-Text-Alternatives-1200x889.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Provide-Text-Alternatives-730x541.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Provide-Text-Alternatives-1460x1081.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Provide-Text-Alternatives-784x581.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Provide-Text-Alternatives-1568x1161.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Provide-Text-Alternatives-877x650.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1185;\" \/><\/figure>\n\n\n\n<p>Ein weiterer Vorteil ist, dass Alt-Text Ihre Seite optimieren kann, um in <a href=\"https:\/\/www.dreamhost.com\/blog\/seo-tools-to-optimize-website-success\/\" target=\"_blank\" rel=\"noopener\">Suchmaschinen<\/a> sichtbarer zu sein. Sie k\u00f6nnen ihn verwenden, um h\u00e4ufig gesuchte Schl\u00fcsselbegriffe einzubinden, die f\u00fcr Ihre Bilder relevant sind.<\/p>\n\n\n\n<p><b>Beste Praktiken:&nbsp;<\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Jedes Bild auf Ihrer Website sollte einen entsprechenden Alternativtext haben, der den Inhalt oder die Funktion des Bildes genau und knapp beschreibt. Diese Beschreibung sollte dieselbe Botschaft oder denselben Zweck vermitteln, den das Bild f\u00fcr sehende Benutzer hat.<\/li>\n\n\n\n<li><a href=\"https:\/\/make.wordpress.org\/accessibility\/handbook\/content\/alternative-text-for-images\/\" target=\"_blank\" rel=\"noopener\">F\u00fcgen Sie in WordPress Alternativtexte zu Bildern hinzu<\/a> \u00fcber Ihre Medienbibliothek.<\/li>\n\n\n\n<li>Bieten Sie Untertitel f\u00fcr Videos, die nicht nur den gesprochenen Inhalt, sondern auch andere relevante Ger\u00e4usche und nicht-sprachliche Informationen beschreiben. Transkriptionen sind ebenfalls wichtig und bieten eine textbasierte Version aller Audioinhalte, einschlie\u00dflich gesprochener Worte und anderer relevanter Ger\u00e4usche.<\/li>\n\n\n\n<li>F\u00fcr Videos, schlie\u00dfen Sie Audiobeschreibungen ein, die die visuellen Informationen erz\u00e4hlen. Dies ist besonders wichtig f\u00fcr Inhalte, bei denen die visuellen Informationen bedeutende Informationen tragen, die nicht allein durch Audio vermittelt werden.<\/li>\n\n\n\n<li>Stellen Sie sicher, dass alle Links und Schaltfl\u00e4chen textbasiert sind oder Textalternativen haben, sodass ihre Funktion f\u00fcr Benutzer von Bildschirmlesern klar ist. Vermeiden Sie es, Bilder als einziges Mittel zu verwenden, um wichtige Aktionen oder Links zu vermitteln.<\/li>\n\n\n\n<li>F\u00fcr komplexe visuelle Inhalte wie Diagramme und Grafiken, bieten Sie eine textbasierte Zusammenfassung oder Beschreibung, die die dargestellten Daten oder Informationen erkl\u00e4rt.<\/li>\n\n\n\n<li>Interaktive Elemente wie Formulare sollten klare und beschreibende Beschriftungen haben. Dies hilft den Benutzern zu verstehen, wof\u00fcr jedes Formularfeld ist und wie man damit interagiert.<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">4. Inhalte auf eine anpassbare Weise organisieren und strukturieren<\/h3>\n\n\n\n<p>Das Organisieren und Strukturieren von Inhalten auf eine anpassungsf\u00e4hige Weise stellt sicher, dass alle Benutzer, unabh\u00e4ngig davon, wie sie auf Ihre Website zugreifen, die Informationen auf eine koh\u00e4rente und logische Weise erhalten. Dieser Ansatz ist vorteilhaft f\u00fcr Benutzer, die auf Hilfstechnologien wie Bildschirmleser angewiesen sind, und f\u00fcr Personen mit kognitiven Beeintr\u00e4chtigungen, die komplexe Layouts oder inkonsistente Strukturen verwirrend finden k\u00f6nnten.<\/p>\n\n\n\n<p><b>Beste Praktiken:<\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Verwenden Sie HTML5-semantische Elemente wie <code>&lt;header&gt;<\/code>, <code>&lt;footer&gt;<\/code>, <code>&lt;nav&gt;<\/code>, <code>&lt;article&gt;<\/code> und <code>&lt;section&gt;<\/code>, um Ihren Inhalt klar zu strukturieren. Diese Elemente bieten Kontext f\u00fcr assistive Technologien, die es ihnen erm\u00f6glichen, die Struktur und das Layout Ihrer Webseite den Benutzern zu vermitteln.<\/li>\n\n\n\n<li>Verwenden Sie \u00dcberschriften (H1, H2, H3 usw.), um Inhalte hierarchisch und logisch zu strukturieren. Stellen Sie sicher, dass die \u00dcberschriften beschreibend sind und eine klare Anzeige des folgenden Inhalts geben.<\/li>\n\n\n\n<li>Gestalten Sie das Layout Ihrer Website flexibel. Das bedeutet, es sollte sich an verschiedene Bildschirmgr\u00f6\u00dfen und -orientierungen anpassen, ohne Informationen oder Funktionalit\u00e4t zu verlieren. Dies ist besonders wichtig f\u00fcr Benutzer mit Sehbehinderungen, die m\u00f6glicherweise hereinzoomen m\u00fcssen, oder f\u00fcr diejenigen, die Ihre Seite auf mobilen Ger\u00e4ten nutzen.<\/li>\n\n\n\n<li>Wenn Sie Tabellen f\u00fcr Daten verwenden, stellen Sie sicher, dass sie korrekt mit Zeilen- und Spalten\u00fcberschriften ausgezeichnet sind. Vermeiden Sie die Verwendung von Tabellen f\u00fcr Layoutzwecke, da dies f\u00fcr Benutzer von Screenreadern verwirrend sein kann.<\/li>\n\n\n\n<li>Verwenden Sie geordnete (nummerierte) und ungeordnete (aufgez\u00e4hlte) Listen, um verwandte Elemente zu gruppieren. Dies hilft Screenreadern, die Struktur und Organisation des Inhalts zu vermitteln.<\/li>\n\n\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1089\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Use-Headings.jpg\" alt=\"H1, H2, H3 Hierarchie, bei der jeder nachfolgende Header kleiner wird\" class=\"wp-image-43184 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Use-Headings.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Use-Headings-300x204.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Use-Headings-1024x697.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Use-Headings-768x523.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Use-Headings-1536x1045.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Use-Headings-600x408.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Use-Headings-1200x817.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Use-Headings-730x497.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Use-Headings-1460x994.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Use-Headings-784x534.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Use-Headings-1568x1067.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Use-Headings-877x597.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1089;\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">5. Bieten Sie alternative Wege zum Konsum zeitbasierter Medien an<\/h3>\n\n\n\n<p>Zeitbasierte Medien umfassen Audio- und Videoinhalte. Menschen, die taub oder schwerh\u00f6rig sind, sowie solche, die blind sind oder eine Sehschw\u00e4che haben, ben\u00f6tigen alternative M\u00f6glichkeiten, um zeitbasierte Medien zu konsumieren.<\/p>\n\n\n\n<p><b>Beste Praktiken:<\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Stellen Sie f\u00fcr alle Videoinhalte Untertitel bereit. Die Untertitel sollten den gesprochenen Dialog genau wiedergeben und relevante nicht-dialogische Audioreize wie Musik oder Soundeffekte beschreiben, die zum Verst\u00e4ndnis des Inhalts wichtig sind.<\/li>\n\n\n\n<li>Erstellen Sie Transkripte f\u00fcr sowohl Audio- als auch Videoinhalte.<\/li>\n\n\n\n<li>F\u00fcgen Sie Audiobeschreibungen in Videos hinzu, die die visuellen Aspekte des Videos erz\u00e4hlen.<\/li>\n\n\n\n<li>Stellen Sie sicher, dass die auf Ihrer Website verwendeten Mediaplayer zug\u00e4nglich sind. Sie sollten mit einer Tastatur navigierbar und bedienbar sein und ihre Funktionen (wie Abspielen, Pause und Lautst\u00e4rke regeln) sollten klar gekennzeichnet und f\u00fcr Nutzer von Screenreadern verst\u00e4ndlich sein.<\/li>\n\n\n\n<li>Erw\u00e4gen Sie f\u00fcr wichtige Videoinhalte eine Geb\u00e4rdensprachinterpretation anzubieten. Dies kann eine separate Videospur oder eine Bild-in-Bild-Anzeige innerhalb des Videos sein, die eine Geb\u00e4rdensprach\u00fcbersetzung des gesprochenen Inhalts bietet.<\/li>\n\n\n\n<li>Beinhalten Sie Optionen zur Steuerung der Wiedergabegeschwindigkeit und zum Pausieren, Zur\u00fcckspulen oder Schnellvorlauf des Inhalts. Diese Flexibilit\u00e4t kann besonders vorteilhaft f\u00fcr Nutzer mit kognitiven Behinderungen, Lernschwierigkeiten oder f\u00fcr diejenigen sein, die mehr Zeit ben\u00f6tigen, um audiovisuelle Informationen zu verarbeiten.<\/li>\n\n\n\n<li>Ab WordPress 5.6 k\u00f6nnen Sie Untertitel und Untertexte zu WordPress-Videos hinzuf\u00fcgen, indem Sie die <a href=\"https:\/\/wordpress.org\/support\/article\/video-block\/\" target=\"_blank\" rel=\"noopener\">Web Video Text Tracks Format (WebVTT) Funktion<\/a> nutzen. Um darauf zuzugreifen, f\u00fcgen Sie einfach einen Video-Block auf Ihrer Seite ein und w\u00e4hlen dann die Schaltfl\u00e4che f\u00fcr Textspuren in Ihrem horizontalen Navigationsmen\u00fc aus.<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">6. Formulare sorgf\u00e4ltig gestalten<\/h3>\n\n\n\n<p>Formulare sind f\u00fcr viele Websites notwendig und werden f\u00fcr alles von Kontaktinformationen bis zu Online-K\u00e4ufen verwendet. Richtig gestaltete Formulare stellen sicher, dass alle Benutzer ihre Informationen eingeben, Auswahlm\u00f6glichkeiten treffen und etwaige Fehler beim Absenden verstehen k\u00f6nnen.<\/p>\n\n\n\n<p><b>Beste Praktiken:<\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Jedes Formularfeld sollte eine klare und beschreibende Beschriftung haben, die programmatisch mit dem Feld verkn\u00fcpft ist. Dies hilft Benutzern von Screenreadern zu verstehen, welche Art von Informationen erwartet wird.<\/li>\n\n\n\n<li>Wenn Benutzer einen Fehler machen, wie z. B. ein erforderliches Feld \u00fcbersehen oder ung\u00fcltige Daten eingeben, sollte der Fehler klar identifiziert und textlich beschrieben werden. Dies hilft den Benutzern zu verstehen, was korrigiert werden muss.<\/li>\n\n\n\n<li>Stellen Sie sicher, dass die Tab-Reihenfolge des Formulars einer logischen Abfolge folgt, sodass Benutzer die Formularfelder mit der Tastatur auf vorhersehbare Weise durchlaufen k\u00f6nnen.<\/li>\n\n\n\n<li>Wenn Benutzer durch das Formular tabben, sollte es eine sichtbare Anzeige geben, welches Feld gerade den Fokus hat, wie eine Rahmen- oder Hintergrundfarben\u00e4nderung.<\/li>\n\n\n\n<li>Verwenden Sie Fieldsets und Legenden, um verwandte Felder zu gruppieren. Dies ist besonders hilfreich f\u00fcr Benutzer von Screenreadern, da es Kontext bietet und hilft zu verstehen, wie verschiedene Felder zusammenh\u00e4ngen.<\/li>\n\n\n\n<li>Wenn Ihr Formular Dropdown-Men\u00fcs, Kontrollk\u00e4stchen oder benutzerdefinierte Steuerelemente enth\u00e4lt, stellen Sie sicher, dass diese vollst\u00e4ndig zug\u00e4nglich sind und mit der Tastatur navigiert und ausgew\u00e4hlt werden k\u00f6nnen.<\/li>\n\n\n\n<li>Geben Sie gegebenenfalls Anweisungen oder Beispiele f\u00fcr Felder an, insbesondere f\u00fcr solche, die Daten in einem bestimmten Format erfordern, wie Daten oder Telefonnummern.<\/li>\n\n\n\n<li>Wenn Ihr Formular ein Zeitlimit f\u00fcr die Fertigstellung hat, bieten Sie eine M\u00f6glichkeit, die Zeit bei Bedarf zu verl\u00e4ngern, da einige Benutzer m\u00f6glicherweise mehr Zeit zum Lesen und Ausf\u00fcllen des Formulars ben\u00f6tigen.<\/li>\n\n\n\n<li>Stellen Sie sicher, dass das Formular auf verschiedenen Ger\u00e4ten und Bildschirmgr\u00f6\u00dfen nutzbar ist, insbesondere f\u00fcr Benutzer, die m\u00f6glicherweise hereinzoomen oder ein Mobilger\u00e4t verwenden.<\/li>\n\n\n\n<li>Plugins wie <a href=\"https:\/\/formidableforms.com\/\" target=\"_blank\" rel=\"noopener\">Formidable Forms<\/a> verf\u00fcgen \u00fcber integrierte Hilfswerkzeuge zur Barrierefreiheit.<\/li>\n\n\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"940\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Best-Practices.jpg\" alt=\"Quelle von deque.com, die zeigt, wie man dynamische Felder zug\u00e4nglicher macht\" class=\"wp-image-43185 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Best-Practices.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Best-Practices-300x176.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Best-Practices-1024x602.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Best-Practices-768x451.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Best-Practices-1536x902.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Best-Practices-600x353.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Best-Practices-1200x705.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Best-Practices-730x429.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Best-Practices-1460x858.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Best-Practices-784x461.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Best-Practices-1568x921.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Best-Practices-877x515.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/940;\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">7. Geben Sie den Besuchern gen\u00fcgend Zeit, sich mit Ihrer Seite zu besch\u00e4ftigen<\/h3>\n\n\n\n<p>Einige Seitenbesucher lesen m\u00f6glicherweise langsam, haben kognitive oder Lernbehinderungen oder verwenden Hilfstechnologien, die zus\u00e4tzliche Zeit ben\u00f6tigen, um Inhalte zu navigieren und zu interpretieren. Stellen Sie sicher, dass Sie ihnen ausreichend Zeit geben, um alles auf Ihrer Seite zu lesen, anzusehen und zu nutzen.<\/p>\n\n\n\n<p><b>Beste Praktiken:<\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Wenn Ihre Website Funktionen oder Inhalte mit Zeitbeschr\u00e4nkungen hat (wie zeitgesteuerte Quizze, Formulare mit Sitzungszeitlimits oder rotierende Karussells), bieten Sie eine M\u00f6glichkeit f\u00fcr Benutzer, diese anzupassen, zu verl\u00e4ngern oder zu deaktivieren.<\/li>\n\n\n\n<li>F\u00fcr jegliche bewegende, blinkende oder scrollende Inhalte sowie f\u00fcr sich automatisch aktualisierende Informationen (wie Nachrichtenticker) sollten Steuerungen bereitgestellt werden, die es Benutzern erm\u00f6glichen, diese zu pausieren, anzuhalten oder auszublenden.<\/li>\n\n\n\n<li>Vermeiden Sie automatisch aktualisierte Inhalte ohne Benutzerinitiative, da dies f\u00fcr Benutzer von Bildschirmleseger\u00e4ten verwirrend sein kann.<\/li>\n\n\n\n<li>Wenn ein Timeout erforderlich ist (wie aus Sicherheitsgr\u00fcnden auf einer Bank-Website), warnen Sie die Benutzer, bevor die Zeit abl\u00e4uft. Dies gibt ihnen die M\u00f6glichkeit, ihre Sitzung zu verl\u00e4ngern, ohne Daten zu verlieren.<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">8. Vermeiden Sie blinkende oder flackernde Inhalte<\/h3>\n\n\n\n<p>Das Vermeiden von blinkenden oder blitzenden Inhalten kann Ihre Website f\u00fcr Benutzer, die anf\u00e4llig f\u00fcr Anf\u00e4lle sind, die durch blinkende Lichter oder Muster verursacht werden, eine als fotosensitive Epilepsie bekannte Bedingung, zug\u00e4nglicher machen. Zus\u00e4tzlich kann schnell blinkender oder blitzender Inhalt ablenkend oder sogar schmerzhaft f\u00fcr Benutzer sein, was zu einem unangenehmen oder unzug\u00e4nglichen Web-Erlebnis beitr\u00e4gt.<\/p>\n\n\n\n<p><b>Beste Praktiken:<\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Vermeiden Sie grunds\u00e4tzlich Inhalte, die mehr als dreimal in einem Zeitraum von einer Sekunde aufblitzen. Diese Richtlinie, ein Teil der Web Content Accessibility Guidelines (WCAG), hilft das Risiko von Anf\u00e4llen zu reduzieren.<\/li>\n\n\n\n<li>Wenn Ihre Website Inhalte enthalten muss, die aufblitzen oder blinken (aus k\u00fcnstlerischen oder informativen Gr\u00fcnden), geben Sie eine klare Warnung, bevor die Inhalte angezeigt werden. Dies erm\u00f6glicht es Benutzern mit Lichtempfindlichkeit, solche Inhalte zu meiden oder sich darauf vorzubereiten.<\/li>\n\n\n\n<li>Beachten Sie Animationen und \u00dcberg\u00e4nge in Ihrem Webdesign. Stellen Sie sicher, dass sie subtil sind und kein Aufblitzen oder schnelle Bewegungen beinhalten. Bieten Sie, wenn m\u00f6glich, Optionen an, um Animationen zu reduzieren oder abzuschalten.<\/li>\n\n\n\n<li>Verwenden Sie statt aufblitzender Inhalte alternative Methoden wie kr\u00e4ftige Farben, Muster oder statische Grafiken, die gleicherma\u00dfen wirksam sind, aber kein Risiko f\u00fcr die Benutzer darstellen.<\/li>\n\n\n\n<li>Im Zweifelsfall konsultieren Sie Webzug\u00e4nglichkeitsexperten, die Ihre Seite auf potenziell problematische Inhalte \u00fcberpr\u00fcfen und sicherere Alternativen vorschlagen k\u00f6nnen.<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">9. Klare Navigation bereitstellen<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1089\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Provide-Clear-Navigation.jpg\" alt=\"Beispiel f\u00fcr ein Dropdown-Men\u00fc, das eine klare Navigation bietet und zus\u00e4tzliche Kategorien sowie hilfreiche Inhalte bietet, mit denen man mehr \u00fcber Domains erfahren kann\" class=\"wp-image-43186 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Provide-Clear-Navigation.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Provide-Clear-Navigation-300x204.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Provide-Clear-Navigation-1024x697.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Provide-Clear-Navigation-768x523.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Provide-Clear-Navigation-1536x1045.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Provide-Clear-Navigation-600x408.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Provide-Clear-Navigation-1200x817.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Provide-Clear-Navigation-730x497.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Provide-Clear-Navigation-1460x994.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Provide-Clear-Navigation-784x534.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Provide-Clear-Navigation-1568x1067.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Provide-Clear-Navigation-877x597.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1089;\" \/><\/figure>\n\n\n\n<p>Klare Navigation ist ein Grundpfeiler der Webzug\u00e4nglichkeit. Sie erm\u00f6glicht allen Nutzern, einschlie\u00dflich Personen mit Behinderungen, sich m\u00fchelos auf Ihrer Seite zurechtzufinden. Eine gute Navigation ist besonders vorteilhaft f\u00fcr Nutzer mit Behinderungen und solche, die auf assistive Technologien angewiesen sind. Klare, vorhersehbare Navigationsstrukturen helfen den Benutzern zu verstehen, wo sie sich auf Ihrer Seite befinden, wie sie zu ihrem gew\u00fcnschten Ziel gelangen und wie sie zu zuvor besuchten Seiten zur\u00fcckkehren k\u00f6nnen.<\/p>\n\n\n\n<p><b>Beste Praktiken:<\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Halten Sie Ihr Navigationslayout auf der gesamten Website konsistent. Konsistenz hilft Benutzern zu lernen und sich zu merken, wie sie Ihre Website navigieren k\u00f6nnen, was Verwirrung und Frustration reduziert.<\/li>\n\n\n\n<li>Gruppieren Sie verwandte Navigationspunkte. Dies kann durch gut organisierte Men\u00fcs, klare Abschnitts\u00fcberschriften oder eine Website-\u00dcbersicht erreicht werden, die einen \u00dcberblick \u00fcber die Struktur Ihrer Website bietet.<\/li>\n\n\n\n<li>Stellen Sie sicher, dass alle Men\u00fcs mit Tastaturnavigation und Bildschirmlesern zug\u00e4nglich sind. Dies umfasst Drop-down-Men\u00fcs und andere dynamische Inhalte.<\/li>\n\n\n\n<li>F\u00fcr Websites mit mehreren Inhaltsebenen verwenden Sie Brotkrumenpfade. Diese bieten den Benutzern einen klaren Weg von der Startseite zu ihrem aktuellen Standort und helfen bei der einfachen Navigation zur\u00fcck zu vorherigen Abschnitten.<\/li>\n\n\n\n<li>Implementieren Sie eine robuste Suchfunktion, insbesondere f\u00fcr gr\u00f6\u00dfere Websites. Dies erm\u00f6glicht es Benutzern, schnell Informationen zu finden, ohne durch mehrere Seiten navigieren zu m\u00fcssen.<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">10. Inhalte klar und verst\u00e4ndlich gestalten<\/h3>\n\n\n\n<p>Das klare und leicht verst\u00e4ndliche Gestalten der Inhalte Ihrer Website kann Besuchern mit Behinderungen, Lernschwierigkeiten oder denen, die die Sprache der Website nicht als Muttersprache sprechen, helfen. Klare und unkomplizierte Inhalte stellen sicher, dass die Informationen f\u00fcr ein breiteres Publikum zug\u00e4nglich sind und helfen allen Nutzern, die beabsichtigte Nachricht oder Aktion schnell zu erfassen.<\/p>\n\n\n\n<p><b>Beste Praktiken:<\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Schreiben Sie Inhalte in einfacher Sprache. Vermeiden Sie komplexe S\u00e4tze, Fachjargon und technische Begriffe. Wenn technische Begriffe notwendig sind, bieten Sie einfache Erkl\u00e4rungen oder ein Glossar an.<\/li>\n\n\n\n<li>Verwenden Sie \u00dcberschriften und Zwischen\u00fcberschriften, um Ihren Inhalt logisch zu strukturieren. Dies hilft den Benutzern, insbesondere jenen, die Bildschirmleser verwenden, das Layout zu verstehen und Informationen leichter zu finden.<\/li>\n\n\n\n<li>Halten Sie Abs\u00e4tze und S\u00e4tze kurz und b\u00fcndig. Diese Struktur macht den Inhalt leichter lesbar und verst\u00e4ndlich.<\/li>\n\n\n\n<li>Verwenden Sie Aufz\u00e4hlungszeichen oder nummerierte Listen, um Informationen in handhabbare, leicht verdauliche Teile zu gliedern. Dies ist besonders hilfreich f\u00fcr Anweisungen oder komplexe Informationen.<\/li>\n\n\n\n<li>Bewahren Sie ein konsistentes Layout und Design auf Ihrer gesamten Website. Konsistenz in Schriftarten, Farben und Stilen hilft den Benutzern, Ihre Inhalte besser zu verstehen und zu navigieren.<\/li>\n\n\n\n<li>Verwenden Sie, wo angebracht, Bilder, Icons oder Diagramme, um den Text zu unterst\u00fctzen. Visuelle Hilfsmittel k\u00f6nnen komplexe Informationen klarer vermitteln und sind vorteilhaft f\u00fcr Benutzer, die visuelle Informationen effektiver verarbeiten als Text.<\/li>\n\n\n\n<li>Gestalten Sie Schaltfl\u00e4chen oder Links f\u00fcr Aktionen klar und beschreibend. Benutzer sollten verstehen k\u00f6nnen, was passieren wird, wenn sie darauf klicken.<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">11. Schreiben Sie n\u00fctzliche Fehlermeldungen<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"940\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Write-Useful-Error-Messages.jpg\" alt=\"Anatomie zug\u00e4nglicher Formulare, die Fehlermeldungen anzeigen, um klar zu erkl\u00e4ren, was Leser und Screenreader tun m\u00fcssen, um diese zu korrigieren\" class=\"wp-image-43187 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Write-Useful-Error-Messages.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Write-Useful-Error-Messages-300x176.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Write-Useful-Error-Messages-1024x602.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Write-Useful-Error-Messages-768x451.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Write-Useful-Error-Messages-1536x902.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Write-Useful-Error-Messages-600x353.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Write-Useful-Error-Messages-1200x705.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Write-Useful-Error-Messages-730x429.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Write-Useful-Error-Messages-1460x858.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Write-Useful-Error-Messages-784x461.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Write-Useful-Error-Messages-1568x921.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Write-Useful-Error-Messages-877x515.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/940;\" \/><\/figure>\n\n\n\n<p>Effektive Fehlermeldungen leiten Benutzer durch die Behebung von Problemen, die sie antreffen, was insbesondere f\u00fcr Benutzer mit Behinderungen wichtig ist, die es m\u00f6glicherweise schwieriger finden, Fehler zu verstehen und zu beheben. Klare, informative Fehlermeldungen helfen, Frustration zu vermeiden und sicherzustellen, dass alle Benutzer erfolgreich mit Ihrer Website interagieren und ihre beabsichtigten Aktionen abschlie\u00dfen k\u00f6nnen.<\/p>\n\n\n\n<p><b>Beste Praktiken:<\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Fehlermeldungen sollten klar angeben, worin das Problem besteht. Vermeiden Sie vage oder technische Sprache, die Benutzer verwirren k\u00f6nnte. Sagen Sie beispielsweise nicht einfach &#8220;Ung\u00fcltige Eingabe&#8221;, sondern spezifizieren Sie, was falsch ist, wie z.B. &#8220;Das Format der E-Mail-Adresse ist falsch.&#8221;<\/li>\n\n\n\n<li>Verbinden Sie die Fehlermeldung nach M\u00f6glichkeit mit einem vorgeschlagenen L\u00f6sungsansatz oder den n\u00e4chsten Schritten. Wenn beispielsweise ein erforderliches Feld leer ist, sollte die Fehlermeldung den Benutzer auffordern, dieses Feld auszuf\u00fcllen.<\/li>\n\n\n\n<li>Heben Sie das Feld oder den Bereich, in dem der Fehler aufgetreten ist, visuell hervor. Dies kann durch \u00c4ndern der Rahmenfarbe, Hinzuf\u00fcgen eines Symbols oder Verwenden von Textstilen erfolgen. Dies ist besonders hilfreich f\u00fcr Benutzer mit Sehbehinderungen.<\/li>\n\n\n\n<li>Verwenden Sie einen freundlichen, nicht-technischen Ton in Ihren Fehlermeldungen. Dieser Ansatz verringert Frustration und Angst, insbesondere bei Benutzern, die m\u00f6glicherweise bereits Schwierigkeiten haben, Ihre Website zu navigieren.<\/li>\n\n\n\n<li>Positionieren Sie Fehlermeldungen nahe am Fehlerort, idealerweise \u00fcber oder neben dem betreffenden Formularfeld. Dies erleichtert es den Benutzern, einschlie\u00dflich derjenigen, die Bildschirmleseger\u00e4te verwenden, den Fehler zu lokalisieren und zu verstehen.<\/li>\n\n\n\n<li>Stellen Sie sicher, dass Fehlermeldungen und -anzeigen f\u00fcr Benutzer von Bildschirmleseger\u00e4ten zug\u00e4nglich sind. Verwenden Sie ARIA-Rollen und -Eigenschaften, um das Vorhandensein und die Art der Fehler zu kommunizieren.<\/li>\n\n\n\n<li>Verwenden Sie eine konsistente Methode zur Identifizierung und Pr\u00e4sentation von Fehlern auf Ihrer Website. Konsistenz hilft Benutzern zu verstehen und vorherzusagen, wie Fehler kommuniziert werden k\u00f6nnten.<\/li>\n\n\n\n<li>Bieten Sie bei komplexen oder wiederholten Fehlern eine Option f\u00fcr zus\u00e4tzliche Unterst\u00fctzung an, wie z.B. Kontaktinformationen des Kundendienstes.<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">12. Schreiben Sie HTML, das geparst werden kann<\/h3>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>HTML<\/h3>\n    <p>HTML steht f\u00fcr HyperText Markup Language. Es ist der grundlegendste Baustein des Webs und die Standard-Auszeichnungssprache zur Erstellung von Webseiten und Anwendungen.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/html\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Mehr lesen                    <\/a>\n\n<\/div>\n\n\n\n<p>Schreiben Sie schlie\u00dflich HTML, das geparst oder von Webbrowsern und unterst\u00fctzenden Technologien korrekt verarbeitet werden kann. Gut strukturierter und g\u00fcltiger HTML-Code erm\u00f6glicht es Bildschirmleseger\u00e4ten und anderen Hilfswerkzeugen, die Inhalte genau zu interpretieren und den Benutzern zu vermitteln. Diese Praxis ist grundlegend f\u00fcr die Schaffung einer webbasierten Umgebung, die inklusiv und f\u00fcr alle navigierbar ist.<\/p>\n\n\n\n<p><b>Beste Praktiken:<\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Halten Sie sich an standardm\u00e4\u00dfige HTML-Tags und vermeiden Sie propriet\u00e4re Tags oder Attribute. Dadurch wird sichergestellt, dass Ihr HTML-Code von allen Browsern und unterst\u00fctzenden Technologien universell verstanden wird.<\/li>\n\n\n\n<li>Strukturieren Sie Ihr HTML-Dokument ordnungsgem\u00e4\u00df. Verwenden Sie eine logische Reihenfolge f\u00fcr HTML-Elemente und stellen Sie sicher, dass Elemente wie \u00dcberschriften (<code>&lt;h1&gt;<\/code> bis <code>&lt;h6&gt;<\/code>), Abs\u00e4tze (<code>&lt;p&gt;<\/code>), Listen (<code>&lt;ul&gt;<\/code>, <code>&lt;ol&gt;<\/code>, <code>&lt;li&gt;<\/code>) und andere Standardelemente angemessen verwendet werden.<\/li>\n\n\n\n<li>Nutzen Sie HTML5 semantische Elemente wie <code>&lt;header&gt;<\/code>, <code>&lt;footer&gt;<\/code>, <code>&lt;article&gt;<\/code>, <code>&lt;section&gt;<\/code> und <code>&lt;nav&gt;<\/code>, um die Struktur Ihrer Webseite zu definieren.<\/li>\n\n\n\n<li>Verwenden Sie HTML-Validatoren, um Ihren Code auf Fehler oder Inkonsistenzen zu \u00fcberpr\u00fcfen. G\u00fcltiges HTML wird wahrscheinlicher korrekt von Browsern und unterst\u00fctzenden Technologien interpretiert.<\/li>\n\n\n\n<li>Trennen Sie Inhalt, Stil und Verhalten. Verwenden Sie externe CSS-Dateien f\u00fcr das Styling und externe JavaScript-Dateien f\u00fcr Verhaltensweisen, anstatt Inline-Styles oder -Scripts. Diese Trennung hilft, sauberes, lesbares und zug\u00e4ngliches HTML zu erhalten.<\/li>\n\n\n\n<li>Verwenden Sie aussagekr\u00e4ftige Titeltags und Meta-Beschreibungen, um den Zweck der Seite zu vermitteln.<\/li>\n\n\n\n<li>Deklarieren Sie die Sprache der Seite mithilfe des lang-Attributs im <code>&lt;html&gt;<\/code> Tag. Dies hilft Screenreadern, den Inhalt korrekt auszusprechen.<\/li>\n\n\n<\/ul>\n\n\n\n<h2 id=\"easy\" class=\"wp-block-heading\">Machen Sie es jedem leicht, auf Ihre Seite zuzugreifen<\/h2>\n\n\n\n<p>Fortlaufende Verbesserungen in der Webzug\u00e4nglichkeit sind ein Grund zum Feiern. Schlie\u00dflich, wenn Sie eine WordPress-Website betreiben, m\u00f6chten Sie so viele Menschen wie m\u00f6glich erreichen, einschlie\u00dflich Menschen mit Behinderungen. Gl\u00fccklicherweise ist das Entwerfen einer zug\u00e4nglichen Website gut machbar.<\/p>\n\n\n\n<p>In diesem Beitrag haben wir viele Strategien besprochen, die Sie verwenden k\u00f6nnen, um eine Website zu gestalten, die f\u00fcr alle Ihre Besucher einfacher zu navigieren und zu verwenden ist. Beispielsweise k\u00f6nnen Sie sicherstellen, dass Ihre Website tastaturnavigationfreundlich ist, um mit assistiven Technologien kompatibel zu sein. Sie k\u00f6nnen auch Alt-Text und Video-Transkriptionen f\u00fcr all Ihre visuellen Medien verwenden. Am wichtigsten ist, dass Sie, wenn Sie unserer Anleitung folgen, eine gerechtere Web-Erfahrung unterst\u00fctzen und sicherstellen, dass Ihre Website f\u00fcr so viele Menschen wie m\u00f6glich zug\u00e4nglich ist.<\/p>\n\n\n\n<p>M\u00f6chten Sie einen <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/wie-man-einen-webentwickler-anstellt\/\" target=\"_blank\" rel=\"noopener\">Entwickler einstellen<\/a>, der die Web-Zug\u00e4nglichkeit f\u00fcr Ihre sich entwickelnden WordPress-Projekte maximieren kann? Wenn Sie diese wichtige Aufgabe lieber den Profis \u00fcberlassen m\u00f6chten, schauen Sie sich unsere <a href=\"https:\/\/www.dreamhost.com\/de\/professionelle-dienste\/\" target=\"_blank\" rel=\"noopener\">DreamHost Development Pro Services<\/a> 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      Sie tr\u00e4umen es, wir programmieren es\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Nutzen Sie \u00fcber 20 Jahre Programmiererfahrung, wenn Sie sich f\u00fcr unseren Webentwicklungsservice entscheiden. Teilen Sie uns einfach mit, was Sie f\u00fcr Ihre Website w\u00fcnschen \u2014 wir k\u00fcmmern uns um den Rest.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/de\/professionelle-dienste\/entwicklung\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Mehr erfahren                    <\/a>\n\n  <\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Ob Sie eine E-Commerce-Website oder ein Webentwicklungsgesch\u00e4ft betreiben, Sie m\u00f6chten so viele Besucher wie m\u00f6glich auf Ihre Website locken. Und das bedeutet, sicherzustellen, dass so viele Menschen wie m\u00f6glich Ihre Website nutzen k\u00f6nnen \u2013 indem Sie die Barrierefreiheit der Website priorisieren. Die Barrierefreiheit einer Website umfasst die Gew\u00e4hrleistung, dass Ihre Website von jedem genutzt werden kann, einschlie\u00dflich derjenigen mit [\u2026]<\/p>\n","protected":false},"author":1075,"featured_media":43175,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"","toc_headlines":"[[\"definition\",\"Was ist die Zug\u00e4nglichkeit von Websites?\"],[\"why\",\"Warum Sie die Zug\u00e4nglichkeit von Websites priorisieren sollten\"],[\"check\",\"Wie Sie die Webzug\u00e4nglichkeit Ihrer Seite \u00fcberpr\u00fcfen\"],[\"design\",\"Wie man eine barrierefreie Website gestaltet (Ein vollst\u00e4ndiger Leitfaden)\"],[\"easy\",\"Machen Sie es jedem leicht, auf Ihre Seite zuzugreifen\"]]","hide_toc":false,"footnotes":""},"categories":[14495,14509],"tags":[],"class_list":["post-52221","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials-de","category-webdesign-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 man eine barrierefreie Webseite gestaltet (Ein vollst\u00e4ndiger Leitfaden) - 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\/machen-sie-ihre-website-barrierefrei\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie man eine barrierefreie Webseite gestaltet (Ein vollst\u00e4ndiger Leitfaden)\" \/>\n<meta property=\"og:description\" content=\"Ob Sie eine E-Commerce-Website oder ein Webentwicklungsgesch\u00e4ft betreiben, Sie m\u00f6chten so viele Besucher wie m\u00f6glich auf Ihre Website locken. Und das bedeutet, sicherzustellen, dass so viele Menschen wie m\u00f6glich Ihre Website nutzen k\u00f6nnen \u2013 indem Sie die Barrierefreiheit der Website priorisieren. Die Barrierefreiheit einer Website umfasst die Gew\u00e4hrleistung, dass Ihre Website von jedem genutzt werden kann, einschlie\u00dflich derjenigen mit [\u2026]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/de\/machen-sie-ihre-website-barrierefrei\/\" \/>\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=\"2024-02-14T15:00:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-16T19:25:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Designing-An-Accessible-Website-HERO.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"1095\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jennifer Le\" \/>\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=\"Jennifer Le\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"28 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Wie man eine barrierefreie Webseite gestaltet (Ein vollst\u00e4ndiger Leitfaden) - 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\/machen-sie-ihre-website-barrierefrei\/","og_locale":"en_US","og_type":"article","og_title":"Wie man eine barrierefreie Webseite gestaltet (Ein vollst\u00e4ndiger Leitfaden)","og_description":"Ob Sie eine E-Commerce-Website oder ein Webentwicklungsgesch\u00e4ft betreiben, Sie m\u00f6chten so viele Besucher wie m\u00f6glich auf Ihre Website locken. Und das bedeutet, sicherzustellen, dass so viele Menschen wie m\u00f6glich Ihre Website nutzen k\u00f6nnen \u2013 indem Sie die Barrierefreiheit der Website priorisieren. Die Barrierefreiheit einer Website umfasst die Gew\u00e4hrleistung, dass Ihre Website von jedem genutzt werden kann, einschlie\u00dflich derjenigen mit [\u2026]","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/de\/machen-sie-ihre-website-barrierefrei\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2024-02-14T15:00:30+00:00","article_modified_time":"2025-01-16T19:25:16+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Designing-An-Accessible-Website-HERO.jpg","type":"image\/jpeg"}],"author":"Jennifer Le","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Jennifer Le","Est. reading time":"28 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/machen-sie-ihre-website-barrierefrei\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/machen-sie-ihre-website-barrierefrei\/"},"author":{"name":"Jennifer Le","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/6e0e15f083b219af1ab8d25dcd595ddf"},"headline":"Wie man eine barrierefreie Webseite gestaltet (Ein vollst\u00e4ndiger Leitfaden)","datePublished":"2024-02-14T15:00:30+00:00","dateModified":"2025-01-16T19:25:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/machen-sie-ihre-website-barrierefrei\/"},"wordCount":5624,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/machen-sie-ihre-website-barrierefrei\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Designing-An-Accessible-Website-HERO.jpg","articleSection":["Tutorials","Webdesign"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/machen-sie-ihre-website-barrierefrei\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/de\/machen-sie-ihre-website-barrierefrei\/","name":"Wie man eine barrierefreie Webseite gestaltet (Ein vollst\u00e4ndiger Leitfaden) - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/machen-sie-ihre-website-barrierefrei\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/machen-sie-ihre-website-barrierefrei\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Designing-An-Accessible-Website-HERO.jpg","datePublished":"2024-02-14T15:00:30+00:00","dateModified":"2025-01-16T19:25:16+00:00","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/machen-sie-ihre-website-barrierefrei\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/de\/machen-sie-ihre-website-barrierefrei\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/machen-sie-ihre-website-barrierefrei\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Designing-An-Accessible-Website-HERO.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Designing-An-Accessible-Website-HERO.jpg","width":1460,"height":1095,"caption":"A man seemingly in the middle of speaking and gesturing to a laptop with an accessibility logo in the corner and an alt text tag block"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/machen-sie-ihre-website-barrierefrei\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Wie man eine barrierefreie Webseite gestaltet (Ein vollst\u00e4ndiger Leitfaden)"}]},{"@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\/6e0e15f083b219af1ab8d25dcd595ddf","name":"Jennifer Le","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/05\/jennifer-le-dreamhost-150x150.jpeg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/05\/jennifer-le-dreamhost-150x150.jpeg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/05\/jennifer-le-dreamhost-150x150.jpeg","caption":"Jennifer Le"},"description":"Jennifer is Designer II at DreamHost and is responsible for branding, design, and UX\/UI. In her free time, she enjoys crafting, cooking, and camping. Follow Jennifer on LinkedIn: https:\/\/www.linkedin.com\/in\/nhijenniferle\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/jenniferle\/"}]}},"lang":"de","translations":{"de":52221,"es":26741,"en":13080,"pl":57322,"ru":57325,"pt":57349,"uk":57358,"it":68316,"fr":70215,"nl":70244},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/52221","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\/1075"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=52221"}],"version-history":[{"count":4,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/52221\/revisions"}],"predecessor-version":[{"id":62737,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/52221\/revisions\/62737"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/43175"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=52221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=52221"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=52221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}