Spielkarten aufdecken<\/title>\n<style>\n body {\n margin: 0;\n padding: 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n }\n .card-container {\n perspective: 1000px;\n }\n .card {\n width: 250px;\n height: 250px;\n background-color: black;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n transition: transform 0.3s;\n transform-style: preserve-3d;\n }\n .card.flipped {\n transform: rotateY(180deg);\n }\n .card img {\n position: absolute;\n width: 100%;\n height: 100%;\n backface-visibility: hidden;\n }\n .back {\n transform: rotateY(180deg);\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .back p {\n display: none;\n }\n .card.flipped .back p {\n display: block;\n }\n.text {\n color: #efebe9;\n text-align: center;\n}\n\n<\/style>\n\n<\/head>\n\n<body>\n\n <div class=\"card-container\">\n <div class=\"card\" onclick=\"flipCard(this)\">\n <img decoding=\"async\" class=\"back\" src=\"http:\/\/netzwerkaugen.ch\/wp-content\/uploads\/2023\/08\/frosch-1.jpg\" alt=\"Karte\">\n <div class=\"front\">\n <p class=\"text\"><b>Karte <br> aufdecken<\/b><\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n function flipCard(card) {\n card.classList.toggle('flipped');\n }\n <\/script>\n<\/body>\n<\/html>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-palette-color-8-background-color has-background is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--60)\">\n<h6 class=\"wp-block-heading\">Beispiel 2<\/h6>\n\n\n\n<p>Ein weisses Wasserflugzeug landet auf einem abgelegenen See in Finnland, ein leichtes Abendrot f\u00e4rbt die Szene. Im Hintergrund sind kleine, mit B\u00e4umen bewachsene Inseln zu sehen.<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Spielkarten aufdecken<\/title>\n<style>\n body {\n margin: 0;\n padding: 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n }\n .card-container {\n perspective: 1000px;\n }\n .card {\n width: 250px;\n height: 250px;\n background-color: black;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n transition: transform 0.3s;\n transform-style: preserve-3d;\n }\n .card.flipped {\n transform: rotateY(180deg);\n }\n .card img {\n position: absolute;\n width: 100%;\n height: 100%;\n backface-visibility: hidden;\n }\n .back {\n transform: rotateY(180deg);\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .back p {\n display: none;\n }\n .card.flipped .back p {\n display: block;\n }\n.text {\n color: #efebe9;\n text-align: center;\n}\n\n<\/style>\n\n<\/head>\n\n<body>\n\n <div class=\"card-container\">\n <div class=\"card\" onclick=\"flipCard(this)\">\n <img decoding=\"async\" class=\"back\" src=\"http:\/\/netzwerkaugen.ch\/wp-content\/uploads\/2023\/08\/flugzeug.jpg\" alt=\"Karte\">\n <div class=\"front\">\n <p class=\"text\"><b>Karte <br> aufdecken<\/b><\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n function flipCard(card) {\n card.classList.toggle('flipped');\n }\n <\/script>\n<\/body>\n<\/html>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-palette-color-8-background-color has-background is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--60)\">\n<h6 class=\"wp-block-heading\">Beispiel 3<\/h6>\n\n\n\n<p>Aufsicht auf einen Fadenz\u00e4hler, der auf den blau bis lila gef\u00e4rbten Messfeldern eines Proofs steht.<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Spielkarten aufdecken<\/title>\n<style>\n body {\n margin: 0;\n padding: 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n }\n .card-container {\n perspective: 1000px;\n }\n .card {\n width: 250px;\n height: 250px;\n background-color: black;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n transition: transform 0.3s;\n transform-style: preserve-3d;\n }\n .card.flipped {\n transform: rotateY(180deg);\n }\n .card img {\n position: absolute;\n width: 100%;\n height: 100%;\n backface-visibility: hidden;\n }\n .back {\n transform: rotateY(180deg);\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .back p {\n display: none;\n }\n .card.flipped .back p {\n display: block;\n }\n.text {\n color: #efebe9;\n text-align: center;\n}\n\n<\/style>\n\n<\/head>\n\n<body>\n\n <div class=\"card-container\">\n <div class=\"card\" onclick=\"flipCard(this)\">\n <img decoding=\"async\" class=\"back\" src=\"http:\/\/netzwerkaugen.ch\/wp-content\/uploads\/2023\/08\/fadenzaehler.jpg\" alt=\"Karte\">\n <div class=\"front\">\n <p class=\"text\"><b>Karte <br> aufdecken<\/b><\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n function flipCard(card) {\n card.classList.toggle('flipped');\n }\n <\/script>\n<\/body>\n<\/html>\n<\/div>\n\n\n\n<h6 class=\"wp-block-heading\">Tipp:<\/h6>\n\n\n\n<p>Falls du dein Wissen zum Thema noch mehr vertiefen m\u00f6chtest: Der Deutsche Blinden- und Sehbehindertenverband hat eine spannende Umfrage zu Alternativtexten auf den sozialen Medien durchgef\u00fchrt. <a rel=\"noreferrer noopener\" href=\"https:\/\/www.dbsv.org\/umfrageergebnisse-alternativtexte.html\" target=\"_blank\">Hier<\/a> findest du die Ergebnisse.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><mark style=\"background-color:#ffe539\" class=\"has-inline-color\">4. Emojis<\/mark><\/strong><\/h4>\n\n\n\n<p>Verzichte auf \u00fcberm\u00e4ssigen Einsatz von Emojis. Diese werden zwar vorgelesen, die Beschreibungen sind zum Teil jedoch relativ lang. Ein Beispiel: \u00abGesicht mit grossen bettelnden Augen\u00bb. Wenn dieses Emoji nun f\u00fcnfmal hintereinander verwendet wird, wird diese Beschreibung entsprechend oft vorgelesen.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><mark style=\"background-color:#ffe539\" class=\"has-inline-color\">5. Hashtags<\/mark><\/strong><\/h4>\n\n\n\n<p>Erstelle gut lesbare und einfache Hashtags. Vermeide die Verwendung von un\u00fcbersichtlichen oder abgek\u00fcrzten Hashtags und schreibe den ersten Buchstaben jedes neuen Wortes gross. Anstatt #accessibilityforall schreibst du also #accessibilityForAll. Diese Schreibweise wird \u00fcbrigens CamelCase genannt.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><mark style=\"background-color:#ffe539\" class=\"has-inline-color\">6. Kontraste<\/mark><\/strong><\/h4>\n\n\n\n<p>W\u00e4hle Farben f\u00fcr den Text und den Hintergrund mit ausreichendem Kontrast, um die Lesbarkeit zu verbessern. Achte darauf, dass der Text auch bei verschiedenen Lichtverh\u00e4ltnissen gut erkennbar ist. So unterst\u00fctzt du Nutzer:innen mit sowie ohne Sehbehinderung.<\/p>\n\n\n\n<p>Mit diesem Farbkontrast-Checker kannst du deine Farben auf ihren Farbkontrast pr\u00fcfen. Die Formel f\u00fcr die Berechnung entspringt den <a rel=\"noreferrer noopener\" href=\"https:\/\/www.google.com\/search?q=Web+Content+Accessibility+Guidelines&client=firefox-b-d&ei=U1XSZNOuLuCN9u8Phfm-KA&ved=0ahUKEwiTpPXzps2AAxXghv0HHYW8DwUQ4dUDCA4&uact=5&oq=Web+Content+Accessibility+Guidelines&gs_lp=Egxnd3Mtd2l6LXNlcnAiJFdlYiBDb250ZW50IEFjY2Vzc2liaWxpdHkgR3VpZGVsaW5lczIHEAAYigUYQzIFEAAYgAQyBRAAGIAEMgUQABiABDIFEAAYgAQyBRAAGIAEMgUQABiABEi_SlCWQFiWQHAGeAGQAQCYAVGgAVGqAQExuAEDyAEA-AEC-AEBwgIKEAAYRxjWBBiwA8ICChAAGIoFGLADGEPCAhYQLhiKBRjHARjRAxjIAxiwAxhD2AEB4gMEGAAgQYgGAZAGC7oGBAgBGAg&sclient=gws-wiz-serp\" target=\"_blank\">Web Content Accessibility Guidelines (WCAG)<\/a> \u2013 ein internationaler Standard zur barrierefreien Gestaltung von Internetangeboten.<\/p>\n\n\n\n<div style=\"height:18px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Farbkontrast-Checker<\/title>\n\n<style>\n\n#contrast-checker {\nbackground-color: white;\npadding: 40px;\n}\n\n#eingabefeld {\n max-width: 400px;\n display: flex;\n flex-direction: row;\n align-items: left;\n }\n label {\n display: inline-block;\n margin-right: 10px;\n }\n input[type=\"color\"] {\n margin-right: 10px;\n }\n\n button {\n margin-top: 7px;\n margin-bottom: 21px;\n }\n\n<\/style>\n<\/head>\n<body>\n <div id=\"contrast-checker\">\n <h5>🎨 Farbkontrast-Checker<\/h5> <br>\n <div id=\"eingabefeld\">\n <label for=\"background-color\">Hintergrundfarbe:<\/label>\n <input type=\"color\" id=\"background-color\" value=\"#ffffff\">\n<\/div><br>\n <div id=\"eingabefeld\">\n <label for=\"text-color\">Textfarbe:<\/label>\n <input type=\"color\" id=\"text-color\" value=\"#000000\"> <br>\n<\/div>\n <\/div>\n\n<div>\n<button type=\"submit\" id=\"check-contrast\">Kontrast pr\u00fcfen<\/button>\n <p id=\"contrast-result\"><\/p>\n<\/div>\n\n <script>\n const checkContrastButton = document.getElementById('check-contrast');\n const contrastResult = document.getElementById('contrast-result');\n\n checkContrastButton.addEventListener('click', () => {\n const backgroundColor = document.getElementById('background-color').value;\n const textColor = document.getElementById('text-color').value;\n const contrastRatio = getContrastRatio(backgroundColor, textColor);\n\n if (contrastRatio >= 4.5) {\n contrastResult.textContent = 'Super, der Farbkontrast entspricht den WCAG-Richtlinien!';\n contrastResult.style.color = 'rgb(41, 136, 60)';\n } else {\n contrastResult.textContent = 'Der Farbkontrast entspricht leider nicht den WCAG-Richtlinien.';\n contrastResult.style.color = 'black';\n }\n });\n\n \/\/ Funktion zur Berechnung des Farbkontrastes nach WCAG-Richtlinien\n function getContrastRatio(background, text) {\n const bgLuminance = getRelativeLuminance(background);\n const textLuminance = getRelativeLuminance(text);\n const brighter = Math.max(bgLuminance, textLuminance);\n const darker = Math.min(bgLuminance, textLuminance);\n return (brighter + 0.05) \/ (darker + 0.05);\n }\n\n \/\/ Funktion zur Berechnung der relativen Luminanz\n function getRelativeLuminance(color) {\n const rgb = parseColor(color);\n const gammaCorrectedRgb = rgb.map(value => {\n const correctedValue = value \/ 255;\n return correctedValue <= 0.03928\n ? correctedValue \/ 12.92\n : Math.pow((correctedValue + 0.055) \/ 1.055, 2.4);\n });\n return 0.2126 * gammaCorrectedRgb[0] + 0.7152 * gammaCorrectedRgb[1] + 0.0722 * gammaCorrectedRgb[2];\n }\n\n \/\/ Funktion zum Parsen der Farbe\n function parseColor(color) {\n const hex = color.substring(1);\n return [\n parseInt(hex.substring(0, 2), 16),\n parseInt(hex.substring(2, 4), 16),\n parseInt(hex.substring(4, 6), 16),\n ];\n }\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<div style=\"height:75px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><a href=\"https:\/\/netzwerkaugen.ch\/?page_id=199\">> Weiter zu den technischen Anforderungen<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Die Textgestaltung auf den sozialen Netzwerken spielt eine entscheidende Rolle, um Inhalte f\u00fcr Menschen mit Sehbehinderung zug\u00e4nglich zu machen. Das sorgf\u00e4ltige und barrierefreie Verfassen von Texten erm\u00f6glicht es Screenreadern, den Inhalt korrekt zu erfassen und auszugeben. Hier sind einige wichtige Punkte, auf die bei der Textgestaltung geachtet werden muss: 1. Rechtschreibung Achte auf fehlerfreie Grammatik und korrekte Gross-\/Kleinschreibung. Je nach Schreibweise werden die W\u00f6rter bei der Wiedergabe durch den Screenreader n\u00e4mlich anders betont. 2. Sprache Wo immer m\u00f6glich, solltest du in Hochdeutsch schreiben. Schweizerdeutsch k\u00f6nnen Screenreader nur schlecht und unverst\u00e4ndlich interpretieren. 3. Alternativtexte Alternativtexte sind ein sehr wichtiger Teilbereich bei\u2026<\/p>\n","protected":false},"author":1,"featured_media":565,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"blocksy_meta":"","_links":{"self":[{"href":"https:\/\/netzwerkaugen.ch\/index.php?rest_route=\/wp\/v2\/pages\/201"}],"collection":[{"href":"https:\/\/netzwerkaugen.ch\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/netzwerkaugen.ch\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/netzwerkaugen.ch\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/netzwerkaugen.ch\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=201"}],"version-history":[{"count":230,"href":"https:\/\/netzwerkaugen.ch\/index.php?rest_route=\/wp\/v2\/pages\/201\/revisions"}],"predecessor-version":[{"id":687,"href":"https:\/\/netzwerkaugen.ch\/index.php?rest_route=\/wp\/v2\/pages\/201\/revisions\/687"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/netzwerkaugen.ch\/index.php?rest_route=\/wp\/v2\/media\/565"}],"wp:attachment":[{"href":"https:\/\/netzwerkaugen.ch\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Lies die Alternativtexte durch und versuche dir das Beschriebene vorzustellen. Decke danach die Karten auf und schau, wie das Bild dazu aussieht. Wie nah war deine Vorstellung am echten Foto?<\/p>\n\n\n\n

Beispiel 1<\/h6>\n\n\n\n
Ein Frosch sitzt im Wald auf dem Boden.<\/p>\n\n\n\n\n\n\n\n\nSpielkarten aufdecken<\/title>\n<style>\n body {\n margin: 0;\n padding: 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n }\n .card-container {\n perspective: 1000px;\n }\n .card {\n width: 250px;\n height: 250px;\n background-color: black;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n transition: transform 0.3s;\n transform-style: preserve-3d;\n }\n .card.flipped {\n transform: rotateY(180deg);\n }\n .card img {\n position: absolute;\n width: 100%;\n height: 100%;\n backface-visibility: hidden;\n }\n .back {\n transform: rotateY(180deg);\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .back p {\n display: none;\n }\n .card.flipped .back p {\n display: block;\n }\n.text {\n color: #efebe9;\n text-align: center;\n}\n\n<\/style>\n\n<\/head>\n\n<body>\n\n <div class=\"card-container\">\n <div class=\"card\" onclick=\"flipCard(this)\">\n <img decoding=\"async\" class=\"back\" src=\"http:\/\/netzwerkaugen.ch\/wp-content\/uploads\/2023\/08\/frosch-1.jpg\" alt=\"Karte\">\n <div class=\"front\">\n <p class=\"text\"><b>Karte <br> aufdecken<\/b><\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n function flipCard(card) {\n card.classList.toggle('flipped');\n }\n <\/script>\n<\/body>\n<\/html>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-palette-color-8-background-color has-background is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--60)\">\n<h6 class=\"wp-block-heading\">Beispiel 2<\/h6>\n\n\n\n<p>Ein weisses Wasserflugzeug landet auf einem abgelegenen See in Finnland, ein leichtes Abendrot f\u00e4rbt die Szene. Im Hintergrund sind kleine, mit B\u00e4umen bewachsene Inseln zu sehen.<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Spielkarten aufdecken<\/title>\n<style>\n body {\n margin: 0;\n padding: 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n }\n .card-container {\n perspective: 1000px;\n }\n .card {\n width: 250px;\n height: 250px;\n background-color: black;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n transition: transform 0.3s;\n transform-style: preserve-3d;\n }\n .card.flipped {\n transform: rotateY(180deg);\n }\n .card img {\n position: absolute;\n width: 100%;\n height: 100%;\n backface-visibility: hidden;\n }\n .back {\n transform: rotateY(180deg);\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .back p {\n display: none;\n }\n .card.flipped .back p {\n display: block;\n }\n.text {\n color: #efebe9;\n text-align: center;\n}\n\n<\/style>\n\n<\/head>\n\n<body>\n\n <div class=\"card-container\">\n <div class=\"card\" onclick=\"flipCard(this)\">\n <img decoding=\"async\" class=\"back\" src=\"http:\/\/netzwerkaugen.ch\/wp-content\/uploads\/2023\/08\/flugzeug.jpg\" alt=\"Karte\">\n <div class=\"front\">\n <p class=\"text\"><b>Karte <br> aufdecken<\/b><\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n function flipCard(card) {\n card.classList.toggle('flipped');\n }\n <\/script>\n<\/body>\n<\/html>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-palette-color-8-background-color has-background is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--60)\">\n<h6 class=\"wp-block-heading\">Beispiel 3<\/h6>\n\n\n\n<p>Aufsicht auf einen Fadenz\u00e4hler, der auf den blau bis lila gef\u00e4rbten Messfeldern eines Proofs steht.<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Spielkarten aufdecken<\/title>\n<style>\n body {\n margin: 0;\n padding: 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n }\n .card-container {\n perspective: 1000px;\n }\n .card {\n width: 250px;\n height: 250px;\n background-color: black;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n transition: transform 0.3s;\n transform-style: preserve-3d;\n }\n .card.flipped {\n transform: rotateY(180deg);\n }\n .card img {\n position: absolute;\n width: 100%;\n height: 100%;\n backface-visibility: hidden;\n }\n .back {\n transform: rotateY(180deg);\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .back p {\n display: none;\n }\n .card.flipped .back p {\n display: block;\n }\n.text {\n color: #efebe9;\n text-align: center;\n}\n\n<\/style>\n\n<\/head>\n\n<body>\n\n <div class=\"card-container\">\n <div class=\"card\" onclick=\"flipCard(this)\">\n <img decoding=\"async\" class=\"back\" src=\"http:\/\/netzwerkaugen.ch\/wp-content\/uploads\/2023\/08\/fadenzaehler.jpg\" alt=\"Karte\">\n <div class=\"front\">\n <p class=\"text\"><b>Karte <br> aufdecken<\/b><\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n function flipCard(card) {\n card.classList.toggle('flipped');\n }\n <\/script>\n<\/body>\n<\/html>\n<\/div>\n\n\n\n<h6 class=\"wp-block-heading\">Tipp:<\/h6>\n\n\n\n<p>Falls du dein Wissen zum Thema noch mehr vertiefen m\u00f6chtest: Der Deutsche Blinden- und Sehbehindertenverband hat eine spannende Umfrage zu Alternativtexten auf den sozialen Medien durchgef\u00fchrt. <a rel=\"noreferrer noopener\" href=\"https:\/\/www.dbsv.org\/umfrageergebnisse-alternativtexte.html\" target=\"_blank\">Hier<\/a> findest du die Ergebnisse.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><mark style=\"background-color:#ffe539\" class=\"has-inline-color\">4. Emojis<\/mark><\/strong><\/h4>\n\n\n\n<p>Verzichte auf \u00fcberm\u00e4ssigen Einsatz von Emojis. Diese werden zwar vorgelesen, die Beschreibungen sind zum Teil jedoch relativ lang. Ein Beispiel: \u00abGesicht mit grossen bettelnden Augen\u00bb. Wenn dieses Emoji nun f\u00fcnfmal hintereinander verwendet wird, wird diese Beschreibung entsprechend oft vorgelesen.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><mark style=\"background-color:#ffe539\" class=\"has-inline-color\">5. Hashtags<\/mark><\/strong><\/h4>\n\n\n\n<p>Erstelle gut lesbare und einfache Hashtags. Vermeide die Verwendung von un\u00fcbersichtlichen oder abgek\u00fcrzten Hashtags und schreibe den ersten Buchstaben jedes neuen Wortes gross. Anstatt #accessibilityforall schreibst du also #accessibilityForAll. Diese Schreibweise wird \u00fcbrigens CamelCase genannt.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><mark style=\"background-color:#ffe539\" class=\"has-inline-color\">6. Kontraste<\/mark><\/strong><\/h4>\n\n\n\n<p>W\u00e4hle Farben f\u00fcr den Text und den Hintergrund mit ausreichendem Kontrast, um die Lesbarkeit zu verbessern. Achte darauf, dass der Text auch bei verschiedenen Lichtverh\u00e4ltnissen gut erkennbar ist. So unterst\u00fctzt du Nutzer:innen mit sowie ohne Sehbehinderung.<\/p>\n\n\n\n<p>Mit diesem Farbkontrast-Checker kannst du deine Farben auf ihren Farbkontrast pr\u00fcfen. Die Formel f\u00fcr die Berechnung entspringt den <a rel=\"noreferrer noopener\" href=\"https:\/\/www.google.com\/search?q=Web+Content+Accessibility+Guidelines&client=firefox-b-d&ei=U1XSZNOuLuCN9u8Phfm-KA&ved=0ahUKEwiTpPXzps2AAxXghv0HHYW8DwUQ4dUDCA4&uact=5&oq=Web+Content+Accessibility+Guidelines&gs_lp=Egxnd3Mtd2l6LXNlcnAiJFdlYiBDb250ZW50IEFjY2Vzc2liaWxpdHkgR3VpZGVsaW5lczIHEAAYigUYQzIFEAAYgAQyBRAAGIAEMgUQABiABDIFEAAYgAQyBRAAGIAEMgUQABiABEi_SlCWQFiWQHAGeAGQAQCYAVGgAVGqAQExuAEDyAEA-AEC-AEBwgIKEAAYRxjWBBiwA8ICChAAGIoFGLADGEPCAhYQLhiKBRjHARjRAxjIAxiwAxhD2AEB4gMEGAAgQYgGAZAGC7oGBAgBGAg&sclient=gws-wiz-serp\" target=\"_blank\">Web Content Accessibility Guidelines (WCAG)<\/a> \u2013 ein internationaler Standard zur barrierefreien Gestaltung von Internetangeboten.<\/p>\n\n\n\n<div style=\"height:18px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Farbkontrast-Checker<\/title>\n\n<style>\n\n#contrast-checker {\nbackground-color: white;\npadding: 40px;\n}\n\n#eingabefeld {\n max-width: 400px;\n display: flex;\n flex-direction: row;\n align-items: left;\n }\n label {\n display: inline-block;\n margin-right: 10px;\n }\n input[type=\"color\"] {\n margin-right: 10px;\n }\n\n button {\n margin-top: 7px;\n margin-bottom: 21px;\n }\n\n<\/style>\n<\/head>\n<body>\n <div id=\"contrast-checker\">\n <h5>🎨 Farbkontrast-Checker<\/h5> <br>\n <div id=\"eingabefeld\">\n <label for=\"background-color\">Hintergrundfarbe:<\/label>\n <input type=\"color\" id=\"background-color\" value=\"#ffffff\">\n<\/div><br>\n <div id=\"eingabefeld\">\n <label for=\"text-color\">Textfarbe:<\/label>\n <input type=\"color\" id=\"text-color\" value=\"#000000\"> <br>\n<\/div>\n <\/div>\n\n<div>\n<button type=\"submit\" id=\"check-contrast\">Kontrast pr\u00fcfen<\/button>\n <p id=\"contrast-result\"><\/p>\n<\/div>\n\n <script>\n const checkContrastButton = document.getElementById('check-contrast');\n const contrastResult = document.getElementById('contrast-result');\n\n checkContrastButton.addEventListener('click', () => {\n const backgroundColor = document.getElementById('background-color').value;\n const textColor = document.getElementById('text-color').value;\n const contrastRatio = getContrastRatio(backgroundColor, textColor);\n\n if (contrastRatio >= 4.5) {\n contrastResult.textContent = 'Super, der Farbkontrast entspricht den WCAG-Richtlinien!';\n contrastResult.style.color = 'rgb(41, 136, 60)';\n } else {\n contrastResult.textContent = 'Der Farbkontrast entspricht leider nicht den WCAG-Richtlinien.';\n contrastResult.style.color = 'black';\n }\n });\n\n \/\/ Funktion zur Berechnung des Farbkontrastes nach WCAG-Richtlinien\n function getContrastRatio(background, text) {\n const bgLuminance = getRelativeLuminance(background);\n const textLuminance = getRelativeLuminance(text);\n const brighter = Math.max(bgLuminance, textLuminance);\n const darker = Math.min(bgLuminance, textLuminance);\n return (brighter + 0.05) \/ (darker + 0.05);\n }\n\n \/\/ Funktion zur Berechnung der relativen Luminanz\n function getRelativeLuminance(color) {\n const rgb = parseColor(color);\n const gammaCorrectedRgb = rgb.map(value => {\n const correctedValue = value \/ 255;\n return correctedValue <= 0.03928\n ? correctedValue \/ 12.92\n : Math.pow((correctedValue + 0.055) \/ 1.055, 2.4);\n });\n return 0.2126 * gammaCorrectedRgb[0] + 0.7152 * gammaCorrectedRgb[1] + 0.0722 * gammaCorrectedRgb[2];\n }\n\n \/\/ Funktion zum Parsen der Farbe\n function parseColor(color) {\n const hex = color.substring(1);\n return [\n parseInt(hex.substring(0, 2), 16),\n parseInt(hex.substring(2, 4), 16),\n parseInt(hex.substring(4, 6), 16),\n ];\n }\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<div style=\"height:75px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><a href=\"https:\/\/netzwerkaugen.ch\/?page_id=199\">> Weiter zu den technischen Anforderungen<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Die Textgestaltung auf den sozialen Netzwerken spielt eine entscheidende Rolle, um Inhalte f\u00fcr Menschen mit Sehbehinderung zug\u00e4nglich zu machen. Das sorgf\u00e4ltige und barrierefreie Verfassen von Texten erm\u00f6glicht es Screenreadern, den Inhalt korrekt zu erfassen und auszugeben. Hier sind einige wichtige Punkte, auf die bei der Textgestaltung geachtet werden muss: 1. Rechtschreibung Achte auf fehlerfreie Grammatik und korrekte Gross-\/Kleinschreibung. Je nach Schreibweise werden die W\u00f6rter bei der Wiedergabe durch den Screenreader n\u00e4mlich anders betont. 2. Sprache Wo immer m\u00f6glich, solltest du in Hochdeutsch schreiben. Schweizerdeutsch k\u00f6nnen Screenreader nur schlecht und unverst\u00e4ndlich interpretieren. 3. Alternativtexte Alternativtexte sind ein sehr wichtiger Teilbereich bei\u2026<\/p>\n","protected":false},"author":1,"featured_media":565,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"blocksy_meta":"","_links":{"self":[{"href":"https:\/\/netzwerkaugen.ch\/index.php?rest_route=\/wp\/v2\/pages\/201"}],"collection":[{"href":"https:\/\/netzwerkaugen.ch\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/netzwerkaugen.ch\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/netzwerkaugen.ch\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/netzwerkaugen.ch\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=201"}],"version-history":[{"count":230,"href":"https:\/\/netzwerkaugen.ch\/index.php?rest_route=\/wp\/v2\/pages\/201\/revisions"}],"predecessor-version":[{"id":687,"href":"https:\/\/netzwerkaugen.ch\/index.php?rest_route=\/wp\/v2\/pages\/201\/revisions\/687"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/netzwerkaugen.ch\/index.php?rest_route=\/wp\/v2\/media\/565"}],"wp:attachment":[{"href":"https:\/\/netzwerkaugen.ch\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}