[{"data":1,"prerenderedAt":1425},["ShallowReactive",2],{"blog-wcag-2-1-aa":3},{"id":4,"title":5,"body":6,"description":1410,"extension":1411,"meta":1412,"navigation":216,"path":1421,"seo":1422,"stem":1423,"__hash__":1424},"blog/blog/wcag-2-1-aa.md","Was ist WCAG 2.1 AA?",{"type":7,"value":8,"toc":1361},"minimark",[9,13,22,27,34,53,58,65,85,90,94,97,101,108,112,119,123,126,130,133,137,140,145,159,246,250,253,257,271,375,379,382,386,400,555,559,562,566,580,584,588,602,660,664,676,680,692,696,710,714,728,732,736,829,833,844,848,903,907,965,969,1055,1059,1063,1083,1087,1117,1121,1141,1145,1149,1156,1160,1163,1167,1174,1185,1189,1192,1196,1203,1207,1218,1222,1235,1239,1253,1257,1268,1272,1279,1302,1309,1312,1316,1319,1327,1329,1334,1357],[10,11,5],"h1",{"id":12},"was-ist-wcag-21-aa",[14,15,16,17,21],"p",{},"Die ",[18,19,20],"strong",{},"Web Content Accessibility Guidelines (WCAG) 2.1"," sind der internationale Standard für barrierefreie Webinhalte. Level AA ist dabei die am häufigsten geforderte Konformitätsstufe – und das aus gutem Grund.",[23,24,26],"h2",{"id":25},"warum-wcag-wichtig-ist","Warum WCAG wichtig ist",[14,28,29,30,33],{},"Barrierefreiheit im Web bedeutet, dass ",[18,31,32],{},"alle Menschen"," Ihre Website nutzen können – unabhängig von körperlichen oder technischen Einschränkungen. Das betrifft:",[35,36,37,44,47,50],"ul",{},[38,39,40,43],"li",{},[18,41,42],{},"15% der Weltbevölkerung"," haben eine Form von Behinderung",[38,45,46],{},"Ältere Menschen mit altersbedingten Einschränkungen",[38,48,49],{},"Menschen mit temporären Einschränkungen (z.B. gebrochener Arm)",[38,51,52],{},"Nutzer mit langsamen Internetverbindungen oder älteren Geräten",[54,55,57],"h3",{"id":56},"rechtliche-anforderungen","Rechtliche Anforderungen",[14,59,60,61,64],{},"In vielen Ländern ist WCAG 2.1 AA ",[18,62,63],{},"gesetzlich vorgeschrieben",":",[35,66,67,73,79],{},[38,68,69,72],{},[18,70,71],{},"EU",": European Accessibility Act (ab 2025 für viele Websites Pflicht)",[38,74,75,78],{},[18,76,77],{},"Deutschland",": Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) für öffentliche Stellen",[38,80,81,84],{},[18,82,83],{},"USA",": Americans with Disabilities Act (ADA) fordert vergleichbare Standards",[14,86,87],{},[18,88,89],{},"Nicht-Konformität kann zu Abmahnungen und Klagen führen.",[23,91,93],{"id":92},"die-drei-konformitätsstufen","Die drei Konformitätsstufen",[14,95,96],{},"WCAG definiert drei Level:",[54,98,100],{"id":99},"level-a-minimal","Level A (Minimal)",[14,102,103,104,107],{},"Die grundlegendsten Anforderungen. Ohne diese ist die Website für viele Menschen ",[18,105,106],{},"nicht nutzbar",".",[54,109,111],{"id":110},"level-aa-standard","Level AA (Standard) ⭐",[14,113,114,115,118],{},"Der ",[18,116,117],{},"goldene Standard"," und in vielen Fällen gesetzlich gefordert. Bietet ein gutes Gleichgewicht zwischen Barrierefreiheit und Umsetzbarkeit.",[54,120,122],{"id":121},"level-aaa-optimal","Level AAA (Optimal)",[14,124,125],{},"Die höchste Stufe. Oft nur für spezielle Bereiche sinnvoll, da nicht immer umsetzbar.",[23,127,129],{"id":128},"die-vier-prinzipien-von-wcag","Die vier Prinzipien von WCAG",[14,131,132],{},"WCAG basiert auf vier Grundprinzipien (POUR):",[54,134,136],{"id":135},"_1-perceivable-wahrnehmbar","1. Perceivable (Wahrnehmbar)",[14,138,139],{},"Informationen müssen für alle Sinne darstellbar sein.",[14,141,142],{},[18,143,144],{},"Beispiele:",[35,146,147,150,153,156],{},[38,148,149],{},"Alternativtexte für Bilder",[38,151,152],{},"Untertitel für Videos",[38,154,155],{},"Ausreichende Farbkontraste (mindestens 4.5:1 für Text)",[38,157,158],{},"Keine Information nur durch Farbe vermitteln",[160,161,166],"pre",{"className":162,"code":163,"language":164,"meta":165,"style":165},"language-html shiki shiki-themes github-light github-dark","\u003C!-- ✅ Gut -->\n\u003Cimg src=\"diagramm.webp\" alt=\"Verkaufszahlen Q4 2024: 25% Steigerung\" />\n\n\u003C!-- ❌ Schlecht -->\n\u003Cimg src=\"diagramm.webp\" alt=\"Diagramm\" />\n","html","",[167,168,169,178,211,218,224],"code",{"__ignoreMap":165},[170,171,174],"span",{"class":172,"line":173},"line",1,[170,175,177],{"class":176},"sJ8bj","\u003C!-- ✅ Gut -->\n",[170,179,181,185,189,193,196,200,203,205,208],{"class":172,"line":180},2,[170,182,184],{"class":183},"sVt8B","\u003C",[170,186,188],{"class":187},"s9eBZ","img",[170,190,192],{"class":191},"sScJk"," src",[170,194,195],{"class":183},"=",[170,197,199],{"class":198},"sZZnC","\"diagramm.webp\"",[170,201,202],{"class":191}," alt",[170,204,195],{"class":183},[170,206,207],{"class":198},"\"Verkaufszahlen Q4 2024: 25% Steigerung\"",[170,209,210],{"class":183}," />\n",[170,212,214],{"class":172,"line":213},3,[170,215,217],{"emptyLinePlaceholder":216},true,"\n",[170,219,221],{"class":172,"line":220},4,[170,222,223],{"class":176},"\u003C!-- ❌ Schlecht -->\n",[170,225,227,229,231,233,235,237,239,241,244],{"class":172,"line":226},5,[170,228,184],{"class":183},[170,230,188],{"class":187},[170,232,192],{"class":191},[170,234,195],{"class":183},[170,236,199],{"class":198},[170,238,202],{"class":191},[170,240,195],{"class":183},[170,242,243],{"class":198},"\"Diagramm\"",[170,245,210],{"class":183},[54,247,249],{"id":248},"_2-operable-bedienbar","2. Operable (Bedienbar)",[14,251,252],{},"Die Website muss mit verschiedenen Eingabemethoden nutzbar sein.",[14,254,255],{},[18,256,144],{},[35,258,259,262,265,268],{},[38,260,261],{},"Vollständige Tastaturnavigation",[38,263,264],{},"Keine Zeitlimits oder anpassbare Zeitlimits",[38,266,267],{},"Keine blinkenden Inhalte (Anfallsgefahr)",[38,269,270],{},"Klare Fokus-Indikatoren",[160,272,276],{"className":273,"code":274,"language":275,"meta":165,"style":165},"language-css shiki shiki-themes github-light github-dark","/* ✅ Fokus-Styles nicht entfernen */\nbutton:focus {\n  outline: 2px solid #1db954;\n  outline-offset: 2px;\n}\n\n/* ❌ Niemals so */\n*:focus {\n  outline: none;\n}\n","css",[167,277,278,283,294,319,332,337,342,348,358,370],{"__ignoreMap":165},[170,279,280],{"class":172,"line":173},[170,281,282],{"class":176},"/* ✅ Fokus-Styles nicht entfernen */\n",[170,284,285,288,291],{"class":172,"line":180},[170,286,287],{"class":187},"button",[170,289,290],{"class":191},":focus",[170,292,293],{"class":183}," {\n",[170,295,296,300,303,306,310,313,316],{"class":172,"line":213},[170,297,299],{"class":298},"sj4cs","  outline",[170,301,302],{"class":183},": ",[170,304,305],{"class":298},"2",[170,307,309],{"class":308},"szBVR","px",[170,311,312],{"class":298}," solid",[170,314,315],{"class":298}," #1db954",[170,317,318],{"class":183},";\n",[170,320,321,324,326,328,330],{"class":172,"line":220},[170,322,323],{"class":298},"  outline-offset",[170,325,302],{"class":183},[170,327,305],{"class":298},[170,329,309],{"class":308},[170,331,318],{"class":183},[170,333,334],{"class":172,"line":226},[170,335,336],{"class":183},"}\n",[170,338,340],{"class":172,"line":339},6,[170,341,217],{"emptyLinePlaceholder":216},[170,343,345],{"class":172,"line":344},7,[170,346,347],{"class":176},"/* ❌ Niemals so */\n",[170,349,351,354,356],{"class":172,"line":350},8,[170,352,353],{"class":187},"*",[170,355,290],{"class":191},[170,357,293],{"class":183},[170,359,361,363,365,368],{"class":172,"line":360},9,[170,362,299],{"class":298},[170,364,302],{"class":183},[170,366,367],{"class":298},"none",[170,369,318],{"class":183},[170,371,373],{"class":172,"line":372},10,[170,374,336],{"class":183},[54,376,378],{"id":377},"_3-understandable-verständlich","3. Understandable (Verständlich)",[14,380,381],{},"Inhalt und Bedienung müssen klar und nachvollziehbar sein.",[14,383,384],{},[18,385,144],{},[35,387,388,391,394,397],{},[38,389,390],{},"Konsistente Navigation",[38,392,393],{},"Klare Fehlermeldungen bei Formularen",[38,395,396],{},"Sprachwechsel im Code markieren",[38,398,399],{},"Vorhersehbares Verhalten",[160,401,403],{"className":162,"code":402,"language":164,"meta":165,"style":165},"\u003C!-- ✅ Klare Fehlermeldung -->\n\u003Clabel for=\"email\">E-Mail-Adresse *\u003C/label>\n\u003Cinput id=\"email\" type=\"email\" required aria-describedby=\"email-error\" />\n\u003Cspan id=\"email-error\" role=\"alert\">\n  Bitte gib eine gültige E-Mail-Adresse ein (z.B. name@beispiel.de)\n\u003C/span>\n\n\u003C!-- ❌ Unklar -->\n\u003Cinput type=\"email\" placeholder=\"Email\" />\n\u003Cspan style=\"color: red;\">Fehler\u003C/span>\n",[167,404,405,410,433,467,489,494,503,507,512,534],{"__ignoreMap":165},[170,406,407],{"class":172,"line":173},[170,408,409],{"class":176},"\u003C!-- ✅ Klare Fehlermeldung -->\n",[170,411,412,414,417,420,422,425,428,430],{"class":172,"line":180},[170,413,184],{"class":183},[170,415,416],{"class":187},"label",[170,418,419],{"class":191}," for",[170,421,195],{"class":183},[170,423,424],{"class":198},"\"email\"",[170,426,427],{"class":183},">E-Mail-Adresse *\u003C/",[170,429,416],{"class":187},[170,431,432],{"class":183},">\n",[170,434,435,437,440,443,445,447,450,452,454,457,460,462,465],{"class":172,"line":213},[170,436,184],{"class":183},[170,438,439],{"class":187},"input",[170,441,442],{"class":191}," id",[170,444,195],{"class":183},[170,446,424],{"class":198},[170,448,449],{"class":191}," type",[170,451,195],{"class":183},[170,453,424],{"class":198},[170,455,456],{"class":191}," required",[170,458,459],{"class":191}," aria-describedby",[170,461,195],{"class":183},[170,463,464],{"class":198},"\"email-error\"",[170,466,210],{"class":183},[170,468,469,471,473,475,477,479,482,484,487],{"class":172,"line":220},[170,470,184],{"class":183},[170,472,170],{"class":187},[170,474,442],{"class":191},[170,476,195],{"class":183},[170,478,464],{"class":198},[170,480,481],{"class":191}," role",[170,483,195],{"class":183},[170,485,486],{"class":198},"\"alert\"",[170,488,432],{"class":183},[170,490,491],{"class":172,"line":226},[170,492,493],{"class":183},"  Bitte gib eine gültige E-Mail-Adresse ein (z.B. name@beispiel.de)\n",[170,495,496,499,501],{"class":172,"line":339},[170,497,498],{"class":183},"\u003C/",[170,500,170],{"class":187},[170,502,432],{"class":183},[170,504,505],{"class":172,"line":344},[170,506,217],{"emptyLinePlaceholder":216},[170,508,509],{"class":172,"line":350},[170,510,511],{"class":176},"\u003C!-- ❌ Unklar -->\n",[170,513,514,516,518,520,522,524,527,529,532],{"class":172,"line":360},[170,515,184],{"class":183},[170,517,439],{"class":187},[170,519,449],{"class":191},[170,521,195],{"class":183},[170,523,424],{"class":198},[170,525,526],{"class":191}," placeholder",[170,528,195],{"class":183},[170,530,531],{"class":198},"\"Email\"",[170,533,210],{"class":183},[170,535,536,538,540,543,545,548,551,553],{"class":172,"line":372},[170,537,184],{"class":183},[170,539,170],{"class":187},[170,541,542],{"class":191}," style",[170,544,195],{"class":183},[170,546,547],{"class":198},"\"color: red;\"",[170,549,550],{"class":183},">Fehler\u003C/",[170,552,170],{"class":187},[170,554,432],{"class":183},[54,556,558],{"id":557},"_4-robust-robust","4. Robust (Robust)",[14,560,561],{},"Inhalte müssen mit aktuellen und zukünftigen Technologien funktionieren.",[14,563,564],{},[18,565,144],{},[35,567,568,571,574,577],{},[38,569,570],{},"Valider HTML-Code",[38,572,573],{},"ARIA-Attribute korrekt verwenden",[38,575,576],{},"Kompatibilität mit Screenreadern",[38,578,579],{},"Progressive Enhancement",[23,581,583],{"id":582},"die-wichtigsten-aa-anforderungen","Die wichtigsten AA-Anforderungen",[54,585,587],{"id":586},"farbkontrast","Farbkontrast",[35,589,590,596],{},[38,591,592,595],{},[18,593,594],{},"Text",": Mindestens 4.5:1 (normal) oder 3:1 (groß)",[38,597,598,601],{},[18,599,600],{},"UI-Elemente",": Mindestens 3:1",[160,603,605],{"className":273,"code":604,"language":275,"meta":165,"style":165},"/* ✅ Ausreichender Kontrast */\ncolor: #0f172a; /* Dunkelgrau auf Weiß = 16:1 */\nbackground: #ffffff;\n\n/* ❌ Zu wenig Kontrast */\ncolor: #cccccc; /* Hellgrau auf Weiß = 2.8:1 */\nbackground: #ffffff;\n",[167,606,607,612,627,635,639,644,654],{"__ignoreMap":165},[170,608,609],{"class":172,"line":173},[170,610,611],{"class":176},"/* ✅ Ausreichender Kontrast */\n",[170,613,614,617,621,624],{"class":172,"line":180},[170,615,616],{"class":183},"color: ",[170,618,620],{"class":619},"s7hpK","#0f172a",[170,622,623],{"class":183},"; ",[170,625,626],{"class":176},"/* Dunkelgrau auf Weiß = 16:1 */\n",[170,628,629,632],{"class":172,"line":213},[170,630,631],{"class":183},"background: ",[170,633,634],{"class":619},"#ffffff;\n",[170,636,637],{"class":172,"line":220},[170,638,217],{"emptyLinePlaceholder":216},[170,640,641],{"class":172,"line":226},[170,642,643],{"class":176},"/* ❌ Zu wenig Kontrast */\n",[170,645,646,648,651],{"class":172,"line":339},[170,647,616],{"class":183},[170,649,650],{"class":619},"#cccccc;",[170,652,653],{"class":176}," /* Hellgrau auf Weiß = 2.8:1 */\n",[170,655,656,658],{"class":172,"line":344},[170,657,631],{"class":183},[170,659,634],{"class":619},[54,661,663],{"id":662},"größe-von-touch-targets","Größe von Touch-Targets",[35,665,666,673],{},[38,667,668,669,672],{},"Mindestens ",[18,670,671],{},"44×44 Pixel"," für klickbare Elemente",[38,674,675],{},"Ausreichend Abstand zwischen Elementen",[54,677,679],{"id":678},"textgröße-und-zoom","Textgröße und Zoom",[35,681,682,689],{},[38,683,684,685,688],{},"Text muss auf ",[18,686,687],{},"200% zoombar"," sein ohne Funktionsverlust",[38,690,691],{},"Responsive Design für verschiedene Bildschirmgrößen",[54,693,695],{"id":694},"formulare","Formulare",[35,697,698,704,707],{},[38,699,700,701],{},"Jedes Eingabefeld braucht ein ",[167,702,703],{},"\u003Clabel>",[38,705,706],{},"Fehler müssen klar beschrieben werden",[38,708,709],{},"Pflichtfelder deutlich markieren",[54,711,713],{"id":712},"tastaturnavigation","Tastaturnavigation",[35,715,716,719,722,725],{},[38,717,718],{},"Alle Funktionen per Tastatur erreichbar",[38,720,721],{},"Logische Tab-Reihenfolge",[38,723,724],{},"Sichtbare Fokus-Indikatoren",[38,726,727],{},"Keine Tastaturfallen",[23,729,731],{"id":730},"häufige-fehler-und-wie-man-sie-vermeidet","Häufige Fehler (und wie man sie vermeidet)",[54,733,735],{"id":734},"fehler-1-fehlende-alt-texte","❌ Fehler 1: Fehlende Alt-Texte",[160,737,739],{"className":162,"code":738,"language":164,"meta":165,"style":165},"\u003C!-- Schlecht -->\n\u003Cimg src=\"produkt.webp\" />\n\n\u003C!-- Gut -->\n\u003Cimg src=\"produkt.webp\" alt=\"Ergonomischer Bürostuhl mit Lordosenstütze\" />\n\n\u003C!-- Dekoratives Bild -->\n\u003Cimg src=\"decoration.svg\" alt=\"\" role=\"presentation\" />\n",[167,740,741,746,761,765,770,791,795,800],{"__ignoreMap":165},[170,742,743],{"class":172,"line":173},[170,744,745],{"class":176},"\u003C!-- Schlecht -->\n",[170,747,748,750,752,754,756,759],{"class":172,"line":180},[170,749,184],{"class":183},[170,751,188],{"class":187},[170,753,192],{"class":191},[170,755,195],{"class":183},[170,757,758],{"class":198},"\"produkt.webp\"",[170,760,210],{"class":183},[170,762,763],{"class":172,"line":213},[170,764,217],{"emptyLinePlaceholder":216},[170,766,767],{"class":172,"line":220},[170,768,769],{"class":176},"\u003C!-- Gut -->\n",[170,771,772,774,776,778,780,782,784,786,789],{"class":172,"line":226},[170,773,184],{"class":183},[170,775,188],{"class":187},[170,777,192],{"class":191},[170,779,195],{"class":183},[170,781,758],{"class":198},[170,783,202],{"class":191},[170,785,195],{"class":183},[170,787,788],{"class":198},"\"Ergonomischer Bürostuhl mit Lordosenstütze\"",[170,790,210],{"class":183},[170,792,793],{"class":172,"line":339},[170,794,217],{"emptyLinePlaceholder":216},[170,796,797],{"class":172,"line":344},[170,798,799],{"class":176},"\u003C!-- Dekoratives Bild -->\n",[170,801,802,804,806,808,810,813,815,817,820,822,824,827],{"class":172,"line":350},[170,803,184],{"class":183},[170,805,188],{"class":187},[170,807,192],{"class":191},[170,809,195],{"class":183},[170,811,812],{"class":198},"\"decoration.svg\"",[170,814,202],{"class":191},[170,816,195],{"class":183},[170,818,819],{"class":198},"\"\"",[170,821,481],{"class":191},[170,823,195],{"class":183},[170,825,826],{"class":198},"\"presentation\"",[170,828,210],{"class":183},[54,830,832],{"id":831},"fehler-2-schlechter-farbkontrast","❌ Fehler 2: Schlechter Farbkontrast",[14,834,835,836,843],{},"Nutze Tools wie ",[837,838,842],"a",{"href":839,"rel":840},"https://webaim.org/resources/contrastchecker/",[841],"nofollow","WebAIM Contrast Checker"," zum Testen.",[54,845,847],{"id":846},"fehler-3-nur-farbe-als-information","❌ Fehler 3: Nur Farbe als Information",[160,849,851],{"className":162,"code":850,"language":164,"meta":165,"style":165},"\u003C!-- Schlecht -->\n\u003Cspan style=\"color: red;\">Pflichtfeld\u003C/span>\n\n\u003C!-- Gut -->\n\u003Cspan style=\"color: red;\">* Pflichtfeld\u003C/span>\n",[167,852,853,857,876,880,884],{"__ignoreMap":165},[170,854,855],{"class":172,"line":173},[170,856,745],{"class":176},[170,858,859,861,863,865,867,869,872,874],{"class":172,"line":180},[170,860,184],{"class":183},[170,862,170],{"class":187},[170,864,542],{"class":191},[170,866,195],{"class":183},[170,868,547],{"class":198},[170,870,871],{"class":183},">Pflichtfeld\u003C/",[170,873,170],{"class":187},[170,875,432],{"class":183},[170,877,878],{"class":172,"line":213},[170,879,217],{"emptyLinePlaceholder":216},[170,881,882],{"class":172,"line":220},[170,883,769],{"class":176},[170,885,886,888,890,892,894,896,899,901],{"class":172,"line":226},[170,887,184],{"class":183},[170,889,170],{"class":187},[170,891,542],{"class":191},[170,893,195],{"class":183},[170,895,547],{"class":198},[170,897,898],{"class":183},">* Pflichtfeld\u003C/",[170,900,170],{"class":187},[170,902,432],{"class":183},[54,904,906],{"id":905},"fehler-4-unklare-links","❌ Fehler 4: Unklare Links",[160,908,910],{"className":162,"code":909,"language":164,"meta":165,"style":165},"\u003C!-- Schlecht -->\n\u003Ca href=\"/mehr\">Mehr erfahren\u003C/a>\n\n\u003C!-- Gut -->\n\u003Ca href=\"/wcag-guide\">Mehr über WCAG 2.1 erfahren\u003C/a>\n",[167,911,912,916,937,941,945],{"__ignoreMap":165},[170,913,914],{"class":172,"line":173},[170,915,745],{"class":176},[170,917,918,920,922,925,927,930,933,935],{"class":172,"line":180},[170,919,184],{"class":183},[170,921,837],{"class":187},[170,923,924],{"class":191}," href",[170,926,195],{"class":183},[170,928,929],{"class":198},"\"/mehr\"",[170,931,932],{"class":183},">Mehr erfahren\u003C/",[170,934,837],{"class":187},[170,936,432],{"class":183},[170,938,939],{"class":172,"line":213},[170,940,217],{"emptyLinePlaceholder":216},[170,942,943],{"class":172,"line":220},[170,944,769],{"class":176},[170,946,947,949,951,953,955,958,961,963],{"class":172,"line":226},[170,948,184],{"class":183},[170,950,837],{"class":187},[170,952,924],{"class":191},[170,954,195],{"class":183},[170,956,957],{"class":198},"\"/wcag-guide\"",[170,959,960],{"class":183},">Mehr über WCAG 2.1 erfahren\u003C/",[170,962,837],{"class":187},[170,964,432],{"class":183},[54,966,968],{"id":967},"fehler-5-fehlende-formular-labels","❌ Fehler 5: Fehlende Formular-Labels",[160,970,972],{"className":162,"code":971,"language":164,"meta":165,"style":165},"\u003C!-- Schlecht -->\n\u003Cinput type=\"text\" placeholder=\"Name\" />\n\n\u003C!-- Gut -->\n\u003Clabel for=\"name\">Name\u003C/label>\n\u003Cinput id=\"name\" type=\"text\" placeholder=\"z.B. Max Mustermann\" />\n",[167,973,974,978,1000,1004,1008,1028],{"__ignoreMap":165},[170,975,976],{"class":172,"line":173},[170,977,745],{"class":176},[170,979,980,982,984,986,988,991,993,995,998],{"class":172,"line":180},[170,981,184],{"class":183},[170,983,439],{"class":187},[170,985,449],{"class":191},[170,987,195],{"class":183},[170,989,990],{"class":198},"\"text\"",[170,992,526],{"class":191},[170,994,195],{"class":183},[170,996,997],{"class":198},"\"Name\"",[170,999,210],{"class":183},[170,1001,1002],{"class":172,"line":213},[170,1003,217],{"emptyLinePlaceholder":216},[170,1005,1006],{"class":172,"line":220},[170,1007,769],{"class":176},[170,1009,1010,1012,1014,1016,1018,1021,1024,1026],{"class":172,"line":226},[170,1011,184],{"class":183},[170,1013,416],{"class":187},[170,1015,419],{"class":191},[170,1017,195],{"class":183},[170,1019,1020],{"class":198},"\"name\"",[170,1022,1023],{"class":183},">Name\u003C/",[170,1025,416],{"class":187},[170,1027,432],{"class":183},[170,1029,1030,1032,1034,1036,1038,1040,1042,1044,1046,1048,1050,1053],{"class":172,"line":339},[170,1031,184],{"class":183},[170,1033,439],{"class":187},[170,1035,442],{"class":191},[170,1037,195],{"class":183},[170,1039,1020],{"class":198},[170,1041,449],{"class":191},[170,1043,195],{"class":183},[170,1045,990],{"class":198},[170,1047,526],{"class":191},[170,1049,195],{"class":183},[170,1051,1052],{"class":198},"\"z.B. Max Mustermann\"",[170,1054,210],{"class":183},[23,1056,1058],{"id":1057},"tools-zum-testen","Tools zum Testen",[54,1060,1062],{"id":1061},"browser-extensions","Browser-Extensions",[35,1064,1065,1071,1077],{},[38,1066,1067,1070],{},[18,1068,1069],{},"axe DevTools"," (Chrome/Firefox) – Umfangreich und präzise",[38,1072,1073,1076],{},[18,1074,1075],{},"WAVE"," (Chrome/Firefox) – Visuelles Feedback",[38,1078,1079,1082],{},[18,1080,1081],{},"Lighthouse"," (in Chrome DevTools) – Automatische Audits",[54,1084,1086],{"id":1085},"manuelle-tests","Manuelle Tests",[35,1088,1089,1105,1111],{},[38,1090,1091,1093,1094,1097,1098,1101,1102],{},[18,1092,713],{},": Navigiere die gesamte Seite nur mit ",[167,1095,1096],{},"Tab",", ",[167,1099,1100],{},"Enter"," und ",[167,1103,1104],{},"Esc",[38,1106,1107,1110],{},[18,1108,1109],{},"Screenreader",": Teste mit NVDA (Windows), JAWS oder VoiceOver (Mac/iOS)",[38,1112,1113,1116],{},[18,1114,1115],{},"Zoom",": Zoome auf 200% und prüfe Lesbarkeit",[54,1118,1120],{"id":1119},"online-tools","Online-Tools",[35,1122,1123,1129,1134],{},[38,1124,1125],{},[837,1126,1075],{"href":1127,"rel":1128},"https://wave.webaim.org/",[841],[38,1130,1131],{},[837,1132,842],{"href":839,"rel":1133},[841],[38,1135,1136],{},[837,1137,1140],{"href":1138,"rel":1139},"https://validator.w3.org/",[841],"W3C Validator",[23,1142,1144],{"id":1143},"business-case-für-wcag","Business Case für WCAG",[54,1146,1148],{"id":1147},"größere-zielgruppe","Größere Zielgruppe",[14,1150,1151,1152,1155],{},"15% der Bevölkerung haben eine Behinderung – das sind ",[18,1153,1154],{},"potenzielle Kunden",", die Ihre Konkurrenz verliert.",[54,1157,1159],{"id":1158},"bessere-seo","Bessere SEO",[14,1161,1162],{},"Viele WCAG-Anforderungen (semantisches HTML, Alt-Texte, klare Struktur) helfen auch Suchmaschinen.",[54,1164,1166],{"id":1165},"höhere-conversion","Höhere Conversion",[14,1168,1169,1170,1173],{},"Barrierefreie Websites sind oft ",[18,1171,1172],{},"einfacher für alle"," zu nutzen:",[35,1175,1176,1179,1182],{},[38,1177,1178],{},"Klarere Navigation",[38,1180,1181],{},"Bessere Formulare",[38,1183,1184],{},"Schnellere Ladezeiten",[54,1186,1188],{"id":1187},"rechtssicherheit","Rechtssicherheit",[14,1190,1191],{},"Vermeide teure Abmahnungen und Klagen.",[23,1193,1195],{"id":1194},"wcag-in-der-praxis-unsere-herangehensweise","WCAG in der Praxis: Unsere Herangehensweise",[14,1197,1198,1199,1202],{},"Bei ",[18,1200,1201],{},"InnfinIT"," integrieren wir WCAG 2.1 AA von Anfang an:",[54,1204,1206],{"id":1205},"_1-design-phase","1. Design-Phase",[35,1208,1209,1212,1215],{},[38,1210,1211],{},"Farbpalette mit ausreichendem Kontrast",[38,1213,1214],{},"Touch-Target-Größen berücksichtigen",[38,1216,1217],{},"Klare visuelle Hierarchie",[54,1219,1221],{"id":1220},"_2-entwicklung","2. Entwicklung",[35,1223,1224,1227,1230,1233],{},[38,1225,1226],{},"Semantisches HTML",[38,1228,1229],{},"ARIA-Attribute wo nötig",[38,1231,1232],{},"Tastaturnavigation testen",[38,1234,579],{},[54,1236,1238],{"id":1237},"_3-testing","3. Testing",[35,1240,1241,1244,1247,1250],{},[38,1242,1243],{},"Automatische Tests mit axe",[38,1245,1246],{},"Manuelle Tastatur-Tests",[38,1248,1249],{},"Screenreader-Tests",[38,1251,1252],{},"Echte Nutzer mit Behinderungen (wenn möglich)",[54,1254,1256],{"id":1255},"_4-dokumentation","4. Dokumentation",[35,1258,1259,1262,1265],{},[38,1260,1261],{},"WCAG-Konformitätserklärung",[38,1263,1264],{},"Bekannte Einschränkungen dokumentieren",[38,1266,1267],{},"Kontaktmöglichkeit für Feedback",[23,1269,1271],{"id":1270},"fazit","Fazit",[14,1273,1274,1275,1278],{},"WCAG 2.1 AA ist ",[18,1276,1277],{},"kein \"Nice-to-have\"",", sondern:",[14,1280,1281,1282,1285,1288,1289,1292,1288,1294,1297,1288,1299],{},"✅ ",[18,1283,1284],{},"Rechtlich oft erforderlich",[1286,1287],"br",{},"\n✅ ",[18,1290,1291],{},"Ethisch richtig",[1286,1293],{},[18,1295,1296],{},"Business-sinnvoll",[1286,1298],{},[18,1300,1301],{},"Technisch machbar",[14,1303,1304,1305,1308],{},"Der beste Zeitpunkt, um mit Barrierefreiheit zu starten, ist ",[18,1306,1307],{},"jetzt"," – am besten gleich beim nächsten Projekt.",[1310,1311],"hr",{},[23,1313,1315],{"id":1314},"sie-brauchen-hilfe-bei-der-umsetzung","Sie brauchen Hilfe bei der Umsetzung?",[14,1317,1318],{},"Wir bei InnfinIT achten bei jedem Design- und Entwicklungsprojekt auf WCAG 2.1 AA-Konformität. Von Farbauswahl über semantischen Code bis zum finalen Testing.",[14,1320,1321],{},[18,1322,1323],{},[837,1324,1326],{"href":1325},"/kontakt","Kostenloses Beratungsgespräch vereinbaren →",[1310,1328],{},[14,1330,1331],{},[18,1332,1333],{},"Weitere Ressourcen:",[35,1335,1336,1343,1350],{},[38,1337,1338],{},[837,1339,1342],{"href":1340,"rel":1341},"https://www.w3.org/WAI/WCAG21/quickref/",[841],"WCAG 2.1 Offizielle Dokumentation",[38,1344,1345],{},[837,1346,1349],{"href":1347,"rel":1348},"https://www.a11yproject.com/checklist/",[841],"A11y Project Checklist",[38,1351,1352],{},[837,1353,1356],{"href":1354,"rel":1355},"https://developer.mozilla.org/en-US/docs/Web/Accessibility",[841],"MDN Accessibility Guide",[1358,1359,1360],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"title":165,"searchDepth":180,"depth":180,"links":1362},[1363,1366,1371,1377,1384,1391,1396,1402,1408,1409],{"id":25,"depth":180,"text":26,"children":1364},[1365],{"id":56,"depth":213,"text":57},{"id":92,"depth":180,"text":93,"children":1367},[1368,1369,1370],{"id":99,"depth":213,"text":100},{"id":110,"depth":213,"text":111},{"id":121,"depth":213,"text":122},{"id":128,"depth":180,"text":129,"children":1372},[1373,1374,1375,1376],{"id":135,"depth":213,"text":136},{"id":248,"depth":213,"text":249},{"id":377,"depth":213,"text":378},{"id":557,"depth":213,"text":558},{"id":582,"depth":180,"text":583,"children":1378},[1379,1380,1381,1382,1383],{"id":586,"depth":213,"text":587},{"id":662,"depth":213,"text":663},{"id":678,"depth":213,"text":679},{"id":694,"depth":213,"text":695},{"id":712,"depth":213,"text":713},{"id":730,"depth":180,"text":731,"children":1385},[1386,1387,1388,1389,1390],{"id":734,"depth":213,"text":735},{"id":831,"depth":213,"text":832},{"id":846,"depth":213,"text":847},{"id":905,"depth":213,"text":906},{"id":967,"depth":213,"text":968},{"id":1057,"depth":180,"text":1058,"children":1392},[1393,1394,1395],{"id":1061,"depth":213,"text":1062},{"id":1085,"depth":213,"text":1086},{"id":1119,"depth":213,"text":1120},{"id":1143,"depth":180,"text":1144,"children":1397},[1398,1399,1400,1401],{"id":1147,"depth":213,"text":1148},{"id":1158,"depth":213,"text":1159},{"id":1165,"depth":213,"text":1166},{"id":1187,"depth":213,"text":1188},{"id":1194,"depth":180,"text":1195,"children":1403},[1404,1405,1406,1407],{"id":1205,"depth":213,"text":1206},{"id":1220,"depth":213,"text":1221},{"id":1237,"depth":213,"text":1238},{"id":1255,"depth":213,"text":1256},{"id":1270,"depth":180,"text":1271},{"id":1314,"depth":180,"text":1315},"Alles Wichtige über die Web Content Accessibility Guidelines und warum sie für Ihre Website unverzichtbar sind.","md",{"date":1413,"author":1414,"category":1415,"tags":1416,"image":1420},"2025-10-27","Maximilian Borrmann","Barrierefreiheit",[1417,1418,1415,1419],"WCAG","Accessibility","Web Standards","/assets/img/leistungen/design.webp","/blog/wcag-2-1-aa",{"title":5,"description":1410},"blog/wcag-2-1-aa","nusEtkRIYNR2U69qH9BqoU0okgmXpW1zNhopJs9vecs",1774112250442]