{"id":4819,"date":"2021-01-14T16:21:14","date_gmt":"2021-01-14T15:21:14","guid":{"rendered":"https:\/\/www.textmaster.com\/blog\/?p=4819"},"modified":"2021-01-14T16:21:14","modified_gmt":"2021-01-14T15:21:14","slug":"tipps-barrierefreie-gestaltung-e-commerce-website","status":"publish","type":"post","link":"https:\/\/de.textmaster.com\/blog\/tipps-barrierefreie-gestaltung-e-commerce-website\/","title":{"rendered":"7 Tipps f\u00fcr eine barrierefreie Gestaltung Ihrer E-Commerce-Website"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Wussten Sie, dass <strong>15 bis 20 % der Menschen eine motorische, visuelle oder auditive Behinderung haben<\/strong>? Wir leben in einer vernetzten Gesellschaft, in der es wichtiger denn je ist, <strong>die Zug\u00e4nglichkeit Ihrer Website zu optimieren<\/strong>.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Unter \u201eWeb Accessibility\u201c (Barrierefreies Webdesign) versteht man alle Techniken mit dem Ziel, <strong>Ihre E-Commerce-Website m\u00f6glichst vielen Menschen zug\u00e4nglich zu machen<\/strong> (darunter Personen <strong>mit Behinderung<\/strong>) und somit ein deutlich gr\u00f6\u00dferes Publikum zu erreichen. Dadurch k\u00f6nnen Sie <strong>den Traffic und die Konversionsrate<\/strong> auf den einzelnen Seiten Ihrer Website erh\u00f6hen.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Mit einer optimal gestalteten Website entgehen Ihnen nicht <strong>Millionen von potenziellen Besuchern<\/strong>. Au\u00dferdem verbessert eine <strong>barrierefreie Gestaltung das Suchmaschinen-Ranking (SEO) Ihrer Website<\/strong>!<\/span><b><\/b><\/p>\n<hr \/>\n<p><a href=\"https:\/\/de.textmaster.com\/blog\/internationalisierung-e-commerce-business\/\" target=\"_blank\" rel=\"noopener noreferrer\"><b>Erfahren Sie, wie Sie Ihr E-Commerce-Gesch\u00e4ft international ausrichten k\u00f6nnen<\/b><\/a><\/p>\n<hr \/>\n<p><b><\/b>Um eine E-Commerce-Website behinderten oder \u00e4lteren Menschen mit m\u00f6glicherweise eingeschr\u00e4nkten F\u00e4higkeiten zug\u00e4nglich zu machen, sollten bestimmte Regeln befolgt werden:<\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">F\u00fcr <strong>Blinde\/Sehbehinderte<\/strong>: Sie sollten die M\u00f6glichkeit haben, <strong>die Inhalte anzuh\u00f6ren,<\/strong> zum Beispiel mit einem Screenreader.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">F\u00fcr <strong>Menschen mit motorischen Behinderungen<\/strong>: Sie sollten in jedem Fall die M\u00f6glichkeit haben, <strong>Ihre Website ohne Maus zu nutzen<\/strong>.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Diese Dinge sind wichtig und sollten beachtet werden, wenn Sie Ihre E-Commerce-Website m\u00f6glichst vielen Personen zug\u00e4nglich machen wollen. Eine solche Gestaltung l\u00e4sst sich mit zahlreichen Mitteln umsetzen. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Hier sind <strong>7 Tipps, die Ihnen helfen, Ihre Website barrierefreier zu gestalten:<\/strong><\/span><\/p>\n<h2><b>Setzen Sie auf die beste Ergonomie<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Die<strong> Norm ISO 9241<\/strong> definiert Gebrauchstauglichkeit (Usability) wie folgt: <\/span><i><span style=\"font-weight: 400;\"> \u201eEin Produkt gilt als gebrauchstauglich, wenn es sich effektiv, effizient und zufriedenstellend nutzen l\u00e4sst.\u201c<\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">Die \u00e4sthetische Gestaltung einer Website reicht nicht aus. Die <strong>Web-Ergonomie ist eine Grundvoraussetzung<\/strong> f\u00fcr eine gute E-Commerce-Website. Dieser Gesichtspunkt ist nicht zu untersch\u00e4tzen. Wenn das <\/span><strong><a href=\"https:\/\/go.textmaster.com\/lp-de-internationalisierung-deutsche-digitalwirtschaft?utm_source=blog&amp;utm_medium=referral\" target=\"_blank\" rel=\"noopener noreferrer\">Nutzererlebnis<\/a><\/strong><span style=\"font-weight: 400;\">\u00a0im Vordergrund steht, <strong>ist es wahrscheinlicher, dass die Benutzer Ihre Website m\u00f6gen und sie die Seite erneut besuchen oder weiterempfehlen<\/strong>. Sie sollten sich bereits vor Beginn der Konzeption Ihrer Website<strong> sorgf\u00e4ltig mit ihrer Ergonomie befassen<\/strong>. Dies betrifft die <strong>Benutzeroberfl\u00e4che Ihrer Seiten,<\/strong> aber auch die<strong> Gestaltung Ihrer Men\u00fcs,<\/strong> die das Nutzererlebnis verbessern. Durch eine einfache Navigation vergr\u00f6\u00dfert sich Ihr potenzieller zuk\u00fcnftiger Kundenkreis!<\/span><\/p>\n<h2><b>Nutzen Sie die passende Struktur<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Ein gro\u00dfer Teil der Webinhalte l\u00e4sst sich durch die richtige Verwendung von <strong>HTML<\/strong> leicht barrierefrei machen. Eine Website besteht aus vielen Tags, die direkt im Code der jeweiligen Seite gesucht und angepasst werden k\u00f6nnen. Es gibt viele verschiedene Arten von Tags. Jedes hat eine Bedeutung und beeinflusst die Struktur Ihrer Website. <strong>Alle Tags haben einen bestimmten Zweck<\/strong>. Setzen Sie sie richtig ein!<\/span><\/p>\n<h2><b>Trennen Sie die Form vom Inhalt<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Damit Ihre E-Commerce-Website gut zug\u00e4nglich ist, sollten Sie<strong> Ihre HTML-Datei, <\/strong>die <strong>Ihre Inhalte<\/strong> (Texte, Bilder, Men\u00fcs \u2026) enth\u00e4lt, und<strong> Ihre CSS-Datei(en), <\/strong>die <strong>die Formatdefinitionen<\/strong> enth\u00e4lt\/enthalten, klar voneinander trennen. Dies erlaubt zum einen eine \u00fcbersichtlichere Architektur und zum anderen die Abbildung verschiedener Arten von Designs. So k\u00f6nnen Sie einen Zugang ohne Formatierung anbieten, was <strong>f\u00fcr einige Behinderungen sehr n\u00fctzlich sein kann<\/strong>, aber auch einen Zugang mit gr\u00f6\u00dfer geschriebenem Text und Inhalten, die besser an Smartphones oder Tablets angepasst sind &#8230;<\/span><\/p>\n<h2><b>Vergessen Sie nicht den Alternativtext f\u00fcr Ihre Bilder<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Der Alternativtext (Alt-Text) ist eine <strong>Kurzbeschreibung eines Bildes<\/strong>. Er wird in den HTML-Code eingef\u00fcgt und gibt sehbehinderten Benutzern <strong>Aufschluss dar\u00fcber, was auf dem Bild dargestellt ist<\/strong>.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Zun\u00e4chst ist es wichtig, zwischen 3 Arten von Bildern zu unterscheiden:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Bilder, die eine<strong> einfache Information<\/strong> vermitteln, wie Schaltfl\u00e4chen<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Bilder, die <strong>komplexere Informationen<\/strong> vermitteln, wie Grafiken. Diese Bilder k\u00f6nnen so gestaltet werden, dass sie auf eine HTML-Seite verweisen, die den Inhalt des Bildes im Detail erkl\u00e4rt.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><strong>Rein dekorative Bilder,<\/strong> <strong>die Ihre E-Commerce-Website<\/strong> versch\u00f6nern, aber keine relevanten Zusatzinformationen liefern, zum Beispiel Aufz\u00e4hlungszeichen oder Rahmen<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Auf E-Commerce-Websites mit Produktdaten sind Alternativtexte unerl\u00e4sslich, damit sich <strong>blinde Benutzer besser zurechtfinden<\/strong>.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Der Alternativtext sollte nicht au\u00dfer Acht gelassen werden. Er tr\u00e4gt auch zur <strong>Suchmaschinenoptimierung<\/strong> bei.<\/span><\/p>\n<h2><b>Achten Sie auf Farben und Kontraste<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">W\u00e4hlen Sie <strong>Farben aus, die sich gut unterscheiden lassen,<\/strong> um eine leichte und bequeme Lesbarkeit zu gew\u00e4hrleisten. Empfehlenswert ist eine schlichte Kombination, wie etwa <strong>dunkler Text auf hellem Hintergrund,<\/strong> denn Text und Hintergrund Ihrer Seiten sollten durchweg einen <strong>starken Kontrast<\/strong> aufweisen.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Auch sollte man sich stets bewusst sein, dass die auf dem Bildschirm angezeigten Farben nicht unbedingt f\u00fcr alle Benutzer gleich sind. Dies h\u00e4ngt sowohl von den <strong>Bildschirmeinstellungen<\/strong> als auch der <strong>Sehf\u00e4higkeit des Benutzers<\/strong> ab.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><strong>Ein Tipp<\/strong>: Beachten Sie die HTML-Zug\u00e4nglichkeitsstandards, indem Sie eine typografische Gestaltung w\u00e4hlen, die f\u00fcr alle zug\u00e4nglich ist.<\/span><\/p>\n<h2><b>Geben Sie Ihren Hypertext-Links eine Bezeichnung<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Je weniger Unklarheiten es gibt, desto zug\u00e4nglicher wird Ihre Website!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Es kann beispielsweise vorkommen, dass ein Link nicht angibt, auf welche Seite er verweist. Alle Schaltfl\u00e4chen\/Links auf Ihrer Website sollten eine <strong>genaue Bezeichnung haben, die sich von den anderen unterscheidet,<\/strong> damit die Benutzer verstehen, wohin sie weitergeleitet werden.<\/span><\/p>\n<h4><b>Zum Verst\u00e4ndnis<\/b><\/h4>\n<p><span style=\"font-weight: 400;\">Ein blinder Website-Besucher m\u00f6chte seine Sendungsverfolgung abrufen. Schaltfl\u00e4chen wie <strong>\u201eHier klicken\u201c<\/strong> sind in diesem Fall nicht empfehlenswert. Manche Besucher verwenden eine <strong>Braillezeile oder Sprachausgabe<\/strong> f\u00fcr die Navigation zwischen den einzelnen Seiten. Besser w\u00e4re also eine Schaltfl\u00e4che mit einer <strong>pr\u00e4ziseren Beschreibung<\/strong> wie <strong>\u201eIhre Sendungsverfolgung anzeigen\u201c,<\/strong> die f\u00fcr den Benutzer gleich viel aussagekr\u00e4ftiger ist.<\/span><\/p>\n<h2><b>Vermeiden Sie Pop-up-Fens\u00adter<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Ein <strong>Pop-up-Fenster<\/strong> kann zwar sehr n\u00fctzlich sein, um <strong>eine Neuheit oder ein Ereignis anzuk\u00fcndigen<\/strong>, und f\u00fcr einige Benutzer kann es praktisch sein, einen \u00dcberblick \u00fcber alle ge\u00f6ffneten Seiten zu haben. F\u00fcr manch andere (zum Beispiel Sehbehinderte) k\u00f6nnen sie jedoch <strong>sehr st\u00f6rend<\/strong> sein. Denn ein neues Fenster kann <strong>den Surfrhythmus st\u00f6ren,<\/strong> sodass man <strong>den Benutzer verliert<\/strong>. Lassen Sie ihm also wenn m\u00f6glich die Wahl, mit einem einfachen Rechtsklick eine andere Seite zu \u00f6ffnen. Falls Sie jedoch keine andere M\u00f6glichkeit haben, denken Sie daran, dies mit dem entsprechenden <strong>Attribut in Ihrem HTML-Code<\/strong> anzuzeigen. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Durch eine barrierefreie und <strong>inklusivere<\/strong> Gestaltung der eigenen E-Commerce-Website <strong>k\u00f6nnen die Bed\u00fcrfnisse aller Benutzer erf\u00fcllt werden<\/strong>. Weitere <strong>Vorteile sind ein h\u00f6herer Traffic<\/strong> und eine <strong>bessere<\/strong> <strong>Online-Reputation<\/strong>. Also worauf warten Sie noch? Aktualisieren Sie jetzt Ihre Website!<\/span><\/p>\n<p><!--HubSpot Call-to-Action Code --><span id=\"hs-cta-wrapper-d60e6ca5-1f08-4056-8e2d-cb7670ec2e3e\" class=\"hs-cta-wrapper\"><span id=\"hs-cta-d60e6ca5-1f08-4056-8e2d-cb7670ec2e3e\" class=\"hs-cta-node hs-cta-d60e6ca5-1f08-4056-8e2d-cb7670ec2e3e\"><!-- [if lte IE 8]>\n\n\n<div id=\"hs-cta-ie-element\"><\/div>\n\n\n<![endif]--><a href=\"https:\/\/cta-redirect.hubspot.com\/cta\/redirect\/2680086\/d60e6ca5-1f08-4056-8e2d-cb7670ec2e3e\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" id=\"hs-cta-img-d60e6ca5-1f08-4056-8e2d-cb7670ec2e3e\" class=\"hs-cta-img\" style=\"border-width: 0px;\" src=\"https:\/\/no-cache.hubspot.com\/cta\/default\/2680086\/d60e6ca5-1f08-4056-8e2d-cb7670ec2e3e.png\" alt=\"Lesen Sie, wie Petit Bateau sein \u00dcbersetzungsmanagement mit TextMaster zentralisiert hat\" width=\"750\" height=\"200\" \/><\/a><\/span><script charset=\"utf-8\" src=\"https:\/\/js.hscta.net\/cta\/current.js\"><\/script><script type=\"text\/javascript\"> hbspt.cta.load(2680086, 'd60e6ca5-1f08-4056-8e2d-cb7670ec2e3e', {}); <\/script><\/span><!-- end HubSpot Call-to-Action Code --><\/p>\n","protected":false},"excerpt":{"rendered":"<p><span style=\"font-weight: 400;\">Wussten Sie, dass <strong>15 bis 20 % der Menschen eine motorische, visuelle oder auditive Behinderung haben<\/strong>? Wir leben in einer vernetzten Gesellschaft, in der es wichtiger denn je ist, <strong>die Zug\u00e4nglichkeit Ihrer Website zu optimieren<\/strong>.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Unter \u201eWeb Accessibility\u201c (Barrierefreies Webdesign) versteht man alle Techniken mit dem Ziel, <strong>Ihre E-Commerce-Website m\u00f6glichst vielen Menschen zug\u00e4nglich zu machen<\/strong> (darunter Personen <strong>mit Behinderung<\/strong>) und somit ein deutlich gr\u00f6\u00dferes Publikum zu erreichen. Dadurch k\u00f6nnen Sie <strong>den Traffic und die Konversionsrate<\/strong> auf den [&#8230;]<\/p>\n","protected":false},"author":22,"featured_media":4812,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[],"_links":{"self":[{"href":"https:\/\/de.textmaster.com\/blog\/wp-json\/wp\/v2\/posts\/4819"}],"collection":[{"href":"https:\/\/de.textmaster.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/de.textmaster.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/de.textmaster.com\/blog\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/de.textmaster.com\/blog\/wp-json\/wp\/v2\/comments?post=4819"}],"version-history":[{"count":2,"href":"https:\/\/de.textmaster.com\/blog\/wp-json\/wp\/v2\/posts\/4819\/revisions"}],"predecessor-version":[{"id":4826,"href":"https:\/\/de.textmaster.com\/blog\/wp-json\/wp\/v2\/posts\/4819\/revisions\/4826"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/de.textmaster.com\/blog\/wp-json\/wp\/v2\/media\/4812"}],"wp:attachment":[{"href":"https:\/\/de.textmaster.com\/blog\/wp-json\/wp\/v2\/media?parent=4819"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/de.textmaster.com\/blog\/wp-json\/wp\/v2\/categories?post=4819"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/de.textmaster.com\/blog\/wp-json\/wp\/v2\/tags?post=4819"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}