{"id":537,"date":"2026-08-24T17:39:51","date_gmt":"2026-08-24T15:39:51","guid":{"rendered":"https:\/\/digital.hfh.ch\/eaccessibility\/?post_type=chapter&p=537"},"modified":"2026-08-26T15:35:08","modified_gmt":"2026-08-26T13:35:08","slug":"barrierearme-grafiken","status":"publish","type":"chapter","link":"https:\/\/digital.hfh.ch\/eaccessibility\/chapter\/barrierearme-grafiken\/","title":{"raw":"Barrierearme Grafiken","rendered":"Barrierearme Grafiken"},"content":{"raw":"
\r\n

Regel<\/p>\r\n\r\n<\/header>\r\n

Informationen aus Grafiken m\u00fcssen auch f\u00fcr Personen zug\u00e4nglich sein, die visuelle Inhalte nicht oder nur eingeschr\u00e4nkt wahrnehmen k\u00f6nnen. Relevante Informationen d\u00fcrfen deshalb nie ausschliesslich \u00fcber Farbe vermittelt werden, sondern sind zus\u00e4tzlich in Textform bereitzustellen.<\/div>\r\n<\/div>\r\n

Farbe<\/h2>\r\n

Informationen d\u00fcrfen nicht ausschliesslich \u00fcber Farben vermittelt werden.\u00a0Dies ist insbesondere bei Diagrammen und Grafiken wichtig, bei denen Daten anhand unterschiedlicher Farben visualisiert werden. W\u00e4hrend dies f\u00fcr Menschen ohne Beeintr\u00e4chtigung in der Regel eine sehr n\u00fctzliche Darstellungsform ist, kann eine Unterscheidung f\u00fcr Nutzende mit einer Sehbeeintr\u00e4chtigung wie z.B. Farbfehlsichtigkeit unm\u00f6glich sein. <\/span>Die Bedeutung der einzelnen Farben sollte deshalb zus\u00e4tzlich durch eine Beschriftung, Symbole oder unterschiedliche Muster der Segmente erkennbar sein. <\/span><\/p>\r\n\r\n

Kontraste<\/h2>\r\nGrafische Elemente m\u00fcssen einen ausreichenden Kontrast zum Hintergrund aufweisen. Auch Text innerhalb einer Grafik muss einen ausreichenden Kontrast zum Hintergrund haben. Werden verschiedene grafische Elemente durch ihre Farbe voneinander unterschieden, muss auch zwischen diesen Elementen ein ausreichender Kontrast bestehen. Weitere Informationen findest du in den Kapiteln Kontraste<\/a> und Kontraste der HfH-Farben<\/a>.\r\n

Text<\/h2>\r\n

Informationen, die f\u00fcr das Verst\u00e4ndnis einer Grafik relevant sind, m\u00fcssen auch in Textform zug\u00e4nglich sein. Dies gilt insbesondere f\u00fcr Diagramme, Infografiken und andere Grafiken, die inhaltliche Informationen vermitteln. Dabei kann die Information je nach Art und Komplexit\u00e4t der Grafik \u00fcber den umgebenden Text, eine Beschriftung oder Legende, einen Alternativtext oder eine l\u00e4ngere Bildbeschreibung bereitgestellt werden.<\/p>\r\n\r\n

Alternativtext und Bildbeschreibung<\/h2>\r\n

Ist eine Grafik nicht rein dekorativ, ben\u00f6tigt sie einen Alternativtext. Der Alternativtext beschreibt die f\u00fcr den jeweiligen Kontext relevante Information und nicht einfach das Aussehen der Grafik. Bei rein dekorativen Grafiken kann auf einen Alternativtext verzichtet werden. Auch wenn die f\u00fcr das Verst\u00e4ndnis relevante Information bereits vollst\u00e4ndig im umgebenden Text vermittelt wird, ist kein zus\u00e4tzlicher Alternativtext notwendig.<\/p>\r\n

Bei komplexen Grafiken mit umfangreichen Inhalten ist ein kurzer Alternativtext in der Regel nicht ausreichend. Die relevanten Informationen m\u00fcssen zus\u00e4tzlich in einer l\u00e4ngeren Bildbeschreibung zug\u00e4nglich gemacht werden, sofern sie nicht bereits vollst\u00e4ndig im umgebenden Text enthalten sind.<\/p>\r\n

F\u00fcr die Bildbeschreibung wird unterhalb der Grafik ein weiterer Textblock eingef\u00fcgt. Dieser beginnt mit \u00abBeschreibung der Grafik.\u00bb<\/strong> in fetter Schrift und mit einem Punkt am Ende. Anschliessend werden die f\u00fcr das Verst\u00e4ndnis der Grafik relevanten Inhalte beschrieben.<\/p>\r\n

Weitere Informationen findest du im Kapitel Alternativtexte und textliche Beschreibungen bei Bildern und Grafiken.<\/a><\/p>\r\n\r\n

Beispiel<\/h2>\r\nDieses Beispiel zeigt, wie ein Tortendiagramm mit Verwendung der HfH-Farben barrierearm gestaltet werden kann:\r\n\r\nBild 1:<\/strong> Gesamt\u00fcbersicht der Ergebnisse. Alle Farben weisen einen ausreichenden Kontrast auf. Weisse Rahmen zwischen den Tortenst\u00fccken sorgen f\u00fcr zus\u00e4tzliche Abgrenzung. Die Legende neben der Grafik ordnet jedem farblich dargestellten Segment die entsprechende Kategorie und den zugeh\u00f6rigen Prozentwert zu.<\/span>\r\n\r\n\"\"\r\n\r\nBild 2-5:<\/strong> Beim \u00dcberfahren (Hover) eines Tortenst\u00fccks wird das entsprechende Segment hervorgehoben und die \u00fcbrigen Segmente ausgegraut. Das Ergebnis wird im Tooltip sowohl in Prozent als auch in Worten angezeigt. Die \u00fcbrigen Segmente werden dabei ausgegraut. Gleichzeitig wird der entsprechende Wert in der Legende fett hervorgehoben. So wird die Zuordnung zwischen den Diagrammsegmenten und den Werten in der Legende erleichtert.<\/span>\r\n\r\n\"\"\r\n\r\n\"\"\"\"\r\n\r\n\"\"\r\n\r\nAuch auf zuugs und ILIAS sind \u00e4hnliche Funktionen f\u00fcr die Gestaltung von barrierearmen Grafiken vorhanden. Wenn du Fragen hast bei der Erstellung deiner visuellen Infomaterialien oder nicht sicher bist, wie du am besten die Barrierefreiheit gew\u00e4hrleistest, melde dich gerne beim Digi!","rendered":"
\n
\n

Regel<\/p>\n<\/header>\n

Informationen aus Grafiken m\u00fcssen auch f\u00fcr Personen zug\u00e4nglich sein, die visuelle Inhalte nicht oder nur eingeschr\u00e4nkt wahrnehmen k\u00f6nnen. Relevante Informationen d\u00fcrfen deshalb nie ausschliesslich \u00fcber Farbe vermittelt werden, sondern sind zus\u00e4tzlich in Textform bereitzustellen.<\/div>\n<\/div>\n

Farbe<\/h2>\n

Informationen d\u00fcrfen nicht ausschliesslich \u00fcber Farben vermittelt werden.\u00a0Dies ist insbesondere bei Diagrammen und Grafiken wichtig, bei denen Daten anhand unterschiedlicher Farben visualisiert werden. W\u00e4hrend dies f\u00fcr Menschen ohne Beeintr\u00e4chtigung in der Regel eine sehr n\u00fctzliche Darstellungsform ist, kann eine Unterscheidung f\u00fcr Nutzende mit einer Sehbeeintr\u00e4chtigung wie z.B. Farbfehlsichtigkeit unm\u00f6glich sein. <\/span>Die Bedeutung der einzelnen Farben sollte deshalb zus\u00e4tzlich durch eine Beschriftung, Symbole oder unterschiedliche Muster der Segmente erkennbar sein. <\/span><\/p>\n

Kontraste<\/h2>\n

Grafische Elemente m\u00fcssen einen ausreichenden Kontrast zum Hintergrund aufweisen. Auch Text innerhalb einer Grafik muss einen ausreichenden Kontrast zum Hintergrund haben. Werden verschiedene grafische Elemente durch ihre Farbe voneinander unterschieden, muss auch zwischen diesen Elementen ein ausreichender Kontrast bestehen. Weitere Informationen findest du in den Kapiteln Kontraste<\/a> und Kontraste der HfH-Farben<\/a>.<\/p>\n

Text<\/h2>\n

Informationen, die f\u00fcr das Verst\u00e4ndnis einer Grafik relevant sind, m\u00fcssen auch in Textform zug\u00e4nglich sein. Dies gilt insbesondere f\u00fcr Diagramme, Infografiken und andere Grafiken, die inhaltliche Informationen vermitteln. Dabei kann die Information je nach Art und Komplexit\u00e4t der Grafik \u00fcber den umgebenden Text, eine Beschriftung oder Legende, einen Alternativtext oder eine l\u00e4ngere Bildbeschreibung bereitgestellt werden.<\/p>\n

Alternativtext und Bildbeschreibung<\/h2>\n

Ist eine Grafik nicht rein dekorativ, ben\u00f6tigt sie einen Alternativtext. Der Alternativtext beschreibt die f\u00fcr den jeweiligen Kontext relevante Information und nicht einfach das Aussehen der Grafik. Bei rein dekorativen Grafiken kann auf einen Alternativtext verzichtet werden. Auch wenn die f\u00fcr das Verst\u00e4ndnis relevante Information bereits vollst\u00e4ndig im umgebenden Text vermittelt wird, ist kein zus\u00e4tzlicher Alternativtext notwendig.<\/p>\n

Bei komplexen Grafiken mit umfangreichen Inhalten ist ein kurzer Alternativtext in der Regel nicht ausreichend. Die relevanten Informationen m\u00fcssen zus\u00e4tzlich in einer l\u00e4ngeren Bildbeschreibung zug\u00e4nglich gemacht werden, sofern sie nicht bereits vollst\u00e4ndig im umgebenden Text enthalten sind.<\/p>\n

F\u00fcr die Bildbeschreibung wird unterhalb der Grafik ein weiterer Textblock eingef\u00fcgt. Dieser beginnt mit \u00abBeschreibung der Grafik.\u00bb<\/strong> in fetter Schrift und mit einem Punkt am Ende. Anschliessend werden die f\u00fcr das Verst\u00e4ndnis der Grafik relevanten Inhalte beschrieben.<\/p>\n

Weitere Informationen findest du im Kapitel Alternativtexte und textliche Beschreibungen bei Bildern und Grafiken.<\/a><\/p>\n

Beispiel<\/h2>\n

Dieses Beispiel zeigt, wie ein Tortendiagramm mit Verwendung der HfH-Farben barrierearm gestaltet werden kann:<\/p>\n

Bild 1:<\/strong> Gesamt\u00fcbersicht der Ergebnisse. Alle Farben weisen einen ausreichenden Kontrast auf. Weisse Rahmen zwischen den Tortenst\u00fccken sorgen f\u00fcr zus\u00e4tzliche Abgrenzung. Die Legende neben der Grafik ordnet jedem farblich dargestellten Segment die entsprechende Kategorie und den zugeh\u00f6rigen Prozentwert zu.<\/span><\/p>\n

\"\"<\/p>\n

Bild 2-5:<\/strong> Beim \u00dcberfahren (Hover) eines Tortenst\u00fccks wird das entsprechende Segment hervorgehoben und die \u00fcbrigen Segmente ausgegraut. Das Ergebnis wird im Tooltip sowohl in Prozent als auch in Worten angezeigt. Die \u00fcbrigen Segmente werden dabei ausgegraut. Gleichzeitig wird der entsprechende Wert in der Legende fett hervorgehoben. So wird die Zuordnung zwischen den Diagrammsegmenten und den Werten in der Legende erleichtert.<\/span><\/p>\n

\"\"<\/p>\n

\"\"\"\"<\/p>\n

\"\"<\/p>\n

Auch auf zuugs und ILIAS sind \u00e4hnliche Funktionen f\u00fcr die Gestaltung von barrierearmen Grafiken vorhanden. Wenn du Fragen hast bei der Erstellung deiner visuellen Infomaterialien oder nicht sicher bist, wie du am besten die Barrierefreiheit gew\u00e4hrleistest, melde dich gerne beim Digi!<\/p>\n","protected":false},"excerpt":{"rendered":"

Regel Informationen aus Grafiken m\u00fcssen auch f\u00fcr Personen zug\u00e4nglich sein, die visuelle Inhalte nicht oder nur eingeschr\u00e4nkt wahrnehmen k\u00f6nnen. Relevante Informationen d\u00fcrfen deshalb nie ausschliesslich \u00fcber Farbe vermittelt werden, sondern sind zus\u00e4tzlich in Textform bereitzustellen. Farbe Informationen d\u00fcrfen nicht ausschliesslich \u00fcber Farben vermittelt werden.\u00a0Dies ist insbesondere bei Diagrammen und Grafiken wichtig, bei denen Daten anhand […]<\/p>\n","protected":false},"author":2315,"menu_order":7,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"categories":[],"chapter-type":[],"contributor":[],"license":[],"class_list":["post-537","chapter","type-chapter","status-publish","hentry"],"part":3,"_links":{"self":[{"href":"https:\/\/digital.hfh.ch\/eaccessibility\/wp-json\/pressbooks\/v2\/chapters\/537","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digital.hfh.ch\/eaccessibility\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/digital.hfh.ch\/eaccessibility\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/digital.hfh.ch\/eaccessibility\/wp-json\/wp\/v2\/users\/2315"}],"version-history":[{"count":14,"href":"https:\/\/digital.hfh.ch\/eaccessibility\/wp-json\/pressbooks\/v2\/chapters\/537\/revisions"}],"predecessor-version":[{"id":564,"href":"https:\/\/digital.hfh.ch\/eaccessibility\/wp-json\/pressbooks\/v2\/chapters\/537\/revisions\/564"}],"part":[{"href":"https:\/\/digital.hfh.ch\/eaccessibility\/wp-json\/pressbooks\/v2\/parts\/3"}],"metadata":[{"href":"https:\/\/digital.hfh.ch\/eaccessibility\/wp-json\/pressbooks\/v2\/chapters\/537\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/digital.hfh.ch\/eaccessibility\/wp-json\/wp\/v2\/media?parent=537"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/digital.hfh.ch\/eaccessibility\/wp-json\/wp\/v2\/categories?post=537"},{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/digital.hfh.ch\/eaccessibility\/wp-json\/pressbooks\/v2\/chapter-type?post=537"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/digital.hfh.ch\/eaccessibility\/wp-json\/wp\/v2\/contributor?post=537"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/digital.hfh.ch\/eaccessibility\/wp-json\/wp\/v2\/license?post=537"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}