[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"btz8hO-MXSFLpybqvfjYVBre4OvrEJO1wFySe3Zmv-s":3,"9_t0YFtO844PW3-iCfPxRTbw8yv0-2zzu2bChZFenjo":39,"VnkVzZHZgLyWtIJioZj-xYF3hEhzjHcnbw9T5Q887bk":75,"J3JMdNxsP67eKAJFwNcvmdGJlBHKycKPA9zC6hl8Cxg":172,"_apollo:default":217},{"menu":4},{"__typename":5,"id":6,"name":7,"items":8},"Menu","footer","Fußzeile",[9,24,29,34],{"__typename":10,"id":11,"title":12,"description":13,"url":14,"langcode":15,"internal":20,"expanded":21,"attributes":22},"MenuItem","e2873307-b50a-4aab-b6b2-1950fd99c72e","Impressum",null,"/impressum",{"__typename":16,"id":17,"name":18,"direction":19},"Language","de","German","ltr",true,false,{"__typename":23,"class":13},"MenuItemAttributes",{"__typename":10,"id":25,"title":26,"description":13,"url":27,"langcode":15,"internal":20,"expanded":21,"attributes":28},"2cd9b7c9-142a-4ea3-b898-a0952c54a195","Datenschutz","/datenschutz",{"__typename":23,"class":13},{"__typename":10,"id":30,"title":31,"description":13,"url":32,"langcode":15,"internal":20,"expanded":21,"attributes":33},"a5effba3-5a8c-4125-8d78-0cdba09824db","AGB","/agb",{"__typename":23,"class":13},{"__typename":10,"id":35,"title":36,"description":13,"url":37,"langcode":15,"internal":21,"expanded":21,"attributes":38},"114bf071-bdbb-44cf-85c1-69e9d9e0777d","Newsletter","https://liechtenecker.at/newsletter-subscribe",{"__typename":23,"class":13},{"menu":40},{"__typename":5,"id":41,"name":42,"items":43},"nuxt-main-menu","Nuxt Hauptmenü",[44,50,55,60,65,70],{"__typename":10,"id":45,"title":46,"description":13,"url":47,"langcode":48,"internal":20,"expanded":21,"attributes":49},"9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1","Blog","/know-how",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":23,"class":13},{"__typename":10,"id":51,"title":52,"description":13,"url":53,"langcode":48,"internal":20,"expanded":21,"attributes":54},"1c7a5430-8a42-4b24-9544-252adabc2f4c","Projekte","/projekte",{"__typename":23,"class":13},{"__typename":10,"id":56,"title":57,"description":13,"url":58,"langcode":48,"internal":20,"expanded":21,"attributes":59},"9c4feedc-79e4-4fbf-b68c-065f33ebfe4c","Sparring","/workshop-ux-sparring-fuer-unternehmen",{"__typename":23,"class":13},{"__typename":10,"id":61,"title":62,"description":13,"url":63,"langcode":48,"internal":20,"expanded":21,"attributes":64},"3b77a27b-272a-489f-843e-53e23ed07741","Trainings","/liechtenecker-ux-academy",{"__typename":23,"class":13},{"__typename":10,"id":66,"title":67,"description":13,"url":68,"langcode":48,"internal":20,"expanded":21,"attributes":69},"ce0bb82b-e1ee-4036-be95-f693a62e9f4a","Über uns","/about",{"__typename":23,"class":13},{"__typename":10,"id":71,"title":72,"description":13,"url":73,"langcode":48,"internal":20,"expanded":21,"attributes":74},"04a19381-81a9-4694-8653-182d8855d2b5","Kontakt","/kontakt",{"__typename":23,"class":13},{"route":76},{"__typename":77,"entity":78},"RouteInternal",{"__typename":79,"id":80,"title":81,"changed":82,"created":88,"langcode":89,"path":90,"promote":21,"status":20,"sticky":21,"metatag":91,"postCategory":111,"postContentElements":13,"evergreen":13,"tags":136,"postWpBody":162,"wpHeaderImage":13,"wpHeaderImageOld":13,"wpHeaderImageOldSmall":13,"wpOgImage":13,"wpPromotedTeaserImage":13,"wpShareDescription":13,"wpShareTitle":13,"wpTeaserText":13,"wpYoastHead":165,"author":166},"NodeWpPost","1359","Barrierefreie Datentabellen - Die perfekte Tabelle",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},"DateTime",1209987787,"UTC","+00:00","2008-05-05T11:43:07+00:00",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},{"__typename":16,"id":17,"name":18,"direction":19},"/blog/barrierefreie-datentabellen-die-perfekte-tabelle",[92,99,106],{"__typename":93,"tag":94,"attributes":95},"MetaTagValue","meta",{"__typename":96,"name":97,"content":98},"MetaTagValueAttributes","title","Barrierefreie Datentabellen - Die perfekte Tabelle | Liechtenecker UX Design Studio",{"__typename":100,"tag":101,"attributes":102},"MetaTagLink","link",{"__typename":103,"href":104,"hreflang":13,"rel":105,"media":13,"sizes":13,"type":13},"MetaTagLinkAttributes","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/blog/barrierefreie-datentabellen-die-perfekte-tabelle","canonical",{"__typename":107,"tag":94,"attributes":108},"MetaTagProperty",{"__typename":109,"property":110,"content":81},"MetaTagPropertyAttributes","og:title",{"__typename":112,"id":113,"name":114,"path":115,"status":20,"weight":116,"description":117,"langcode":121,"changed":122,"metatag":125},"TermCategories","8","UX/UI Design","/kategorie/design",0,{"__typename":118,"processed":119,"format":120},"Text","Themen aus dem Bereich Design & User Experience","wp_html",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":83,"timestamp":123,"timezone":85,"offset":86,"time":124},1713772777,"2024-04-22T07:59:37+00:00",[126,129,133],{"__typename":93,"tag":94,"attributes":127},{"__typename":96,"name":97,"content":128},"UX/UI Design | Liechtenecker UX Design Studio",{"__typename":93,"tag":94,"attributes":130},{"__typename":96,"name":131,"content":132},"description","Themen aus dem Bereich Design & User Experience",{"__typename":100,"tag":101,"attributes":134},{"__typename":103,"href":135,"hreflang":13,"rel":105,"media":13,"sizes":13,"type":13},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/kategorie/design",[137,142,146,150,154,158],{"__typename":138,"id":139,"name":140,"path":141,"weight":116},"TermTags","45","Accessibility","/tag/accessibility",{"__typename":138,"id":143,"name":144,"path":145,"weight":116},"135","Barrierefrei","/tag/barrierefrei",{"__typename":138,"id":147,"name":148,"path":149,"weight":116},"1133","Semantisches Web","/tag/semantisches-web",{"__typename":138,"id":151,"name":152,"path":153,"weight":116},"1466","W3C","/tag/w3c",{"__typename":138,"id":155,"name":156,"path":157,"weight":116},"1524","Webstandards","/tag/webstandards",{"__typename":138,"id":159,"name":160,"path":161,"weight":116},"1591","XHTML","/tag/xhtml",{"__typename":163,"processed":164,"format":120,"summary":13},"TextSummary","\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Datentabellen im Web können sehr leicht unübersichtlich werden, für eingeschränkte Internetuser noch mehr. Um dieses Problem zu lösen und der Tabelle eine Struktur zu geben, stehen eine Vielzahl an Tabellenspezifische (X)HTML-Elementen und Attributen zur Verfügung. Leider werden derzeit nicht alle Elemente von Screenreadern unterstützt, dennoch macht es für ein semantisches Markup sehr viel Sinn. Die Lesbarkeit und Accessibility wird deutlich erhöht. \u003C/p>\n\u003Cp>Aus aktuellem Anlass (für eine Modellrechnungsapplikation), hab ich mich entschlossen meinen Bloglesern die wichtigsten Eckdaten für eine zugängliche und strukturierte Tabelle nicht vorzuenthalten.\u003C/p>\n\u003Ch4>Tabellenzusammenfassung\u003C/h4>\n\u003Cp>\u003Ccode><summary>Das ist die Zusammenfassung des Inhaltes der Datentabelle </summary>\u003C/code>\u003C/p>\n\u003Cp>Dieses Attribut wird direkt innerhalb des <table> Tags angewendet und soll als Inhaltsbeschreibung dienen. Das Summary ist besonders wichtig für die Barrierefreiheit, da es  Screenreadern exklusiv zur Verfügung steht. Vergleichen kann man das Attribut mit dem ebenso sehr unerlässlichem „Alt-Text“ von Bilddateien in Webseiten.\u003C/p>\n\u003Ch4>Tabellenbezeichnung und Zusammenfassung\u003C/h4>\n\u003Cp>\u003Ccode><caption>Das ist die Tabellenüberschrift</caption>\u003C/code>\u003C/p>\n\u003Cp>Dieser Tag fungiert als Tabellenbezeichnung oder Überschrift, in diesem Fall würde ich aber empfehlen lieber über die Tabellen (zusätzlich oder stattdessen) ein klassisches Überschriften-Element zu setzen. (h1, h2..), da Screenreader-Benutzer besser zu solchen Überschriften springen können.\u003C/p>\n\u003Ch4>Struktur der Tabelle \u003C/h4>\n\u003Cp>Die 3 logischen Bereiche \u003C/p>\n\u003Cul>\n\u003Cli>\u003Ccode><thead>\u003C/code> Tableheader \u003C/li>\n\u003Cli>\u003Ccode><tbody>\u003C/code> Tablebody \u003C/li>\n\u003Cli>\u003Ccode><tfoot>\u003C/code> Tablefooter \u003C/li>\n\u003C/ul>\n\u003Cp>bieten die Möglichkeit einer passenden Aufteilung in die Bereiche: Kopf, Inhalt und Footer. Wichtig: Wenn Tableheader oder -footer verwendet werden muß unbedingt ein Tablebody-Element festgelegt werden, die 3 funktionieren nur zusammen. Eine Tabelle darf nur einen \u003Ccode><thead>\u003C/code> oder \u003Ccode><tfoot>\u003C/code>, aber mehrere \u003Ccode><tbody>\u003C/code>, um mehr Überschaubarkeit festzulegen. \u003C/p>\n\u003Ch4>Zeilen- oder Spaltenformatierung\u003C/h4>\n\u003Cp>Die Elemente \u003Ccode><colgroup>\u003C/code> und  \u003Ccode><col>\u003C/code> ermöglichen eine spezifische Darstellung der Spalten. Für eine Formatierung einer ganzen Zeile kann das \u003Ccode><tr>\u003C/code> Element zum Ansteuern verwendet werden. Das Element \u003Ccode><colgroup\u003C/code>> ermöglicht eine oder mehrere mit dem <col> Element ausgezeichneten Spalten. Hier gibts ein paar Einbußen bei älteren Browsern.\u003C/p>\n\u003Ch4>Praxisbeispiel \u003C/h4>\n\u003Ctable summary=\"Wie entwickelt sich mein Sparvertrag bei verschiedener Aktienperformance\">\n\u003Ccaption>Performance\u003C/caption>\n\u003Ccolgroup>\n\u003Ccol id=\"Jahre\">\n\u003Ccol id=\"Performance_3\">\n\u003Ccol id=\"Performance_4\">\u003C/colgroup>\n\u003Cthead>\n\u003Ctr>\n\u003Cth scope=\"col\">1\u003C/th>\n\u003Cth scope=\"col\">3%\u003C/th>\n\u003Cth scope=\"col\">4%\u003C/th>\n\u003C/tr>\n\u003C/thead>\n\u003Ctfoot>\n\u003Ctr>\n\u003Cth scope=\"col\">2\u003C/th>\n\u003Cth scope=\"col\">3%\u003C/th>\n\u003Cth scope=\"col\">4%\u003C/th>\n\u003C/tr>\n\u003C/tfoot>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>1\u003C/td>\n\u003Ctd>10000\u003C/td>\n\u003Ctd>20000\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>2\u003C/td>\n\u003Ctd>20000\u003C/td>\n\u003Ctd>30000\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>3\u003C/td>\n\u003Ctd>30000\u003C/td>\n\u003Ctd>40000\u003C/td>\n\u003C/tr>\n\u003C/tbody>\n\u003C/table>\n\u003Cp>\n\u003Ccode>\u003Cbr>\n<h2>Tabelle Performance</h2>\u003Cbr>\n  <table summary=\"Wie entwickelt sich mein Sparvertrag bei verschiedener Aktienperformance\">\u003Cbr>\n  <caption>Performance</caption>\u003Cbr>\n  <colgroup>\u003Cbr>\n  <col id=\"Jahre\" />\u003Cbr>\n  <col id=\"Performance_3\" />\u003Cbr>\n<col id=\"Performance_4\" />\u003Cbr>\n</colgroup>\u003Cbr>\n<thead>\u003Cbr>\n<tr>\u003Cbr>\n<th scope=\"col\">1</th>\u003Cbr>\n<th scope=\"col\">3%</th>\u003Cbr>\n<th scope=\"col\">4%</th>\u003Cbr>\n</tr>\u003Cbr>\n</thead>\u003Cbr>\n<tfoot>\u003Cbr>\n<tr>\u003Cbr>\n<th scope=\"col\">2</th>\u003Cbr>\n<th scope=\"col\">3%</th>\u003Cbr>\n<th scope=\"col\">4%</th>\u003Cbr>\n</tr>\u003Cbr>\n</tfoot>\u003Cbr>\n<tbody>\u003Cbr>\n<tr>\u003Cbr>\n<td>1</td>\u003Cbr>\n<td>10000</td>\u003Cbr>\n<td>20000</td>\u003Cbr>\n</tr>\u003Cbr>\n<tr>\u003Cbr>\n<td>2</td>\u003Cbr>\n<td>20000</td>\u003Cbr>\n<td>30000</td>\u003Cbr>\n</tr>\u003Cbr>\n<tr>\u003Cbr>\n<td>3</td>\u003Cbr>\n<td>30000</td>\u003Cbr>\n<td>40000</td>\u003Cbr>\n</tr>\u003Cbr>\n</tbody>\u003Cbr>\n</table>\u003Cbr>\n\u003C/code>\u003C/p>\n\u003Ch4>Formatierung\u003C/h4>\n\u003Cp>In der CSS-Spezifikation gibt es 2 Varianten von Tabellenrahmen: \u003C/p>\n\u003Cul>\n\u003Cli>\u003Ccode>seperate\u003C/code>\u003C/li>\n\u003Cli>\u003Ccode>collapse\u003C/code>\u003C/li>\n\u003C/ul>\n\u003Cp>Bei \u003Ccode>seperate\u003C/code> erhält jede Zelle einen eigenen Rahmen, während bei \u003Ccode>collapse\u003C/code> die Zellen sich Ränder teilen, welches ich nützlicher finde. Damit die Tabelle ein Rasterlayout behält, sollte auch eine feste Breite festgelegt werden, der Rahmen hilft sicher optisch besser abzugrenzen und ein Padding verbessert das Lesen der Zellendaten. Alle anderen oben genannten Elemente können wie üblich mit CSS gestylt werden. Empfehlen kann ich die CSS Table Galler, ausprobieren lohnt sich. \u003C/p>\n\u003Ch4>Referenzen\u003C/h4>\n\u003Cul>\n\u003Cli>\u003Ca href=\"http://www.w3.org/TR/html4/struct/tables.html\" target=\"_blank\" rel=\"noopener noreferrer\">W3C-Empfehlung für Tabellen\u003C/a> \u003C/li>\n\u003Cli>\u003Ca href=\"http://www.simplebits.com/publications/solutions/\" target=\"_blank\" rel=\"noopener noreferrer\">Web Standards Solutions\u003C/a> \u003C/li>\n\u003Cli>\u003Ca href=\"http://joeclark.org/book/sashay/serialization/Chapter10.html\" target=\"_blank\" rel=\"noopener noreferrer\">Building Accessible Websites\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"http://icant.co.uk/csstablegallery/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Table Gallery \u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"http://www.askthecssguy.com/kotatsu/index.html\" target=\"_blank\" rel=\"noopener noreferrer\">Für Faule: Tabellencreator\u003C/a>\u003C/li>\n\u003C/ul>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n","\u003C!-- This site is optimized with the Yoast SEO plugin v15.7 - https://yoast.com/wordpress/plugins/seo/ -->\n\u003Cmeta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n\u003Clink rel=\"canonical\" href=\"https://liechtenecker.at/blog/barrierefreie-datentabellen-die-perfekte-tabelle/\" />\n\u003Cmeta property=\"og:locale\" content=\"de_DE\" />\n\u003Cmeta property=\"og:type\" content=\"article\" />\n\u003Cmeta property=\"og:title\" content=\"Barrierefreie Datentabellen - Die perfekte Tabelle - Liechtenecker\" />\n\u003Cmeta property=\"og:description\" content=\"Datentabellen im Web können sehr leicht unübersichtlich werden, für eingeschränkte Internetuser noch mehr. Um dieses Problem zu lösen und der Tabelle eine Struktur zu geben, stehen eine Vielzahl an Tabellenspezifische (X)HTML-Elementen und Attributen zur Verfügung. Leider werden derzeit nicht alle Elemente von Screenreadern unterstützt, dennoch macht es für ein semantisches Markup sehr viel Sinn. Die […]\" />\n\u003Cmeta property=\"og:url\" content=\"https://liechtenecker.at/blog/barrierefreie-datentabellen-die-perfekte-tabelle/\" />\n\u003Cmeta property=\"og:site_name\" content=\"Liechtenecker\" />\n\u003Cmeta property=\"article:published_time\" content=\"2008-05-05T13:43:07+00:00\" />\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" />\n\u003Cmeta name=\"twitter:label1\" content=\"Geschätzte Lesezeit\">\n\t\u003Cmeta name=\"twitter:data1\" content=\"3 Minuten\">\n\u003Cscript type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https://liechtenecker.at/#website\",\"url\":\"https://liechtenecker.at/\",\"name\":\"Liechtenecker\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https://liechtenecker.at/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"WebPage\",\"@id\":\"https://liechtenecker.at/blog/barrierefreie-datentabellen-die-perfekte-tabelle/#webpage\",\"url\":\"https://liechtenecker.at/blog/barrierefreie-datentabellen-die-perfekte-tabelle/\",\"name\":\"Barrierefreie Datentabellen - Die perfekte Tabelle - Liechtenecker\",\"isPartOf\":{\"@id\":\"https://liechtenecker.at/#website\"},\"datePublished\":\"2008-05-05T13:43:07+00:00\",\"dateModified\":\"2008-05-05T13:43:07+00:00\",\"author\":{\"@id\":\"https://liechtenecker.at/#/schema/person/663b2d5142421ab394bf325c1b48cecf\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://liechtenecker.at/blog/barrierefreie-datentabellen-die-perfekte-tabelle/\"]}]},{\"@type\":\"Person\",\"@id\":\"https://liechtenecker.at/#/schema/person/663b2d5142421ab394bf325c1b48cecf\",\"name\":\"Stephan\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https://liechtenecker.at/#personlogo\",\"inLanguage\":\"de-DE\",\"url\":\"https://secure.gravatar.com/avatar/400d5f8c531afb609b81aa66c8d56f01?s=96&d=mm&r=g\",\"caption\":\"Stephan\"}}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"__typename":167,"id":168,"myRole":169,"name":170,"nickname":171},"User","23","langgedienter Frontend-Veteran","s-fletzberger","Stephan",{"latestKnowhow":173},[174,192,205],{"__typename":79,"id":175,"title":176,"path":177,"wpTeaserText":178,"wpPromotedTeaserImage":13,"wpHeaderImage":179},"1619","Behind the scenes: Ein Barrierefreiheits-Audit","/blog/behind-scenes-ein-barrierefreiheits-audit","”Entspricht unsere Website den gesetzlichen Anforderungen und wenn nicht, was genau müssen wir ändern?”\r\nDiese Frage lieben wir. Echt! Und so sieht unsere Antwort aus.",{"__typename":180,"id":181,"excludeFromScreenreader":13,"mediaImage":182,"name":190,"path":191,"status":20},"MediaImage","3364",{"__typename":183,"url":184,"width":185,"height":186,"alt":187,"title":13,"size":188,"mime":189},"Image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-04/Headerbilder%20Blogartikel%20Behind%20the%20scene%20Accessibility%20Audit.jpg",2880,1300,"Headline mit Sujet: Tastatur mit Symbolen für Barrierefreiheit im Fokus auf hellem  Hintergrund",838204,"image/jpeg","Headerbilder Blogartikel Behind the scene Accessibility Audit.jpg","/media/3364/edit",{"__typename":79,"id":193,"title":194,"path":195,"wpTeaserText":196,"wpPromotedTeaserImage":13,"wpHeaderImage":197},"1616","Agentic KI trifft Design-System: Wie unser Presentation Maker entstand.","/blog/agentic-ki-trifft-design-system-wie-unser-presentation-maker-entstand","Nein, wir wollen euch jetzt nicht erzählen, was KI alles kann. Aber wir möchten euch zeigen, wie wir mit KI umgehen. \r\n",{"__typename":180,"id":198,"excludeFromScreenreader":13,"mediaImage":199,"name":203,"path":204,"status":20},"3355",{"__typename":183,"url":200,"width":185,"height":186,"alt":201,"title":13,"size":202,"mime":189},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-03/BLOG_Presentation%20Tool_TITEL-2880x1300px_1.jpg","Lukas und Daniel  arbeiten an Computern im Büro.",2621988,"BLOG_Presentation Tool_TITEL-2880x1300px.jpg","/media/3355/edit",{"__typename":79,"id":206,"title":207,"path":208,"wpTeaserText":13,"wpPromotedTeaserImage":13,"wpHeaderImage":209},"1606","UI Trends 2026","/blog/ui-trends-2026",{"__typename":180,"id":210,"excludeFromScreenreader":21,"mediaImage":211,"name":215,"path":216,"status":20},"3303",{"__typename":183,"url":212,"width":185,"height":186,"alt":213,"title":13,"size":214,"mime":189},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-01/BLOG_Trendbericht%202026.jpg","UI Trends 2026, gelber Hintergrund, schwarze Schrift.",4700748,"BLOG_Trendbericht 2026.jpg","/media/3303/edit",{"Language:de":218,"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e":219,"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195":223,"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db":226,"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d":229,"Menu:footer":232,"ROOT_QUERY":242,"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1":258,"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c":261,"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c":264,"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741":267,"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a":270,"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5":273,"Menu:nuxt-main-menu":276,"TermCategories:8":290,"TermTags:45":301,"TermTags:135":302,"TermTags:1133":303,"TermTags:1466":304,"TermTags:1524":305,"TermTags:1591":306,"User:23":307,"NodeWpPost:1359":308,"MediaImage:3364":337,"NodeWpPost:1619":339,"MediaImage:3355":342,"NodeWpPost:1616":344,"MediaImage:3303":347,"NodeWpPost:1606":349},["null","__typename",16,"id",17,"name",18,"direction",19],["null","__typename",10,"id",11,"title",12,"description",13,"url",14,"langcode",220,"internal",20,"expanded",21,"attributes",222],{"__ref":221},"Language:de",["null","__typename",23,"class",13],["null","__typename",10,"id",25,"title",26,"description",13,"url",27,"langcode",224,"internal",20,"expanded",21,"attributes",225],{"__ref":221},["null","__typename",23,"class",13],["null","__typename",10,"id",30,"title",31,"description",13,"url",32,"langcode",227,"internal",20,"expanded",21,"attributes",228],{"__ref":221},["null","__typename",23,"class",13],["null","__typename",10,"id",35,"title",36,"description",13,"url",37,"langcode",230,"internal",21,"expanded",21,"attributes",231],{"__ref":221},["null","__typename",23,"class",13],["null","__typename",5,"id",6,"name",7,"items",233],[234,236,238,240],{"__ref":235},"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e",{"__ref":237},"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195",{"__ref":239},"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db",{"__ref":241},"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d",["null","__typename",243,"menu({\"name\":\"FOOTER\"})",244,"menu({\"name\":\"NUXT_MAIN_MENU\"})",246,"route({\"path\":\"/blog/barrierefreie-datentabellen-die-perfekte-tabelle\"})",248,"latestKnowhow({\"excludeId\":\"1359\",\"limit\":3})",251],"Query",{"__ref":245},"Menu:footer",{"__ref":247},"Menu:nuxt-main-menu",["null","__typename",77,"entity",249],{"__ref":250},"NodeWpPost:1359",[252,254,256],{"__ref":253},"NodeWpPost:1619",{"__ref":255},"NodeWpPost:1616",{"__ref":257},"NodeWpPost:1606",["null","__typename",10,"id",45,"title",46,"description",13,"url",47,"langcode",259,"internal",20,"expanded",21,"attributes",260],{"__ref":221},["null","__typename",23,"class",13],["null","__typename",10,"id",51,"title",52,"description",13,"url",53,"langcode",262,"internal",20,"expanded",21,"attributes",263],{"__ref":221},["null","__typename",23,"class",13],["null","__typename",10,"id",56,"title",57,"description",13,"url",58,"langcode",265,"internal",20,"expanded",21,"attributes",266],{"__ref":221},["null","__typename",23,"class",13],["null","__typename",10,"id",61,"title",62,"description",13,"url",63,"langcode",268,"internal",20,"expanded",21,"attributes",269],{"__ref":221},["null","__typename",23,"class",13],["null","__typename",10,"id",66,"title",67,"description",13,"url",68,"langcode",271,"internal",20,"expanded",21,"attributes",272],{"__ref":221},["null","__typename",23,"class",13],["null","__typename",10,"id",71,"title",72,"description",13,"url",73,"langcode",274,"internal",20,"expanded",21,"attributes",275],{"__ref":221},["null","__typename",23,"class",13],["null","__typename",5,"id",41,"name",42,"items",277],[278,280,282,284,286,288],{"__ref":279},"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1",{"__ref":281},"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c",{"__ref":283},"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c",{"__ref":285},"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741",{"__ref":287},"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a",{"__ref":289},"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5",["null","__typename",112,"id",113,"name",114,"path",115,"status",20,"weight",116,"description",291,"langcode",292,"changed",293,"metatag",294],["null","__typename",118,"processed",119,"format",120],{"__ref":221},["null","__typename",83,"timestamp",123,"timezone",85,"offset",86,"time",124],[295,297,299],["null","__typename",93,"tag",94,"attributes",296],["null","__typename",96,"name",97,"content",128],["null","__typename",93,"tag",94,"attributes",298],["null","__typename",96,"name",131,"content",132],["null","__typename",100,"tag",101,"attributes",300],["null","__typename",103,"href",135,"hreflang",13,"rel",105,"media",13,"sizes",13,"type",13],["null","__typename",138,"id",139,"name",140,"path",141,"weight",116],["null","__typename",138,"id",143,"name",144,"path",145,"weight",116],["null","__typename",138,"id",147,"name",148,"path",149,"weight",116],["null","__typename",138,"id",151,"name",152,"path",153,"weight",116],["null","__typename",138,"id",155,"name",156,"path",157,"weight",116],["null","__typename",138,"id",159,"name",160,"path",161,"weight",116],["null","__typename",167,"id",168,"myRole",169,"name",170,"nickname",171],["null","__typename",79,"id",80,"title",81,"changed",309,"created",310,"langcode",311,"path",90,"promote",21,"status",20,"sticky",21,"metatag",312,"category",319,"contentElements",13,"evergreen",13,"tags",321,"wpBody",334,"wpHeaderImage",13,"wpHeaderImageOld",13,"wpHeaderImageOldSmall",13,"wpOgImage",13,"wpPromotedTeaserImage",13,"wpShareDescription",13,"wpShareTitle",13,"wpTeaserText",13,"wpYoastHead",165,"author",335],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],{"__ref":221},[313,315,317],["null","__typename",93,"tag",94,"attributes",314],["null","__typename",96,"name",97,"content",98],["null","__typename",100,"tag",101,"attributes",316],["null","__typename",103,"href",104,"hreflang",13,"rel",105,"media",13,"sizes",13,"type",13],["null","__typename",107,"tag",94,"attributes",318],["null","__typename",109,"property",110,"content",81],{"__ref":320},"TermCategories:8",[322,324,326,328,330,332],{"__ref":323},"TermTags:45",{"__ref":325},"TermTags:135",{"__ref":327},"TermTags:1133",{"__ref":329},"TermTags:1466",{"__ref":331},"TermTags:1524",{"__ref":333},"TermTags:1591",["null","__typename",163,"processed",164,"format",120,"summary",13],{"__ref":336},"User:23",["null","__typename",180,"id",181,"excludeFromScreenreader",13,"mediaImage",338,"name",190,"path",191,"status",20],["null","__typename",183,"url",184,"width",185,"height",186,"alt",187,"title",13,"size",188,"mime",189],["null","__typename",79,"id",175,"title",176,"path",177,"wpTeaserText",178,"wpPromotedTeaserImage",13,"wpHeaderImage",340],{"__ref":341},"MediaImage:3364",["null","__typename",180,"id",198,"excludeFromScreenreader",13,"mediaImage",343,"name",203,"path",204,"status",20],["null","__typename",183,"url",200,"width",185,"height",186,"alt",201,"title",13,"size",202,"mime",189],["null","__typename",79,"id",193,"title",194,"path",195,"wpTeaserText",196,"wpPromotedTeaserImage",13,"wpHeaderImage",345],{"__ref":346},"MediaImage:3355",["null","__typename",180,"id",210,"excludeFromScreenreader",21,"mediaImage",348,"name",215,"path",216,"status",20],["null","__typename",183,"url",212,"width",185,"height",186,"alt",213,"title",13,"size",214,"mime",189],["null","__typename",79,"id",206,"title",207,"path",208,"wpTeaserText",13,"wpPromotedTeaserImage",13,"wpHeaderImage",350],{"__ref":351},"MediaImage:3303"]