CINXE.COM

<!doctype html><html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://developer.mozilla.org/favicon-48x48.bc390275e955dacb2e65.png"/><link rel="apple-touch-icon" href="https://developer.mozilla.org/apple-touch-icon.528534bba673c38049c2.png"/><meta name="theme-color" content="#ffffff"/><link rel="manifest" href="https://developer.mozilla.org/manifest.f42880861b394dd4dc9b.json"/><link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="MDN Web Docs"/><title>Umgang mit häufigen Problemen der Barrierefreiheit - Webentwicklung lernen | MDN</title><link rel="alternate" title="Handling common accessibility problems" href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility" hrefLang="en"/><link rel="alternate" title="Gérer les problèmes courants d'accessibilité" href="https://developer.mozilla.org/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility" hrefLang="fr"/><link rel="alternate" title="よくあるアクセシビリティの問題を扱う" href="https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility" hrefLang="ja"/><link rel="alternate" title="解决常见的无障碍问题" href="https://developer.mozilla.org/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility" hrefLang="zh"/><link rel="alternate" title="Umgang mit häufigen Problemen der Barrierefreiheit" href="https://developer.mozilla.org/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility" hrefLang="de"/><link rel="preload" as="font" type="font/woff2" href="/static/media/Inter.var.c2fe3cb2b7c746f7966a.woff2" crossorigin=""/><link rel="alternate" type="application/rss+xml" title="MDN Blog RSS Feed" href="https://developer.mozilla.org/en-US/blog/rss.xml" hrefLang="en"/><meta name="robots" content="noindex, follow"/><meta name="description" content="Als Nächstes widmen wir uns der Barrierefreiheit, bieten Informationen zu häufigen Problemen, wie man einfache Tests durchführt, und wie man Prüf- und Automatisierungstools zur Erkennung von Barrierefreiheitsproblemen nutzt."/><meta property="og:url" content="https://developer.mozilla.org/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility"/><meta property="og:title" content="Umgang mit häufigen Problemen der Barrierefreiheit - Webentwicklung lernen | MDN"/><meta property="og:type" content="website"/><meta property="og:locale" content="de"/><meta property="og:description" content="Als Nächstes widmen wir uns der Barrierefreiheit, bieten Informationen zu häufigen Problemen, wie man einfache Tests durchführt, und wie man Prüf- und Automatisierungstools zur Erkennung von Barrierefreiheitsproblemen nutzt."/><meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.d893525a4fb5fb1f67a2.png"/><meta property="og:image:type" content="image/png"/><meta property="og:image:height" content="1080"/><meta property="og:image:width" content="1920"/><meta property="og:image:alt" content="The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background."/><meta property="og:site_name" content="MDN Web Docs"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="MozDevNet"/><link rel="canonical" href="https://developer.mozilla.org/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility"/><style media="print">.article-actions-container,.document-toc-container,.language-menu,.main-menu-toggle,.on-github,.page-footer,.place,.sidebar,.top-banner,.top-navigation-main,ul.prev-next{display:none!important}.main-page-content,.main-page-content pre{padding:2px}.main-page-content pre{border-left-width:2px}</style><script src="/static/js/gtag.js" defer=""></script><script defer="" src="/static/js/main.5e889624.js"></script><link href="/static/css/main.26c64ea7.css" rel="stylesheet"/></head><body><script>if(document.body.addEventListener("load",(t=>{t.target.classList.contains("interactive")&&t.target.setAttribute("data-readystate","complete")}),{capture:!0}),window&&document.documentElement){const t={light:"#ffffff",dark:"#1b1b1b"};try{const e=window.localStorage.getItem("theme");e&&(document.documentElement.className=e,document.documentElement.style.backgroundColor=t[e]);const o=window.localStorage.getItem("nop");o&&(document.documentElement.dataset.nop=o)}catch(t){console.warn("Unable to read theme from localStorage",t)}}</script><div id="root"><ul id="nav-access" class="a11y-nav"><li><a id="skip-main" href="#content">Skip to main content</a></li><li><a id="skip-search" href="#top-nav-search-input">Skip to search</a></li><li><a id="skip-select-language" href="#languages-switcher-button">Skip to select language</a></li></ul><div class="page-wrapper category-learn document-page"><div class="top-banner loading"><section class="place top container"></section></div><div class="sticky-header-container"><header class="top-navigation "><div class="container "><div class="top-navigation-wrap"><a href="/de/" class="logo" aria-label="MDN homepage"><svg id="mdn-docs-logo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 694.9 104.4" style="enable-background:new 0 0 694.9 104.4" xml:space="preserve" role="img"><title>MDN Web Docs</title><path d="M40.3 0 11.7 92.1H0L28.5 0h11.8zm10.4 0v92.1H40.3V0h10.4zM91 0 62.5 92.1H50.8L79.3 0H91zm10.4 0v92.1H91V0h10.4z" class="logo-m"></path><path d="M627.9 95.6h67v8.8h-67v-8.8z" class="logo-_"></path><path d="M367 42h-4l-10.7 30.8h-5.5l-10.8-26h-.4l-10.5 26h-5.2L308.7 42h-3.8v-5.6H323V42h-6.5l6.8 20.4h.4l10.3-26h4.7l11.2 26h.5l5.7-20.3h-6.2v-5.6H367V42zm34.9 20c-.4 3.2-2 5.9-4.7 8.2-2.8 2.3-6.5 3.4-11.3 3.4-5.4 0-9.7-1.6-13.1-4.7-3.3-3.2-5-7.7-5-13.7 0-5.7 1.6-10.3 4.7-14s7.4-5.5 12.9-5.5c5.1 0 9.1 1.6 11.9 4.7s4.3 6.9 4.3 11.3c0 1.5-.2 3-.5 4.7h-25.6c.3 7.7 4 11.6 10.9 11.6 2.9 0 5.1-.7 6.5-2 1.5-1.4 2.5-3 3-4.9l6 .9zM394 51.3c.2-2.4-.4-4.7-1.8-6.9s-3.8-3.3-7-3.3c-3.1 0-5.3 1-6.9 3-1.5 2-2.5 4.4-2.8 7.2H394zm51 2.4c0 5-1.3 9.5-4 13.7s-6.9 6.2-12.7 6.2c-6 0-10.3-2.2-12.7-6.7-.1.4-.2 1.4-.4 2.9s-.3 2.5-.4 2.9h-7.3c.3-1.7.6-3.5.8-5.3.3-1.8.4-3.7.4-5.5V22.3h-6v-5.6H416v27c1.1-2.2 2.7-4.1 4.7-5.7 2-1.6 4.8-2.4 8.4-2.4 4.6 0 8.4 1.6 11.4 4.7 3 3.2 4.5 7.6 4.5 13.4zm-7.7.6c0-4.2-1-7.4-3-9.5-2-2.2-4.4-3.3-7.4-3.3-3.4 0-6 1.2-8 3.7-1.9 2.4-2.9 5-3 7.7V57c0 3 1 5.6 3 7.7s4.5 3.1 7.6 3.1c3.6 0 6.3-1.3 8.1-3.9 1.8-2.7 2.7-5.9 2.7-9.6zm69.2 18.5h-13.2v-7.2c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2 5.7 0 9.8 2.2 12.3 6.5V22.3h-8.6v-5.6h15.8v50.6h6v5.5zM493.2 56v-4.4c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm53.1-1.4c0 5.6-1.8 10.2-5.3 13.7s-8.2 5.3-13.9 5.3-10.1-1.7-13.4-5.1c-3.3-3.4-5-7.9-5-13.5 0-5.3 1.6-9.9 4.7-13.7 3.2-3.8 7.9-5.7 14.2-5.7s11 1.9 14.1 5.7c3 3.7 4.6 8.1 4.6 13.3zm-7.7-.2c0-4-1-7.2-3-9.5s-4.8-3.5-8.2-3.5c-3.6 0-6.4 1.2-8.3 3.7s-2.9 5.6-2.9 9.5c0 3.7.9 6.8 2.8 9.4 1.9 2.6 4.6 3.9 8.3 3.9 3.6 0 6.4-1.3 8.4-3.8 1.9-2.6 2.9-5.8 2.9-9.7zm45 5.8c-.4 3.2-1.9 6.3-4.4 9.1-2.5 2.9-6.4 4.3-11.8 4.3-5.2 0-9.4-1.6-12.6-4.8-3.2-3.2-4.8-7.7-4.8-13.7 0-5.5 1.6-10.1 4.7-13.9 3.2-3.8 7.6-5.7 13.2-5.7 2.3 0 4.6.3 6.7.8 2.2.5 4.2 1.5 6.2 2.9l1.5 9.5-5.9.7-1.3-6.1c-2.1-1.2-4.5-1.8-7.2-1.8-3.5 0-6.1 1.2-7.7 3.7-1.7 2.5-2.5 5.7-2.5 9.6 0 4.1.9 7.3 2.7 9.5 1.8 2.3 4.4 3.4 7.8 3.4 5.2 0 8.2-2.9 9.2-8.8l6.2 1.3zm34.7 1.9c0 3.6-1.5 6.5-4.6 8.5s-7 3-11.7 3c-5.7 0-10.6-1.2-14.6-3.6l1.2-8.8 5.7.6-.2 4.7c1.1.5 2.3.9 3.6 1.1s2.6.3 3.9.3c2.4 0 4.5-.4 6.5-1.3 1.9-.9 2.9-2.2 2.9-4.1 0-1.8-.8-3.1-2.3-3.8s-3.5-1.3-5.8-1.7-4.6-.9-6.9-1.4c-2.3-.6-4.2-1.6-5.7-2.9-1.6-1.4-2.3-3.5-2.3-6.3 0-4.1 1.5-6.9 4.6-8.5s6.4-2.4 9.9-2.4c2.6 0 5 .3 7.2.9 2.2.6 4.3 1.4 6.1 2.4l.8 8.8-5.8.7-.8-5.7c-2.3-1-4.7-1.6-7.2-1.6-2.1 0-3.7.4-5.1 1.1-1.3.8-2 2-2 3.8 0 1.7.8 2.9 2.3 3.6 1.5.7 3.4 1.2 5.7 1.6 2.2.4 4.5.8 6.7 1.4 2.2.6 4.1 1.6 5.7 3 1.4 1.6 2.2 3.7 2.2 6.6zM197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z" class="logo-text"></path></svg></a><button title="Open main menu" type="button" class="button action has-icon main-menu-toggle" aria-haspopup="menu" aria-label="Open main menu" aria-expanded="false"><span class="button-wrap"><span class="icon icon-menu "></span><span class="visually-hidden">Open main menu</span></span></button></div><div class="top-navigation-main"><nav class="main-nav" aria-label="Main menu"><ul class="main-menu nojs"><li class="top-level-entry-container "><button type="button" id="references-button" class="top-level-entry menu-toggle" aria-controls="references-menu" aria-expanded="false">References</button><a href="/de/docs/Web" class="top-level-entry">References</a><ul id="references-menu" class="submenu references hidden inline-submenu-lg" aria-labelledby="references-button"><li class="apis-link-container mobile-only "><a href="/de/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li><li class="html-link-container "><a href="/de/docs/Web/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Structure of content on the web</p></div></a></li><li class="css-link-container "><a href="/de/docs/Web/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Code used to describe document style</p></div></a></li><li class="javascript-link-container "><a href="/de/docs/Web/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">General-purpose scripting language</p></div></a></li><li class="http-link-container "><a href="/de/docs/Web/HTTP" class="submenu-item "><div class="submenu-icon http"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP</div><p class="submenu-item-description">Protocol for transmitting web resources</p></div></a></li><li class="apis-link-container "><a href="/de/docs/Web/API" class="submenu-item "><div class="submenu-icon apis"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web APIs</div><p class="submenu-item-description">Interfaces for building web applications</p></div></a></li><li class="apis-link-container "><a href="/de/docs/Mozilla/Add-ons/WebExtensions" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Extensions</div><p class="submenu-item-description">Developing extensions for web browsers</p></div></a></li><li class="apis-link-container desktop-only "><a href="/de/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li></ul></li><li class="top-level-entry-container active"><button type="button" id="guides-button" class="top-level-entry menu-toggle" aria-controls="guides-menu" aria-expanded="false">Guides</button><a href="/de/docs/Learn" class="top-level-entry">Guides</a><ul id="guides-menu" class="submenu guides hidden inline-submenu-lg" aria-labelledby="guides-button"><li class="apis-link-container mobile-only "><a href="/de/docs/Learn" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="apis-link-container desktop-only "><a href="/de/docs/Learn" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="html-link-container "><a href="/de/docs/Learn/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Learn to structure web content with HTML</p></div></a></li><li class="css-link-container "><a href="/de/docs/Learn/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Learn to style content using CSS</p></div></a></li><li class="javascript-link-container "><a href="/de/docs/Learn/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">Learn to run scripts in the browser</p></div></a></li><li class=" "><a href="/de/docs/Web/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Learn to make the web accessible to all</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="mdn-plus-button" class="top-level-entry menu-toggle" aria-controls="mdn-plus-menu" aria-expanded="false">Plus</button><a href="/de/plus" class="top-level-entry">Plus</a><ul id="mdn-plus-menu" class="submenu mdn-plus hidden inline-submenu-lg" aria-labelledby="mdn-plus-button"><li class=" "><a href="/de/plus" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview</div><p class="submenu-item-description">A customized MDN experience</p></div></a></li><li class=" "><a href="/de/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li><li class=" "><a href="/de/plus/updates" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Updates</div><p class="submenu-item-description">All browser compatibility updates at a glance</p></div></a></li><li class=" "><a href="/en-US/plus/docs/features/overview" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Documentation</div><p class="submenu-item-description">Learn how to use MDN Plus</p></div></a></li><li class=" "><a href="/en-US/plus/docs/faq" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">FAQ</div><p class="submenu-item-description">Frequently asked questions about MDN Plus</p></div></a></li></ul></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/curriculum/">Curriculum <sup class="new">New</sup></a></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/blog/">Blog</a></li><li class="top-level-entry-container "><button type="button" id="tools-button" class="top-level-entry menu-toggle" aria-controls="tools-menu" aria-expanded="false">Tools</button><ul id="tools-menu" class="submenu tools hidden inline-submenu-lg" aria-labelledby="tools-button"><li class=" "><a href="/de/play" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Playground</div><p class="submenu-item-description">Write, test and share your code</p></div></a></li><li class=" "><a href="/en-US/observatory" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP Observatory</div><p class="submenu-item-description">Scan a website for free</p></div></a></li><li class=" "><a href="/en-US/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li></ul></li></ul></nav><div class="header-search"><form action="/de/search" class="search-form search-widget" id="top-nav-search-form" role="search"><label id="top-nav-search-label" for="top-nav-search-input" class="visually-hidden">Search MDN</label><input aria-activedescendant="" aria-autocomplete="list" aria-controls="top-nav-search-menu" aria-expanded="false" aria-labelledby="top-nav-search-label" autoComplete="off" id="top-nav-search-input" role="combobox" type="search" class="search-input-field" name="q" placeholder=" " required="" value=""/><button type="button" class="button action has-icon clear-search-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear search input</span></span></button><button type="submit" class="button action has-icon search-button"><span class="button-wrap"><span class="icon icon-search "></span><span class="visually-hidden">Search</span></span></button><div id="top-nav-search-menu" role="listbox" aria-labelledby="top-nav-search-label"></div></form></div><div class="theme-switcher-menu"><button type="button" class="button action has-icon theme-switcher-menu small" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-theme-os-default "></span>Theme</span></button></div><ul class="auth-container"><li><a href="/users/fxa/login/authenticate/?next=%2Fde%2Fdocs%2FLearn%2FTools_and_testing%2FCross_browser_testing%2FAccessibility" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fde%2Fdocs%2FLearn%2FTools_and_testing%2FCross_browser_testing%2FAccessibility" target="_self" rel="nofollow" class="button primary mdn-plus-subscribe-link"><span class="button-wrap">Sign up for free</span></a></li></ul></div></div></header><div class="article-actions-container"><div class="container"><button type="button" class="button action has-icon sidebar-button" aria-label="Expand sidebar" aria-expanded="false" aria-controls="sidebar-quicklinks"><span class="button-wrap"><span class="icon icon-sidebar "></span></span></button><nav class="breadcrumbs-container" aria-label="Breadcrumb"><ol typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumbs"><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Webentwicklung lernen</span></a><meta property="position" content="1"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn/Tools_and_testing" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Tools und Tests</span></a><meta property="position" content="2"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Cross-Browser-Testing</span></a><meta property="position" content="3"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name">Umgang mit häufigen Problemen der Barrierefreiheit</span></a><meta property="position" content="4"/></li></ol></nav><div class="article-actions"><button type="button" class="button action has-icon article-actions-toggle" aria-label="Article actions"><span class="button-wrap"><span class="icon icon-ellipses "></span><span class="article-actions-dialog-heading">Article Actions</span></span></button><ul class="article-actions-entries"><li class="article-actions-entry"><div class="languages-switcher-menu open-on-focus-within"><button id="languages-switcher-button" type="button" class="button action small has-icon languages-switcher-menu" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-language "></span>Deutsch<span title="Diese Übersetzung ist Teil eines Experiments."><span class="icon icon-experimental "></span></span></span></button><div class="hidden"><ul class="submenu language-menu " aria-labelledby="language-menu-button"><li class=" "><form class="submenu-item locale-redirect-setting"><div class="group"><label class="switch"><input type="checkbox" name="locale-redirect"/><span class="slider"></span><span class="label">Remember language</span></label><a href="https://github.com/orgs/mdn/discussions/739" rel="external noopener noreferrer" target="_blank" title="Enable this setting to automatically switch to this language when it's available. (Click to learn more.)"><span class="icon icon-question-mark "></span></a></div></form></li><li class=" "><a data-locale="en-US" href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility" class="button submenu-item"><span>English (US)</span></a></li><li class=" "><a data-locale="fr" href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility" class="button submenu-item"><span>Français</span></a></li><li class=" "><a data-locale="ja" href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility" class="button submenu-item"><span>日本語</span></a></li><li class=" "><a data-locale="zh-CN" href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility" class="button submenu-item"><span>中文 (简体)</span></a></li></ul></div></div></li></ul></div></div></div></div><div class="container"><div class="notecard experimental localized-content-note"><p><a href="https://github.com/orgs/mdn/discussions/741" class="external"><strong>Experiment</strong>: Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.</a></p></div></div><div class="main-wrapper"><div class="sidebar-container"><aside id="sidebar-quicklinks" class="sidebar" data-macro="LearnSidebar"><button type="button" class="button action backdrop" aria-label="Collapse sidebar"><span class="button-wrap"></span></button><nav aria-label="Related Topics" class="sidebar-inner"><header class="sidebar-actions"><section class="sidebar-filter-container"><div class="sidebar-filter "><label id="sidebar-filter-label" class="sidebar-filter-label" for="sidebar-filter-input"><span class="icon icon-filter"></span><span class="visually-hidden">Filter sidebar</span></label><input id="sidebar-filter-input" autoComplete="off" class="sidebar-filter-input-field false" type="text" placeholder="Filter" value=""/><button type="button" class="button action has-icon clear-sidebar-filter-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear filter input</span></span></button></div></section></header><div class="sidebar-inner-nav"><div class="in-nav-toc"><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">In diesem Artikel</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#was_ist_barrierefreiheit">Was ist Barrierefreiheit?</a></li><li class="document-toc-item "><a class="document-toc-link" href="#häufige_barrierefreiheitsprobleme">Häufige Barrierefreiheitsprobleme</a></li><li class="document-toc-item "><a class="document-toc-link" href="#tools_für_die_barrierefreiheit">Tools für die Barrierefreiheit</a></li><li class="document-toc-item "><a class="document-toc-link" href="#checkliste_für_barrierefreiheitstests">Checkliste für Barrierefreiheitstests</a></li><li class="document-toc-item "><a class="document-toc-link" href="#hilfe_finden">Hilfe finden</a></li><li class="document-toc-item "><a class="document-toc-link" href="#zusammenfassung">Zusammenfassung</a></li></ul></section></div></div><div class="sidebar-body"><ol><li class="section"><a href="/de/docs/Learn/Getting_started_with_the_web">Komplette Anfänger beginnen hier!</a></li><li><details><summary>Erste Schritte mit dem Web</summary><ol><li><a href="/de/docs/Learn/Getting_started_with_the_web">Einführung ins Web</a></li><li><a href="/de/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installation von grundlegender Software</a></li><li><a href="/de/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Wie wird Ihre Website aussehen?</a></li><li><a href="/de/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Umgang mit Dateien</a></li><li><a href="/de/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML-Grundlagen</a></li><li><a href="/de/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS-Grundlagen</a></li><li><a href="/de/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript-Grundlagen</a></li><li><a href="/de/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Veröffentlichung Ihrer Website</a></li><li><a href="/de/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Wie das Web funktioniert</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/HTML">HTML — Strukturierung des Webs</a></li><li><details><summary>Einführung in HTML</summary><ol><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML">Einführung in HTML</a></li><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Erste Schritte mit HTML</a></li><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Was ist im Kopfbereich? Metadaten in HTML</a></li><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Grundlagen des HTML-Textes</a></li><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Erstellen von Hyperlinks</a></li><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Erweiterte Textformatierung</a></li><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Struktur eines Dokuments und einer Website</a></li><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Markierung eines Briefes</a></li><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Die Strukturierung einer Seite mit Inhalt</a></li></ol></details></li><li><details><summary>Multimedia und Einbettung</summary><ol><li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding">Multimedia und Einbettung</a></li><li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Bilder in HTML</a></li><li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video- und Audioinhalte</a></li><li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Von Objekt zu iframe — andere Einbettungstechnologien</a></li><li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Vektorgrafiken zum Web hinzufügen</a></li><li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive Images</a></li><li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla Splash-Seite</a></li></ol></details></li><li><details><summary>HTML-Tabellen</summary><ol><li><a href="/de/docs/Learn/HTML/Tables">HTML-Tabellen</a></li><li><a href="/de/docs/Learn/HTML/Tables/Basics">HTML Table Grundlagen</a></li><li><a href="/de/docs/Learn/HTML/Tables/Advanced">Erweiterte Funktionen und Barrierefreiheit von HTML-Tabellen</a></li><li><a href="/de/docs/Learn/HTML/Tables/Structuring_planet_data">Strukturierung von Planeten-Daten</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/CSS">CSS — Gestaltung des Webs</a></li><li><details><summary>CSS erste Schritte</summary><ol><li><a href="/de/docs/Learn/CSS/First_steps">Erste Schritte mit CSS</a></li><li><a href="/de/docs/Learn/CSS/First_steps/What_is_CSS">Was ist CSS?</a></li><li><a href="/de/docs/Learn/CSS/First_steps/Getting_started">Einstieg in CSS</a></li><li><a href="/de/docs/Learn/CSS/First_steps/How_CSS_is_structured">Wie CSS strukturiert ist</a></li><li><a href="/de/docs/Learn/CSS/First_steps/How_CSS_works">Wie CSS funktioniert</a></li><li><a href="/de/docs/Learn/CSS/First_steps/Styling_a_biography_page">Eine Biografieseite stylen</a></li></ol></details></li><li><details><summary>CSS-Bausteine</summary><ol><li><a href="/de/docs/Learn/CSS/Building_blocks">CSS-Grundbausteine</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Selectors">CSS-Selektoren</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Typ-, Klassen- und ID-Selektoren</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attributselektoren</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-Klassen und Pseudo-Elemente</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Kombinatoren</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaskade, Spezifität und Vererbung</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Cascade_layers">Kaskadenschichten</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/The_box_model">Das Boxmodell</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Hintergründe und Rahmen</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Umgang mit unterschiedlichen Textausrichtungen</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Overflowing_content">Überlaufender Inhalt</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Values_and_units">CSS-Werte und Einheiten</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Größe von Elementen in CSS</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Bilder, Medien und Formularelemente</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Styling_tables">Tabellen stylen</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">Erweiterte Styling-Effekte</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Organizing">Organisieren Ihres CSS</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension">Grundlegendes CSS-Verständnis</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper">Erstellen von stilvollem Briefpapier</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/A_cool_looking_box">Eine cool aussehende Box</a></li></ol></details></li><li><details><summary>Textgestaltung</summary><ol><li><a href="/de/docs/Learn/CSS/Styling_text">CSS Textgestaltung</a></li><li><a href="/de/docs/Learn/CSS/Styling_text/Fundamentals">Grundlegende Text- und Schriftgestaltung</a></li><li><a href="/de/docs/Learn/CSS/Styling_text/Styling_lists">Listen stilisieren</a></li><li><a href="/de/docs/Learn/CSS/Styling_text/Styling_links">Styling von Links</a></li><li><a href="/de/docs/Learn/CSS/Styling_text/Web_fonts">Web-Fonts</a></li><li><a href="/de/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Setzen einer Community-Schul-Startseite</a></li></ol></details></li><li><details><summary>CSS-Layout</summary><ol><li><a href="/de/docs/Learn/CSS/CSS_layout">CSS-Layout</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Introduction">Einführung in CSS Layout</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Normal_Flow">Normaler Fluss</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Grids">Raster</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Mehrspaltiges Layout</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsives Design</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Media_queries">Einsteigerleitfaden für Media Queries</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy-Layout-Methoden</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Unterstützung älterer Browser</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Grundlegendes Verständnis von Layouts</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/JavaScript">JavaScript — Dynamisches clientseitiges Skripting</a></li><li><details><summary>JavaScript erste Schritte</summary><ol><li><a href="/de/docs/Learn/JavaScript/First_steps">JavaScript erste Schritte</a></li><li><a href="/de/docs/Learn/JavaScript/First_steps/What_is_JavaScript">Was ist JavaScript?</a></li><li><a href="/de/docs/Learn/JavaScript/First_steps/A_first_splash">Ein erster Sprung in JavaScript</a></li><li><a href="/de/docs/Learn/JavaScript/First_steps/What_went_wrong">Was ist schiefgelaufen? JavaScript-Fehlerbehebung</a></li><li><a href="/de/docs/Learn/JavaScript/First_steps/Variables">Speichern der benötigten Informationen — Variablen</a></li><li><a href="/de/docs/Learn/JavaScript/First_steps/Math">Grundlegende Mathematik in JavaScript – Zahlen und Operatoren</a></li><li><a href="/de/docs/Learn/JavaScript/First_steps/Strings">Umgang mit Text — Strings in JavaScript</a></li><li><a href="/de/docs/Learn/JavaScript/First_steps/Useful_string_methods">Nützliche String-Methoden</a></li><li><a href="/de/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li><li><a href="/de/docs/Learn/JavaScript/First_steps/Silly_story_generator">Silly Story Generator</a></li></ol></details></li><li><details><summary>JavaScript-Bausteine</summary><ol><li><a href="/de/docs/Learn/JavaScript/Building_blocks">JavaScript-Bausteine</a></li><li><a href="/de/docs/Learn/JavaScript/Building_blocks/conditionals">Entscheidungen in Ihrem Code treffen — Bedingte Anweisungen</a></li><li><a href="/de/docs/Learn/JavaScript/Building_blocks/Looping_code">Schleifen-Code</a></li><li><a href="/de/docs/Learn/JavaScript/Building_blocks/Functions">Funktionen — wiederverwendbare Codeblöcke</a></li><li><a href="/de/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Erstellen Sie Ihre eigene Funktion</a></li><li><a href="/de/docs/Learn/JavaScript/Building_blocks/Return_values">Funktionsrückgabewerte</a></li><li><a href="/de/docs/Learn/JavaScript/Building_blocks/Events">Einführung in Ereignisse</a></li><li><a href="/de/docs/Learn/JavaScript/Building_blocks/Event_bubbling">Event bubbling</a></li><li><a href="/de/docs/Learn/JavaScript/Building_blocks/Image_gallery">Bildgalerie</a></li></ol></details></li><li><details><summary>Einführung in JavaScript-Objekte</summary><ol><li><a href="/de/docs/Learn/JavaScript/Objects">Einführung in JavaScript-Objekte</a></li><li><a href="/de/docs/Learn/JavaScript/Objects/Basics">JavaScript Objekt Grundlagen</a></li><li><a href="/de/docs/Learn/JavaScript/Objects/Object_prototypes">Objektprototypen</a></li><li><a href="/de/docs/Learn/JavaScript/Objects/Object-oriented_programming">Objektorientierte Programmierung</a></li><li><a href="/de/docs/Learn/JavaScript/Objects/Classes_in_JavaScript">Klassen in JavaScript</a></li><li><a href="/de/docs/Learn/JavaScript/Objects/JSON">Arbeiten mit JSON</a></li><li><a href="/de/docs/Learn/JavaScript/Objects/Object_building_practice">Objekt-Baupraxis</a></li><li><a href="/de/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Hinzufügen von Funktionen zu unserem hüpfenden Kugeln-Demo</a></li></ol></details></li><li><details><summary>Asynchrones JavaScript</summary><ol><li><a href="/de/docs/Learn/JavaScript/Asynchronous">Asynchrones JavaScript</a></li><li><a href="/de/docs/Learn/JavaScript/Asynchronous/Introducing">Einführung in asynchrones JavaScript</a></li><li><a href="/de/docs/Learn/JavaScript/Asynchronous/Promises">Anleitung zur Verwendung von Promises</a></li><li><a href="/de/docs/Learn/JavaScript/Asynchronous/Implementing_a_promise-based_API">Anleitung zur Implementierung einer Promise-basierten API</a></li><li><a href="/de/docs/Learn/JavaScript/Asynchronous/Introducing_workers">Einführung in Workers</a></li><li><a href="/de/docs/Learn/JavaScript/Asynchronous/Sequencing_animations">Sequenzierung von Animationen</a></li></ol></details></li><li><details><summary>Client-seitige Web-APIs</summary><ol><li><a href="/de/docs/Learn/JavaScript/Client-side_web_APIs">Client-Side-Web-APIs</a></li><li><a href="/de/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Einführung in Web-APIs</a></li><li><a href="/de/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulating documents</a></li><li><a href="/de/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Abrufen von Daten vom Server</a></li><li><a href="/de/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">Third-party APIs</a></li><li><a href="/de/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Grafiken zeichnen</a></li><li><a href="/de/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">Video- und Audio-APIs</a></li><li><a href="/de/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Client-side storage</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/Forms">Webformulare — Arbeiten mit Benutzerdaten</a></li><li><details><summary>Grundlagen der Webformulare</summary><ol><li><a href="/de/docs/Learn/Forms">Bausteine für Webformulare</a></li><li><a href="/de/docs/Learn/Forms/Your_first_form">Ihr erstes Formular</a></li><li><a href="/de/docs/Learn/Forms/How_to_structure_a_web_form">Wie Sie ein Webformular strukturieren</a></li><li><a href="/de/docs/Learn/Forms/Basic_native_form_controls">Basis-Native Formularelemente</a></li><li><a href="/de/docs/Learn/Forms/HTML5_input_types">Die HTML5 input Typen</a></li><li><a href="/de/docs/Learn/Forms/Other_form_controls">Andere Formularelemente</a></li><li><a href="/de/docs/Learn/Forms/Styling_web_forms">Styling von Webformularen</a></li><li><a href="/de/docs/Learn/Forms/Advanced_form_styling">Erweiterte Formular-Stilgestaltung</a></li><li><a href="/de/docs/Learn/Forms/UI_pseudo-classes">UI-Pseudo-Klassen</a></li><li><a href="/de/docs/Learn/Forms/Form_validation">Client-seitige Formularvalidierung</a></li><li><a href="/de/docs/Learn/Forms/Sending_and_retrieving_form_data">Senden von Formulardaten</a></li></ol></details></li><li><details><summary>Erweiterte Techniken für Webformulare</summary><ol><li><a href="/de/docs/Learn/Forms/How_to_build_custom_form_controls">Anleitung zur Erstellung benutzerdefinierter Formularelemente</a></li><li><a href="/de/docs/Learn/Forms/Sending_forms_through_JavaScript">Versenden von Formularen über JavaScript</a></li><li><a href="/de/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS-Eigenschaftskompatibilitätstabelle für Formularelemente</a></li><li><a href="/de/docs/Learn/Forms/HTML_forms_in_legacy_browsers">HTML-Formulare in älteren Browsern</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/Accessibility">Barrierefreiheit — Das Web für alle nutzbar machen</a></li><li><details><summary>Barrierefreiheitsleitfäden</summary><ol><li><a href="/de/docs/Learn/Accessibility">Barrierefreiheit</a></li><li><a href="/de/docs/Learn/Accessibility/What_is_accessibility">Was ist Barrierefreiheit?</a></li><li><a href="/de/docs/Learn/Accessibility/HTML">HTML: Eine gute Grundlage für Barrierefreiheit</a></li><li><a href="/de/docs/Learn/Accessibility/CSS_and_JavaScript">CSS und JavaScript: Barrierefreiheits-Best Practices</a></li><li><a href="/de/docs/Learn/Accessibility/WAI-ARIA_basics">Grundlagen von WAI-ARIA</a></li><li><a href="/de/docs/Learn/Accessibility/Multimedia">Barrierefreie Multimedia</a></li><li><a href="/de/docs/Learn/Accessibility/Mobile">Barrierefreiheit auf Mobilgeräten</a></li><li><a href="/de/docs/Learn/Accessibility/Accessibility_troubleshooting">Bewertung: Barrierefreiheits-Troubleshooting</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/Performance">Leistung — Websites schnell und reaktionsschnell machen</a></li><li><details><summary>Leitfäden zur Leistung</summary><ol><li><a href="/de/docs/Learn/Performance">Webleistung</a></li><li><a href="/de/docs/Learn/Performance/why_web_performance">Der 'Warum' der Web-Performance</a></li><li><a href="/de/docs/Learn/Performance/What_is_web_performance">Was ist Web-Performance?</a></li><li><a href="/de/docs/Learn/Performance/Perceived_performance">Wahrgenommene Leistung</a></li><li><a href="/de/docs/Learn/Performance/Measuring_performance">Messung der Performance</a></li><li><a href="/de/docs/Learn/Performance/Multimedia">Multimedia: Bilder</a></li><li><a href="/de/docs/Learn/Performance/video">Multimedia: Video</a></li><li><a href="/de/docs/Learn/Performance/JavaScript">JavaScript-Leistungsoptimierung</a></li><li><a href="/de/docs/Learn/Performance/HTML">HTML-Leistungsoptimierung</a></li><li><a href="/de/docs/Learn/Performance/CSS">CSS-Leistungsoptimierung</a></li><li><a href="/de/docs/Learn/Performance/business_case_for_performance">Der geschäftliche Nutzen von Web-Performance</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/MathML">MathML — Schreiben von Mathematik mit MathML</a></li><li><details><summary>MathML erste Schritte</summary><ol><li><a href="/de/docs/Learn/MathML/First_steps">Erste Schritte mit MathML</a></li><li><a href="/de/docs/Learn/MathML/First_steps/Getting_started">Erste Schritte mit MathML</a></li><li><a href="/de/docs/Learn/MathML/First_steps/Text_containers">MathML Text-Container</a></li><li><a href="/de/docs/Learn/MathML/First_steps/Fractions_and_roots">MathML-Brüche und -Wurzeln</a></li><li><a href="/de/docs/Learn/MathML/First_steps/Scripts">MathML gescriptete Elemente</a></li><li><a href="/de/docs/Learn/MathML/First_steps/Tables">MathML Tabellen</a></li><li><a href="/de/docs/Learn/MathML/First_steps/Three_famous_mathematical_formulas">Drei berühmte mathematische Formeln</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/../Games">Spiele — Entwicklung von Spielen für das Web</a></li><li><details><summary>Anleitungen und Tutorials</summary><ol><li><a href="/de/docs/Games/Introduction">Einführung in die Spieleentwicklung für das Web</a></li><li><a href="/de/docs/Games/Techniques">Techniken für die Spieleentwicklung</a></li><li><a href="/de/docs/Games/Tutorials">Tutorials</a></li><li><a href="/de/docs/Games/Publishing_games">Publishing Games</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/Tools_and_testing">Werkzeuge und Tests</a></li><li><details><summary>Client-seitige Webentwicklungstools</summary><ol><li><a href="/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools">Verständnis von Client-seitigen Webentwicklungstools</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview">Übersicht über clientseitige Werkzeuge</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">Crashkurs zur Kommandozeile</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">Grundlagen des Paketmanagements</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain">Einführung in eine vollständige Toolchain</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">Bereitstellung unserer App</a></li></ol></details></li><li><details><summary>Einführung in client-seitige Frameworks</summary><ol><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Einführung in client-seitige Frameworks</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Hauptmerkmale von Frameworks</a></li></ol></details></li><li><details><summary>React</summary><ol><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Erste Schritte mit React</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginn unserer React-Task-Liste</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Komponentisieren unserer React-App</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React-Interaktivität: Ereignisse und Status</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React Interaktivität: Bearbeiten, Filtern, bedingtes Rendering</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React-Ressourcen</a></li></ol></details></li><li><details><summary>Ember</summary><ol><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Einstieg in Ember</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember App-Struktur und Komponentisierung</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember-Interaktivität: Events, Klassen und Zustand</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interaktivität: Footer-Funktionalität, bedingtes Rendering</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember-Ressourcen und Fehlerbehebung</a></li></ol></details></li><li><details><summary>Vue</summary><ol><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Einstieg in Vue</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Erstellen unserer ersten Vue-Komponente</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering einer Liste von Vue-Komponenten</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Hinzufügen eines neuen Todo-Formulars: Vue-Ereignisse, Methoden und Modelle</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling von Vue-Komponenten mit CSS</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Verwendung von Vue computed properties</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue bedingte Darstellung: Bearbeitung bestehender Todos</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Vue-Refs und Lifecycle-Methoden zur Fokusverwaltung</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue-Ressourcen</a></li></ol></details></li><li><details><summary>Svelte</summary><ol><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Erste Schritte mit Svelte</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starten unserer Svelte-Tasklisten-App</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamisches Verhalten in Svelte: Arbeiten mit Variablen und Props</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Komponentisierung unserer Svelte-App</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Fortgeschrittenes Svelte: Reaktivität, Lebenszyklus, Barrierefreiheit</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Arbeiten mit Svelte Stores</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript-Unterstützung in Svelte</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Bereitstellung und nächste Schritte</a></li></ol></details></li><li><details><summary>Angular</summary><ol><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started">Erste Schritte mit Angular</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning">Anfang unserer Angular-To-Do-Liste-App</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling">Styling unserer Angular-Anwendung</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component">Erstellen einer Item-Komponente</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering">Filtern unserer To-Do-Elemente</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building">Building Angular applications and further resources</a></li></ol></details></li><li><details><summary>Git und GitHub</summary><ol><li><a href="/de/docs/Learn/Tools_and_testing/GitHub">Git und GitHub</a></li></ol></details></li><li><details open=""><summary>Cross-Browser-Tests</summary><ol><li><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross-Browser-Testing</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Einführung in das Cross-Browser-Testing</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategien zur Durchführung von Tests</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Umgang mit häufigen HTML- und CSS-Problemen</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Umgang mit häufigen JavaScript-Problemen</a></li><li><em><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility" aria-current="page">Umgang mit häufigen Problemen der Barrierefreiheit</a></em></li><li><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementierung von Feature-Erkennung</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Einführung in automatisiertes Testen</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Einrichten Ihrer eigenen Testautomatisierungsumgebung</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/Server-side">Server-seitige Webprogrammierung</a></li><li><details><summary>Erste Schritte</summary><ol><li><a href="/de/docs/Learn/Server-side/First_steps">Server-seitige Website-Programmierung: Erste Schritte</a></li><li><a href="/de/docs/Learn/Server-side/First_steps/Introduction">Einführung in die serverseitige Programmierung</a></li><li><a href="/de/docs/Learn/Server-side/First_steps/Client-Server_overview">Überblick über Client-Server</a></li><li><a href="/de/docs/Learn/Server-side/First_steps/Web_frameworks">Serverseitige Web-Frameworks</a></li><li><a href="/de/docs/Learn/Server-side/First_steps/Website_security">Website-Sicherheit</a></li></ol></details></li><li><details><summary>Django Web-Framework (Python)</summary><ol><li><a href="/de/docs/Learn/Server-side/Django">Django Web Framework (Python)</a></li><li><a href="/de/docs/Learn/Server-side/Django/Introduction">Einführung in Django</a></li><li><a href="/de/docs/Learn/Server-side/Django/development_environment">Einrichten einer Django-Entwicklungsumgebung</a></li><li><a href="/de/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django-Tutorial: Die Local Library Website</a></li><li><a href="/de/docs/Learn/Server-side/Django/skeleton_website">Django-Tutorial Teil 2: Erstellung einer Skelett-Website</a></li><li><a href="/de/docs/Learn/Server-side/Django/Models">Django-Tutorial Teil 3: Verwenden von Modellen</a></li><li><a href="/de/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Teil 4: Django Admin-Seite</a></li><li><a href="/de/docs/Learn/Server-side/Django/Home_page">Django-Tutorial Teil 5: Erstellen unserer Startseite</a></li><li><a href="/de/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Teil 6: Generische Listen- und Detailansichten</a></li><li><a href="/de/docs/Learn/Server-side/Django/Sessions">Django-Tutorial Teil 7: Sessions-Framework</a></li><li><a href="/de/docs/Learn/Server-side/Django/Authentication">Django-Tutorial Teil 8: Benutzer-Authentifizierung und Berechtigungen</a></li><li><a href="/de/docs/Learn/Server-side/Django/Forms">Django Tutorial Teil 9: Arbeiten mit Formularen</a></li><li><a href="/de/docs/Learn/Server-side/Django/Testing">Django Tutorial Teil 10: Testen einer Django-Webanwendung</a></li><li><a href="/de/docs/Learn/Server-side/Django/Deployment">Django-Tutorial Teil 11: Django in Produktion bereitstellen</a></li><li><a href="/de/docs/Learn/Server-side/Django/web_application_security">Django-Webanwendungssicherheit</a></li><li><a href="/de/docs/Learn/Server-side/Django/django_assessment_blog">Bewertung: DIY Django Mini-Blog</a></li></ol></details></li><li><details><summary>Express Web-Framework (Node.js/JavaScript)</summary><ol><li><a href="/de/docs/Learn/Server-side/Express_Nodejs">Express-Webframework (Node.js/JavaScript)</a></li><li><a href="/de/docs/Learn/Server-side/Express_Nodejs/Introduction">Einführung in Express/Node</a></li><li><a href="/de/docs/Learn/Server-side/Express_Nodejs/development_environment">Einrichtung einer Node-Entwicklungsumgebung</a></li><li><a href="/de/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express-Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href="/de/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Teil 2: Erstellung einer Grundstruktur für eine Website</a></li><li><a href="/de/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Teil 3: Verwendung einer Datenbank (mit Mongoose)</a></li><li><a href="/de/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Teil 4: Routen und Controller</a></li><li><a href="/de/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Teil 5: Bibliotheksdaten anzeigen</a></li><li><a href="/de/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Teil 6: Arbeiten mit Formularen</a></li><li><a href="/de/docs/Learn/Server-side/Express_Nodejs/deployment">Express-Tutorial Teil 7: Bereitstellung für die Produktion</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/Common_questions">Weitere Ressourcen</a></li><li><details><summary>Häufige Fragen</summary><ol><li><a href="/de/docs/Learn/Common_questions">Häufige Fragen</a></li><li><a href="/de/docs/Learn/HTML/Howto">HTML verwenden, um häufige Probleme zu lösen</a></li><li><a href="/de/docs/Learn/CSS/Howto">CSS verwenden, um häufige Probleme zu lösen</a></li><li><a href="/de/docs/Learn/JavaScript/Howto">Lösen Sie häufige Probleme in Ihrem JavaScript-Code</a></li><li><a href="/de/docs/Learn/Common_questions/Web_mechanics">Web-Mechanik</a></li><li><a href="/de/docs/Learn/Common_questions/Tools_and_setup">Tools und Einrichtung</a></li><li><a href="/de/docs/Learn/Common_questions/Design_and_accessibility">Design und Barrierefreiheit</a></li></ol></details></li></ol></div></div><section class="place side"></section></nav></aside><div class="toc-container"><aside class="toc"><nav><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">In diesem Artikel</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#was_ist_barrierefreiheit">Was ist Barrierefreiheit?</a></li><li class="document-toc-item "><a class="document-toc-link" href="#häufige_barrierefreiheitsprobleme">Häufige Barrierefreiheitsprobleme</a></li><li class="document-toc-item "><a class="document-toc-link" href="#tools_für_die_barrierefreiheit">Tools für die Barrierefreiheit</a></li><li class="document-toc-item "><a class="document-toc-link" href="#checkliste_für_barrierefreiheitstests">Checkliste für Barrierefreiheitstests</a></li><li class="document-toc-item "><a class="document-toc-link" href="#hilfe_finden">Hilfe finden</a></li><li class="document-toc-item "><a class="document-toc-link" href="#zusammenfassung">Zusammenfassung</a></li></ul></section></div></nav></aside><section class="place side"></section></div></div><main id="content" class="main-content "><article class="main-page-content" lang="de"><header><h1>Umgang mit häufigen Problemen der Barrierefreiheit</h1></header><div class="section-content"><ul class="prev-next"> <li><a class="button secondary" href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript"><span class="button-wrap"> Zurück </span></a></li> <li><a class="button secondary" href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing"><span class="button-wrap"> Übersicht: Cross-Browser-Testing</span></a></li> <li><a class="button secondary" href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection"><span class="button-wrap"> Weiter </span></a></li> </ul> <p>Als Nächstes widmen wir uns der Barrierefreiheit, bieten Informationen zu häufigen Problemen, wie man einfache Tests durchführt, und wie man Prüf- und Automatisierungstools zur Erkennung von Barrierefreiheitsproblemen nutzt.</p> <figure class="table-container"><table> <tbody> <tr> <th scope="row">Voraussetzungen:</th> <td> Vertrautheit mit den Kernsprachen <a href="/de/docs/Learn/HTML">HTML</a>, <a href="/de/docs/Learn/CSS">CSS</a> und <a href="/de/docs/Learn/JavaScript">JavaScript</a>; eine Vorstellung von den grundlegenden <a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Prinzipien des Browser-übergreifenden Testens</a>. </td> </tr> <tr> <th scope="row">Ziel:</th> <td>Die Fähigkeit, häufige Barrierefreiheitsprobleme zu diagnostizieren und geeignete Tools und Techniken zu deren Behebung zu verwenden.</td> </tr> </tbody> </table></figure></div><section aria-labelledby="was_ist_barrierefreiheit"><h2 id="was_ist_barrierefreiheit"><a href="#was_ist_barrierefreiheit">Was ist Barrierefreiheit?</a></h2><div class="section-content"><p>Wenn wir im Zusammenhang mit Web-Technologie von Barrierefreiheit sprechen, denken die meisten Menschen sofort daran, sicherzustellen, dass Websites/Apps für Menschen mit Behinderungen nutzbar sind, zum Beispiel:</p> <ul> <li>Sehbehinderte Menschen, die Bildschirmleser oder Vergrößerungen/Zooms verwenden, um auf Texte zuzugreifen.</li> <li>Menschen mit motorischen Beeinträchtigungen, die Tastaturen (oder andere nicht-mausbasierten Funktionen) nutzen, um die Funktionalität von Websites zu aktivieren.</li> <li>Menschen mit Hörbehinderungen, die auf Untertitel oder andere Textalternativen für Audio-/Videoinhalte angewiesen sind.</li> </ul> <p>Es ist jedoch ein Irrtum zu sagen, dass Barrierefreiheit nur für Behinderungen gedacht ist. Das eigentliche Ziel der Barrierefreiheit ist es, Websites/Apps für so viele Menschen in möglichst vielen Kontexten wie möglich nutzbar zu machen, nicht nur für Benutzer von leistungsstarken Desktop-Computern. Einige Beispiele könnten sein:</p> <ul> <li>Benutzer auf mobilen Geräten.</li> <li>Benutzer auf alternativen Browser-Geräten wie Fernsehern, Uhren usw.</li> <li>Benutzer älterer Geräte, die möglicherweise nicht über die neuesten Browser verfügen.</li> <li>Benutzer von Geräten mit geringerer Spezifikation, die möglicherweise langsame Prozessoren haben.</li> </ul> <p>In gewisser Weise dreht sich dieses ganze Modul um Barrierefreiheit — das Browser-übergreifende Testen stellt sicher, dass Ihre Sites von möglichst vielen Menschen genutzt werden können. <a href="/de/docs/Learn/Accessibility/What_is_accessibility">Was ist Barrierefreiheit?</a> definiert Barrierefreiheit vollständiger und gründlicher als dieser Artikel es tut.</p> <p>Das gesagt, wird dieser Artikel Browser-übergreifende und Testprobleme im Zusammenhang mit Menschen mit Behinderungen behandeln und wie sie das Internet nutzen. Wir haben bereits über andere Bereiche wie <a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#responsive_design_probleme">Responsive Design</a> und <a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#leistungsprobleme">Leistung</a> an anderen Stellen des Moduls gesprochen.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Wie bei vielen Dingen in der Webentwicklung geht es bei Barrierefreiheit nicht um 100% Erfolg oder nichts; 100% Barrierefreiheit ist praktisch unmöglich für alle Inhalte zu erreichen, insbesondere wenn Websites komplexer werden. Es geht vielmehr darum, einen angemessenen Aufwand zu betreiben, um so viele Ihrer Inhalte wie möglich für so viele Menschen wie möglich zugänglich zu machen, indem Sie defensiv coden und Best Practices einhalten.</p> </div></div></section><section aria-labelledby="häufige_barrierefreiheitsprobleme"><h2 id="häufige_barrierefreiheitsprobleme"><a href="#häufige_barrierefreiheitsprobleme">Häufige Barrierefreiheitsprobleme</a></h2><div class="section-content"><p>In diesem Abschnitt werden wir einige der Hauptprobleme umreißen, die im Zusammenhang mit der Barrierefreiheit im Web auftreten, in Verbindung mit spezifischen Technologien, zusammen mit Best Practices, die zu befolgen sind, und einigen einfachen Tests, die Sie durchführen können, um festzustellen, ob Ihre Sites auf dem richtigen Weg sind.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Barrierefreiheit ist moralisch das Richtige zu tun und gut für das Geschäft (die Anzahl der behinderten Nutzer, Nutzer auf mobilen Geräten usw. stellt bedeutende Marktsegmente dar), aber es ist auch eine gesetzliche Anforderung in vielen Teilen der Welt, Webinhalte für Menschen mit Behinderungen zugänglich zu machen. Lesen Sie <a href="/de/docs/Learn/Accessibility/What_is_accessibility#accessibility_guidelines_and_the_law">Barrierefreiheitsrichtlinien und das Gesetz</a> für weitere Informationen.</p> </div></div></section><section aria-labelledby="html"><h3 id="html"><a href="#html">HTML</a></h3><div class="section-content"><p>Semantisches HTML (bei dem die Elemente für ihren korrekten Zweck verwendet werden) ist von Haus aus zugänglich — solche Inhalte sind für sehende Zuschauer lesbar (sofern Sie nicht etwas Unüberlegtes tun, wie den Text zu klein zu machen oder ihn mit CSS zu verstecken), sind aber auch für unterstützende Technologien wie Bildschirmleser (Apps, die eine Webseite buchstäblich für ihren Benutzer vorlesen) nutzbar und bieten auch weitere Vorteile.</p> <h4 id="semantische_struktur">Semantische Struktur</h4> <p>Der wichtigste schnelle Gewinn im semantischen HTML besteht darin, eine Struktur von Überschriften und Absätzen für Ihren Inhalt zu verwenden; dies liegt daran, dass Bildschirmleser-Benutzer dazu neigen, die Überschriften eines Dokuments als Wegweiser zu verwenden, um schneller den benötigten Inhalt zu finden. Wenn Ihr Inhalt keine Überschriften hat, erhalten sie nur eine riesige Textwand ohne Wegweiser, um etwas zu finden. Beispiele für schlechtes und gutes HTML:</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html example-bad notranslate"><code><font size="7">My heading</font> <br /><br /> This is the first section of my document. <br /><br /> I'll add another paragraph here too. <br /><br /> <font size="5">My subheading</font> <br /><br /> This is the first subsection of my document. I'd love people to be able to find this content! <br /><br /> <font size="5">My 2nd subheading</font> <br /><br /> This is the second subsection of my content. I think it is more interesting than the last one. </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html example-good notranslate"><code><h1>My heading</h1> <p>This is the first section of my document.</p> <p>I'll add another paragraph here too.</p> <h2>My subheading</h2> <p> This is the first subsection of my document. I'd love people to be able to find this content! </p> <h2>My 2nd subheading</h2> <p> This is the second subsection of my content. I think it is more interesting than the last one. </p> </code></pre></div> <p>Darüber hinaus sollte Ihr Inhalt in der Quellreihenfolge logisch Sinn ergeben — Sie können ihn später immer noch mit CSS beliebig platzieren, aber Sie sollten die Quellreihenfolge von Anfang an richtig wählen.</p> <p>Als Test können Sie das CSS einer Site deaktivieren und prüfen, wie verständlich sie ohne CSS ist. Sie könnten dies manuell tun, indem Sie das CSS einfach aus Ihrem Code entfernen, aber der einfachste Weg ist die Verwendung von Browser-Funktionen, zum Beispiel:</p> <ul> <li>Firefox: Wählen Sie <em>Ansicht > Seitenstil > Kein Stil</em> aus dem Hauptmenü.</li> <li>Safari: Wählen Sie <em>Entwickeln > Stile deaktivieren</em> aus dem Hauptmenü (um das Menü <em>Entwickeln</em> zu aktivieren, wählen Sie <em>Safari > Einstellungen > Erweitert > Menü Entwickeln in der Menüleiste anzeigen</em>).</li> <li>Chrome: Installieren Sie die Webentwickler-Toolbar-Erweiterung, starten Sie dann den Browser neu. Klicken Sie auf das erscheinende Zahnradsymbol und wählen Sie <em>CSS > Alle Stile deaktivieren</em>.</li> <li>Edge: Wählen Sie <em>Ansicht > Stil > Kein Stil</em> aus dem Hauptmenü.</li> </ul> <h4 id="nutzung_nativer_tastaturzugänglichkeit">Nutzung nativer Tastaturzugänglichkeit</h4> <p>Bestimmte HTML-Features können nur über die Tastatur ausgewählt werden — dies ist das Standardverhalten, das es seit den Anfängen des Internets gibt. Die Elemente, die diese Fähigkeit haben, sind die gängigen, die es Benutzern ermöglichen, mit Webseiten zu interagieren, nämlich Links, <a href="/de/docs/Web/HTML/Element/button"><code><button></code></a>s und Formularelemente wie <a href="/de/docs/Web/HTML/Element/input"><code><input></code></a>.</p> <p>Sie können dies mit unserem <a href="https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html" class="external" target="_blank">native-keyboard-accessibility.html</a> Beispiel ausprobieren (siehe den <a href="https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html" class="external" target="_blank">Quellcode</a>) — öffnen Sie dies in einem neuen Tab und versuchen Sie, die Tab-Taste zu drücken; nach ein paar Mal drücken, sollten Sie sehen, dass der Tabulatorfokus beginnt, durch die verschiedenen fokussierbaren Elemente zu wechseln; die fokussierten Elemente erhalten einen hervorgehobenen Standardstil in jedem Browser (er unterscheidet sich leicht zwischen den verschiedenen Browsern), damit Sie erkennen können, welches Element fokussiert ist.</p> <p> <img src="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility/button-focused-unfocused.png" alt="Ein Screenshot von drei Schaltflächen, der das Standardverhalten von interaktiven nativen Elementen zeigt. Die dritte Schaltfläche ist durch einen blauen Rand hervorgehoben, um ihren Fokuszustand anzuzeigen." width="288" height="39" loading="lazy"> </p> <div class="notecard note"> <p><strong>Hinweis:</strong> In Firefox können Sie auch eine Überlagerung aktivieren, die die Registerkartenreihenfolge der Seite anzeigt. Weitere Informationen finden Sie unter: <a href="https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/index.html#show-web-page-tabbing-order" class="external" target="_blank">Accessibility Inspector > Registerkartenreihenfolge der Webseite anzeigen</a>.</p> </div> <p>Sie können dann Enter/Return drücken, um einem fokussierten Link zu folgen oder eine Schaltfläche zu drücken (wir haben etwas JavaScript hinzugefügt, damit die Schaltflächen eine Nachricht ausgeben), oder beginnen, in ein Texteingabefeld zu tippen (andere Formularelemente haben unterschiedliche Steuerungen, z. B. können beim <a href="/de/docs/Web/HTML/Element/select"><code><select></code></a>-Element die Optionen mit den Pfeiltasten nach oben und unten angezeigt und durchgegangen werden).</p> <p>Beachten Sie, dass verschiedene Browser unterschiedliche Tastatursteuerungsoptionen verfügbar haben können. Die meisten modernen Browser folgen dem oben beschriebenen Tab-Muster (Sie können auch Shift + Tab verwenden, um rückwärts durch die fokussierbaren Elemente zu wechseln), aber einige Browser haben ihre eigenen Besonderheiten:</p> <ul> <li>Safari auf dem Mac erlaubt Ihnen standardmäßig nicht, durch Links zu tabben; um dies zu aktivieren, öffnen Sie die <em>Systemeinstellungen</em>, scrollen Sie herunter zu <em>Tastatur</em> und aktivieren Sie <em>Tastaturnavigation</em>. Wenn Sie eine ältere Version von macOS verwenden, lesen Sie <a href="https://support.apple.com/guide/mac-help/use-your-keyboard-like-a-mouse-mh27469/mac" class="external" target="_blank">Verwenden Ihrer Tastatur wie eine Maus auf dem Mac</a> im macOS-Benutzerhandbuch von Apple.</li> </ul> <div class="notecard warning"> <p><strong>Warnung:</strong> Sie sollten diese Art von Test/Überprüfung bei jeder neuen Seite, die Sie schreiben, durchführen — stellen Sie sicher, dass die Funktionalität über die Tastatur zugänglich ist und dass die Tabulatorreihenfolge einen sinnvollen Navigationspfad durch das Dokument bietet.</p> </div> <p>Dieses Beispiel zeigt die Bedeutung der Verwendung des richtigen semantischen Elements für den richtigen Job auf. Es ist möglich, <em>jedes</em> Element mit CSS so zu gestalten, dass es aussieht wie ein Link oder eine Schaltfläche, und es mit JavaScript wie ein Link oder eine Schaltfläche zu verhalten, aber es sind keine echten Links oder Schaltflächen, und Sie verlieren eine Menge der Barrierefreiheit, die Ihnen diese Elemente von vornherein bieten. Also tun Sie es nicht, wenn Sie es vermeiden können.</p> <p>Ein weiterer Tipp — wie in unserem Beispiel gezeigt, können Sie steuern, wie Ihre fokussierbaren Elemente aussehen, wenn sie fokussiert sind, indem Sie die <a href="/de/docs/Web/CSS/:focus">:focus</a> Pseudoklasse verwenden. Es ist eine gute Idee, Fokus- und Hover-Stile zu kombinieren, damit Ihre Benutzer, unabhängig davon, ob sie Maus oder Tastatur verwenden, den visuell Hinweis erhalten, dass eine Steuerung beim Aktivieren etwas tut:</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>a:hover, input:hover, button:hover, select:hover, a:focus, input:focus, button:focus, select:focus { font-weight: bold; } </code></pre></div> <div class="notecard note"> <p><strong>Hinweis:</strong> Wenn Sie sich entscheiden, die Standardfokusstile mit CSS zu entfernen, stellen Sie sicher, dass Sie sie durch etwas anderes ersetzen, das besser zu Ihrem Design passt — es ist ein sehr wertvolles Barrierefreiheitstool und sollte nicht entfernt werden.</p> </div> <h4 id="einbauen_von_tastaturzugänglichkeit">Einbauen von Tastaturzugänglichkeit</h4> <p>Manchmal ist es nicht möglich, die Tastaturzugänglichkeit beizubehalten. Sie könnten eine Site übernommen haben, bei der die Semantik nicht sehr gut ist (vielleicht arbeiten Sie mit einem schrecklichen CMS, das Schaltflächen mit <code><div></code>s erstellt), oder Sie verwenden eine komplexe Steuerung, die keine eingebaute Tastaturzugänglichkeit hat, wie das HTML-<a href="/de/docs/Web/HTML/Element/video"><code><video></code></a>-Element (erstaunlicherweise, Opera ist der einzige Browser, der das Durchlaufen der <code><video></code>-Element-Standardbrowsersteuerungen per Tabulator erlaubt). Sie haben hier ein paar Optionen:</p> <ol> <li> <p>Erstellen Sie benutzerdefinierte Steuerungen mit <code><button></code>-Elementen (die wir standardmäßig per Tabulator erreichen können!) und JavaScript, um deren Funktionalität zu verknüpfen. Siehe <a href="/de/docs/Web/Media/Audio_and_video_delivery/cross_browser_video_player">Ein plattformübergreifender Videoplayer</a> für einige gute Beispiele dafür.</p> </li> <li> <p>Erstellen Sie Tastenkombinationen mit JavaScript, sodass Funktionen aktiviert werden, wenn bestimmte Tasten auf der Tastatur gedrückt werden. Siehe <a href="/de/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard">Maus- und Tastatur-Steuerungen für Desktop</a> für einige spielbezogene Beispiele, die für jeden Zweck angepasst werden können.</p> </li> <li> <p>Verwenden Sie einige interessante Taktiken, um Schaltflächenverhalten zu simulieren. Nehmen Sie zum Beispiel unser <a href="https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html" class="external" target="_blank">fake-div-buttons.html</a>-Beispiel (siehe <a href="https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html" class="external" target="_blank">Quellcode</a>). Hier haben wir unseren gefälschten <code><div></code>-Schaltflächen die Möglichkeit gegeben, fokussiert zu werden (auch per Tabulator), indem wir jedem das Attribut <code>tabindex="0"</code> gegeben haben (siehe WebAIMs <a href="https://webaim.org/techniques/keyboard/tabindex" class="external" target="_blank">tabindex-Artikel</a> für weitere wirklich nützliche Details). Dadurch können wir zu den Schaltflächen tabben, aber nicht, um sie über die Enter/Return-Taste zu aktivieren. Dazu mussten wir den folgenden Trick mit JavaScript hinzufügen:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>document.onkeydown = (e) => { if (e.code === "Enter") { // The Enter/Return key document.activeElement.onclick(e); } }; </code></pre></div> <p>Hier fügen wir dem <code>document</code>-Objekt einen Listener hinzu, um zu erkennen, wann eine Schaltfläche auf der Tastatur gedrückt wurde. Wir überprüfen, welche Schaltfläche gedrückt wurde, über die <a href="/de/docs/Web/API/KeyboardEvent/code"><code>code</code></a>-Eigenschaft des Event-Objekts; wenn es dem Code entspricht, der Return/Enter entspricht, führen wir die Funktion aus, die im <code>onclick</code>-Handler der Schaltfläche gespeichert ist, indem wir <code>document.activeElement.onclick()</code> verwenden. <a href="/de/docs/Web/API/Document/activeElement"><code>activeElement</code></a> gibt uns das Element, das derzeit auf der Seite fokussiert ist.</p> </li> </ol> <div class="notecard note"> <p><strong>Hinweis:</strong> Diese Technik wird nur funktionieren, wenn Sie Ihre ursprünglichen Event-Handler über Event-Handler-Eigenschaften setzen (z. B. <code>onclick</code>). <code>addEventListener</code> wird nicht funktionieren. Es ist viel zusätzlicher Aufwand, die Funktionalität auf diese Weise zurückzubauen. Und es gibt sicherlich andere Probleme damit. Besser, von Anfang an das richtige Element für den richtigen Job zu verwenden.</p> </div> <h4 id="textalternativen">Textalternativen</h4> <p>Textalternativen sind für Barrierefreiheit äußerst wichtig — wenn eine Person eine Seh- oder Hörbehinderung hat, die sie daran hindert, bestimmte Inhalte zu sehen oder zu hören, dann ist das ein Problem. Die einfachste verfügbare Textalternative ist das schlichte <code>alt</code>-Attribut, das wir in allen Bildern, die relevante Inhalte enthalten, einschließen sollten. Dies sollte eine Beschreibung des Bildes enthalten, die seine Bedeutung und seinen Inhalt auf der Seite erfolgreich vermittelt, damit es von einem Bildschirmleser aufgenommen und dem Benutzer vorgelesen werden kann.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Weitere Informationen finden Sie unter <a href="/de/docs/Learn/Accessibility/HTML#text_alternatives">Textalternativen</a> und <a href="https://www.w3.org/WAI/tutorials/images/decision-tree/" class="external" target="_blank">Ein Alt-Entscheidungsbaum</a>, um zu erfahren, wie Sie ein alt-Attribut für Bilder in verschiedenen Situationen verwenden.</p> </div> <p>Fehlender Alt-Text kann auf verschiedene Weise getestet werden, zum Beispiel mit Barrierefreiheits-<a href="#pr%C3%BCftools">Prüftools</a>.</p> <p>Alt-Text ist für Video- und Audioinhalte etwas komplexer. Es gibt eine Möglichkeit, Textspuren (z. B. Untertitel) zu definieren und sie beim Abspielen von Videos anzuzeigen, in Form des <a href="/de/docs/Web/HTML/Element/track"><code><track></code></a>-Elements und des <a href="/de/docs/Web/API/WebVTT_API">WebVTT</a>-Formats (siehe <a href="/de/docs/Web/Media/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Hinzufügen von Untertiteln zu HTML-Videos</a> für ein ausführliches Tutorial). Die <a href="/de/docs/Web/Media/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video#browser_compatibility">Kompatibilität mit Browsern</a> für diese Funktionen ist ziemlich gut, aber wenn Sie Textalternativen für Audio bereitstellen oder ältere Browser unterstützen möchten, könnte ein einfacher Texttranscript, der irgendwo auf der Seite oder auf einer separaten Seite präsentiert wird, eine gute Idee sein.</p> <h4 id="elementbeziehungen_und_kontext">Elementbeziehungen und Kontext</h4> <p>Es gibt bestimmte Features und Best Practices in HTML, die dazu entwickelt wurden, Kontext und Beziehungen zwischen Elementen bereitzustellen, wo sonst keine existieren. Die drei häufigsten Beispiele sind Links, Formularbeschriftungen und Datentabellen.</p> <p>Der Schlüssel zu zugänglichem Link-Text besteht darin, dass Benutzer von Bildschirmlesern häufig eine gemeinsame Funktion verwenden, bei der sie eine Liste aller Links auf der Seite aufrufen. In diesem Fall muss der Link-Text aus dem Kontext Sinn ergeben. Zum Beispiel ist eine Liste von Links mit der Bezeichnung "klicken Sie hier", "klicken Sie mich" usw. wirklich schlecht für die Barrierefreiheit. Es ist besser, wenn der Link-Text im Kontext und außerhalb des Kontexts Sinn ergibt.</p> <p>Als nächstes auf unserer Liste ist das Formular-<a href="/de/docs/Web/HTML/Element/label"><code><label></code></a>-Element eines der zentralen Features, das es uns ermöglicht, Formulare zugänglich zu machen. Das Problem mit Formularen ist, dass Sie Beschriftungen benötigen, die angeben, welche Daten in jedes Formulareingabe eingegeben werden sollten. Jede Beschriftung muss in einem <a href="/de/docs/Web/HTML/Element/label"><code><label></code></a> enthalten sein, um sie eindeutig mit ihrem Partner-Formularelement zu verknüpfen (der <code>for</code>-Attributwert jeder <code><label></code> muss mit dem <code>id</code>-Wert des Formularelements übereinstimmen), und es wird auch dann Sinn ergeben, wenn die Quellordnung nicht völlig logisch ist (was zugegeben der Fall sein sollte).</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Weitere Informationen über den Link-Text und Formular-Beschriftungen finden Sie in <a href="/de/docs/Learn/Accessibility/HTML#meaningful_text_labels">Aussagekräftige Textbeschriftungen</a>.</p> </div> <p>Zuletzt ein kurzes Wort zu Datentabellen. Eine einfache Datentabelle kann mit sehr einfachem Markup geschrieben werden (siehe <code>bad-table.html</code> <a href="https://mdn.github.io/learning-area/accessibility/html/bad-table.html" class="external" target="_blank">live</a>, und <a href="https://github.com/mdn/learning-area/blob/main/accessibility/html/bad-table.html" class="external" target="_blank">Quellcode</a>), aber dies hat Probleme — es gibt keine Möglichkeit für einen Bildschirmleser-Benutzer, Zeilen oder Spalten als Daten-Gruppierungen miteinander in Verbindung zu bringen — um dies zu tun, müssen Sie wissen, was die Kopfzeilenzeilen sind und ob sie Zeilen, Spalten usw. anführen. Dies kann nur visuell für eine solche Tabelle erfolgen.</p> <p>Wenn Sie sich stattdessen unser <code>punk-bands-complete.html</code>-Beispiel (<a href="https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html" class="external" target="_blank">live</a>, <a href="https://github.com/mdn/learning-area/blob/main/css/styling-boxes/styling-tables/punk-bands-complete.html" class="external" target="_blank">Quellcode</a>) ansehen, können Sie einige Hilfen zur Barrierefreiheit bei der Arbeit sehen, wie Tabellenköpfe (<a href="/de/docs/Web/HTML/Element/th"><code><th></code></a>- und <code>scope</code>-Attribute), <a href="/de/docs/Web/HTML/Element/caption"><code><caption></code></a>-Element usw.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Weitere Informationen zu zugänglichen Tabellen finden Sie in <a href="/de/docs/Learn/Accessibility/HTML#accessible_data_tables">Zugängliche Datentabellen</a>.</p> </div></div></section><section aria-labelledby="css"><h3 id="css"><a href="#css">CSS</a></h3><div class="section-content"><p>CSS bietet in der Regel weit weniger grundlegende Barrierefreiheitsfeatures als HTML, kann aber trotzdem genauso viel Schaden für die Barrierefreiheit anrichten, wenn es falsch verwendet wird. Wir haben bereits ein paar Barrierefreiheits-Tipps zu CSS erwähnt:</p> <ul> <li>Verwenden Sie die korrekten semantischen Elemente, um unterschiedliche Inhalte in HTML zu kennzeichnen; wenn Sie einen anderen visuellen Effekt erzielen möchten, verwenden Sie CSS — missbrauchen Sie keine HTML-Elemente, um das gewünschte Aussehen zu erzielen. Wenn Sie zum Beispiel größeren Text wünschen, verwenden Sie <a href="/de/docs/Web/CSS/font-size"><code>font-size</code></a>, kein <a href="/de/docs/Web/HTML/Element/Heading_Elements">h1</a>-Element.</li> <li>Stellen Sie sicher, dass Ihre Quellreihenfolge ohne CSS Sinn ergibt; Sie können die Seite anschließend beliebig mit CSS gestalten.</li> <li>Sie sollten sicherstellen, dass interaktive Elemente wie Schaltflächen und Links geeignete Fokus-/Hover-/Aktivzustände haben, um dem Benutzer visuelle Hinweise auf ihre Funktion zu geben. Wenn Sie die Standardwerte aus stilistischen Gründen entfernen, stellen Sie sicher, dass Sie Ersatzstile hinzufügen.</li> </ul> <p>Es gibt einige andere Überlegungen, die Sie berücksichtigen sollten.</p> <h4 id="farbe_und_farbkontrast">Farbe und Farbkontrast</h4> <p>Bei der Auswahl eines Farbschemas für Ihre Website sollten Sie sicherstellen, dass die Textfarbe (Vordergrund) gut mit der Hintergrundfarbe kontrastiert. Ihr Design mag cool aussehen, aber es bringt nichts, wenn Menschen mit Sehbehinderungen wie Farbenblindheit Ihre Inhalte nicht lesen können. Verwenden Sie ein Werkzeug wie WebAIMs <a href="https://webaim.org/resources/contrastchecker/" class="external" target="_blank">Farbkontrast-Prüfer</a>, um zu überprüfen, ob Ihr Schema genügend Kontrast aufweist.</p> <p>Ein weiterer Tipp ist, nicht nur auf die Farbe für Wegweiser/Informationen zu vertrauen, da dies für diejenigen, die die Farbe nicht sehen können, nicht geeignet ist. Anstatt z. B. erforderliche Formularfelder in Rot zu markieren, markieren Sie sie mit einem Sternchen und in Rot.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Ein hoher Kontrast wird auch jedem, der ein Smartphone oder Tablet mit einem glänzenden Bildschirm verwendet, ermöglichen, Seiten auch in einer hellen Umgebung, wie Sonnenlicht, besser zu lesen.</p> </div> <h4 id="ausblenden_von_inhalten">Ausblenden von Inhalten</h4> <p>Es gibt viele Instanzen, in denen ein visuelles Design erfordert, dass nicht alle Inhalte gleichzeitig angezeigt werden. In unserem <a href="https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/tabbed-info-box.html" class="external" target="_blank">Tabbed info box example</a> (siehe <a href="https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/tabbed-info-box.html" class="external" target="_blank">Quellcode</a>) haben wir zum Beispiel drei Informationspanels, aber wir positionieren sie <a href="/de/docs/Learn/CSS/CSS_layout/Positioning">übereinander</a> und bieten Registerkarten, die angeklickt werden können, um jedes einzublenden (es ist auch über die Tastatur zugänglich — Sie können alternativ Tab und Enter/Return verwenden, um sie auszuwählen).</p> <p> <img src="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility/20191022144107.png" alt="Ein Screenshot zeigt ein Beispiel für das Zugänglichmachen von ausgeblendetem und angezeigtem Inhalt in Registerkarten. Das Beispiel hat drei Registerkarten, nämlich Tab 1, Tab 2 und Tab 3. Tab 1 ist derzeit fokussiert und aktiviert, um Inhalte anzuzeigen." width="1272" height="1131" loading="lazy"> </p> <p>Benutzer von Bildschirmlesern kümmern sich nicht um all das — sie sind mit dem Inhalt zufrieden, solange die Quellreihenfolge Sinn ergibt und sie darauf zugreifen können. Absolute Positionierung (wie in diesem Beispiel verwendet) wird im Allgemeinen als eine der besten Mechanismen zum Ausblenden von Inhalten für visuelle Effekte angesehen, da sie Bildschirmleser nicht daran hindert, Zugang zu erhalten.</p> <p>Andererseits sollten Sie <a href="/de/docs/Web/CSS/visibility"><code>visibility: hidden</code></a> oder <a href="/de/docs/Web/CSS/display"><code>display: none</code></a> nicht verwenden, weil sie Inhalte vor Bildschirmlesern verbergen. Sofern es natürlich keinen guten Grund gibt, warum Sie möchten, dass dieser Inhalt vor Bildschirmlesern verborgen ist.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> <a href="https://webaim.org/techniques/css/invisiblecontent/" class="external" target="_blank">Unsichtbarer Inhalt nur für Benutzer von Bildschirmlesern</a> bietet viele nützliche Details zu diesem Thema.</p> </div></div></section><section aria-labelledby="javascript"><h3 id="javascript"><a href="#javascript">JavaScript</a></h3><div class="section-content"><p>JavaScript hat dieselben Probleme wie CSS in Bezug auf Barrierefreiheit — es kann für Barrierefreiheit katastrophal sein, wenn es schlecht oder übermäßig verwendet wird. Wir haben bereits auf einige Barrierefreiheitsprobleme im Zusammenhang mit JavaScript hingewiesen, hauptsächlich im Bereich semantischen HTMLs — Sie sollten immer das geeignete semantische HTML verwenden, um Funktionalität zu implementieren, wo immer es verfügbar ist, z. B. verwenden Sie Links und Schaltflächen entsprechend. Verwenden Sie keine <code><div></code>-Elemente mit JavaScript-Code, um Funktionalität zu simulieren, wenn es überhaupt möglich ist — es ist fehleranfällig und mehr Arbeit als die kostenlose Funktionalität, die Ihnen HTML bietet.</p> <h4 id="einfache_funktionalität">Einfache Funktionalität</h4> <p>Im Allgemeinen sollte einfache Funktionalität nur mit dem vorhandenen HTML funktionieren — JavaScript sollte nur verwendet werden, um die Funktionalität zu verbessern, nicht sie vollständig einzubauen. Gute Verwendungen von JavaScript umfassen:</p> <ul> <li>Bereitstellung von clientseitiger Formularvalidierung, die Benutzer schnell auf Probleme mit ihren Formulareinträgen aufmerksam macht, ohne auf die Überprüfung der Daten durch den Server warten zu müssen. Wenn es nicht verfügbar ist, funktioniert das Formular dennoch, aber die Validierung kann langsamer sein.</li> <li>Bereitstellung benutzerdefinierter Steuerungen für HTML-<code><video></code>s, die für Benutzer, die nur die Tastatur verwenden, zugänglich sind (wie bereits erwähnt, sind die Standard-Browser-Steuerungen in den meisten Browsern nicht über die Tastatur zugänglich).</li> </ul> <div class="notecard note"> <p><strong>Hinweis:</strong> WebAIMs <a href="https://webaim.org/techniques/javascript/" class="external" target="_blank">Zugängliches JavaScript</a> bietet einige nützliche weitere Details zu Überlegungen für zugängliches JavaScript.</p> </div> <p>Komplexere JavaScript-Implementierungen können Probleme mit der Barrierefreiheit verursachen — Sie müssen tun, was Sie können. Zum Beispiel wäre es unvernünftig, von Ihnen zu erwarten, dass Sie ein komplexes 3D-Spiel, das mithilfe von <a href="/de/docs/Glossary/WebGL">WebGL</a> geschrieben wurde, 100% zugänglich für eine blinde Person machen, aber Sie könnten <a href="/de/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard">Tastatursteuerungen</a> implementieren, damit es von Nicht-Maus-Benutzern genutzt werden kann, und das Farbschema kontrastreich genug machen, um es für Menschen mit Farbbehinderungen nutzbar zu machen.</p> <h4 id="komplexe_funktionalität">Komplexe Funktionalität</h4> <p>Eines der Hauptprobleme für Barrierefreiheit sind komplexe Apps, die komplizierte Formularsteuerungen (wie Datumsauswähler) und dynamische Inhalte umfassen, die häufig und inkrementell aktualisiert werden.</p> <p>Nicht-native komplizierte Formularsteuerungen sind problematisch, weil sie oft viele verschachtelte <code><div></code>s beinhalten und der Browser standardmäßig nicht weiß, was damit zu tun ist. Wenn Sie sie selbst erfinden, müssen Sie sicherstellen, dass sie für die Tastatur zugänglich sind; wenn Sie ein Drittanbieter-Framework verwenden, überprüfen Sie sorgfältig die verfügbaren Optionen, um zu sehen, wie zugänglich sie sind, bevor Sie es verwenden. <a href="https://getbootstrap.com/" class="external" target="_blank">Bootstrap</a> scheint für Barrierefreiheit ziemlich gut zu sein, obwohl <a href="https://www.sitepoint.com/making-bootstrap-accessible/" class="external" target="_blank">Bootstrap ein wenig zugänglicher machen</a> von Rhiana Heath einige seiner Probleme (hauptsächlich im Zusammenhang mit Farbkontrast) erkundet und einige Lösungen anspricht.</p> <p>Regelmäßig aktualisierte dynamische Inhalte können problematisch sein, weil Bildschirmleser-Benutzer sie möglicherweise verpassen, insbesondere wenn sie unerwartet aktualisiert werden. Wenn Sie eine Single-Page-App mit einem Hauptinhaltspanel haben, das regelmäßig mit <a href="/de/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a> oder <a href="/de/docs/Web/API/Fetch_API">Fetch</a> aktualisiert wird, könnte ein Benutzer des Bildschirmlesers diese Aktualisierungen verpassen.</p> <h4 id="wai-aria">WAI-ARIA</h4> <p>Benötigen Sie solche komplexen Funktionen oder reicht einfaches semantisches HTML aus? Wenn Sie Komplexität benötigen, sollten Sie die Verwendung von <a href="https://www.w3.org/TR/wai-aria-1.1/" class="external" target="_blank">WAI-ARIA</a> (Accessible Rich Internet Applications), einer Spezifikation, die Semantik (in Form von neuen HTML-Attributen) für Elemente wie komplexe Formularsteuerungen und aktualisierende Panels bietet, in Betracht ziehen, die von den meisten Browsern und Bildschirmlesern verstanden werden kann.</p> <p>Um mit komplexen Formular-Widgets umzugehen, müssen Sie ARIA-Attribute wie <code>roles</code> verwenden, um anzugeben, welche Rolle verschiedene Elemente in einem Widget haben (zum Beispiel sind sie ein Tab oder ein Tab-Panel?), <code>aria-disabled</code>, um zu sagen, ob eine Steuerung deaktiviert ist oder nicht usw.</p> <p>Um mit regelmäßig aktualisierten Inhaltsbereichen umzugehen, können Sie das <code>aria-live</code>-Attribut verwenden, das einen aktualisierenden Bereich identifiziert. Sein Wert gibt an, wie dringend der Bildschirmleser ihn vorlesen soll:</p> <ul> <li><code>off:</code> Der Standard. Updates sollten nicht angekündigt werden.</li> <li><code>polite</code>: Updates sollten nur angekündigt werden, wenn der Benutzer untätig ist.</li> <li><code>assertive</code>: Updates sollten dem Benutzer so schnell wie möglich angekündigt werden.</li> </ul> <p>Hier ist ein Beispiel:</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><p><span id="LiveRegion1" aria-live="polite" aria-atomic="false"></span></p> </code></pre></div> <p>Sie können ein Beispiel in Aktion auf Freedom Scientific's <a href="https://www.freedomscientific.com/SurfsUp/AriaLiveRegions.htm" class="external" target="_blank">ARIA (Accessible Rich Internet Applications) Live Regions</a>-Beispiel sehen — der hervorgehobene Absatz sollte alle 10 Sekunden seinen Inhalt aktualisieren, und ein Bildschirmleser sollte dies dem Benutzer vorlesen. <a href="https://www.freedomscientific.com/SurfsUp/AriaLiveRegionsAtomic.htm" class="external" target="_blank">ARIA Live Regions - Atomic</a> bietet ein weiteres nützliches Beispiel.</p> <p>Wir haben nicht den Raum, um WAI-ARIA hier im Detail zu behandeln, Sie können viel mehr darüber lernen bei <a href="/de/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA-Grundlagen</a>.</p></div></section><section aria-labelledby="tools_für_die_barrierefreiheit"><h2 id="tools_für_die_barrierefreiheit"><a href="#tools_für_die_barrierefreiheit">Tools für die Barrierefreiheit</a></h2><div class="section-content"><p>Da wir nun die Überlegungen zur Barrierefreiheit für verschiedene Web-Technologien behandelt haben, einschließlich einiger Testtechniken (wie Tastaturnavigation und Farbkontrastprüfer), schauen wir uns einige andere Tools an, die Sie beim Testen auf Barrierefreiheit nutzen können.</p></div></section><section aria-labelledby="prüftools"><h3 id="prüftools"><a href="#prüftools">Prüftools</a></h3><div class="section-content"><p>Es gibt eine Reihe von Prüftools, die Sie Ihren Webseiten füttern können. Sie werden sie überprüfen und eine Liste von Barrierefreiheitsproblemen auf der Seite zurückgeben. Lassen Sie uns ein Beispiel ansehen, indem wir <a href="https://wave.webaim.org/" class="external" target="_blank">Wave</a> verwenden, ein Online-Prüftool für Barrierefreiheit, das eine Webadresse akzeptiert und eine annotierte Ansicht dieser Seite mit hervorgehobenen Barrierefreiheitsproblemen zurückgibt.</p> <ol> <li>Gehen Sie auf die <a href="https://wave.webaim.org/" class="external" target="_blank">Wave-Startseite</a>.</li> <li>Geben Sie die URL unseres <a href="https://mdn.github.io/learning-area/accessibility/html/bad-semantics.html" class="external" target="_blank">bad-semantics.html</a>-Beispiels in das Texteingabefeld oben auf der Seite ein. Drücken Sie dann Enter oder klicken/tippen Sie auf den Pfeil an der äußersten rechten Kante des Eingabefelds.</li> <li>Die Seite sollte mit einer Beschreibung der Barrierefreiheitsprobleme antworten. Klicken Sie auf die angezeigten Symbole, um weitere Informationen zu jedem der von Waves Bewertung ermittelten Probleme zu sehen.</li> </ol> <div class="notecard note"> <p><strong>Hinweis:</strong> Solche Tools sind nicht gut genug, um alle Ihre Barrierefreiheitsprobleme allein zu lösen. Sie benötigen eine Kombination aus diesen, Wissen und Erfahrung, Benutzer-Tests usw., um ein vollständiges Bild zu erhalten.</p> </div></div></section><section aria-labelledby="automatisierungswerkzeuge"><h3 id="automatisierungswerkzeuge"><a href="#automatisierungswerkzeuge">Automatisierungswerkzeuge</a></h3><div class="section-content"><p><a href="https://www.deque.com/axe/" class="external" target="_blank">Deque's aXe-Tool</a> geht ein Stück weiter als die oben genannten Prüftools. Wie die anderen überprüft es Seiten und gibt Barrierefreiheitserrors zurück. Seine nützlichste Form ist wahrscheinlich die Browser-Erweiterungen:</p> <ul> <li><a href="https://chromewebstore.google.com/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd" class="external" target="_blank">aXe für Chrome</a></li> <li><a href="https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/" class="external" target="_blank">aXe für Firefox</a></li> </ul> <p>Diese fügen den Browser-Entwicklertools einen Barrierefreiheitstab hinzu. Zum Beispiel haben wir die Firefox-Version installiert und damit unser <a href="https://mdn.github.io/learning-area/accessibility/html/bad-table.html" class="external" target="_blank">bad-table.html</a>-Beispiel überprüft. Wir erhielten die folgenden Ergebnisse:</p> <p> <img src="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility/axe-screenshot.png" alt="Ein Screenshot von Barrierefreiheitsproblemen, die vom Axe-Tool identifiziert wurden." width="800" height="580" loading="lazy"> </p> <p>aXe ist auch mit <code>npm</code> installierbar und kann in Aufgabenverwalter wie <a href="https://gruntjs.com/" class="external" target="_blank">Grunt</a> und <a href="https://gulpjs.com/" class="external" target="_blank">Gulp</a>, Automatisierungs-Frameworks wie <a href="https://www.selenium.dev/" class="external" target="_blank">Selenium</a> und <a href="https://cucumber.io/" class="external" target="_blank">Cucumber</a>, Unit-Testing-Frameworks wie <a href="https://jasmine.github.io/" class="external" target="_blank">Jasmine</a> und mehr integriert werden (siehe erneut die <a href="https://www.deque.com/axe/" class="external" target="_blank">Haupt-aXe-Seite</a> für Details).</p></div></section><section aria-labelledby="bildschirmleser"><h3 id="bildschirmleser"><a href="#bildschirmleser">Bildschirmleser</a></h3><div class="section-content"><p>Es lohnt sich auf jeden Fall, mit einem Bildschirmleser zu testen, um sich daran zu gewöhnen, wie stark sehbehinderte Menschen das Internet nutzen. Es gibt eine Reihe von Bildschirmlesern:</p> <ul> <li>Einige sind kostenpflichtige kommerzielle Produkte, wie <a href="https://www.freedomscientific.com/Products/software/JAWS/" class="external" target="_blank">JAWS</a> (Windows).</li> <li>Einige sind kostenfreie Produkte, wie <a href="https://www.nvaccess.org/" class="external" target="_blank">NVDA</a> (Windows), <a href="https://support.google.com/chromebook/answer/7031755" class="external" target="_blank">ChromeVox</a> (Chrome, Windows und macOS) und <a href="https://wiki.gnome.org/Projects/Orca" class="external" target="_blank">Orca</a> (Linux).</li> <li>Einige sind in das Betriebssystem integriert, wie <a href="https://www.apple.com/accessibility/vision/" class="external" target="_blank">VoiceOver</a> (macOS und iOS), <a href="https://support.google.com/chromebook/answer/7031755" class="external" target="_blank">ChromeVox</a> (auf Chromebooks) und <a href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback" class="external" target="_blank">TalkBack</a> (Android).</li> </ul> <p>Im Allgemeinen sind Bildschirmleser separate Apps, die auf dem Host-Betriebssystem ausgeführt werden und nicht nur Webseiten, sondern auch Text in anderen Apps lesen können. Das ist nicht immer der Fall (ChromeVox ist eine Browser-Erweiterung), aber normalerweise neigen Bildschirmleser dazu, auf leicht unterschiedliche Weise zu handeln und haben unterschiedliche Steuerungen, daher müssen Sie die Dokumentation für Ihren gewählten Bildschirmleser konsultieren, um alle Details zu erhalten - gesagt, dass sie alle im Grunde auf dieselbe Weise arbeiten.</p> <p>Lassen Sie uns einige Tests mit ein paar verschiedenen Bildschirmlesern durchgehen, um Ihnen eine allgemeine Vorstellung zu geben, wie sie funktionieren und wie man mit ihnen testet.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> WebAIMs <a href="https://webaim.org/techniques/screenreader/" class="external" target="_blank">Entwerfen für Bildschirmleser-Kompatibilität</a> bietet einige nützliche Informationen über die Nutzung von Bildschirmlesern und was am besten für Bildschirmleser funktioniert. Siehe auch <a href="https://webaim.org/projects/screenreadersurvey9/#used" class="external" target="_blank">Screen Reader User Survey #9 Results</a> für einige interessante Statistiken zur Bildschirmlesernutzung.</p> </div> <h4 id="voiceover">VoiceOver</h4> <p>VoiceOver (VO) ist kostenlos mit Ihrem Mac/iPhone/iPad enthalten, sodass es nützlich ist, auf dem Desktop/Mobilgerät zu testen, wenn Sie Apple-Produkte verwenden. Wir werden es auf macOS auf einem MacBook Pro testen.</p> <p>Um es einzuschalten, drücken Sie Cmd + F5. Wenn Sie VO noch nie verwendet haben, wird Ihnen ein Willkommensbildschirm angezeigt, auf dem Sie wählen können, ob Sie VO starten und ein wirklich nützliches Tutorial durchlaufen möchten, um zu lernen, wie Sie es verwenden. Um es wieder auszuschalten, drücken Sie erneut Cmd + F5.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Sie sollten das Tutorial mindestens einmal durchgehen — es ist ein wirklich nützlicher Weg, um VO zu lernen.</p> </div> <p>Wenn VO eingeschaltet ist, sieht die Anzeige größtenteils gleich aus, aber Sie sehen ein schwarzes Kästchen unten links auf dem Bildschirm, das Informationen darüber enthält, was VO derzeit ausgewählt hat. Zudem wird die aktuelle Auswahl hervorgehoben, mit einem schwarzen Rahmen — diese Hervorhebung wird als <strong>VO-Cursor</strong> bezeichnet.</p> <p> <img src="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility/voiceover.png" alt="Ein Beispielscreenshot, der einen Accessibility-Test mit VoiceOver auf der MSZ-Startseite (Mozilla Support) zeigt. Der untere linke Bereich des Bildes hebt die auf der Webseite ausgewählten Informationen hervor." width="800" height="386" loading="lazy"> </p> <p>Um VO zu verwenden, werden Sie häufig den "VO-Modifizierer" verwenden — dies ist eine Taste oder Tastenkombination, die Sie zusätzlich zu den tatsächlichen VO-Tastaturkürzeln drücken müssen, um sie funktionieren zu lassen. Die Verwendung eines Modifizierers wie diesem ist bei Bildschirmlesern üblich, um zu verhindern, dass ihre Befehle mit anderen Befehlen kollidieren. Im Fall von VO kann der Modifizierer entweder CapsLock oder Ctrl + Option sein.</p> <p>VO hat viele Tastaturbefehle, und wir werden nicht alle hier auflisten. Die grundlegendsten, die Sie für das Testen von Webseiten benötigen, sind in der folgenden Tabelle aufgeführt. In den Tastaturkürzeln bedeutet "VO" "der VoiceOver-Modifizierer".</p> <figure class="table-container"><table class="standard-table no-markdown"> <caption>Die gängigsten VoiceOver-Tastaturbefehle</caption> <thead> <tr> <th scope="col">Tastenkürzel</th> <th scope="col">Beschreibung</th> </tr> </thead> <tbody> <tr> <td>VO + Pfeiltasten</td> <td>Bewegen Sie den VO-Cursor nach oben, rechts, unten, links.</td> </tr> <tr> <td>VO + Leertaste</td> <td>Auswählen/Aktivieren von Elementen, die der VO-Cursor markiert hat. Dazu gehören auch im Rotor ausgewählte Elemente (siehe unten).</td> </tr> <tr> <td>VO + Umschalt + Pfeil nach unten</td> <td>In eine Gruppe von Elementen (wie eine HTML-Tabelle oder ein Formular usw.) wechseln. Innerhalb einer Gruppe können Sie sich herumbewegen und Elemente innerhalb dieser Gruppe normal auswählen.</td> </tr> <tr> <td>VO + Umschalt + Pfeil nach oben</td> <td>Aus einer Gruppe herauswechseln.</td> </tr> <tr> <td>VO + C</td> <td>(wenn in einer Tabelle) Lesen Sie die Kopfzeile der aktuellen Spalte.</td> </tr> <tr> <td>VO + R</td> <td>(wenn in einer Tabelle) Lesen Sie die Kopfzeile der aktuellen Zeile.</td> </tr> <tr> <td>VO + C + C (zwei Cs hintereinander)</td> <td>(wenn in einer Tabelle) Lesen Sie die gesamte aktuelle Spalte, einschließlich der Kopfzeile.</td> </tr> <tr> <td>VO + R + R (zwei Rs hintereinander)</td> <td>(wenn in einer Tabelle) Lesen Sie die gesamte aktuelle Zeile, einschließlich der Kopfzeilen, die zu jeder Zelle gehören.</td> </tr> <tr> <td>VO + Pfeiltaste links, VO + Pfeiltaste rechts</td> <td>(wenn in einigen horizontalen Optionen, wie einem Datum oder Zeitauswahl) Wechseln Sie zwischen Optionen.</td> </tr> <tr> <td>VO + Pfeiltaste nach oben, VO + Pfeiltaste nach unten</td> <td>(wenn in einigen horizontalen Optionen, wie einem Datum oder Zeitauswahl) Ändern Sie die aktuelle Option.</td> </tr> <tr> <td>VO + U</td> <td>Verwenden Sie den Rotor, der Listen von Überschriften, Links, Formularsteuerungen usw. zur einfachen Navigation anzeigt.</td> </tr> <tr> <td>VO + Pfeiltaste links, VO + Pfeiltaste rechts</td> <td>(wenn im Rotor) Wechseln Sie zwischen verschiedenen Listen im Rotor.</td> </tr> <tr> <td>VO + Pfeiltaste hoch, VO + Pfeiltaste runter</td> <td>(wenn im Rotor) Wechseln Sie zwischen verschiedenen Elementen in der aktuellen Rotorliste.</td> </tr> <tr> <td>Esc</td> <td>(wenn im Rotor) Rotor verlassen.</td> </tr> <tr> <td>Strg</td> <td>(wenn VO spricht) Sprache pausieren/fortsetzen.</td> </tr> <tr> <td>VO + Z</td> <td>Die letzte Sprachaufforderung neu starten.</td> </tr> <tr> <td>VO + D</td> <td>In das Mac-Dock gehen, damit Sie dort Apps auswählen können.</td> </tr> </tbody> </table></figure> <p>Dies scheint eine Menge an Befehlen zu sein, aber es ist nicht so schlimm, wenn man sich daran gewöhnt, und VO gibt Ihnen regelmäßig Erinnerungen, welche Befehle in bestimmten Situationen zu verwenden sind. Spielen Sie jetzt mit VO herum; Sie können dann einige unserer Beispiele im Abschnitt <a href="#bildschirmleser-tests">Bildschirmleser-Tests</a> ausprobieren.</p> <h4 id="nvda">NVDA</h4> <p>NVDA ist nur für Windows und Sie müssen es installieren.</p> <ol> <li>Laden Sie es von <a href="https://www.nvaccess.org/" class="external" target="_blank">nvaccess.org</a> herunter. Sie können wählen, ob sie eine Spende leisten oder es kostenlos herunterladen möchten; Sie müssen zudem Ihre E-Mail-Adresse angeben, bevor Sie es herunterladen können.</li> <li>Sobald es heruntergeladen ist, installieren Sie es — doppelklicken Sie auf das Installationsprogramm, akzeptieren Sie die Lizenz und folgen Sie den Aufforderungen.</li> <li>Um NVDA zu starten, doppelklicken Sie auf die Programmdatei/Verknüpfung oder verwenden Sie das Tastenkürzel Strg + Alt + N. Bei Start sehen Sie den NVDA-Willkommensdialog. Hier können Sie aus ein paar Optionen wählen und dann die <em>OK</em>-Taste drücken, um zu beginnen.</li> </ol> <p>NVDA ist jetzt auf Ihrem Computer aktiv.</p> <p>Um NVDA zu verwenden, werden Sie den "NVDA Modifizierer" häufig verwenden — dies ist eine Taste, die Sie zusätzlich zu den tatsächlichen NVDA-Tastaturkürzeln drücken müssen, um sie funktioneren zu lassen. Die Verwendung eines Modifizierers wie diesem ist bei Bildschirmlesern üblich, um zu verhindern, dass ihre Befehle mit anderen Befehlen kollidieren. Im Fall von NVDA kann der Modifizierer entweder Einfügen (standardmäßig) oder CapsLock sein (kann durch Aktivieren des ersten Kontrollkästchens im NVDA-Willkommensdialog gewählt werden, bevor Sie <em>OK</em> drücken).</p> <div class="notecard note"> <p><strong>Hinweis:</strong> NVDA ist subtiler als VoiceOver in Bezug darauf, wie es markiert, wo es sich befindet und was es tut. Beim Durchsuchen von Überschriften, Listen usw. werden Elemente, auf denen Sie ausgewählt sind, im Allgemeinen mit einem subtilen Umriss hervorgehoben, aber das ist nicht immer bei allen Dingen der Fall. Wenn Sie sich komplett verirren, können Sie Strg + F5 drücken, um die aktuelle Seite zu aktualisieren und von oben neu zu beginnen.</p> </div> <p>NVDA hat viele Tastaturbefehle, und wir werden nicht alle hier auflisten. Die grundlegendsten, die Sie für das Testen von Webseiten benötigen, sind in der folgenden Tabelle aufgeführt. In den Tastaturkürzeln bedeutet "NVDA" "der NVDA-Modifizierer".</p> <figure class="table-container"><table class="standard-table no-markdown"> <caption>Die gängigsten NVDA-Tastaturbefehle</caption> <thead> <tr> <th scope="col">Tastenkürzel</th> <th scope="col">Beschreibung</th> </tr> </thead> <tbody> <tr> <td>NVDA + Q</td> <td>Schalten Sie NVDA wieder aus, nachdem Sie es gestartet haben.</td> </tr> <tr> <td>NVDA + Pfeiltaste hoch</td> <td>Aktuelle Zeile lesen.</td> </tr> <tr> <td>NVDA + Pfeiltaste runter</td> <td>Lesen Sie ab der aktuellen Position.</td> </tr> <tr> <td>Pfeiltaste hoch und Pfeiltaste runter oder Umschalt + Tab und Tab</td> <td>Wechseln Sie zum vorherigen/nächsten Element auf der Seite und lesen Sie es.</td> </tr> <tr> <td>Pfeiltaste links und Pfeiltaste rechts</td> <td>Wechseln Sie zum vorherigen/nächsten Zeichen im aktuellen Element und lesen Sie es.</td> </tr> <tr> <td>Umschalt + H und H</td> <td>Wechseln Sie zur vorherigen/nächsten Überschrift und lesen Sie sie.</td> </tr> <tr> <td>Umschalt + K und K</td> <td>Wechseln Sie zum vorherigen/nächsten Link und lesen Sie ihn.</td> </tr> <tr> <td>Umschalt + D und D</td> <td> Wechseln Sie zum vorherigen/nächsten Dokument-Landmark (z.B. <code><nav></code>) und lesen Sie ihn. </td> </tr> <tr> <td>Umschalt + 1–6 und 1–6</td> <td>Wechseln Sie zur vorherigen/nächsten Überschrift (Level 1–6) und lesen Sie sie.</td> </tr> <tr> <td>Umschalt + F und F</td> <td>Gehen Sie zurück/vorwärts zur vorherigen/nächsten Formulareingabe und konzentrieren Sie sich darauf.</td> </tr> <tr> <td>Umschalt + T und T</td> <td>Wechseln Sie zur vorherigen/nächsten Datentabelle und konzentrieren Sie sich darauf.</td> </tr> <tr> <td>Umschalt + B und B</td> <td>Wechseln Sie zur vorherigen/nächsten Schaltfläche und lesen Sie ihr Label.</td> </tr> <tr> <td>Umschalt + L und L</td> <td>Wechseln Sie zur vorherigen/nächsten Liste und lesen Sie ihre erste Listeneinheit.</td> </tr> <tr> <td>Umschalt + I und I</td> <td>Wechseln Sie zur vorherigen/nächsten Listeneinheit und lesen Sie sie.</td> </tr> <tr> <td>Eingabetaste/Return</td> <td>(wenn ein Link/eine Schaltfläche oder ein anderes aktivierbares Element ausgewählt ist) Aktivieren Sie das Element.</td> </tr> <tr> <td>NVDA + Leertaste</td> <td> (wenn ein Formular ausgewählt ist) Betreten Sie das Formular, damit einzelne Elemente ausgewählt werden können, oder verlassen Sie das Formular, wenn Sie bereits in ihm sind. </td> </tr> <tr> <td>Umschalt Tab und Tab</td> <td>(wenn im Formular) Wechseln Sie zwischen Formulareingaben.</td> </tr> <tr> <td>Pfeiltaste hoch und Pfeiltaste runter</td> <td>(wenn im Formular) Ändern Sie die Formulareingabewerte (im Fall von Boxen wie: auswählen Boxen).</td> </tr> <tr> <td>Leertaste</td> <td>(wenn im Formular) Wählen Sie den ausgewählten Wert aus.</td> </tr> <tr> <td>Strg + Alt + Pfeiltasten</td> <td>(wenn eine Tabelle ausgewählt ist) Wechseln Sie zwischen den Zellen der Tabelle.</td> </tr> </tbody> </table></figure> <h4 id="bildschirmleser-tests">Bildschirmleser-Tests</h4> <p>Jetzt, da Sie sich daran gewöhnt haben, einen Bildschirmleser zu verwenden, möchten wir, dass Sie ihn verwenden, um einige schnelle Barrierefreiheitstests durchzuführen, um eine Vorstellung davon zu bekommen, wie Bildschirmleser mit guten und schlechten Webseitenfeatures umgehen:</p> <ul> <li>Schauen Sie sich <a href="https://mdn.github.io/learning-area/accessibility/html/good-semantics.html" class="external" target="_blank">good-semantics.html</a> an und beachten Sie, wie die Überschriften vom Bildschirmleser gefunden werden und für die Navigation verfügbar sind. Schauen Sie sich nun <a href="https://mdn.github.io/learning-area/accessibility/html/bad-semantics.html" class="external" target="_blank">bad-semantics.html</a> an und beachten Sie, wie der Bildschirmleser keine dieser Informationen erhält. Stellen Sie sich vor, wie ärgerlich das wäre, wenn Sie versuchen, eine wirklich lange Textseite zu navigieren.</li> <li>Schauen Sie sich <a href="https://mdn.github.io/learning-area/accessibility/html/good-links.html" class="external" target="_blank">good-links.html</a> an und bemerken Sie, wie sie im Kontext Sinn ergeben. Dies ist nicht der Fall bei <a href="https://mdn.github.io/learning-area/accessibility/html/bad-links.html" class="external" target="_blank">bad-links.html</a> — sie sind alle nur "hier klicken".</li> <li>Schauen Sie sich <a href="https://mdn.github.io/learning-area/accessibility/html/good-form.html" class="external" target="_blank">good-form.html</a> an und bemerken Sie, wie die Formulareingaben durch ihre Beschriftungen beschrieben werden, weil wir <code><label></code>-Elemente richtig verwendet haben. Bei <a href="https://mdn.github.io/learning-area/accessibility/html/bad-form.html" class="external" target="_blank">bad-form.html</a> erhalten sie eine unhilfreiche Bezeichnung wie "leer".</li> <li>Sehen Sie sich unser <a href="https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html" class="external" target="_blank">punk-bands-complete.html</a>-Beispiel an und sehen Sie, wie der Bildschirmleser in der Lage ist, Spalten und Zeilen von Inhalten zu verknüpfen und sie zusammen vorzulesen, weil wir Kopfzeilen richtig definiert haben. In <a href="https://mdn.github.io/learning-area/accessibility/html/bad-table.html" class="external" target="_blank">bad-table.html</a> können keine Zellen assoziiert werden. Beachten Sie, dass NVDA sich leicht merkwürdig verhält, wenn Sie haben nur eine einzelne Tabelle auf einer Seite; Sie könnten die <a href="https://webaim.org/articles/nvda/tables.htm" class="external" target="_blank">Tabelle-Testseite von WebAIM</a> stattdessen ausprobieren.</li> <li>Werfen Sie einen Blick auf das <a href="https://www.freedomscientific.com/SurfsUp/AriaLiveRegions.htm" class="external" target="_blank">WAI-ARIA Live Regions Beispiel</a>, das wir zuvor gesehen haben, und bemerken Sie, wie der Bildschirmleser den ständig aktualisierten Abschnitt vorliest, während er aktualisiert wird.</li> </ul></div></section><section aria-labelledby="benutzer-tests"><h3 id="benutzer-tests"><a href="#benutzer-tests">Benutzer-Tests</a></h3><div class="section-content"><p>Wie bereits erwähnt, können Sie sich nicht allein auf automatisierte Tools verlassen, um Barrierefreiheitsprobleme auf Ihrer Seite zu bestimmen. Es wird empfohlen, dass, wenn Sie Ihren Testplan erstellen, Sie – soweit möglich – einige Barrierefreiheits-Benutzergruppen einbeziehen (siehe unseren <a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#user_testing">Benutzer-Test</a> Abschnitt im vorherigen Kurs für mehr Kontext). Versuchen Sie, einige Benutzer von Bildschirmlesern, einige Benutzer, die nur die Tastatur verwenden, einige nicht hörende Benutzer und vielleicht andere Gruppen einzubeziehen, die Ihrer Anforderungen entsprechen.</p></div></section><section aria-labelledby="checkliste_für_barrierefreiheitstests"><h2 id="checkliste_für_barrierefreiheitstests"><a href="#checkliste_für_barrierefreiheitstests">Checkliste für Barrierefreiheitstests</a></h2><div class="section-content"><p>Die folgende Liste bietet Ihnen eine Checkliste, der Sie folgen sollten, um sicherzustellen, dass Sie die empfohlenen Barrierefreiheitstests für Ihr Projekt durchgeführt haben:</p> <ol> <li>Stellen Sie sicher, dass Ihr HTML so semantisch korrekt wie möglich ist. <a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#validation">Validierung</a> ist ein guter Anfang, ebenso wie die Verwendung eines <a href="#pr%C3%BCftools">Prüftools</a>.</li> <li>Überprüfen Sie, ob Ihr Inhalt Sinn ergibt, wenn das CSS ausgeschaltet ist.</li> <li>Stellen Sie sicher, dass Ihre Funktionalität <a href="#nutzung_nativer_tastaturzug%C3%A4nglichkeit">tastaturzugänglich</a> ist. Testen Sie mit Tab, Return/Enter usw.</li> <li>Stellen Sie sicher, dass Ihr nicht-Text-Inhalt über <a href="#textalternativen">Textalternativen</a> verfügt. Ein <a href="#pr%C3%BCftools">Prüftool</a> ist gut, um solche Probleme zu erkennen.</li> <li>Stellen Sie sicher, dass der <a href="#farbe_und_farbkontrast">Farbkontrast</a> Ihrer Website akzeptabel ist, indem Sie ein geeignetes Prüfwerkzeug verwenden.</li> <li>Stellen Sie sicher, dass der <a href="#ausblenden_von_inhalten">versteckte Inhalt</a> von Bildschirmlesern sichtbar ist.</li> <li>Stellen Sie sicher, dass die Funktionalität ohne JavaScript verwendbar ist, wo immer möglich.</li> <li>Verwenden Sie ARIA, um die Barrierefreiheit gegebenenfalls zu verbessern.</li> <li>Führen Sie Ihre Website mit einem <a href="#pr%C3%BCftools">Prüftool</a>.</li> <li>Testen Sie es mit einem Bildschirmleser.</li> <li>Fügen Sie eine Barrierefreiheitspolitik/-erklärung irgendwo auffindbar auf Ihrer Seite ein, um zu sagen, was Sie getan haben.</li> </ol></div></section><section aria-labelledby="hilfe_finden"><h2 id="hilfe_finden"><a href="#hilfe_finden">Hilfe finden</a></h2><div class="section-content"><p>Es gibt viele andere Probleme, die Sie bei der Barrierefreiheit antreffen werden; das Wichtigste, das Sie wirklich wissen müssen, ist, wie Sie online Antworten finden können. Konsultieren Sie den Abschnitt <a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#finding_help">Hilfe finden</a> des HTML- und CSS-Artikels für einige gute Hinweise.</p></div></section><section aria-labelledby="zusammenfassung"><h2 id="zusammenfassung"><a href="#zusammenfassung">Zusammenfassung</a></h2><div class="section-content"><p>Hoffentlich hat Ihnen dieser Artikel ein gutes Fundament in den Hauptproblemen der Barrierefreiheit geliefert, die Sie möglicherweise antreffen, und wie man sie testet und überwindet.</p> <p>Im nächsten Artikel werden wir die Feature-Erkennung näher betrachten.</p><ul class="prev-next"> <li><a class="button secondary" href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript"><span class="button-wrap"> Zurück </span></a></li> <li><a class="button secondary" href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing"><span class="button-wrap"> Übersicht: Cross-Browser-Testing</span></a></li> <li><a class="button secondary" href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection"><span class="button-wrap"> Weiter </span></a></li> </ul></div></section></article><aside class="article-footer"><div class="article-footer-inner"><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" width="162" height="162" viewBox="0 0 162 162" fill="none" role="none"><mask id="b" fill="#fff"><path d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z"></path></mask><path stroke="url(#a)" stroke-dasharray="6, 6" stroke-width="2" d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z" mask="url(#b)" style="stroke:url(#a)" transform="translate(-63.992 -25.587)"></path><ellipse cx="8.066" cy="111.597" fill="var(--background-tertiary)" rx="53.677" ry="53.699" transform="matrix(.71707 -.697 .7243 .6895 0 0)"></ellipse><g clip-path="url(#c)" transform="translate(-63.992 -25.587)"><path fill="#9abff5" d="m144.256 137.379 32.906 12.434a4.41 4.41 0 0 1 2.559 5.667l-9.326 24.679a4.41 4.41 0 0 1-5.667 2.559l-8.226-3.108-2.332 6.17c-.466 1.233-.375 1.883-1.609 1.417l-2.253-.527c-.411-.155-.95-.594-1.206-1.161l-4.734-10.484-12.545-4.741a4.41 4.41 0 0 1-2.559-5.667l9.325-24.679a4.41 4.41 0 0 1 5.667-2.559m9.961 29.617 8.227 3.108 3.264-8.638-.498-6.768-4.113-1.555.548 7.258-4.319-1.632zm-12.339-4.663 8.226 3.108 3.264-8.637-.498-6.769-4.113-1.554.548 7.257-4.319-1.632z"></path></g><g clip-path="url(#d)" transform="translate(-63.992 -25.587)"><path fill="#81b0f3" d="M135.35 60.136 86.67 41.654c-3.346-1.27-7.124.428-8.394 3.775L64.414 81.938c-1.27 3.347.428 7.125 3.774 8.395l12.17 4.62-3.465 9.128c-.693 1.826-1.432 2.457.394 3.15l3.014 1.625c.609.231 1.637.274 2.477-.104l15.53-6.983 18.56 7.047c3.346 1.27 7.124-.428 8.395-3.775l13.862-36.51c1.27-3.346-.428-7.124-3.775-8.395M95.261 83.207l-12.17-4.62 4.852-12.779 7.19-7.017 6.085 2.31-7.725 7.51 6.389 2.426zm18.255 6.93-12.17-4.62 4.852-12.778 7.189-7.017 6.085 2.31-7.725 7.51 6.39 2.426z"></path></g><defs><clipPath id="c"><path fill="#fff" d="m198.638 146.586-65.056-24.583-24.583 65.057 65.056 24.582z"></path></clipPath><clipPath id="d"><path fill="#fff" d="m66.438 14.055 96.242 36.54-36.54 96.243-96.243-36.54z"></path></clipPath><linearGradient id="a" x1="97.203" x2="199.995" y1="47.04" y2="152.793" gradientUnits="userSpaceOnUse"><stop stop-color="#086DFC"></stop><stop offset="0.246" stop-color="#2C81FA"></stop><stop offset="0.516" stop-color="#5497F8"></stop><stop offset="0.821" stop-color="#80B0F6"></stop><stop offset="1" stop-color="#9ABFF5"></stop></linearGradient></defs></svg></div><h2>MDN-Feedback-Box</h2><fieldset class="feedback"><label>War diese Übersetzung hilfreich?</label><div class="button-container"><button type="button" class="button primary has-icon yes"><span class="button-wrap"><span class="icon icon-thumbs-up "></span>Ja</span></button><button type="button" class="button primary has-icon no"><span class="button-wrap"><span class="icon icon-thumbs-down "></span>Nein</span></button></div></fieldset><p class="last-modified-date">Diese Seite wurde automatisch aus dem Englischen übersetzt.</p><div id="on-github" class="on-github"><a href="https://github.com/mdn/translated-content-de/blob/main/files/de/learn/tools_and_testing/cross_browser_testing/accessibility/index.md?plain=1" title="Folder: de/learn/tools_and_testing/cross_browser_testing/accessibility (Opens in a new tab)" target="_blank" rel="noopener noreferrer">Übersetzung auf GitHub anzeigen</a> • <a href="https://github.com/mdn/translated-content-de/issues/new?template=page-report-de.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fde%2Fdocs%2FLearn%2FTools_and_testing%2FCross_browser_testing%2FAccessibility&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60de%2Flearn%2Ftools_and_testing%2Fcross_browser_testing%2Faccessibility%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fde%2Fdocs%2FLearn%2FTools_and_testing%2FCross_browser_testing%2FAccessibility%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content-de%2Fblob%2Fmain%2Ffiles%2Fde%2Flearn%2Ftools_and_testing%2Fcross_browser_testing%2Faccessibility%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content-de%2Fcommit%2Fnull%0A*+Document+last+modified%3A+*date+not+known*%0A%0A%3C%2Fdetails%3E" title="This will take you to GitHub to file a new issue." target="_blank" rel="noopener noreferrer">Fehler mit dieser Übersetzung melden</a></div></div></aside></main></div></div><footer id="nav-footer" class="page-footer"><div class="page-footer-grid"><div class="page-footer-logo-col"><a href="/" class="mdn-footer-logo" aria-label="MDN homepage"><svg width="48" height="17" viewBox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mdn-footer-logo-svg">MDN logo</title><path d="M20.04 16.512H15.504V10.416C15.504 9.488 15.344 8.824 15.024 8.424C14.72 8.024 14.264 7.824 13.656 7.824C12.92 7.824 12.384 8.064 12.048 8.544C11.728 9.024 11.568 9.64 11.568 10.392V14.184H13.008V16.512H8.472V10.416C8.472 9.488 8.312 8.824 7.992 8.424C7.688 8.024 7.232 7.824 6.624 7.824C5.872 7.824 5.336 8.064 5.016 8.544C4.696 9.024 4.536 9.64 4.536 10.392V14.184H6.6V16.512H0V14.184H1.44V8.04H0.024V5.688H4.536V7.32C5.224 6.088 6.32 5.472 7.824 5.472C8.608 5.472 9.328 5.664 9.984 6.048C10.64 6.432 11.096 7.016 11.352 7.8C11.992 6.248 13.168 5.472 14.88 5.472C15.856 5.472 16.72 5.776 17.472 6.384C18.224 6.992 18.6 7.936 18.6 9.216V14.184H20.04V16.512Z" fill="currentColor"></path><path d="M33.6714 16.512H29.1354V14.496C28.8314 15.12 28.3834 15.656 27.7914 16.104C27.1994 16.536 26.4154 16.752 25.4394 16.752C24.0154 16.752 22.8954 16.264 22.0794 15.288C21.2634 14.312 20.8554 12.984 20.8554 11.304C20.8554 9.688 21.2554 8.312 22.0554 7.176C22.8554 6.04 24.0634 5.472 25.6794 5.472C26.5594 5.472 27.2794 5.648 27.8394 6C28.3994 6.352 28.8314 6.8 29.1354 7.344V2.352H26.9754V0H32.2314V14.184H33.6714V16.512ZM29.1354 11.04V10.776C29.1354 9.88 28.8954 9.184 28.4154 8.688C27.9514 8.176 27.3674 7.92 26.6634 7.92C25.9754 7.92 25.3674 8.176 24.8394 8.688C24.3274 9.2 24.0714 10.008 24.0714 11.112C24.0714 12.152 24.3114 12.944 24.7914 13.488C25.2714 14.032 25.8394 14.304 26.4954 14.304C27.3114 14.304 27.9514 13.96 28.4154 13.272C28.8954 12.584 29.1354 11.84 29.1354 11.04Z" fill="currentColor"></path><path d="M47.9589 16.512H41.9829V14.184H43.4229V10.416C43.4229 9.488 43.2629 8.824 42.9429 8.424C42.6389 8.024 42.1829 7.824 41.5749 7.824C40.8389 7.824 40.2709 8.056 39.8709 8.52C39.4709 8.968 39.2629 9.56 39.2469 10.296V14.184H40.6869V16.512H34.7109V14.184H36.1509V8.04H34.5909V5.688H39.2469V7.344C39.9669 6.096 41.1269 5.472 42.7269 5.472C43.7509 5.472 44.6389 5.776 45.3909 6.384C46.1429 6.992 46.5189 7.936 46.5189 9.216V14.184H47.9589V16.512Z" fill="currentColor"></path></svg></a><p>Your blueprint for a better internet.</p><ul class="social-icons"><li><a href="https://mozilla.social/@mdn" target="_blank" rel="me noopener noreferrer"><span class="icon icon-mastodon"></span><span class="visually-hidden">MDN on Mastodon</span></a></li><li><a href="https://twitter.com/mozdevnet" target="_blank" rel="noopener noreferrer"><span class="icon icon-twitter-x"></span><span class="visually-hidden">MDN on X (formerly Twitter)</span></a></li><li><a href="https://github.com/mdn/" target="_blank" rel="noopener noreferrer"><span class="icon icon-github-mark-small"></span><span class="visually-hidden">MDN on GitHub</span></a></li><li><a href="/en-US/blog/rss.xml" target="_blank"><span class="icon icon-feed"></span><span class="visually-hidden">MDN Blog RSS Feed</span></a></li></ul></div><div class="page-footer-nav-col-1"><h2 class="footer-nav-heading">MDN</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a href="/en-US/about">About</a></li><li class="footer-nav-item"><a href="/en-US/blog/">Blog</a></li><li class="footer-nav-item"><a href="https://www.mozilla.org/en-US/careers/listings/?team=ProdOps" target="_blank" rel="noopener noreferrer">Careers</a></li><li class="footer-nav-item"><a href="/en-US/advertising">Advertise with us</a></li></ul></div><div class="page-footer-nav-col-2"><h2 class="footer-nav-heading">Support</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="https://support.mozilla.org/products/mdn-plus">Product help</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/de/docs/MDN/Community/Issues">Report an issue</a></li></ul></div><div class="page-footer-nav-col-3"><h2 class="footer-nav-heading">Our communities</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/community">MDN Community</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="https://discourse.mozilla.org/c/mdn/236" target="_blank" rel="noopener noreferrer">MDN Forum</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/discord" target="_blank" rel="noopener noreferrer">MDN Chat</a></li></ul></div><div class="page-footer-nav-col-4"><h2 class="footer-nav-heading">Developers</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/de/docs/Web">Web Technologies</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/de/docs/Learn">Learn Web Development</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/de/plus">MDN Plus</a></li><li class="footer-nav-item"><a href="https://hacks.mozilla.org/" target="_blank" rel="noopener noreferrer">Hacks Blog</a></li></ul></div><div class="page-footer-moz"><a href="https://www.mozilla.org/" class="footer-moz-logo-link" target="_blank" rel="noopener noreferrer"><svg width="112" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mozilla-footer-logo-svg">Mozilla logo</title><path d="M41.753 14.218c-2.048 0-3.324 1.522-3.324 4.157 0 2.423 1.119 4.286 3.29 4.286 2.082 0 3.447-1.678 3.447-4.347 0-2.826-1.522-4.096-3.413-4.096Zm54.89 7.044c0 .901.437 1.618 1.645 1.618 1.427 0 2.949-1.024 3.044-3.352-.649-.095-1.365-.185-2.02-.185-1.426-.005-2.668.397-2.668 1.92Z" fill="currentColor"></path><path d="M0 0v32h111.908V0H0Zm32.56 25.426h-5.87v-7.884c0-2.423-.806-3.352-2.39-3.352-1.924 0-2.702 1.365-2.702 3.324v4.868h1.864v3.044h-5.864v-7.884c0-2.423-.806-3.352-2.39-3.352-1.924 0-2.702 1.365-2.702 3.324v4.868h2.669v3.044H6.642v-3.044h1.863v-7.918H6.642V11.42h5.864v2.11c.839-1.489 2.3-2.39 4.252-2.39 2.02 0 3.878.963 4.566 3.01.778-1.862 2.361-3.01 4.566-3.01 2.512 0 4.812 1.522 4.812 4.84v6.402h1.863v3.044h-.005Zm9.036.307c-4.314 0-7.296-2.635-7.296-7.106 0-4.096 2.484-7.481 7.514-7.481s7.481 3.38 7.481 7.29c0 4.472-3.228 7.297-7.699 7.297Zm22.578-.307H51.942l-.403-2.11 7.7-8.846h-4.376l-.621 2.17-2.888-.313.498-4.907h12.294l.313 2.11-7.767 8.852h4.533l.654-2.172 3.167.308-.872 4.908Zm7.99 0h-4.191v-5.03h4.19v5.03Zm0-8.976h-4.191v-5.03h4.19v5.03Zm2.618 8.976 6.054-21.358h3.945l-6.054 21.358h-3.945Zm8.136 0 6.048-21.358h3.945l-6.054 21.358h-3.939Zm21.486.307c-1.863 0-2.887-1.085-3.072-2.792-.805 1.427-2.232 2.792-4.498 2.792-2.02 0-4.314-1.085-4.314-4.006 0-3.447 3.323-4.253 6.518-4.253.778 0 1.584.034 2.3.124v-.465c0-1.427-.034-3.133-2.3-3.133-.84 0-1.488.061-2.143.402l-.453 1.578-3.195-.34.549-3.224c2.45-.996 3.692-1.27 5.992-1.27 3.01 0 5.556 1.55 5.556 4.75v6.083c0 .805.314 1.085.963 1.085.184 0 .375-.034.587-.095l.034 2.11a5.432 5.432 0 0 1-2.524.654Z" fill="currentColor"></path></svg></a><ul class="footer-moz-list"><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Website Privacy Notice</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/#cookies" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Cookies</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/legal/terms/mozilla" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Legal</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/governance/policies/participation/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Community Participation Guidelines</a></li></ul></div><div class="page-footer-legal"><p id="license" class="page-footer-legal-text">Visit <a href="https://www.mozilla.org" target="_blank" rel="noopener noreferrer">Mozilla Corporation’s</a> not-for-profit parent, the <a target="_blank" rel="noopener noreferrer" href="https://foundation.mozilla.org/">Mozilla Foundation</a>.<br/>Portions of this content are ©1998–2024 by individual mozilla.org contributors. Content available under <a href="/de/docs/MDN/Writing_guidelines/Attrib_copyright_license">a Creative Commons license</a>.</p></div></div></footer></div><script type="application/json" id="hydration">{"url":"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility","doc":{"isMarkdown":true,"isTranslated":true,"isActive":true,"flaws":{},"title":"Umgang mit häufigen Problemen der Barrierefreiheit","mdn_url":"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility","locale":"de","native":"Deutsch","sidebarHTML":"<ol><li class=\"section\"><a href=\"/de/docs/Learn/Getting_started_with_the_web\">Komplette Anfänger beginnen hier!</a></li><li><details><summary>Erste Schritte mit dem Web</summary><ol><li><a href=\"/de/docs/Learn/Getting_started_with_the_web\">Einführung ins Web</a></li><li><a href=\"/de/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">Installation von grundlegender Software</a></li><li><a href=\"/de/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like\">Wie wird Ihre Website aussehen?</a></li><li><a href=\"/de/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">Umgang mit Dateien</a></li><li><a href=\"/de/docs/Learn/Getting_started_with_the_web/HTML_basics\">HTML-Grundlagen</a></li><li><a href=\"/de/docs/Learn/Getting_started_with_the_web/CSS_basics\">CSS-Grundlagen</a></li><li><a href=\"/de/docs/Learn/Getting_started_with_the_web/JavaScript_basics\">JavaScript-Grundlagen</a></li><li><a href=\"/de/docs/Learn/Getting_started_with_the_web/Publishing_your_website\">Veröffentlichung Ihrer Website</a></li><li><a href=\"/de/docs/Learn/Getting_started_with_the_web/How_the_Web_works\">Wie das Web funktioniert</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/HTML\">HTML — Strukturierung des Webs</a></li><li><details><summary>Einführung in HTML</summary><ol><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML\">Einführung in HTML</a></li><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started\">Erste Schritte mit HTML</a></li><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML\">Was ist im Kopfbereich? Metadaten in HTML</a></li><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals\">Grundlagen des HTML-Textes</a></li><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks\">Erstellen von Hyperlinks</a></li><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting\">Erweiterte Textformatierung</a></li><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure\">Struktur eines Dokuments und einer Website</a></li><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML\">Debugging HTML</a></li><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter\">Markierung eines Briefes</a></li><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content\">Die Strukturierung einer Seite mit Inhalt</a></li></ol></details></li><li><details><summary>Multimedia und Einbettung</summary><ol><li><a href=\"/de/docs/Learn/HTML/Multimedia_and_embedding\">Multimedia und Einbettung</a></li><li><a href=\"/de/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML\">Bilder in HTML</a></li><li><a href=\"/de/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content\">Video- und Audioinhalte</a></li><li><a href=\"/de/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies\">Von Objekt zu iframe — andere Einbettungstechnologien</a></li><li><a href=\"/de/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web\">Vektorgrafiken zum Web hinzufügen</a></li><li><a href=\"/de/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images\">Responsive Images</a></li><li><a href=\"/de/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page\">Mozilla Splash-Seite</a></li></ol></details></li><li><details><summary>HTML-Tabellen</summary><ol><li><a href=\"/de/docs/Learn/HTML/Tables\">HTML-Tabellen</a></li><li><a href=\"/de/docs/Learn/HTML/Tables/Basics\">HTML Table Grundlagen</a></li><li><a href=\"/de/docs/Learn/HTML/Tables/Advanced\">Erweiterte Funktionen und Barrierefreiheit von HTML-Tabellen</a></li><li><a href=\"/de/docs/Learn/HTML/Tables/Structuring_planet_data\">Strukturierung von Planeten-Daten</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/CSS\">CSS — Gestaltung des Webs</a></li><li><details><summary>CSS erste Schritte</summary><ol><li><a href=\"/de/docs/Learn/CSS/First_steps\">Erste Schritte mit CSS</a></li><li><a href=\"/de/docs/Learn/CSS/First_steps/What_is_CSS\">Was ist CSS?</a></li><li><a href=\"/de/docs/Learn/CSS/First_steps/Getting_started\">Einstieg in CSS</a></li><li><a href=\"/de/docs/Learn/CSS/First_steps/How_CSS_is_structured\">Wie CSS strukturiert ist</a></li><li><a href=\"/de/docs/Learn/CSS/First_steps/How_CSS_works\">Wie CSS funktioniert</a></li><li><a href=\"/de/docs/Learn/CSS/First_steps/Styling_a_biography_page\">Eine Biografieseite stylen</a></li></ol></details></li><li><details><summary>CSS-Bausteine</summary><ol><li><a href=\"/de/docs/Learn/CSS/Building_blocks\">CSS-Grundbausteine</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Selectors\">CSS-Selektoren</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors\">Typ-, Klassen- und ID-Selektoren</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors\">Attributselektoren</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements\">Pseudo-Klassen und Pseudo-Elemente</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Selectors/Combinators\">Kombinatoren</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance\">Kaskade, Spezifität und Vererbung</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Cascade_layers\">Kaskadenschichten</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/The_box_model\">Das Boxmodell</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders\">Hintergründe und Rahmen</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Handling_different_text_directions\">Umgang mit unterschiedlichen Textausrichtungen</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Overflowing_content\">Überlaufender Inhalt</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Values_and_units\">CSS-Werte und Einheiten</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS\">Größe von Elementen in CSS</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Images_media_form_elements\">Bilder, Medien und Formularelemente</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Styling_tables\">Tabellen stylen</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Advanced_styling_effects\">Erweiterte Styling-Effekte</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Debugging_CSS\">Debugging CSS</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Organizing\">Organisieren Ihres CSS</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension\">Grundlegendes CSS-Verständnis</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper\">Erstellen von stilvollem Briefpapier</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/A_cool_looking_box\">Eine cool aussehende Box</a></li></ol></details></li><li><details><summary>Textgestaltung</summary><ol><li><a href=\"/de/docs/Learn/CSS/Styling_text\">CSS Textgestaltung</a></li><li><a href=\"/de/docs/Learn/CSS/Styling_text/Fundamentals\">Grundlegende Text- und Schriftgestaltung</a></li><li><a href=\"/de/docs/Learn/CSS/Styling_text/Styling_lists\">Listen stilisieren</a></li><li><a href=\"/de/docs/Learn/CSS/Styling_text/Styling_links\">Styling von Links</a></li><li><a href=\"/de/docs/Learn/CSS/Styling_text/Web_fonts\">Web-Fonts</a></li><li><a href=\"/de/docs/Learn/CSS/Styling_text/Typesetting_a_homepage\">Setzen einer Community-Schul-Startseite</a></li></ol></details></li><li><details><summary>CSS-Layout</summary><ol><li><a href=\"/de/docs/Learn/CSS/CSS_layout\">CSS-Layout</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Introduction\">Einführung in CSS Layout</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Normal_Flow\">Normaler Fluss</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Flexbox\">Flexbox</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Grids\">Raster</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Floats\">Floats</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Positioning\">Positioning</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Multiple-column_Layout\">Mehrspaltiges Layout</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Responsive_Design\">Responsives Design</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Media_queries\">Einsteigerleitfaden für Media Queries</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods\">Legacy-Layout-Methoden</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers\">Unterstützung älterer Browser</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension\">Grundlegendes Verständnis von Layouts</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/JavaScript\">JavaScript — Dynamisches clientseitiges Skripting</a></li><li><details><summary>JavaScript erste Schritte</summary><ol><li><a href=\"/de/docs/Learn/JavaScript/First_steps\">JavaScript erste Schritte</a></li><li><a href=\"/de/docs/Learn/JavaScript/First_steps/What_is_JavaScript\">Was ist JavaScript?</a></li><li><a href=\"/de/docs/Learn/JavaScript/First_steps/A_first_splash\">Ein erster Sprung in JavaScript</a></li><li><a href=\"/de/docs/Learn/JavaScript/First_steps/What_went_wrong\">Was ist schiefgelaufen? JavaScript-Fehlerbehebung</a></li><li><a href=\"/de/docs/Learn/JavaScript/First_steps/Variables\">Speichern der benötigten Informationen — Variablen</a></li><li><a href=\"/de/docs/Learn/JavaScript/First_steps/Math\">Grundlegende Mathematik in JavaScript – Zahlen und Operatoren</a></li><li><a href=\"/de/docs/Learn/JavaScript/First_steps/Strings\">Umgang mit Text — Strings in JavaScript</a></li><li><a href=\"/de/docs/Learn/JavaScript/First_steps/Useful_string_methods\">Nützliche String-Methoden</a></li><li><a href=\"/de/docs/Learn/JavaScript/First_steps/Arrays\">Arrays</a></li><li><a href=\"/de/docs/Learn/JavaScript/First_steps/Silly_story_generator\">Silly Story Generator</a></li></ol></details></li><li><details><summary>JavaScript-Bausteine</summary><ol><li><a href=\"/de/docs/Learn/JavaScript/Building_blocks\">JavaScript-Bausteine</a></li><li><a href=\"/de/docs/Learn/JavaScript/Building_blocks/conditionals\">Entscheidungen in Ihrem Code treffen — Bedingte Anweisungen</a></li><li><a href=\"/de/docs/Learn/JavaScript/Building_blocks/Looping_code\">Schleifen-Code</a></li><li><a href=\"/de/docs/Learn/JavaScript/Building_blocks/Functions\">Funktionen — wiederverwendbare Codeblöcke</a></li><li><a href=\"/de/docs/Learn/JavaScript/Building_blocks/Build_your_own_function\">Erstellen Sie Ihre eigene Funktion</a></li><li><a href=\"/de/docs/Learn/JavaScript/Building_blocks/Return_values\">Funktionsrückgabewerte</a></li><li><a href=\"/de/docs/Learn/JavaScript/Building_blocks/Events\">Einführung in Ereignisse</a></li><li><a href=\"/de/docs/Learn/JavaScript/Building_blocks/Event_bubbling\">Event bubbling</a></li><li><a href=\"/de/docs/Learn/JavaScript/Building_blocks/Image_gallery\">Bildgalerie</a></li></ol></details></li><li><details><summary>Einführung in JavaScript-Objekte</summary><ol><li><a href=\"/de/docs/Learn/JavaScript/Objects\">Einführung in JavaScript-Objekte</a></li><li><a href=\"/de/docs/Learn/JavaScript/Objects/Basics\">JavaScript Objekt Grundlagen</a></li><li><a href=\"/de/docs/Learn/JavaScript/Objects/Object_prototypes\">Objektprototypen</a></li><li><a href=\"/de/docs/Learn/JavaScript/Objects/Object-oriented_programming\">Objektorientierte Programmierung</a></li><li><a href=\"/de/docs/Learn/JavaScript/Objects/Classes_in_JavaScript\">Klassen in JavaScript</a></li><li><a href=\"/de/docs/Learn/JavaScript/Objects/JSON\">Arbeiten mit JSON</a></li><li><a href=\"/de/docs/Learn/JavaScript/Objects/Object_building_practice\">Objekt-Baupraxis</a></li><li><a href=\"/de/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features\">Hinzufügen von Funktionen zu unserem hüpfenden Kugeln-Demo</a></li></ol></details></li><li><details><summary>Asynchrones JavaScript</summary><ol><li><a href=\"/de/docs/Learn/JavaScript/Asynchronous\">Asynchrones JavaScript</a></li><li><a href=\"/de/docs/Learn/JavaScript/Asynchronous/Introducing\">Einführung in asynchrones JavaScript</a></li><li><a href=\"/de/docs/Learn/JavaScript/Asynchronous/Promises\">Anleitung zur Verwendung von Promises</a></li><li><a href=\"/de/docs/Learn/JavaScript/Asynchronous/Implementing_a_promise-based_API\">Anleitung zur Implementierung einer Promise-basierten API</a></li><li><a href=\"/de/docs/Learn/JavaScript/Asynchronous/Introducing_workers\">Einführung in Workers</a></li><li><a href=\"/de/docs/Learn/JavaScript/Asynchronous/Sequencing_animations\">Sequenzierung von Animationen</a></li></ol></details></li><li><details><summary>Client-seitige Web-APIs</summary><ol><li><a href=\"/de/docs/Learn/JavaScript/Client-side_web_APIs\">Client-Side-Web-APIs</a></li><li><a href=\"/de/docs/Learn/JavaScript/Client-side_web_APIs/Introduction\">Einführung in Web-APIs</a></li><li><a href=\"/de/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents\">Manipulating documents</a></li><li><a href=\"/de/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data\">Abrufen von Daten vom Server</a></li><li><a href=\"/de/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs\">Third-party APIs</a></li><li><a href=\"/de/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics\">Grafiken zeichnen</a></li><li><a href=\"/de/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs\">Video- und Audio-APIs</a></li><li><a href=\"/de/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage\">Client-side storage</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/Forms\">Webformulare — Arbeiten mit Benutzerdaten</a></li><li><details><summary>Grundlagen der Webformulare</summary><ol><li><a href=\"/de/docs/Learn/Forms\">Bausteine für Webformulare</a></li><li><a href=\"/de/docs/Learn/Forms/Your_first_form\">Ihr erstes Formular</a></li><li><a href=\"/de/docs/Learn/Forms/How_to_structure_a_web_form\">Wie Sie ein Webformular strukturieren</a></li><li><a href=\"/de/docs/Learn/Forms/Basic_native_form_controls\">Basis-Native Formularelemente</a></li><li><a href=\"/de/docs/Learn/Forms/HTML5_input_types\">Die HTML5 input Typen</a></li><li><a href=\"/de/docs/Learn/Forms/Other_form_controls\">Andere Formularelemente</a></li><li><a href=\"/de/docs/Learn/Forms/Styling_web_forms\">Styling von Webformularen</a></li><li><a href=\"/de/docs/Learn/Forms/Advanced_form_styling\">Erweiterte Formular-Stilgestaltung</a></li><li><a href=\"/de/docs/Learn/Forms/UI_pseudo-classes\">UI-Pseudo-Klassen</a></li><li><a href=\"/de/docs/Learn/Forms/Form_validation\">Client-seitige Formularvalidierung</a></li><li><a href=\"/de/docs/Learn/Forms/Sending_and_retrieving_form_data\">Senden von Formulardaten</a></li></ol></details></li><li><details><summary>Erweiterte Techniken für Webformulare</summary><ol><li><a href=\"/de/docs/Learn/Forms/How_to_build_custom_form_controls\">Anleitung zur Erstellung benutzerdefinierter Formularelemente</a></li><li><a href=\"/de/docs/Learn/Forms/Sending_forms_through_JavaScript\">Versenden von Formularen über JavaScript</a></li><li><a href=\"/de/docs/Learn/Forms/Property_compatibility_table_for_form_controls\">CSS-Eigenschaftskompatibilitätstabelle für Formularelemente</a></li><li><a href=\"/de/docs/Learn/Forms/HTML_forms_in_legacy_browsers\">HTML-Formulare in älteren Browsern</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/Accessibility\">Barrierefreiheit — Das Web für alle nutzbar machen</a></li><li><details><summary>Barrierefreiheitsleitfäden</summary><ol><li><a href=\"/de/docs/Learn/Accessibility\">Barrierefreiheit</a></li><li><a href=\"/de/docs/Learn/Accessibility/What_is_accessibility\">Was ist Barrierefreiheit?</a></li><li><a href=\"/de/docs/Learn/Accessibility/HTML\">HTML: Eine gute Grundlage für Barrierefreiheit</a></li><li><a href=\"/de/docs/Learn/Accessibility/CSS_and_JavaScript\">CSS und JavaScript: Barrierefreiheits-Best Practices</a></li><li><a href=\"/de/docs/Learn/Accessibility/WAI-ARIA_basics\">Grundlagen von WAI-ARIA</a></li><li><a href=\"/de/docs/Learn/Accessibility/Multimedia\">Barrierefreie Multimedia</a></li><li><a href=\"/de/docs/Learn/Accessibility/Mobile\">Barrierefreiheit auf Mobilgeräten</a></li><li><a href=\"/de/docs/Learn/Accessibility/Accessibility_troubleshooting\">Bewertung: Barrierefreiheits-Troubleshooting</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/Performance\">Leistung — Websites schnell und reaktionsschnell machen</a></li><li><details><summary>Leitfäden zur Leistung</summary><ol><li><a href=\"/de/docs/Learn/Performance\">Webleistung</a></li><li><a href=\"/de/docs/Learn/Performance/why_web_performance\">Der 'Warum' der Web-Performance</a></li><li><a href=\"/de/docs/Learn/Performance/What_is_web_performance\">Was ist Web-Performance?</a></li><li><a href=\"/de/docs/Learn/Performance/Perceived_performance\">Wahrgenommene Leistung</a></li><li><a href=\"/de/docs/Learn/Performance/Measuring_performance\">Messung der Performance</a></li><li><a href=\"/de/docs/Learn/Performance/Multimedia\">Multimedia: Bilder</a></li><li><a href=\"/de/docs/Learn/Performance/video\">Multimedia: Video</a></li><li><a href=\"/de/docs/Learn/Performance/JavaScript\">JavaScript-Leistungsoptimierung</a></li><li><a href=\"/de/docs/Learn/Performance/HTML\">HTML-Leistungsoptimierung</a></li><li><a href=\"/de/docs/Learn/Performance/CSS\">CSS-Leistungsoptimierung</a></li><li><a href=\"/de/docs/Learn/Performance/business_case_for_performance\">Der geschäftliche Nutzen von Web-Performance</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/MathML\">MathML — Schreiben von Mathematik mit MathML</a></li><li><details><summary>MathML erste Schritte</summary><ol><li><a href=\"/de/docs/Learn/MathML/First_steps\">Erste Schritte mit MathML</a></li><li><a href=\"/de/docs/Learn/MathML/First_steps/Getting_started\">Erste Schritte mit MathML</a></li><li><a href=\"/de/docs/Learn/MathML/First_steps/Text_containers\">MathML Text-Container</a></li><li><a href=\"/de/docs/Learn/MathML/First_steps/Fractions_and_roots\">MathML-Brüche und -Wurzeln</a></li><li><a href=\"/de/docs/Learn/MathML/First_steps/Scripts\">MathML gescriptete Elemente</a></li><li><a href=\"/de/docs/Learn/MathML/First_steps/Tables\">MathML Tabellen</a></li><li><a href=\"/de/docs/Learn/MathML/First_steps/Three_famous_mathematical_formulas\">Drei berühmte mathematische Formeln</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/../Games\">Spiele — Entwicklung von Spielen für das Web</a></li><li><details><summary>Anleitungen und Tutorials</summary><ol><li><a href=\"/de/docs/Games/Introduction\">Einführung in die Spieleentwicklung für das Web</a></li><li><a href=\"/de/docs/Games/Techniques\">Techniken für die Spieleentwicklung</a></li><li><a href=\"/de/docs/Games/Tutorials\">Tutorials</a></li><li><a href=\"/de/docs/Games/Publishing_games\">Publishing Games</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/Tools_and_testing\">Werkzeuge und Tests</a></li><li><details><summary>Client-seitige Webentwicklungstools</summary><ol><li><a href=\"/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools\">Verständnis von Client-seitigen Webentwicklungstools</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview\">Übersicht über clientseitige Werkzeuge</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">Crashkurs zur Kommandozeile</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management\">Grundlagen des Paketmanagements</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain\">Einführung in eine vollständige Toolchain</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment\">Bereitstellung unserer App</a></li></ol></details></li><li><details><summary>Einführung in client-seitige Frameworks</summary><ol><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction\">Einführung in client-seitige Frameworks</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features\">Hauptmerkmale von Frameworks</a></li></ol></details></li><li><details><summary>React</summary><ol><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started\">Erste Schritte mit React</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning\">Beginn unserer React-Task-Liste</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components\">Komponentisieren unserer React-App</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state\">React-Interaktivität: Ereignisse und Status</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering\">React Interaktivität: Bearbeiten, Filtern, bedingtes Rendering</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility\">Accessibility in React</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources\">React-Ressourcen</a></li></ol></details></li><li><details><summary>Ember</summary><ol><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started\">Einstieg in Ember</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization\">Ember App-Struktur und Komponentisierung</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state\">Ember-Interaktivität: Events, Klassen und Zustand</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer\">Ember Interaktivität: Footer-Funktionalität, bedingtes Rendering</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing\">Routing in Ember</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources\">Ember-Ressourcen und Fehlerbehebung</a></li></ol></details></li><li><details><summary>Vue</summary><ol><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started\">Einstieg in Vue</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component\">Erstellen unserer ersten Vue-Komponente</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists\">Rendering einer Liste von Vue-Komponenten</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models\">Hinzufügen eines neuen Todo-Formulars: Vue-Ereignisse, Methoden und Modelle</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling\">Styling von Vue-Komponenten mit CSS</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties\">Verwendung von Vue computed properties</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering\">Vue bedingte Darstellung: Bearbeitung bestehender Todos</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management\">Vue-Refs und Lifecycle-Methoden zur Fokusverwaltung</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources\">Vue-Ressourcen</a></li></ol></details></li><li><details><summary>Svelte</summary><ol><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started\">Erste Schritte mit Svelte</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning\">Starten unserer Svelte-Tasklisten-App</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props\">Dynamisches Verhalten in Svelte: Arbeiten mit Variablen und Props</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components\">Komponentisierung unserer Svelte-App</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility\">Fortgeschrittenes Svelte: Reaktivität, Lebenszyklus, Barrierefreiheit</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores\">Arbeiten mit Svelte Stores</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript\">TypeScript-Unterstützung in Svelte</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next\">Bereitstellung und nächste Schritte</a></li></ol></details></li><li><details><summary>Angular</summary><ol><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started\">Erste Schritte mit Angular</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning\">Anfang unserer Angular-To-Do-Liste-App</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling\">Styling unserer Angular-Anwendung</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component\">Erstellen einer Item-Komponente</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering\">Filtern unserer To-Do-Elemente</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building\">Building Angular applications and further resources</a></li></ol></details></li><li><details><summary>Git und GitHub</summary><ol><li><a href=\"/de/docs/Learn/Tools_and_testing/GitHub\">Git und GitHub</a></li></ol></details></li><li><details open=\"\"><summary>Cross-Browser-Tests</summary><ol><li><a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing\">Cross-Browser-Testing</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction\">Einführung in das Cross-Browser-Testing</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies\">Strategien zur Durchführung von Tests</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS\">Umgang mit häufigen HTML- und CSS-Problemen</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript\">Umgang mit häufigen JavaScript-Problemen</a></li><li><em><a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility\" aria-current=\"page\">Umgang mit häufigen Problemen der Barrierefreiheit</a></em></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection\">Implementierung von Feature-Erkennung</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing\">Einführung in automatisiertes Testen</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment\">Einrichten Ihrer eigenen Testautomatisierungsumgebung</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/Server-side\">Server-seitige Webprogrammierung</a></li><li><details><summary>Erste Schritte</summary><ol><li><a href=\"/de/docs/Learn/Server-side/First_steps\">Server-seitige Website-Programmierung: Erste Schritte</a></li><li><a href=\"/de/docs/Learn/Server-side/First_steps/Introduction\">Einführung in die serverseitige Programmierung</a></li><li><a href=\"/de/docs/Learn/Server-side/First_steps/Client-Server_overview\">Überblick über Client-Server</a></li><li><a href=\"/de/docs/Learn/Server-side/First_steps/Web_frameworks\">Serverseitige Web-Frameworks</a></li><li><a href=\"/de/docs/Learn/Server-side/First_steps/Website_security\">Website-Sicherheit</a></li></ol></details></li><li><details><summary>Django Web-Framework (Python)</summary><ol><li><a href=\"/de/docs/Learn/Server-side/Django\">Django Web Framework (Python)</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Introduction\">Einführung in Django</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/development_environment\">Einrichten einer Django-Entwicklungsumgebung</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Tutorial_local_library_website\">Django-Tutorial: Die Local Library Website</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/skeleton_website\">Django-Tutorial Teil 2: Erstellung einer Skelett-Website</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Models\">Django-Tutorial Teil 3: Verwenden von Modellen</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Admin_site\">Django Tutorial Teil 4: Django Admin-Seite</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Home_page\">Django-Tutorial Teil 5: Erstellen unserer Startseite</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Generic_views\">Django Tutorial Teil 6: Generische Listen- und Detailansichten</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Sessions\">Django-Tutorial Teil 7: Sessions-Framework</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Authentication\">Django-Tutorial Teil 8: Benutzer-Authentifizierung und Berechtigungen</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Forms\">Django Tutorial Teil 9: Arbeiten mit Formularen</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Testing\">Django Tutorial Teil 10: Testen einer Django-Webanwendung</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Deployment\">Django-Tutorial Teil 11: Django in Produktion bereitstellen</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/web_application_security\">Django-Webanwendungssicherheit</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/django_assessment_blog\">Bewertung: DIY Django Mini-Blog</a></li></ol></details></li><li><details><summary>Express Web-Framework (Node.js/JavaScript)</summary><ol><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs\">Express-Webframework (Node.js/JavaScript)</a></li><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs/Introduction\">Einführung in Express/Node</a></li><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs/development_environment\">Einrichtung einer Node-Entwicklungsumgebung</a></li><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website\">Express-Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs/skeleton_website\">Express Tutorial Teil 2: Erstellung einer Grundstruktur für eine Website</a></li><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs/mongoose\">Express Tutorial Teil 3: Verwendung einer Datenbank (mit Mongoose)</a></li><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs/routes\">Express Tutorial Teil 4: Routen und Controller</a></li><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs/Displaying_data\">Express Tutorial Teil 5: Bibliotheksdaten anzeigen</a></li><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs/forms\">Express Tutorial Teil 6: Arbeiten mit Formularen</a></li><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs/deployment\">Express-Tutorial Teil 7: Bereitstellung für die Produktion</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/Common_questions\">Weitere Ressourcen</a></li><li><details><summary>Häufige Fragen</summary><ol><li><a href=\"/de/docs/Learn/Common_questions\">Häufige Fragen</a></li><li><a href=\"/de/docs/Learn/HTML/Howto\">HTML verwenden, um häufige Probleme zu lösen</a></li><li><a href=\"/de/docs/Learn/CSS/Howto\">CSS verwenden, um häufige Probleme zu lösen</a></li><li><a href=\"/de/docs/Learn/JavaScript/Howto\">Lösen Sie häufige Probleme in Ihrem JavaScript-Code</a></li><li><a href=\"/de/docs/Learn/Common_questions/Web_mechanics\">Web-Mechanik</a></li><li><a href=\"/de/docs/Learn/Common_questions/Tools_and_setup\">Tools und Einrichtung</a></li><li><a href=\"/de/docs/Learn/Common_questions/Design_and_accessibility\">Design und Barrierefreiheit</a></li></ol></details></li></ol>","sidebarMacro":"LearnSidebar","body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<ul class=\"prev-next\">\n <li><a class=\"button secondary\" href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript\"><span class=\"button-wrap\"> Zurück </span></a></li>\n <li><a class=\"button secondary\" href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing\"><span class=\"button-wrap\"> Übersicht: Cross-Browser-Testing</span></a></li>\n <li><a class=\"button secondary\" href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection\"><span class=\"button-wrap\"> Weiter </span></a></li>\n</ul>\n<p>Als Nächstes widmen wir uns der Barrierefreiheit, bieten Informationen zu häufigen Problemen, wie man einfache Tests durchführt, und wie man Prüf- und Automatisierungstools zur Erkennung von Barrierefreiheitsproblemen nutzt.</p>\n<figure class=\"table-container\"><table>\n <tbody>\n <tr>\n <th scope=\"row\">Voraussetzungen:</th>\n <td>\n Vertrautheit mit den Kernsprachen <a href=\"/de/docs/Learn/HTML\">HTML</a>,\n <a href=\"/de/docs/Learn/CSS\">CSS</a> und\n <a href=\"/de/docs/Learn/JavaScript\">JavaScript</a>; eine Vorstellung von den grundlegenden\n <a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction\">Prinzipien des Browser-übergreifenden Testens</a>.\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Ziel:</th>\n <td>Die Fähigkeit, häufige Barrierefreiheitsprobleme zu diagnostizieren und geeignete Tools und Techniken zu deren Behebung zu verwenden.</td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"was_ist_barrierefreiheit","title":"Was ist Barrierefreiheit?","isH3":false,"content":"<p>Wenn wir im Zusammenhang mit Web-Technologie von Barrierefreiheit sprechen, denken die meisten Menschen sofort daran, sicherzustellen, dass Websites/Apps für Menschen mit Behinderungen nutzbar sind, zum Beispiel:</p>\n<ul>\n <li>Sehbehinderte Menschen, die Bildschirmleser oder Vergrößerungen/Zooms verwenden, um auf Texte zuzugreifen.</li>\n <li>Menschen mit motorischen Beeinträchtigungen, die Tastaturen (oder andere nicht-mausbasierten Funktionen) nutzen, um die Funktionalität von Websites zu aktivieren.</li>\n <li>Menschen mit Hörbehinderungen, die auf Untertitel oder andere Textalternativen für Audio-/Videoinhalte angewiesen sind.</li>\n</ul>\n<p>Es ist jedoch ein Irrtum zu sagen, dass Barrierefreiheit nur für Behinderungen gedacht ist. Das eigentliche Ziel der Barrierefreiheit ist es, Websites/Apps für so viele Menschen in möglichst vielen Kontexten wie möglich nutzbar zu machen, nicht nur für Benutzer von leistungsstarken Desktop-Computern. Einige Beispiele könnten sein:</p>\n<ul>\n <li>Benutzer auf mobilen Geräten.</li>\n <li>Benutzer auf alternativen Browser-Geräten wie Fernsehern, Uhren usw.</li>\n <li>Benutzer älterer Geräte, die möglicherweise nicht über die neuesten Browser verfügen.</li>\n <li>Benutzer von Geräten mit geringerer Spezifikation, die möglicherweise langsame Prozessoren haben.</li>\n</ul>\n<p>In gewisser Weise dreht sich dieses ganze Modul um Barrierefreiheit — das Browser-übergreifende Testen stellt sicher, dass Ihre Sites von möglichst vielen Menschen genutzt werden können. <a href=\"/de/docs/Learn/Accessibility/What_is_accessibility\">Was ist Barrierefreiheit?</a> definiert Barrierefreiheit vollständiger und gründlicher als dieser Artikel es tut.</p>\n<p>Das gesagt, wird dieser Artikel Browser-übergreifende und Testprobleme im Zusammenhang mit Menschen mit Behinderungen behandeln und wie sie das Internet nutzen. Wir haben bereits über andere Bereiche wie <a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#responsive_design_probleme\">Responsive Design</a> und <a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#leistungsprobleme\">Leistung</a> an anderen Stellen des Moduls gesprochen.</p>\n<div class=\"notecard note\">\n <p><strong>Hinweis:</strong> Wie bei vielen Dingen in der Webentwicklung geht es bei Barrierefreiheit nicht um 100% Erfolg oder nichts; 100% Barrierefreiheit ist praktisch unmöglich für alle Inhalte zu erreichen, insbesondere wenn Websites komplexer werden. Es geht vielmehr darum, einen angemessenen Aufwand zu betreiben, um so viele Ihrer Inhalte wie möglich für so viele Menschen wie möglich zugänglich zu machen, indem Sie defensiv coden und Best Practices einhalten.</p>\n</div>"}},{"type":"prose","value":{"id":"häufige_barrierefreiheitsprobleme","title":"Häufige Barrierefreiheitsprobleme","isH3":false,"content":"<p>In diesem Abschnitt werden wir einige der Hauptprobleme umreißen, die im Zusammenhang mit der Barrierefreiheit im Web auftreten, in Verbindung mit spezifischen Technologien, zusammen mit Best Practices, die zu befolgen sind, und einigen einfachen Tests, die Sie durchführen können, um festzustellen, ob Ihre Sites auf dem richtigen Weg sind.</p>\n<div class=\"notecard note\">\n <p><strong>Hinweis:</strong> Barrierefreiheit ist moralisch das Richtige zu tun und gut für das Geschäft (die Anzahl der behinderten Nutzer, Nutzer auf mobilen Geräten usw. stellt bedeutende Marktsegmente dar), aber es ist auch eine gesetzliche Anforderung in vielen Teilen der Welt, Webinhalte für Menschen mit Behinderungen zugänglich zu machen. Lesen Sie <a href=\"/de/docs/Learn/Accessibility/What_is_accessibility#accessibility_guidelines_and_the_law\">Barrierefreiheitsrichtlinien und das Gesetz</a> für weitere Informationen.</p>\n</div>"}},{"type":"prose","value":{"id":"html","title":"HTML","isH3":true,"content":"<p>Semantisches HTML (bei dem die Elemente für ihren korrekten Zweck verwendet werden) ist von Haus aus zugänglich — solche Inhalte sind für sehende Zuschauer lesbar (sofern Sie nicht etwas Unüberlegtes tun, wie den Text zu klein zu machen oder ihn mit CSS zu verstecken), sind aber auch für unterstützende Technologien wie Bildschirmleser (Apps, die eine Webseite buchstäblich für ihren Benutzer vorlesen) nutzbar und bieten auch weitere Vorteile.</p>\n<h4 id=\"semantische_struktur\">Semantische Struktur</h4>\n<p>Der wichtigste schnelle Gewinn im semantischen HTML besteht darin, eine Struktur von Überschriften und Absätzen für Ihren Inhalt zu verwenden; dies liegt daran, dass Bildschirmleser-Benutzer dazu neigen, die Überschriften eines Dokuments als Wegweiser zu verwenden, um schneller den benötigten Inhalt zu finden. Wenn Ihr Inhalt keine Überschriften hat, erhalten sie nur eine riesige Textwand ohne Wegweiser, um etwas zu finden. Beispiele für schlechtes und gutes HTML:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html example-bad notranslate\"><code><font size=\"7\">My heading</font>\n<br /><br />\nThis is the first section of my document.\n<br /><br />\nI'll add another paragraph here too.\n<br /><br />\n<font size=\"5\">My subheading</font>\n<br /><br />\nThis is the first subsection of my document. I'd love people to be able to find\nthis content!\n<br /><br />\n<font size=\"5\">My 2nd subheading</font>\n<br /><br />\nThis is the second subsection of my content. I think it is more interesting than\nthe last one.\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html example-good notranslate\"><code><h1>My heading</h1>\n\n<p>This is the first section of my document.</p>\n\n<p>I'll add another paragraph here too.</p>\n\n<h2>My subheading</h2>\n\n<p>\n This is the first subsection of my document. I'd love people to be able to\n find this content!\n</p>\n\n<h2>My 2nd subheading</h2>\n\n<p>\n This is the second subsection of my content. I think it is more interesting\n than the last one.\n</p>\n</code></pre></div>\n<p>Darüber hinaus sollte Ihr Inhalt in der Quellreihenfolge logisch Sinn ergeben — Sie können ihn später immer noch mit CSS beliebig platzieren, aber Sie sollten die Quellreihenfolge von Anfang an richtig wählen.</p>\n<p>Als Test können Sie das CSS einer Site deaktivieren und prüfen, wie verständlich sie ohne CSS ist. Sie könnten dies manuell tun, indem Sie das CSS einfach aus Ihrem Code entfernen, aber der einfachste Weg ist die Verwendung von Browser-Funktionen, zum Beispiel:</p>\n<ul>\n <li>Firefox: Wählen Sie <em>Ansicht > Seitenstil > Kein Stil</em> aus dem Hauptmenü.</li>\n <li>Safari: Wählen Sie <em>Entwickeln > Stile deaktivieren</em> aus dem Hauptmenü (um das Menü <em>Entwickeln</em> zu aktivieren, wählen Sie <em>Safari > Einstellungen > Erweitert > Menü Entwickeln in der Menüleiste anzeigen</em>).</li>\n <li>Chrome: Installieren Sie die Webentwickler-Toolbar-Erweiterung, starten Sie dann den Browser neu. Klicken Sie auf das erscheinende Zahnradsymbol und wählen Sie <em>CSS > Alle Stile deaktivieren</em>.</li>\n <li>Edge: Wählen Sie <em>Ansicht > Stil > Kein Stil</em> aus dem Hauptmenü.</li>\n</ul>\n<h4 id=\"nutzung_nativer_tastaturzugänglichkeit\">Nutzung nativer Tastaturzugänglichkeit</h4>\n<p>Bestimmte HTML-Features können nur über die Tastatur ausgewählt werden — dies ist das Standardverhalten, das es seit den Anfängen des Internets gibt. Die Elemente, die diese Fähigkeit haben, sind die gängigen, die es Benutzern ermöglichen, mit Webseiten zu interagieren, nämlich Links, <a href=\"/de/docs/Web/HTML/Element/button\"><code><button></code></a>s und Formularelemente wie <a href=\"/de/docs/Web/HTML/Element/input\"><code><input></code></a>.</p>\n<p>Sie können dies mit unserem <a href=\"https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html\" class=\"external\" target=\"_blank\">native-keyboard-accessibility.html</a> Beispiel ausprobieren (siehe den <a href=\"https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html\" class=\"external\" target=\"_blank\">Quellcode</a>) — öffnen Sie dies in einem neuen Tab und versuchen Sie, die Tab-Taste zu drücken; nach ein paar Mal drücken, sollten Sie sehen, dass der Tabulatorfokus beginnt, durch die verschiedenen fokussierbaren Elemente zu wechseln; die fokussierten Elemente erhalten einen hervorgehobenen Standardstil in jedem Browser (er unterscheidet sich leicht zwischen den verschiedenen Browsern), damit Sie erkennen können, welches Element fokussiert ist.</p>\n<p>\n <img src=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility/button-focused-unfocused.png\" alt=\"Ein Screenshot von drei Schaltflächen, der das Standardverhalten von interaktiven nativen Elementen zeigt. Die dritte Schaltfläche ist durch einen blauen Rand hervorgehoben, um ihren Fokuszustand anzuzeigen.\" width=\"288\" height=\"39\" loading=\"lazy\">\n</p>\n<div class=\"notecard note\">\n <p><strong>Hinweis:</strong> In Firefox können Sie auch eine Überlagerung aktivieren, die die Registerkartenreihenfolge der Seite anzeigt. Weitere Informationen finden Sie unter: <a href=\"https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/index.html#show-web-page-tabbing-order\" class=\"external\" target=\"_blank\">Accessibility Inspector > Registerkartenreihenfolge der Webseite anzeigen</a>.</p>\n</div>\n<p>Sie können dann Enter/Return drücken, um einem fokussierten Link zu folgen oder eine Schaltfläche zu drücken (wir haben etwas JavaScript hinzugefügt, damit die Schaltflächen eine Nachricht ausgeben), oder beginnen, in ein Texteingabefeld zu tippen (andere Formularelemente haben unterschiedliche Steuerungen, z. B. können beim <a href=\"/de/docs/Web/HTML/Element/select\"><code><select></code></a>-Element die Optionen mit den Pfeiltasten nach oben und unten angezeigt und durchgegangen werden).</p>\n<p>Beachten Sie, dass verschiedene Browser unterschiedliche Tastatursteuerungsoptionen verfügbar haben können. Die meisten modernen Browser folgen dem oben beschriebenen Tab-Muster (Sie können auch Shift + Tab verwenden, um rückwärts durch die fokussierbaren Elemente zu wechseln), aber einige Browser haben ihre eigenen Besonderheiten:</p>\n<ul>\n <li>Safari auf dem Mac erlaubt Ihnen standardmäßig nicht, durch Links zu tabben; um dies zu aktivieren, öffnen Sie die <em>Systemeinstellungen</em>, scrollen Sie herunter zu <em>Tastatur</em> und aktivieren Sie <em>Tastaturnavigation</em>. Wenn Sie eine ältere Version von macOS verwenden, lesen Sie <a href=\"https://support.apple.com/guide/mac-help/use-your-keyboard-like-a-mouse-mh27469/mac\" class=\"external\" target=\"_blank\">Verwenden Ihrer Tastatur wie eine Maus auf dem Mac</a> im macOS-Benutzerhandbuch von Apple.</li>\n</ul>\n<div class=\"notecard warning\">\n <p><strong>Warnung:</strong> Sie sollten diese Art von Test/Überprüfung bei jeder neuen Seite, die Sie schreiben, durchführen — stellen Sie sicher, dass die Funktionalität über die Tastatur zugänglich ist und dass die Tabulatorreihenfolge einen sinnvollen Navigationspfad durch das Dokument bietet.</p>\n</div>\n<p>Dieses Beispiel zeigt die Bedeutung der Verwendung des richtigen semantischen Elements für den richtigen Job auf. Es ist möglich, <em>jedes</em> Element mit CSS so zu gestalten, dass es aussieht wie ein Link oder eine Schaltfläche, und es mit JavaScript wie ein Link oder eine Schaltfläche zu verhalten, aber es sind keine echten Links oder Schaltflächen, und Sie verlieren eine Menge der Barrierefreiheit, die Ihnen diese Elemente von vornherein bieten. Also tun Sie es nicht, wenn Sie es vermeiden können.</p>\n<p>Ein weiterer Tipp — wie in unserem Beispiel gezeigt, können Sie steuern, wie Ihre fokussierbaren Elemente aussehen, wenn sie fokussiert sind, indem Sie die <a href=\"/de/docs/Web/CSS/:focus\">:focus</a> Pseudoklasse verwenden. Es ist eine gute Idee, Fokus- und Hover-Stile zu kombinieren, damit Ihre Benutzer, unabhängig davon, ob sie Maus oder Tastatur verwenden, den visuell Hinweis erhalten, dass eine Steuerung beim Aktivieren etwas tut:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>a:hover,\ninput:hover,\nbutton:hover,\nselect:hover,\na:focus,\ninput:focus,\nbutton:focus,\nselect:focus {\n font-weight: bold;\n}\n</code></pre></div>\n<div class=\"notecard note\">\n <p><strong>Hinweis:</strong> Wenn Sie sich entscheiden, die Standardfokusstile mit CSS zu entfernen, stellen Sie sicher, dass Sie sie durch etwas anderes ersetzen, das besser zu Ihrem Design passt — es ist ein sehr wertvolles Barrierefreiheitstool und sollte nicht entfernt werden.</p>\n</div>\n<h4 id=\"einbauen_von_tastaturzugänglichkeit\">Einbauen von Tastaturzugänglichkeit</h4>\n<p>Manchmal ist es nicht möglich, die Tastaturzugänglichkeit beizubehalten. Sie könnten eine Site übernommen haben, bei der die Semantik nicht sehr gut ist (vielleicht arbeiten Sie mit einem schrecklichen CMS, das Schaltflächen mit <code><div></code>s erstellt), oder Sie verwenden eine komplexe Steuerung, die keine eingebaute Tastaturzugänglichkeit hat, wie das HTML-<a href=\"/de/docs/Web/HTML/Element/video\"><code><video></code></a>-Element (erstaunlicherweise, Opera ist der einzige Browser, der das Durchlaufen der <code><video></code>-Element-Standardbrowsersteuerungen per Tabulator erlaubt). Sie haben hier ein paar Optionen:</p>\n<ol>\n <li>\n <p>Erstellen Sie benutzerdefinierte Steuerungen mit <code><button></code>-Elementen (die wir standardmäßig per Tabulator erreichen können!) und JavaScript, um deren Funktionalität zu verknüpfen. Siehe <a href=\"/de/docs/Web/Media/Audio_and_video_delivery/cross_browser_video_player\">Ein plattformübergreifender Videoplayer</a> für einige gute Beispiele dafür.</p>\n </li>\n <li>\n <p>Erstellen Sie Tastenkombinationen mit JavaScript, sodass Funktionen aktiviert werden, wenn bestimmte Tasten auf der Tastatur gedrückt werden. Siehe <a href=\"/de/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard\">Maus- und Tastatur-Steuerungen für Desktop</a> für einige spielbezogene Beispiele, die für jeden Zweck angepasst werden können.</p>\n </li>\n <li>\n <p>Verwenden Sie einige interessante Taktiken, um Schaltflächenverhalten zu simulieren. Nehmen Sie zum Beispiel unser <a href=\"https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html\" class=\"external\" target=\"_blank\">fake-div-buttons.html</a>-Beispiel (siehe <a href=\"https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html\" class=\"external\" target=\"_blank\">Quellcode</a>). Hier haben wir unseren gefälschten <code><div></code>-Schaltflächen die Möglichkeit gegeben, fokussiert zu werden (auch per Tabulator), indem wir jedem das Attribut <code>tabindex=\"0\"</code> gegeben haben (siehe WebAIMs <a href=\"https://webaim.org/techniques/keyboard/tabindex\" class=\"external\" target=\"_blank\">tabindex-Artikel</a> für weitere wirklich nützliche Details). Dadurch können wir zu den Schaltflächen tabben, aber nicht, um sie über die Enter/Return-Taste zu aktivieren. Dazu mussten wir den folgenden Trick mit JavaScript hinzufügen:</p>\n <div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>document.onkeydown = (e) => {\n if (e.code === \"Enter\") {\n // The Enter/Return key\n document.activeElement.onclick(e);\n }\n};\n</code></pre></div>\n <p>Hier fügen wir dem <code>document</code>-Objekt einen Listener hinzu, um zu erkennen, wann eine Schaltfläche auf der Tastatur gedrückt wurde. Wir überprüfen, welche Schaltfläche gedrückt wurde, über die <a href=\"/de/docs/Web/API/KeyboardEvent/code\"><code>code</code></a>-Eigenschaft des Event-Objekts; wenn es dem Code entspricht, der Return/Enter entspricht, führen wir die Funktion aus, die im <code>onclick</code>-Handler der Schaltfläche gespeichert ist, indem wir <code>document.activeElement.onclick()</code> verwenden. <a href=\"/de/docs/Web/API/Document/activeElement\"><code>activeElement</code></a> gibt uns das Element, das derzeit auf der Seite fokussiert ist.</p>\n </li>\n</ol>\n<div class=\"notecard note\">\n <p><strong>Hinweis:</strong> Diese Technik wird nur funktionieren, wenn Sie Ihre ursprünglichen Event-Handler über Event-Handler-Eigenschaften setzen (z. B. <code>onclick</code>). <code>addEventListener</code> wird nicht funktionieren. Es ist viel zusätzlicher Aufwand, die Funktionalität auf diese Weise zurückzubauen. Und es gibt sicherlich andere Probleme damit. Besser, von Anfang an das richtige Element für den richtigen Job zu verwenden.</p>\n</div>\n<h4 id=\"textalternativen\">Textalternativen</h4>\n<p>Textalternativen sind für Barrierefreiheit äußerst wichtig — wenn eine Person eine Seh- oder Hörbehinderung hat, die sie daran hindert, bestimmte Inhalte zu sehen oder zu hören, dann ist das ein Problem. Die einfachste verfügbare Textalternative ist das schlichte <code>alt</code>-Attribut, das wir in allen Bildern, die relevante Inhalte enthalten, einschließen sollten. Dies sollte eine Beschreibung des Bildes enthalten, die seine Bedeutung und seinen Inhalt auf der Seite erfolgreich vermittelt, damit es von einem Bildschirmleser aufgenommen und dem Benutzer vorgelesen werden kann.</p>\n<div class=\"notecard note\">\n <p><strong>Hinweis:</strong> Weitere Informationen finden Sie unter <a href=\"/de/docs/Learn/Accessibility/HTML#text_alternatives\">Textalternativen</a> und <a href=\"https://www.w3.org/WAI/tutorials/images/decision-tree/\" class=\"external\" target=\"_blank\">Ein Alt-Entscheidungsbaum</a>, um zu erfahren, wie Sie ein alt-Attribut für Bilder in verschiedenen Situationen verwenden.</p>\n</div>\n<p>Fehlender Alt-Text kann auf verschiedene Weise getestet werden, zum Beispiel mit Barrierefreiheits-<a href=\"#pr%C3%BCftools\">Prüftools</a>.</p>\n<p>Alt-Text ist für Video- und Audioinhalte etwas komplexer. Es gibt eine Möglichkeit, Textspuren (z. B. Untertitel) zu definieren und sie beim Abspielen von Videos anzuzeigen, in Form des <a href=\"/de/docs/Web/HTML/Element/track\"><code><track></code></a>-Elements und des <a href=\"/de/docs/Web/API/WebVTT_API\">WebVTT</a>-Formats (siehe <a href=\"/de/docs/Web/Media/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video\">Hinzufügen von Untertiteln zu HTML-Videos</a> für ein ausführliches Tutorial). Die <a href=\"/de/docs/Web/Media/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video#browser_compatibility\">Kompatibilität mit Browsern</a> für diese Funktionen ist ziemlich gut, aber wenn Sie Textalternativen für Audio bereitstellen oder ältere Browser unterstützen möchten, könnte ein einfacher Texttranscript, der irgendwo auf der Seite oder auf einer separaten Seite präsentiert wird, eine gute Idee sein.</p>\n<h4 id=\"elementbeziehungen_und_kontext\">Elementbeziehungen und Kontext</h4>\n<p>Es gibt bestimmte Features und Best Practices in HTML, die dazu entwickelt wurden, Kontext und Beziehungen zwischen Elementen bereitzustellen, wo sonst keine existieren. Die drei häufigsten Beispiele sind Links, Formularbeschriftungen und Datentabellen.</p>\n<p>Der Schlüssel zu zugänglichem Link-Text besteht darin, dass Benutzer von Bildschirmlesern häufig eine gemeinsame Funktion verwenden, bei der sie eine Liste aller Links auf der Seite aufrufen. In diesem Fall muss der Link-Text aus dem Kontext Sinn ergeben. Zum Beispiel ist eine Liste von Links mit der Bezeichnung \"klicken Sie hier\", \"klicken Sie mich\" usw. wirklich schlecht für die Barrierefreiheit. Es ist besser, wenn der Link-Text im Kontext und außerhalb des Kontexts Sinn ergibt.</p>\n<p>Als nächstes auf unserer Liste ist das Formular-<a href=\"/de/docs/Web/HTML/Element/label\"><code><label></code></a>-Element eines der zentralen Features, das es uns ermöglicht, Formulare zugänglich zu machen. Das Problem mit Formularen ist, dass Sie Beschriftungen benötigen, die angeben, welche Daten in jedes Formulareingabe eingegeben werden sollten. Jede Beschriftung muss in einem <a href=\"/de/docs/Web/HTML/Element/label\"><code><label></code></a> enthalten sein, um sie eindeutig mit ihrem Partner-Formularelement zu verknüpfen (der <code>for</code>-Attributwert jeder <code><label></code> muss mit dem <code>id</code>-Wert des Formularelements übereinstimmen), und es wird auch dann Sinn ergeben, wenn die Quellordnung nicht völlig logisch ist (was zugegeben der Fall sein sollte).</p>\n<div class=\"notecard note\">\n <p><strong>Hinweis:</strong> Weitere Informationen über den Link-Text und Formular-Beschriftungen finden Sie in <a href=\"/de/docs/Learn/Accessibility/HTML#meaningful_text_labels\">Aussagekräftige Textbeschriftungen</a>.</p>\n</div>\n<p>Zuletzt ein kurzes Wort zu Datentabellen. Eine einfache Datentabelle kann mit sehr einfachem Markup geschrieben werden (siehe <code>bad-table.html</code> <a href=\"https://mdn.github.io/learning-area/accessibility/html/bad-table.html\" class=\"external\" target=\"_blank\">live</a>, und <a href=\"https://github.com/mdn/learning-area/blob/main/accessibility/html/bad-table.html\" class=\"external\" target=\"_blank\">Quellcode</a>), aber dies hat Probleme — es gibt keine Möglichkeit für einen Bildschirmleser-Benutzer, Zeilen oder Spalten als Daten-Gruppierungen miteinander in Verbindung zu bringen — um dies zu tun, müssen Sie wissen, was die Kopfzeilenzeilen sind und ob sie Zeilen, Spalten usw. anführen. Dies kann nur visuell für eine solche Tabelle erfolgen.</p>\n<p>Wenn Sie sich stattdessen unser <code>punk-bands-complete.html</code>-Beispiel (<a href=\"https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html\" class=\"external\" target=\"_blank\">live</a>, <a href=\"https://github.com/mdn/learning-area/blob/main/css/styling-boxes/styling-tables/punk-bands-complete.html\" class=\"external\" target=\"_blank\">Quellcode</a>) ansehen, können Sie einige Hilfen zur Barrierefreiheit bei der Arbeit sehen, wie Tabellenköpfe (<a href=\"/de/docs/Web/HTML/Element/th\"><code><th></code></a>- und <code>scope</code>-Attribute), <a href=\"/de/docs/Web/HTML/Element/caption\"><code><caption></code></a>-Element usw.</p>\n<div class=\"notecard note\">\n <p><strong>Hinweis:</strong> Weitere Informationen zu zugänglichen Tabellen finden Sie in <a href=\"/de/docs/Learn/Accessibility/HTML#accessible_data_tables\">Zugängliche Datentabellen</a>.</p>\n</div>"}},{"type":"prose","value":{"id":"css","title":"CSS","isH3":true,"content":"<p>CSS bietet in der Regel weit weniger grundlegende Barrierefreiheitsfeatures als HTML, kann aber trotzdem genauso viel Schaden für die Barrierefreiheit anrichten, wenn es falsch verwendet wird. Wir haben bereits ein paar Barrierefreiheits-Tipps zu CSS erwähnt:</p>\n<ul>\n <li>Verwenden Sie die korrekten semantischen Elemente, um unterschiedliche Inhalte in HTML zu kennzeichnen; wenn Sie einen anderen visuellen Effekt erzielen möchten, verwenden Sie CSS — missbrauchen Sie keine HTML-Elemente, um das gewünschte Aussehen zu erzielen. Wenn Sie zum Beispiel größeren Text wünschen, verwenden Sie <a href=\"/de/docs/Web/CSS/font-size\"><code>font-size</code></a>, kein <a href=\"/de/docs/Web/HTML/Element/Heading_Elements\">h1</a>-Element.</li>\n <li>Stellen Sie sicher, dass Ihre Quellreihenfolge ohne CSS Sinn ergibt; Sie können die Seite anschließend beliebig mit CSS gestalten.</li>\n <li>Sie sollten sicherstellen, dass interaktive Elemente wie Schaltflächen und Links geeignete Fokus-/Hover-/Aktivzustände haben, um dem Benutzer visuelle Hinweise auf ihre Funktion zu geben. Wenn Sie die Standardwerte aus stilistischen Gründen entfernen, stellen Sie sicher, dass Sie Ersatzstile hinzufügen.</li>\n</ul>\n<p>Es gibt einige andere Überlegungen, die Sie berücksichtigen sollten.</p>\n<h4 id=\"farbe_und_farbkontrast\">Farbe und Farbkontrast</h4>\n<p>Bei der Auswahl eines Farbschemas für Ihre Website sollten Sie sicherstellen, dass die Textfarbe (Vordergrund) gut mit der Hintergrundfarbe kontrastiert. Ihr Design mag cool aussehen, aber es bringt nichts, wenn Menschen mit Sehbehinderungen wie Farbenblindheit Ihre Inhalte nicht lesen können. Verwenden Sie ein Werkzeug wie WebAIMs <a href=\"https://webaim.org/resources/contrastchecker/\" class=\"external\" target=\"_blank\">Farbkontrast-Prüfer</a>, um zu überprüfen, ob Ihr Schema genügend Kontrast aufweist.</p>\n<p>Ein weiterer Tipp ist, nicht nur auf die Farbe für Wegweiser/Informationen zu vertrauen, da dies für diejenigen, die die Farbe nicht sehen können, nicht geeignet ist. Anstatt z. B. erforderliche Formularfelder in Rot zu markieren, markieren Sie sie mit einem Sternchen und in Rot.</p>\n<div class=\"notecard note\">\n <p><strong>Hinweis:</strong> Ein hoher Kontrast wird auch jedem, der ein Smartphone oder Tablet mit einem glänzenden Bildschirm verwendet, ermöglichen, Seiten auch in einer hellen Umgebung, wie Sonnenlicht, besser zu lesen.</p>\n</div>\n<h4 id=\"ausblenden_von_inhalten\">Ausblenden von Inhalten</h4>\n<p>Es gibt viele Instanzen, in denen ein visuelles Design erfordert, dass nicht alle Inhalte gleichzeitig angezeigt werden. In unserem <a href=\"https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/tabbed-info-box.html\" class=\"external\" target=\"_blank\">Tabbed info box example</a> (siehe <a href=\"https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/tabbed-info-box.html\" class=\"external\" target=\"_blank\">Quellcode</a>) haben wir zum Beispiel drei Informationspanels, aber wir positionieren sie <a href=\"/de/docs/Learn/CSS/CSS_layout/Positioning\">übereinander</a> und bieten Registerkarten, die angeklickt werden können, um jedes einzublenden (es ist auch über die Tastatur zugänglich — Sie können alternativ Tab und Enter/Return verwenden, um sie auszuwählen).</p>\n<p>\n <img src=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility/20191022144107.png\" alt=\"Ein Screenshot zeigt ein Beispiel für das Zugänglichmachen von ausgeblendetem und angezeigtem Inhalt in Registerkarten. Das Beispiel hat drei Registerkarten, nämlich Tab 1, Tab 2 und Tab 3. Tab 1 ist derzeit fokussiert und aktiviert, um Inhalte anzuzeigen.\" width=\"1272\" height=\"1131\" loading=\"lazy\">\n</p>\n<p>Benutzer von Bildschirmlesern kümmern sich nicht um all das — sie sind mit dem Inhalt zufrieden, solange die Quellreihenfolge Sinn ergibt und sie darauf zugreifen können. Absolute Positionierung (wie in diesem Beispiel verwendet) wird im Allgemeinen als eine der besten Mechanismen zum Ausblenden von Inhalten für visuelle Effekte angesehen, da sie Bildschirmleser nicht daran hindert, Zugang zu erhalten.</p>\n<p>Andererseits sollten Sie <a href=\"/de/docs/Web/CSS/visibility\"><code>visibility: hidden</code></a> oder <a href=\"/de/docs/Web/CSS/display\"><code>display: none</code></a> nicht verwenden, weil sie Inhalte vor Bildschirmlesern verbergen. Sofern es natürlich keinen guten Grund gibt, warum Sie möchten, dass dieser Inhalt vor Bildschirmlesern verborgen ist.</p>\n<div class=\"notecard note\">\n <p><strong>Hinweis:</strong> <a href=\"https://webaim.org/techniques/css/invisiblecontent/\" class=\"external\" target=\"_blank\">Unsichtbarer Inhalt nur für Benutzer von Bildschirmlesern</a> bietet viele nützliche Details zu diesem Thema.</p>\n</div>"}},{"type":"prose","value":{"id":"javascript","title":"JavaScript","isH3":true,"content":"<p>JavaScript hat dieselben Probleme wie CSS in Bezug auf Barrierefreiheit — es kann für Barrierefreiheit katastrophal sein, wenn es schlecht oder übermäßig verwendet wird. Wir haben bereits auf einige Barrierefreiheitsprobleme im Zusammenhang mit JavaScript hingewiesen, hauptsächlich im Bereich semantischen HTMLs — Sie sollten immer das geeignete semantische HTML verwenden, um Funktionalität zu implementieren, wo immer es verfügbar ist, z. B. verwenden Sie Links und Schaltflächen entsprechend. Verwenden Sie keine <code><div></code>-Elemente mit JavaScript-Code, um Funktionalität zu simulieren, wenn es überhaupt möglich ist — es ist fehleranfällig und mehr Arbeit als die kostenlose Funktionalität, die Ihnen HTML bietet.</p>\n<h4 id=\"einfache_funktionalität\">Einfache Funktionalität</h4>\n<p>Im Allgemeinen sollte einfache Funktionalität nur mit dem vorhandenen HTML funktionieren — JavaScript sollte nur verwendet werden, um die Funktionalität zu verbessern, nicht sie vollständig einzubauen. Gute Verwendungen von JavaScript umfassen:</p>\n<ul>\n <li>Bereitstellung von clientseitiger Formularvalidierung, die Benutzer schnell auf Probleme mit ihren Formulareinträgen aufmerksam macht, ohne auf die Überprüfung der Daten durch den Server warten zu müssen. Wenn es nicht verfügbar ist, funktioniert das Formular dennoch, aber die Validierung kann langsamer sein.</li>\n <li>Bereitstellung benutzerdefinierter Steuerungen für HTML-<code><video></code>s, die für Benutzer, die nur die Tastatur verwenden, zugänglich sind (wie bereits erwähnt, sind die Standard-Browser-Steuerungen in den meisten Browsern nicht über die Tastatur zugänglich).</li>\n</ul>\n<div class=\"notecard note\">\n <p><strong>Hinweis:</strong> WebAIMs <a href=\"https://webaim.org/techniques/javascript/\" class=\"external\" target=\"_blank\">Zugängliches JavaScript</a> bietet einige nützliche weitere Details zu Überlegungen für zugängliches JavaScript.</p>\n</div>\n<p>Komplexere JavaScript-Implementierungen können Probleme mit der Barrierefreiheit verursachen — Sie müssen tun, was Sie können. Zum Beispiel wäre es unvernünftig, von Ihnen zu erwarten, dass Sie ein komplexes 3D-Spiel, das mithilfe von <a href=\"/de/docs/Glossary/WebGL\">WebGL</a> geschrieben wurde, 100% zugänglich für eine blinde Person machen, aber Sie könnten <a href=\"/de/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard\">Tastatursteuerungen</a> implementieren, damit es von Nicht-Maus-Benutzern genutzt werden kann, und das Farbschema kontrastreich genug machen, um es für Menschen mit Farbbehinderungen nutzbar zu machen.</p>\n<h4 id=\"komplexe_funktionalität\">Komplexe Funktionalität</h4>\n<p>Eines der Hauptprobleme für Barrierefreiheit sind komplexe Apps, die komplizierte Formularsteuerungen (wie Datumsauswähler) und dynamische Inhalte umfassen, die häufig und inkrementell aktualisiert werden.</p>\n<p>Nicht-native komplizierte Formularsteuerungen sind problematisch, weil sie oft viele verschachtelte <code><div></code>s beinhalten und der Browser standardmäßig nicht weiß, was damit zu tun ist. Wenn Sie sie selbst erfinden, müssen Sie sicherstellen, dass sie für die Tastatur zugänglich sind; wenn Sie ein Drittanbieter-Framework verwenden, überprüfen Sie sorgfältig die verfügbaren Optionen, um zu sehen, wie zugänglich sie sind, bevor Sie es verwenden. <a href=\"https://getbootstrap.com/\" class=\"external\" target=\"_blank\">Bootstrap</a> scheint für Barrierefreiheit ziemlich gut zu sein, obwohl <a href=\"https://www.sitepoint.com/making-bootstrap-accessible/\" class=\"external\" target=\"_blank\">Bootstrap ein wenig zugänglicher machen</a> von Rhiana Heath einige seiner Probleme (hauptsächlich im Zusammenhang mit Farbkontrast) erkundet und einige Lösungen anspricht.</p>\n<p>Regelmäßig aktualisierte dynamische Inhalte können problematisch sein, weil Bildschirmleser-Benutzer sie möglicherweise verpassen, insbesondere wenn sie unerwartet aktualisiert werden. Wenn Sie eine Single-Page-App mit einem Hauptinhaltspanel haben, das regelmäßig mit <a href=\"/de/docs/Web/API/XMLHttpRequest\">XMLHttpRequest</a> oder <a href=\"/de/docs/Web/API/Fetch_API\">Fetch</a> aktualisiert wird, könnte ein Benutzer des Bildschirmlesers diese Aktualisierungen verpassen.</p>\n<h4 id=\"wai-aria\">WAI-ARIA</h4>\n<p>Benötigen Sie solche komplexen Funktionen oder reicht einfaches semantisches HTML aus? Wenn Sie Komplexität benötigen, sollten Sie die Verwendung von <a href=\"https://www.w3.org/TR/wai-aria-1.1/\" class=\"external\" target=\"_blank\">WAI-ARIA</a> (Accessible Rich Internet Applications), einer Spezifikation, die Semantik (in Form von neuen HTML-Attributen) für Elemente wie komplexe Formularsteuerungen und aktualisierende Panels bietet, in Betracht ziehen, die von den meisten Browsern und Bildschirmlesern verstanden werden kann.</p>\n<p>Um mit komplexen Formular-Widgets umzugehen, müssen Sie ARIA-Attribute wie <code>roles</code> verwenden, um anzugeben, welche Rolle verschiedene Elemente in einem Widget haben (zum Beispiel sind sie ein Tab oder ein Tab-Panel?), <code>aria-disabled</code>, um zu sagen, ob eine Steuerung deaktiviert ist oder nicht usw.</p>\n<p>Um mit regelmäßig aktualisierten Inhaltsbereichen umzugehen, können Sie das <code>aria-live</code>-Attribut verwenden, das einen aktualisierenden Bereich identifiziert. Sein Wert gibt an, wie dringend der Bildschirmleser ihn vorlesen soll:</p>\n<ul>\n <li><code>off:</code> Der Standard. Updates sollten nicht angekündigt werden.</li>\n <li><code>polite</code>: Updates sollten nur angekündigt werden, wenn der Benutzer untätig ist.</li>\n <li><code>assertive</code>: Updates sollten dem Benutzer so schnell wie möglich angekündigt werden.</li>\n</ul>\n<p>Hier ist ein Beispiel:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><p><span id=\"LiveRegion1\" aria-live=\"polite\" aria-atomic=\"false\"></span></p>\n</code></pre></div>\n<p>Sie können ein Beispiel in Aktion auf Freedom Scientific's <a href=\"https://www.freedomscientific.com/SurfsUp/AriaLiveRegions.htm\" class=\"external\" target=\"_blank\">ARIA (Accessible Rich Internet Applications) Live Regions</a>-Beispiel sehen — der hervorgehobene Absatz sollte alle 10 Sekunden seinen Inhalt aktualisieren, und ein Bildschirmleser sollte dies dem Benutzer vorlesen. <a href=\"https://www.freedomscientific.com/SurfsUp/AriaLiveRegionsAtomic.htm\" class=\"external\" target=\"_blank\">ARIA Live Regions - Atomic</a> bietet ein weiteres nützliches Beispiel.</p>\n<p>Wir haben nicht den Raum, um WAI-ARIA hier im Detail zu behandeln, Sie können viel mehr darüber lernen bei <a href=\"/de/docs/Learn/Accessibility/WAI-ARIA_basics\">WAI-ARIA-Grundlagen</a>.</p>"}},{"type":"prose","value":{"id":"tools_für_die_barrierefreiheit","title":"Tools für die Barrierefreiheit","isH3":false,"content":"<p>Da wir nun die Überlegungen zur Barrierefreiheit für verschiedene Web-Technologien behandelt haben, einschließlich einiger Testtechniken (wie Tastaturnavigation und Farbkontrastprüfer), schauen wir uns einige andere Tools an, die Sie beim Testen auf Barrierefreiheit nutzen können.</p>"}},{"type":"prose","value":{"id":"prüftools","title":"Prüftools","isH3":true,"content":"<p>Es gibt eine Reihe von Prüftools, die Sie Ihren Webseiten füttern können. Sie werden sie überprüfen und eine Liste von Barrierefreiheitsproblemen auf der Seite zurückgeben. Lassen Sie uns ein Beispiel ansehen, indem wir <a href=\"https://wave.webaim.org/\" class=\"external\" target=\"_blank\">Wave</a> verwenden, ein Online-Prüftool für Barrierefreiheit, das eine Webadresse akzeptiert und eine annotierte Ansicht dieser Seite mit hervorgehobenen Barrierefreiheitsproblemen zurückgibt.</p>\n<ol>\n <li>Gehen Sie auf die <a href=\"https://wave.webaim.org/\" class=\"external\" target=\"_blank\">Wave-Startseite</a>.</li>\n <li>Geben Sie die URL unseres <a href=\"https://mdn.github.io/learning-area/accessibility/html/bad-semantics.html\" class=\"external\" target=\"_blank\">bad-semantics.html</a>-Beispiels in das Texteingabefeld oben auf der Seite ein. Drücken Sie dann Enter oder klicken/tippen Sie auf den Pfeil an der äußersten rechten Kante des Eingabefelds.</li>\n <li>Die Seite sollte mit einer Beschreibung der Barrierefreiheitsprobleme antworten. Klicken Sie auf die angezeigten Symbole, um weitere Informationen zu jedem der von Waves Bewertung ermittelten Probleme zu sehen.</li>\n</ol>\n<div class=\"notecard note\">\n <p><strong>Hinweis:</strong> Solche Tools sind nicht gut genug, um alle Ihre Barrierefreiheitsprobleme allein zu lösen. Sie benötigen eine Kombination aus diesen, Wissen und Erfahrung, Benutzer-Tests usw., um ein vollständiges Bild zu erhalten.</p>\n</div>"}},{"type":"prose","value":{"id":"automatisierungswerkzeuge","title":"Automatisierungswerkzeuge","isH3":true,"content":"<p><a href=\"https://www.deque.com/axe/\" class=\"external\" target=\"_blank\">Deque's aXe-Tool</a> geht ein Stück weiter als die oben genannten Prüftools. Wie die anderen überprüft es Seiten und gibt Barrierefreiheitserrors zurück. Seine nützlichste Form ist wahrscheinlich die Browser-Erweiterungen:</p>\n<ul>\n <li><a href=\"https://chromewebstore.google.com/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd\" class=\"external\" target=\"_blank\">aXe für Chrome</a></li>\n <li><a href=\"https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/\" class=\"external\" target=\"_blank\">aXe für Firefox</a></li>\n</ul>\n<p>Diese fügen den Browser-Entwicklertools einen Barrierefreiheitstab hinzu. Zum Beispiel haben wir die Firefox-Version installiert und damit unser <a href=\"https://mdn.github.io/learning-area/accessibility/html/bad-table.html\" class=\"external\" target=\"_blank\">bad-table.html</a>-Beispiel überprüft. Wir erhielten die folgenden Ergebnisse:</p>\n<p>\n <img src=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility/axe-screenshot.png\" alt=\"Ein Screenshot von Barrierefreiheitsproblemen, die vom Axe-Tool identifiziert wurden.\" width=\"800\" height=\"580\" loading=\"lazy\">\n</p>\n<p>aXe ist auch mit <code>npm</code> installierbar und kann in Aufgabenverwalter wie <a href=\"https://gruntjs.com/\" class=\"external\" target=\"_blank\">Grunt</a> und <a href=\"https://gulpjs.com/\" class=\"external\" target=\"_blank\">Gulp</a>, Automatisierungs-Frameworks wie <a href=\"https://www.selenium.dev/\" class=\"external\" target=\"_blank\">Selenium</a> und <a href=\"https://cucumber.io/\" class=\"external\" target=\"_blank\">Cucumber</a>, Unit-Testing-Frameworks wie <a href=\"https://jasmine.github.io/\" class=\"external\" target=\"_blank\">Jasmine</a> und mehr integriert werden (siehe erneut die <a href=\"https://www.deque.com/axe/\" class=\"external\" target=\"_blank\">Haupt-aXe-Seite</a> für Details).</p>"}},{"type":"prose","value":{"id":"bildschirmleser","title":"Bildschirmleser","isH3":true,"content":"<p>Es lohnt sich auf jeden Fall, mit einem Bildschirmleser zu testen, um sich daran zu gewöhnen, wie stark sehbehinderte Menschen das Internet nutzen. Es gibt eine Reihe von Bildschirmlesern:</p>\n<ul>\n <li>Einige sind kostenpflichtige kommerzielle Produkte, wie <a href=\"https://www.freedomscientific.com/Products/software/JAWS/\" class=\"external\" target=\"_blank\">JAWS</a> (Windows).</li>\n <li>Einige sind kostenfreie Produkte, wie <a href=\"https://www.nvaccess.org/\" class=\"external\" target=\"_blank\">NVDA</a> (Windows), <a href=\"https://support.google.com/chromebook/answer/7031755\" class=\"external\" target=\"_blank\">ChromeVox</a> (Chrome, Windows und macOS) und <a href=\"https://wiki.gnome.org/Projects/Orca\" class=\"external\" target=\"_blank\">Orca</a> (Linux).</li>\n <li>Einige sind in das Betriebssystem integriert, wie <a href=\"https://www.apple.com/accessibility/vision/\" class=\"external\" target=\"_blank\">VoiceOver</a> (macOS und iOS), <a href=\"https://support.google.com/chromebook/answer/7031755\" class=\"external\" target=\"_blank\">ChromeVox</a> (auf Chromebooks) und <a href=\"https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback\" class=\"external\" target=\"_blank\">TalkBack</a> (Android).</li>\n</ul>\n<p>Im Allgemeinen sind Bildschirmleser separate Apps, die auf dem Host-Betriebssystem ausgeführt werden und nicht nur Webseiten, sondern auch Text in anderen Apps lesen können. Das ist nicht immer der Fall (ChromeVox ist eine Browser-Erweiterung), aber normalerweise neigen Bildschirmleser dazu, auf leicht unterschiedliche Weise zu handeln und haben unterschiedliche Steuerungen, daher müssen Sie die Dokumentation für Ihren gewählten Bildschirmleser konsultieren, um alle Details zu erhalten - gesagt, dass sie alle im Grunde auf dieselbe Weise arbeiten.</p>\n<p>Lassen Sie uns einige Tests mit ein paar verschiedenen Bildschirmlesern durchgehen, um Ihnen eine allgemeine Vorstellung zu geben, wie sie funktionieren und wie man mit ihnen testet.</p>\n<div class=\"notecard note\">\n <p><strong>Hinweis:</strong> WebAIMs <a href=\"https://webaim.org/techniques/screenreader/\" class=\"external\" target=\"_blank\">Entwerfen für Bildschirmleser-Kompatibilität</a> bietet einige nützliche Informationen über die Nutzung von Bildschirmlesern und was am besten für Bildschirmleser funktioniert. Siehe auch <a href=\"https://webaim.org/projects/screenreadersurvey9/#used\" class=\"external\" target=\"_blank\">Screen Reader User Survey #9 Results</a> für einige interessante Statistiken zur Bildschirmlesernutzung.</p>\n</div>\n<h4 id=\"voiceover\">VoiceOver</h4>\n<p>VoiceOver (VO) ist kostenlos mit Ihrem Mac/iPhone/iPad enthalten, sodass es nützlich ist, auf dem Desktop/Mobilgerät zu testen, wenn Sie Apple-Produkte verwenden. Wir werden es auf macOS auf einem MacBook Pro testen.</p>\n<p>Um es einzuschalten, drücken Sie Cmd + F5. Wenn Sie VO noch nie verwendet haben, wird Ihnen ein Willkommensbildschirm angezeigt, auf dem Sie wählen können, ob Sie VO starten und ein wirklich nützliches Tutorial durchlaufen möchten, um zu lernen, wie Sie es verwenden. Um es wieder auszuschalten, drücken Sie erneut Cmd + F5.</p>\n<div class=\"notecard note\">\n <p><strong>Hinweis:</strong> Sie sollten das Tutorial mindestens einmal durchgehen — es ist ein wirklich nützlicher Weg, um VO zu lernen.</p>\n</div>\n<p>Wenn VO eingeschaltet ist, sieht die Anzeige größtenteils gleich aus, aber Sie sehen ein schwarzes Kästchen unten links auf dem Bildschirm, das Informationen darüber enthält, was VO derzeit ausgewählt hat. Zudem wird die aktuelle Auswahl hervorgehoben, mit einem schwarzen Rahmen — diese Hervorhebung wird als <strong>VO-Cursor</strong> bezeichnet.</p>\n<p>\n <img src=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility/voiceover.png\" alt=\"Ein Beispielscreenshot, der einen Accessibility-Test mit VoiceOver auf der MSZ-Startseite (Mozilla Support) zeigt. Der untere linke Bereich des Bildes hebt die auf der Webseite ausgewählten Informationen hervor.\" width=\"800\" height=\"386\" loading=\"lazy\">\n</p>\n<p>Um VO zu verwenden, werden Sie häufig den \"VO-Modifizierer\" verwenden — dies ist eine Taste oder Tastenkombination, die Sie zusätzlich zu den tatsächlichen VO-Tastaturkürzeln drücken müssen, um sie funktionieren zu lassen. Die Verwendung eines Modifizierers wie diesem ist bei Bildschirmlesern üblich, um zu verhindern, dass ihre Befehle mit anderen Befehlen kollidieren. Im Fall von VO kann der Modifizierer entweder CapsLock oder Ctrl + Option sein.</p>\n<p>VO hat viele Tastaturbefehle, und wir werden nicht alle hier auflisten. Die grundlegendsten, die Sie für das Testen von Webseiten benötigen, sind in der folgenden Tabelle aufgeführt. In den Tastaturkürzeln bedeutet \"VO\" \"der VoiceOver-Modifizierer\".</p>\n<figure class=\"table-container\"><table class=\"standard-table no-markdown\">\n <caption>Die gängigsten VoiceOver-Tastaturbefehle</caption>\n <thead>\n <tr>\n <th scope=\"col\">Tastenkürzel</th>\n <th scope=\"col\">Beschreibung</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>VO + Pfeiltasten</td>\n <td>Bewegen Sie den VO-Cursor nach oben, rechts, unten, links.</td>\n </tr>\n <tr>\n <td>VO + Leertaste</td>\n <td>Auswählen/Aktivieren von Elementen, die der VO-Cursor markiert hat. Dazu gehören auch im Rotor ausgewählte Elemente (siehe unten).</td>\n </tr>\n <tr>\n <td>VO + Umschalt + Pfeil nach unten</td>\n <td>In eine Gruppe von Elementen (wie eine HTML-Tabelle oder ein Formular usw.) wechseln. Innerhalb einer Gruppe können Sie sich herumbewegen und Elemente innerhalb dieser Gruppe normal auswählen.</td>\n </tr>\n <tr>\n <td>VO + Umschalt + Pfeil nach oben</td>\n <td>Aus einer Gruppe herauswechseln.</td>\n </tr>\n <tr>\n <td>VO + C</td>\n <td>(wenn in einer Tabelle) Lesen Sie die Kopfzeile der aktuellen Spalte.</td>\n </tr>\n <tr>\n <td>VO + R</td>\n <td>(wenn in einer Tabelle) Lesen Sie die Kopfzeile der aktuellen Zeile.</td>\n </tr>\n <tr>\n <td>VO + C + C (zwei Cs hintereinander)</td>\n <td>(wenn in einer Tabelle) Lesen Sie die gesamte aktuelle Spalte, einschließlich der Kopfzeile.</td>\n </tr>\n <tr>\n <td>VO + R + R (zwei Rs hintereinander)</td>\n <td>(wenn in einer Tabelle) Lesen Sie die gesamte aktuelle Zeile, einschließlich der Kopfzeilen, die zu jeder Zelle gehören.</td>\n </tr>\n <tr>\n <td>VO + Pfeiltaste links, VO + Pfeiltaste rechts</td>\n <td>(wenn in einigen horizontalen Optionen, wie einem Datum oder Zeitauswahl) Wechseln Sie zwischen Optionen.</td>\n </tr>\n <tr>\n <td>VO + Pfeiltaste nach oben, VO + Pfeiltaste nach unten</td>\n <td>(wenn in einigen horizontalen Optionen, wie einem Datum oder Zeitauswahl) Ändern Sie die aktuelle Option.</td>\n </tr>\n <tr>\n <td>VO + U</td>\n <td>Verwenden Sie den Rotor, der Listen von Überschriften, Links, Formularsteuerungen usw. zur einfachen Navigation anzeigt.</td>\n </tr>\n <tr>\n <td>VO + Pfeiltaste links, VO + Pfeiltaste rechts</td>\n <td>(wenn im Rotor) Wechseln Sie zwischen verschiedenen Listen im Rotor.</td>\n </tr>\n <tr>\n <td>VO + Pfeiltaste hoch, VO + Pfeiltaste runter</td>\n <td>(wenn im Rotor) Wechseln Sie zwischen verschiedenen Elementen in der aktuellen Rotorliste.</td>\n </tr>\n <tr>\n <td>Esc</td>\n <td>(wenn im Rotor) Rotor verlassen.</td>\n </tr>\n <tr>\n <td>Strg</td>\n <td>(wenn VO spricht) Sprache pausieren/fortsetzen.</td>\n </tr>\n <tr>\n <td>VO + Z</td>\n <td>Die letzte Sprachaufforderung neu starten.</td>\n </tr>\n <tr>\n <td>VO + D</td>\n <td>In das Mac-Dock gehen, damit Sie dort Apps auswählen können.</td>\n </tr>\n </tbody>\n</table></figure>\n<p>Dies scheint eine Menge an Befehlen zu sein, aber es ist nicht so schlimm, wenn man sich daran gewöhnt, und VO gibt Ihnen regelmäßig Erinnerungen, welche Befehle in bestimmten Situationen zu verwenden sind. Spielen Sie jetzt mit VO herum; Sie können dann einige unserer Beispiele im Abschnitt <a href=\"#bildschirmleser-tests\">Bildschirmleser-Tests</a> ausprobieren.</p>\n<h4 id=\"nvda\">NVDA</h4>\n<p>NVDA ist nur für Windows und Sie müssen es installieren.</p>\n<ol>\n <li>Laden Sie es von <a href=\"https://www.nvaccess.org/\" class=\"external\" target=\"_blank\">nvaccess.org</a> herunter. Sie können wählen, ob sie eine Spende leisten oder es kostenlos herunterladen möchten; Sie müssen zudem Ihre E-Mail-Adresse angeben, bevor Sie es herunterladen können.</li>\n <li>Sobald es heruntergeladen ist, installieren Sie es — doppelklicken Sie auf das Installationsprogramm, akzeptieren Sie die Lizenz und folgen Sie den Aufforderungen.</li>\n <li>Um NVDA zu starten, doppelklicken Sie auf die Programmdatei/Verknüpfung oder verwenden Sie das Tastenkürzel Strg + Alt + N. Bei Start sehen Sie den NVDA-Willkommensdialog. Hier können Sie aus ein paar Optionen wählen und dann die <em>OK</em>-Taste drücken, um zu beginnen.</li>\n</ol>\n<p>NVDA ist jetzt auf Ihrem Computer aktiv.</p>\n<p>Um NVDA zu verwenden, werden Sie den \"NVDA Modifizierer\" häufig verwenden — dies ist eine Taste, die Sie zusätzlich zu den tatsächlichen NVDA-Tastaturkürzeln drücken müssen, um sie funktioneren zu lassen. Die Verwendung eines Modifizierers wie diesem ist bei Bildschirmlesern üblich, um zu verhindern, dass ihre Befehle mit anderen Befehlen kollidieren. Im Fall von NVDA kann der Modifizierer entweder Einfügen (standardmäßig) oder CapsLock sein (kann durch Aktivieren des ersten Kontrollkästchens im NVDA-Willkommensdialog gewählt werden, bevor Sie <em>OK</em> drücken).</p>\n<div class=\"notecard note\">\n <p><strong>Hinweis:</strong> NVDA ist subtiler als VoiceOver in Bezug darauf, wie es markiert, wo es sich befindet und was es tut. Beim Durchsuchen von Überschriften, Listen usw. werden Elemente, auf denen Sie ausgewählt sind, im Allgemeinen mit einem subtilen Umriss hervorgehoben, aber das ist nicht immer bei allen Dingen der Fall. Wenn Sie sich komplett verirren, können Sie Strg + F5 drücken, um die aktuelle Seite zu aktualisieren und von oben neu zu beginnen.</p>\n</div>\n<p>NVDA hat viele Tastaturbefehle, und wir werden nicht alle hier auflisten. Die grundlegendsten, die Sie für das Testen von Webseiten benötigen, sind in der folgenden Tabelle aufgeführt. In den Tastaturkürzeln bedeutet \"NVDA\" \"der NVDA-Modifizierer\".</p>\n<figure class=\"table-container\"><table class=\"standard-table no-markdown\">\n <caption>Die gängigsten NVDA-Tastaturbefehle</caption>\n <thead>\n <tr>\n <th scope=\"col\">Tastenkürzel</th>\n <th scope=\"col\">Beschreibung</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>NVDA + Q</td>\n <td>Schalten Sie NVDA wieder aus, nachdem Sie es gestartet haben.</td>\n </tr>\n <tr>\n <td>NVDA + Pfeiltaste hoch</td>\n <td>Aktuelle Zeile lesen.</td>\n </tr>\n <tr>\n <td>NVDA + Pfeiltaste runter</td>\n <td>Lesen Sie ab der aktuellen Position.</td>\n </tr>\n <tr>\n <td>Pfeiltaste hoch und Pfeiltaste runter oder Umschalt + Tab und Tab</td>\n <td>Wechseln Sie zum vorherigen/nächsten Element auf der Seite und lesen Sie es.</td>\n </tr>\n <tr>\n <td>Pfeiltaste links und Pfeiltaste rechts</td>\n <td>Wechseln Sie zum vorherigen/nächsten Zeichen im aktuellen Element und lesen Sie es.</td>\n </tr>\n <tr>\n <td>Umschalt + H und H</td>\n <td>Wechseln Sie zur vorherigen/nächsten Überschrift und lesen Sie sie.</td>\n </tr>\n <tr>\n <td>Umschalt + K und K</td>\n <td>Wechseln Sie zum vorherigen/nächsten Link und lesen Sie ihn.</td>\n </tr>\n <tr>\n <td>Umschalt + D und D</td>\n <td>\n Wechseln Sie zum vorherigen/nächsten Dokument-Landmark (z.B. <code><nav></code>)\n und lesen Sie ihn.\n </td>\n </tr>\n <tr>\n <td>Umschalt + 1–6 und 1–6</td>\n <td>Wechseln Sie zur vorherigen/nächsten Überschrift (Level 1–6) und lesen Sie sie.</td>\n </tr>\n <tr>\n <td>Umschalt + F und F</td>\n <td>Gehen Sie zurück/vorwärts zur vorherigen/nächsten Formulareingabe und konzentrieren Sie sich darauf.</td>\n </tr>\n <tr>\n <td>Umschalt + T und T</td>\n <td>Wechseln Sie zur vorherigen/nächsten Datentabelle und konzentrieren Sie sich darauf.</td>\n </tr>\n <tr>\n <td>Umschalt + B und B</td>\n <td>Wechseln Sie zur vorherigen/nächsten Schaltfläche und lesen Sie ihr Label.</td>\n </tr>\n <tr>\n <td>Umschalt + L und L</td>\n <td>Wechseln Sie zur vorherigen/nächsten Liste und lesen Sie ihre erste Listeneinheit.</td>\n </tr>\n <tr>\n <td>Umschalt + I und I</td>\n <td>Wechseln Sie zur vorherigen/nächsten Listeneinheit und lesen Sie sie.</td>\n </tr>\n <tr>\n <td>Eingabetaste/Return</td>\n <td>(wenn ein Link/eine Schaltfläche oder ein anderes aktivierbares Element ausgewählt ist) Aktivieren Sie das Element.</td>\n </tr>\n <tr>\n <td>NVDA + Leertaste</td>\n <td>\n (wenn ein Formular ausgewählt ist) Betreten Sie das Formular, damit einzelne Elemente ausgewählt werden können,\n oder verlassen Sie das Formular, wenn Sie bereits in ihm sind.\n </td>\n </tr>\n <tr>\n <td>Umschalt Tab und Tab</td>\n <td>(wenn im Formular) Wechseln Sie zwischen Formulareingaben.</td>\n </tr>\n <tr>\n <td>Pfeiltaste hoch und Pfeiltaste runter</td>\n <td>(wenn im Formular) Ändern Sie die Formulareingabewerte (im Fall von Boxen wie: auswählen Boxen).</td>\n </tr>\n <tr>\n <td>Leertaste</td>\n <td>(wenn im Formular) Wählen Sie den ausgewählten Wert aus.</td>\n </tr>\n <tr>\n <td>Strg + Alt + Pfeiltasten</td>\n <td>(wenn eine Tabelle ausgewählt ist) Wechseln Sie zwischen den Zellen der Tabelle.</td>\n </tr>\n </tbody>\n</table></figure>\n<h4 id=\"bildschirmleser-tests\">Bildschirmleser-Tests</h4>\n<p>Jetzt, da Sie sich daran gewöhnt haben, einen Bildschirmleser zu verwenden, möchten wir, dass Sie ihn verwenden, um einige schnelle Barrierefreiheitstests durchzuführen, um eine Vorstellung davon zu bekommen, wie Bildschirmleser mit guten und schlechten Webseitenfeatures umgehen:</p>\n<ul>\n <li>Schauen Sie sich <a href=\"https://mdn.github.io/learning-area/accessibility/html/good-semantics.html\" class=\"external\" target=\"_blank\">good-semantics.html</a> an und beachten Sie, wie die Überschriften vom Bildschirmleser gefunden werden und für die Navigation verfügbar sind. Schauen Sie sich nun <a href=\"https://mdn.github.io/learning-area/accessibility/html/bad-semantics.html\" class=\"external\" target=\"_blank\">bad-semantics.html</a> an und beachten Sie, wie der Bildschirmleser keine dieser Informationen erhält. Stellen Sie sich vor, wie ärgerlich das wäre, wenn Sie versuchen, eine wirklich lange Textseite zu navigieren.</li>\n <li>Schauen Sie sich <a href=\"https://mdn.github.io/learning-area/accessibility/html/good-links.html\" class=\"external\" target=\"_blank\">good-links.html</a> an und bemerken Sie, wie sie im Kontext Sinn ergeben. Dies ist nicht der Fall bei <a href=\"https://mdn.github.io/learning-area/accessibility/html/bad-links.html\" class=\"external\" target=\"_blank\">bad-links.html</a> — sie sind alle nur \"hier klicken\".</li>\n <li>Schauen Sie sich <a href=\"https://mdn.github.io/learning-area/accessibility/html/good-form.html\" class=\"external\" target=\"_blank\">good-form.html</a> an und bemerken Sie, wie die Formulareingaben durch ihre Beschriftungen beschrieben werden, weil wir <code><label></code>-Elemente richtig verwendet haben. Bei <a href=\"https://mdn.github.io/learning-area/accessibility/html/bad-form.html\" class=\"external\" target=\"_blank\">bad-form.html</a> erhalten sie eine unhilfreiche Bezeichnung wie \"leer\".</li>\n <li>Sehen Sie sich unser <a href=\"https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html\" class=\"external\" target=\"_blank\">punk-bands-complete.html</a>-Beispiel an und sehen Sie, wie der Bildschirmleser in der Lage ist, Spalten und Zeilen von Inhalten zu verknüpfen und sie zusammen vorzulesen, weil wir Kopfzeilen richtig definiert haben. In <a href=\"https://mdn.github.io/learning-area/accessibility/html/bad-table.html\" class=\"external\" target=\"_blank\">bad-table.html</a> können keine Zellen assoziiert werden. Beachten Sie, dass NVDA sich leicht merkwürdig verhält, wenn Sie haben nur eine einzelne Tabelle auf einer Seite; Sie könnten die <a href=\"https://webaim.org/articles/nvda/tables.htm\" class=\"external\" target=\"_blank\">Tabelle-Testseite von WebAIM</a> stattdessen ausprobieren.</li>\n <li>Werfen Sie einen Blick auf das <a href=\"https://www.freedomscientific.com/SurfsUp/AriaLiveRegions.htm\" class=\"external\" target=\"_blank\">WAI-ARIA Live Regions Beispiel</a>, das wir zuvor gesehen haben, und bemerken Sie, wie der Bildschirmleser den ständig aktualisierten Abschnitt vorliest, während er aktualisiert wird.</li>\n</ul>"}},{"type":"prose","value":{"id":"benutzer-tests","title":"Benutzer-Tests","isH3":true,"content":"<p>Wie bereits erwähnt, können Sie sich nicht allein auf automatisierte Tools verlassen, um Barrierefreiheitsprobleme auf Ihrer Seite zu bestimmen. Es wird empfohlen, dass, wenn Sie Ihren Testplan erstellen, Sie – soweit möglich – einige Barrierefreiheits-Benutzergruppen einbeziehen (siehe unseren <a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#user_testing\">Benutzer-Test</a> Abschnitt im vorherigen Kurs für mehr Kontext). Versuchen Sie, einige Benutzer von Bildschirmlesern, einige Benutzer, die nur die Tastatur verwenden, einige nicht hörende Benutzer und vielleicht andere Gruppen einzubeziehen, die Ihrer Anforderungen entsprechen.</p>"}},{"type":"prose","value":{"id":"checkliste_für_barrierefreiheitstests","title":"Checkliste für Barrierefreiheitstests","isH3":false,"content":"<p>Die folgende Liste bietet Ihnen eine Checkliste, der Sie folgen sollten, um sicherzustellen, dass Sie die empfohlenen Barrierefreiheitstests für Ihr Projekt durchgeführt haben:</p>\n<ol>\n <li>Stellen Sie sicher, dass Ihr HTML so semantisch korrekt wie möglich ist. <a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#validation\">Validierung</a> ist ein guter Anfang, ebenso wie die Verwendung eines <a href=\"#pr%C3%BCftools\">Prüftools</a>.</li>\n <li>Überprüfen Sie, ob Ihr Inhalt Sinn ergibt, wenn das CSS ausgeschaltet ist.</li>\n <li>Stellen Sie sicher, dass Ihre Funktionalität <a href=\"#nutzung_nativer_tastaturzug%C3%A4nglichkeit\">tastaturzugänglich</a> ist. Testen Sie mit Tab, Return/Enter usw.</li>\n <li>Stellen Sie sicher, dass Ihr nicht-Text-Inhalt über <a href=\"#textalternativen\">Textalternativen</a> verfügt. Ein <a href=\"#pr%C3%BCftools\">Prüftool</a> ist gut, um solche Probleme zu erkennen.</li>\n <li>Stellen Sie sicher, dass der <a href=\"#farbe_und_farbkontrast\">Farbkontrast</a> Ihrer Website akzeptabel ist, indem Sie ein geeignetes Prüfwerkzeug verwenden.</li>\n <li>Stellen Sie sicher, dass der <a href=\"#ausblenden_von_inhalten\">versteckte Inhalt</a> von Bildschirmlesern sichtbar ist.</li>\n <li>Stellen Sie sicher, dass die Funktionalität ohne JavaScript verwendbar ist, wo immer möglich.</li>\n <li>Verwenden Sie ARIA, um die Barrierefreiheit gegebenenfalls zu verbessern.</li>\n <li>Führen Sie Ihre Website mit einem <a href=\"#pr%C3%BCftools\">Prüftool</a>.</li>\n <li>Testen Sie es mit einem Bildschirmleser.</li>\n <li>Fügen Sie eine Barrierefreiheitspolitik/-erklärung irgendwo auffindbar auf Ihrer Seite ein, um zu sagen, was Sie getan haben.</li>\n</ol>"}},{"type":"prose","value":{"id":"hilfe_finden","title":"Hilfe finden","isH3":false,"content":"<p>Es gibt viele andere Probleme, die Sie bei der Barrierefreiheit antreffen werden; das Wichtigste, das Sie wirklich wissen müssen, ist, wie Sie online Antworten finden können. Konsultieren Sie den Abschnitt <a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#finding_help\">Hilfe finden</a> des HTML- und CSS-Artikels für einige gute Hinweise.</p>"}},{"type":"prose","value":{"id":"zusammenfassung","title":"Zusammenfassung","isH3":false,"content":"<p>Hoffentlich hat Ihnen dieser Artikel ein gutes Fundament in den Hauptproblemen der Barrierefreiheit geliefert, die Sie möglicherweise antreffen, und wie man sie testet und überwindet.</p>\n<p>Im nächsten Artikel werden wir die Feature-Erkennung näher betrachten.</p><ul class=\"prev-next\">\n <li><a class=\"button secondary\" href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript\"><span class=\"button-wrap\"> Zurück </span></a></li>\n <li><a class=\"button secondary\" href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing\"><span class=\"button-wrap\"> Übersicht: Cross-Browser-Testing</span></a></li>\n <li><a class=\"button secondary\" href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection\"><span class=\"button-wrap\"> Weiter </span></a></li>\n</ul>"}}],"toc":[{"text":"Was ist Barrierefreiheit?","id":"was_ist_barrierefreiheit"},{"text":"Häufige Barrierefreiheitsprobleme","id":"häufige_barrierefreiheitsprobleme"},{"text":"Tools für die Barrierefreiheit","id":"tools_für_die_barrierefreiheit"},{"text":"Checkliste für Barrierefreiheitstests","id":"checkliste_für_barrierefreiheitstests"},{"text":"Hilfe finden","id":"hilfe_finden"},{"text":"Zusammenfassung","id":"zusammenfassung"}],"summary":"Als Nächstes widmen wir uns der Barrierefreiheit, bieten Informationen zu häufigen Problemen, wie man einfache Tests durchführt, und wie man Prüf- und Automatisierungstools zur Erkennung von Barrierefreiheitsproblemen nutzt.","popularity":0,"modified":null,"other_translations":[{"locale":"en-US","title":"Handling common accessibility problems","native":"English (US)"},{"locale":"fr","title":"Gérer les problèmes courants d'accessibilité","native":"Français"},{"locale":"ja","title":"よくあるアクセシビリティの問題を扱う","native":"日本語"},{"locale":"zh-CN","title":"解决常见的无障碍问题","native":"中文 (简体)"}],"pageType":"unknown","source":{"folder":"de/learn/tools_and_testing/cross_browser_testing/accessibility","github_url":"https://github.com/mdn/translated-content/blob/main/files/de/learn/tools_and_testing/cross_browser_testing/accessibility/index.md","last_commit_url":"https://github.com/mdn/translated-content/commit/null","filename":"index.md"},"short_title":"Umgang mit häufigen Problemen der Barrierefreiheit","parents":[{"uri":"/de/docs/Learn","title":"Webentwicklung lernen"},{"uri":"/de/docs/Learn/Tools_and_testing","title":"Tools und Tests"},{"uri":"/de/docs/Learn/Tools_and_testing/Cross_browser_testing","title":"Cross-Browser-Testing"},{"uri":"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility","title":"Umgang mit häufigen Problemen der Barrierefreiheit"}],"pageTitle":"Umgang mit häufigen Problemen der Barrierefreiheit - Webentwicklung lernen | MDN","noIndexing":false}}</script></body></html>