{"id":2414,"date":"2024-01-11T11:12:11","date_gmt":"2024-01-11T10:12:11","guid":{"rendered":"https:\/\/www.logic-joe.com\/blog\/?p=2414"},"modified":"2024-01-11T11:22:02","modified_gmt":"2024-01-11T10:22:02","slug":"dos-and-donts-fuer-inklusives-webdesign","status":"publish","type":"post","link":"https:\/\/www.logic-joe.com\/blog\/dos-and-donts-fuer-inklusives-webdesign\/","title":{"rendered":"Do\u2019s and Don\u2019ts f\u00fcr inklusives Webdesign"},"content":{"rendered":"

Unsere Gesellschaft ist vielf\u00e4ltig und braucht diverse L\u00f6sungen f\u00fcr unterschiedliche Menschen. Durch das neue Barrierefreiheitsst\u00e4rkungsgesetz (BFSG)<\/a>, das in Deutschland im Juni 2025 in Kraft tritt, sollen vollumf\u00e4ngliche L\u00f6sungen f\u00fcr eine digitale Teilhabe geschaffen werden. <\/span><\/p>\n

Barrierefreiheit zeichnet sich nicht nur dadurch aus, Oberfl\u00e4chen zug\u00e4nglich zu gestalten, sondern auch dar\u00fcber, wie einfach es Menschen mit Behinderung gemacht wird, diese zu nutzen. <\/span><\/p>\n

Hier haben wir sieben bedeutende Aspekte f\u00fcr gute Accessibility im Web aufgelistet.\u00a0<\/span><\/p>\n

Die 7 wichtigsten Do\u2019s und Dont\u2019s f\u00fcr barrierefreie Websites:\u00a0<\/span><\/b><\/h2>\n

1 Struktur und Layout:<\/b><\/h3>\n

Do: Klare Hierarchien und eine konsistente Seitenstruktur (wie z.B. die Vergabe strukturierter Headlines mit H1, H2 usw.) verwenden. Das navigieren durch die Website sollte bekannten Mustern folgen (z.B. „Startseite“, „Produkte“, „Kontakt“).
\n<\/span><\/p>\n

Don’t: Vermeidung von chaotischem Layout und unstrukturierten Inhalten durch fehlende visuelle Content-Hierarchien, einer chaotischen Anordnung von Inhalten im Layout oder inkonsistenten Seitenelementen, z.B. Link-Buttons mal links- und mal rechtsb\u00fcndig.<\/span><\/p>\n

2 Alternative Texte f\u00fcr Bilder:<\/b><\/h3>\n

Do: Verwendung von aussagekr\u00e4ftigen, beschreibenden Alternativtexten um Bildinhalte f\u00fcr Screenreader-Nutzer zug\u00e4nglich zu machen, die sich die Inhalte der Seite aufgrund von visuellen Einschr\u00e4nkungen vorlesen lassen. Um Bildinhalte trotzdem greifen zu k\u00f6nnen, lesen Screenreader die im HTML hinterlegten Alternativtexte zum Bild vor.
\n<\/span><\/p>\n

Don’t: Vermeidung von schm\u00fcckenden Bildern ohne kontextuelle Bedeutung zum Thema der Website.
\n<\/span><\/p>\n

3 Farbkontraste und Schriftgr\u00f6\u00dfen:<\/b><\/h3>\n

Do: Auf ausreichend hohe Farbkontraste zwischen Schrift, Bild und Hintergrund achten (WCAG-Kontrastvorgaben<\/a> beachten!). Kontraste k\u00f6nnen z.B. hier \u00fcberpr\u00fcft werden: <\/span>https:\/\/webaim.org\/resources\/contrastchecker\/<\/span><\/a>
\n<\/span>Ausreichend gro\u00dfe Schriftgr\u00f6\u00dfen verwenden und mindestens den 1,5-fachen Zeilenabstand einhalten.
\n<\/span>
\n<\/span>Don’t: Geringe Kontraste oder zu kleine Schriftgr\u00f6\u00dfen w\u00e4hlen, z.B. zu helle Schriften auf wei\u00dfem Hintergrund, die schwer lesbar sind.
\nAuch bestimmte Farbkombinationen k\u00f6nnen f\u00fcr Personen mit einer Sehschw\u00e4che schwierig zu erkennen sein. Beispielsweise haben immerhin 10% der Bev\u00f6lkerung in Europa eine Rot-Gr\u00fcn-Sehschw\u00e4che.
\n<\/span><\/p>\n

4 Bedienbarkeit:<\/b><\/h3>\n

Do: Webseiten m\u00fcssen mit verschiedenen Hilfsmitteln wie Tastatur und Screenreader bedienbar sein. Nutzer sollen z.B. mit der Tab-Taste durch die Website navigieren, Formulare ausf\u00fcllen und Schaltfl\u00e4chen erreichen k\u00f6nnen. Der Tastatur-Fokus soll visuell erkennbar sein, z.B. durch Einrahmung des aktuell anvisierten Inhalts.
\n<\/span><\/p>\n

Don’t: Nur auf Mausbedienbarkeit bzw. Fingerbedienbarkeit am Smartphone setzen, z.B. Dropdown-Men\u00fcs, die sich nur durch Klick \u00f6ffnen lassen.
\n<\/span><\/p>\n

5 Formulare und Interaktionselemente:<\/b><\/h3>\n

Do: Klare Beschriftungen f\u00fcr Formulareingabefelder verwenden, z.B. statt „Name“ besser zwei Felder mit „Vorname“ und „Nachname“ verwenden, um Fehler zu vermeiden. Formulare sollten allgemein so gestaltet sein, dass Error-Meldungen m\u00f6glichst vermieden werden und ihr Aufbau einer logischen Reihenfolge folgt.\u00a0 <\/span><\/p>\n

Don’t: Komplexe oder nicht eindeutige Formulare. Fehlermeldungen bei nicht korrekt eingegebene Daten sollten eindeutige Hinweise zur Fehlerbehebung liefern, z.B. „Das Passwort muss mindestens 8 Zeichen lang sein.“. Zus\u00e4tzlich sollten alle Hinweise farblich kodiert sein.
\n<\/span><\/p>\n

6 Video-Untertitel und Audiodeskription:<\/b><\/h3>\n

Do: Untertitel und Audiodeskriptionen f\u00fcr Videos bereitstellen, um Videos f\u00fcr Menschen mit auditiven und visuellen Einschr\u00e4nkungen zug\u00e4nglich zu machen.\u00a0<\/span><\/p>\n

Don\u2019t: Videos und Bewegtbild, die Informationen nur akustisch \u00fcberliefern. Auf Videos ohne Informationswert oder nur als Schmuckelement sollte verzichtet werden, da beides vom eigentlichen Inhalt der Website ablenkt oder f\u00fcr Frustration sorgt.
\n<\/span><\/p>\n

7 Aussagekr\u00e4ftige Verlinkungen:<\/b><\/h3>\n

Do: Links und \u00dcberschriften sollten immer beschreibend und aussagekr\u00e4ftig benannt werden und den Inhalt der verlinkten Seite klar wiedergeben (statt \u201chier klicken\u201d besser \u201cmehr Informationen zu Barrierefreiheit lesen\u201d).\u00a0<\/span><\/p>\n

Don\u2019t: Nichtssagende Linktexte, die f\u00fcr Menschen, die Screenreader verwenden, nicht klar vermittelt wohin die Verlinkungen f\u00fchren.
\n<\/span>Links, die neue Seiten im Browser \u00f6ffnen, sollten vermieden werden, da sie ein Zur\u00fcckspringen zur vorherigen Seite erschweren.<\/span><\/p>\n

Mit diesen Tools k\u00f6nnen Sie checken, wie barrierefrei Ihr Webauftritt ist:<\/h2>\n

https:\/\/wave.webaim.org\/, <\/a>Google Lighthouse<\/a> und auch Google Page Speed Insights<\/a> generieren innerhalb k\u00fcrzester Zeit konkrete Verbesserungsvorschl\u00e4ge f\u00fcr Ihre Website.<\/p>\n

Warum ist Barrierefreiheit so wichtig?<\/span><\/h2>\n

Zug\u00e4nglichkeit f\u00fcr alle Nutzer:<\/b><\/h3>\n

<\/b>In Deutschland leben laut dem Statistischen Bundesamt ca. 10 Millionen Menschen mit einer Behinderung, 7,6 Millionen davon sind schwerbehindert. Hinzu kommen noch ca. 18 Millionen Menschen \u00fcber 65 Jahre, die aufgrund ihres Alters Einschr\u00e4nkungen haben k\u00f6nnen. Die Arten der Einschr\u00e4nkungen und Behinderungen k\u00f6nnen sehr vielf\u00e4ltig sein, unter anderem Seh- bzw. H\u00f6rbeeintr\u00e4chtigungen oder k\u00f6rperliche\/motorische und kognitive Beeintr\u00e4chtigungen. <\/span><\/p>\n

Es ist gut zu erkennen, dass viele Menschen von einem barriere\u00e4rmeren Internet profitieren w\u00fcrden und sich somit f\u00fcr Unternehmen auch die Chance bietet, neue Nutzergruppen zu erschlie\u00dfen.\u00a0<\/span><\/p>\n

Zum Vergleich: 2017 nutzten nur rund 65% der Menschen mit Behinderung das Internet, die Zahl der Menschen ohne Behinderung lag bei etwa 90%.\u00a0<\/span><\/p>\n

Positive Auswirkungen auf die Gesellschaft:<\/b><\/h3>\n

(Digitale) Barrierefreiheit sorgt daf\u00fcr, dass alle Menschen gleicherma\u00dfen am gesellschaftlichen Leben teilhaben k\u00f6nnen und unterst\u00fctzt somit die Idee der Gleichberechtigung und Chancengleichheit. Von digitaler Barrierefreiheit profitieren also auch Menschen ohne anerkannte Behinderung, die aber dennoch in manchen Lebenslagen eine Einschr\u00e4nkung sp\u00fcren (z.B. Rot-Gr\u00fcn-Schw\u00e4che). Auch Menschen mit Migrationshintergrund, deren Muttersprache nicht Deutsch ist, profitieren von Barrierefreiheit. <\/span>
\n<\/span>
\n<\/span>Au\u00dferdem werden auch langfristige gesellschaftliche Vorteile geschaffen, z.B. f\u00fcr Innovationen in der Gestaltung, bessere Produkte und Dienstleistungen f\u00fcr alle.<\/span><\/p>\n

Positive Auswirkungen auf die Usability:<\/b><\/h3>\n

<\/b>Barrierefreiheit verbessert nicht nur die Erfahrung von Menschen mit Behinderungen, sondern auch die Nutzerfreundlichkeit der Website f\u00fcr alle Besucher. So profitieren nicht nur Menschen mit Behinderung von einfachen Interaktionselementen, hohen Kontrasten zwischen Schrift und Hintergrund oder Video-Untertiteln in lauten Umgebungen wie in der U-Bahn. <\/span>
\n<\/span>Au\u00dferdem werden Produkte und Dienstleistungen durch inklusives Design neuen Nutzergruppen zug\u00e4nglich gemacht.<\/span><\/p>\n

Logic Joe builds accessible<\/h2>\n

Wir unterst\u00fctzen Sie gerne dabei, Ihre Webpr\u00e4senz barrierefrei zu gestalten – vollkommen unabh\u00e4ngig davon, wo Sie derzeit stehen. F\u00fcr einen Website-Relauch geh\u00f6rt es zu unseren Grunds\u00e4tzen, die Grundlagen der Barrierefreiheit in Konzept und Design und eben auch auf Code-Ebene von Beginn an zu etablieren. Wenden Sie sich auch gerne an uns<\/a>, wenn wir Ihre Webpr\u00e4senz im Rahmen eines Quick-Screenings und n\u00f6tiger Korrekturen barrierefrei machen sollen.<\/p>\n

 <\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Hier geben wir Einblicke zu den meistgemachten Fehlern im Design und Aufbau von Webseiten in Bezug auf Barrierefreiheit und wie man sie vermeidet.<\/p>\n","protected":false},"author":20,"featured_media":2440,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[21],"tags":[],"_links":{"self":[{"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/posts\/2414"}],"collection":[{"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/comments?post=2414"}],"version-history":[{"count":14,"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/posts\/2414\/revisions"}],"predecessor-version":[{"id":2451,"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/posts\/2414\/revisions\/2451"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/media\/2440"}],"wp:attachment":[{"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/media?parent=2414"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/categories?post=2414"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/tags?post=2414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}