[{"data":1,"prerenderedAt":66},["Reactive",2],{"blog-post-markdown-table-accessibility-screen-readers-complete-guide":3},{"slug":4,"title":5,"description":6,"excerpt":7,"date":8,"category":9,"author":10,"keywords":11,"readingMinutes":12,"html":13,"headings":14,"tools":40,"related":41},"markdown-table-accessibility-screen-readers-complete-guide","Markdown Table Accessibility and Screen Reader Support: Complete Guide for Inclusive Documentation and Web Content","Master Markdown table accessibility techniques for screen readers, ARIA labels, semantic markup, and inclusive design patterns. Learn to create accessible tables that work seamlessly with assistive technologies and meet WCAG compliance standards.","Advanced Markdown table accessibility and screen reader optimization enable inclusive documentation and web content that serves users with diverse accessibility needs. By implementing proper…","2025-11-21","Tutorial","Matthew Rathbone","markdown table accessibility, screen reader tables, accessible markdown, aria labels markdown, wcag compliance markdown, inclusive design tables, semantic table markup, assistive technology markdown",29,"\u003Cp>Advanced Markdown table accessibility and screen reader optimization enable inclusive documentation and web content that serves users with diverse accessibility needs. By implementing proper semantic structure, ARIA enhancements, and assistive technology support, content creators can build accessible table experiences that comply with WCAG guidelines while maintaining the simplicity and readability that makes Markdown an effective content creation format.\u003C/p>\n\u003Ch2 id=\"why-prioritize-markdown-table-accessibility\">Why Prioritize Markdown Table Accessibility?\u003C/h2>\n\u003Cp>Accessible table design provides essential benefits for inclusive content creation:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Universal Access\u003C/strong>: Ensure content is usable by people using screen readers, voice control, and keyboard navigation\u003C/li>\n\u003Cli>\u003Cstrong>Legal Compliance\u003C/strong>: Meet ADA, Section 508, and WCAG accessibility standards for web content\u003C/li>\n\u003Cli>\u003Cstrong>Improved User Experience\u003C/strong>: Better structure and semantics benefit all users, not just those using assistive technologies\u003C/li>\n\u003Cli>\u003Cstrong>SEO Benefits\u003C/strong>: Proper semantic markup improves search engine understanding and content indexing\u003C/li>\n\u003Cli>\u003Cstrong>Future-Proof Content\u003C/strong>: Accessible design patterns adapt better to new technologies and user needs\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"foundation-accessibility-principles\">Foundation Accessibility Principles\u003C/h2>\n\u003Ch3 id=\"semantic-table-structure\">Semantic Table Structure\u003C/h3>\n\u003Cp>Understanding proper table semantics for assistive technology support:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Basic Accessible Table Structure\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Simple Data Table with Headers\u003C/span>\n\n| Product Name | Price | Availability | Stock Level |\n|--------------|-------|--------------|-------------|\n| Wireless Headphones | $79.99 | In Stock | 45 units |\n| Bluetooth Speaker | $129.99 | Limited | 8 units |\n| USB-C Cable | $19.99 | In Stock | 156 units |\n| Power Bank | $49.99 | Out of Stock | 0 units |\n\n\u003Cspan class=\"hljs-section\">## Table with Caption and Summary\u003C/span>\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">caption\u003C/span>>\u003C/span>\u003C/span>Product Inventory Summary - Updated November 21, 2025\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">caption\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span>>\u003C/span>\u003C/span>Product Name\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span>>\u003C/span>\u003C/span>Price (USD)\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span>>\u003C/span>\u003C/span>Availability Status\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span>>\u003C/span>\u003C/span>Stock Level\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>Wireless Headphones\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>$79.99\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>In Stock\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>45 units\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>Bluetooth Speaker\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>$129.99\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>Limited Availability\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>8 units\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>USB-C Cable\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>$19.99\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>In Stock\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>156 units\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>Power Bank\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>$49.99\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>Out of Stock\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>0 units\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"advanced-accessibility-enhancement-system\">Advanced Accessibility Enhancement System\u003C/h3>\n\u003Cp>Creating comprehensive accessibility improvements for Markdown tables:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// accessible-table-enhancer.js - Markdown table accessibility enhancement\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">AccessibleTableEnhancer\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">addCaptions\u003C/span>: options.\u003Cspan class=\"hljs-property\">addCaptions\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enhanceHeaders\u003C/span>: options.\u003Cspan class=\"hljs-property\">enhanceHeaders\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">addSummaries\u003C/span>: options.\u003Cspan class=\"hljs-property\">addSummaries\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">includeSkipLinks\u003C/span>: options.\u003Cspan class=\"hljs-property\">includeSkipLinks\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">generateAriaLabels\u003C/span>: options.\u003Cspan class=\"hljs-property\">generateAriaLabels\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableCounter\u003C/span> = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">accessibilityReport\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">tablesProcessed\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">issuesFound\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">enhancementsApplied\u003C/span>: []\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">processMarkdownContent\u003C/span>(\u003Cspan class=\"hljs-params\">markdownContent\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Processing Markdown content for accessibility enhancements...'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Reset counters for new content\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableCounter\u003C/span> = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">accessibilityReport\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">tablesProcessed\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">issuesFound\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">enhancementsApplied\u003C/span>: []\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Find all markdown tables\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tablePattern = \u003Cspan class=\"hljs-regexp\">/^\\|.*\\|.*$/gm\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tables = markdownContent.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(tablePattern);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!tables) {\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'No markdown tables found in content'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> markdownContent;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> processedContent = markdownContent;\n        \n        \u003Cspan class=\"hljs-comment\">// Process each table for accessibility\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> fullTablePattern = \u003Cspan class=\"hljs-regexp\">/((?:\\|.*\\|.*\\n)+)/g\u003C/span>;\n        processedContent = processedContent.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(fullTablePattern, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">match\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">enhanceTableAccessibility\u003C/span>(match);\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`Processed \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.accessibilityReport.tablesProcessed}\u003C/span> tables with \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.accessibilityReport.enhancementsApplied.length}\u003C/span> enhancements`\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> processedContent;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">enhanceTableAccessibility\u003C/span>(\u003Cspan class=\"hljs-params\">tableMarkdown\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableCounter\u003C/span>++;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">accessibilityReport\u003C/span>.\u003Cspan class=\"hljs-property\">tablesProcessed\u003C/span>++;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tableLines = tableMarkdown.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>().\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Parse table structure\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tableData = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">parseTableStructure\u003C/span>(tableLines);\n        \n        \u003Cspan class=\"hljs-comment\">// Analyze accessibility issues\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> issues = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">analyzeAccessibilityIssues\u003C/span>(tableData);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">accessibilityReport\u003C/span>.\u003Cspan class=\"hljs-property\">issuesFound\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(...issues);\n        \n        \u003Cspan class=\"hljs-comment\">// Generate accessible HTML table\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> accessibleTable = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateAccessibleTable\u003C/span>(tableData);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> accessibleTable;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">parseTableStructure\u003C/span>(\u003Cspan class=\"hljs-params\">tableLines\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = [];\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> isHeader = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">0\u003C/span>; i < tableLines.\u003Cspan class=\"hljs-property\">length\u003C/span>; i++) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> line = tableLines[i].\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n            \n            \u003Cspan class=\"hljs-comment\">// Skip separator lines (|---|---|)\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (line.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/^\\|[\\s\\-\\|:]+\\|$/\u003C/span>)) {\n                isHeader = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">continue\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Parse table row\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (line.\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'|'\u003C/span>) && line.\u003Cspan class=\"hljs-title function_\">endsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'|'\u003C/span>)) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = line\n                    .\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>, -\u003Cspan class=\"hljs-number\">1\u003C/span>) \u003Cspan class=\"hljs-comment\">// Remove outer pipes\u003C/span>\n                    .\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'|'\u003C/span>)\n                    .\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> cell.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>());\n                \n                rows.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                    cells,\n                    isHeader,\n                    \u003Cspan class=\"hljs-attr\">rowIndex\u003C/span>: rows.\u003Cspan class=\"hljs-property\">length\u003C/span>\n                });\n                \n                isHeader = \u003Cspan class=\"hljs-literal\">false\u003C/span>; \u003Cspan class=\"hljs-comment\">// Only first row is header\u003C/span>\n            }\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">id\u003C/span>: \u003Cspan class=\"hljs-string\">`accessible-table-\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.tableCounter}\u003C/span>`\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">headers\u003C/span>: rows[\u003Cspan class=\"hljs-number\">0\u003C/span>] || { \u003Cspan class=\"hljs-attr\">cells\u003C/span>: [] },\n            \u003Cspan class=\"hljs-attr\">dataRows\u003C/span>: rows.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>),\n            \u003Cspan class=\"hljs-attr\">columnCount\u003C/span>: rows[\u003Cspan class=\"hljs-number\">0\u003C/span>]?.\u003Cspan class=\"hljs-property\">cells\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> || \u003Cspan class=\"hljs-number\">0\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">rowCount\u003C/span>: rows.\u003Cspan class=\"hljs-property\">length\u003C/span>\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">analyzeAccessibilityIssues\u003C/span>(\u003Cspan class=\"hljs-params\">tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> issues = [];\n        \n        \u003Cspan class=\"hljs-comment\">// Check for missing headers\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!tableData.\u003Cspan class=\"hljs-property\">headers\u003C/span> || tableData.\u003Cspan class=\"hljs-property\">headers\u003C/span>.\u003Cspan class=\"hljs-property\">cells\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            issues.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'missing-headers'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">severity\u003C/span>: \u003Cspan class=\"hljs-string\">'high'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">description\u003C/span>: \u003Cspan class=\"hljs-string\">'Table is missing header row'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">tableId\u003C/span>: tableData.\u003Cspan class=\"hljs-property\">id\u003C/span>\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Check for empty cells\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> allCells = [\n            ...tableData.\u003Cspan class=\"hljs-property\">headers\u003C/span>.\u003Cspan class=\"hljs-property\">cells\u003C/span>,\n            ...tableData.\u003Cspan class=\"hljs-property\">dataRows\u003C/span>.\u003Cspan class=\"hljs-title function_\">flatMap\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> row.\u003Cspan class=\"hljs-property\">cells\u003C/span>)\n        ];\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> emptyCells = allCells.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> !cell || cell.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>() === \u003Cspan class=\"hljs-string\">''\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (emptyCells.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            issues.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'empty-cells'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">severity\u003C/span>: \u003Cspan class=\"hljs-string\">'medium'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">description\u003C/span>: \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${emptyCells.length}\u003C/span> empty cells found`\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">tableId\u003C/span>: tableData.\u003Cspan class=\"hljs-property\">id\u003C/span>\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Check for complex table structures\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> inconsistentRowLengths = tableData.\u003Cspan class=\"hljs-property\">dataRows\u003C/span>.\u003Cspan class=\"hljs-title function_\">some\u003C/span>(\n            \u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> row.\u003Cspan class=\"hljs-property\">cells\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> !== tableData.\u003Cspan class=\"hljs-property\">columnCount\u003C/span>\n        );\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (inconsistentRowLengths) {\n            issues.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'inconsistent-structure'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">severity\u003C/span>: \u003Cspan class=\"hljs-string\">'high'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">description\u003C/span>: \u003Cspan class=\"hljs-string\">'Rows have inconsistent number of columns'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">tableId\u003C/span>: tableData.\u003Cspan class=\"hljs-property\">id\u003C/span>\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Check for potentially ambiguous headers\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> vagueHeaders = tableData.\u003Cspan class=\"hljs-property\">headers\u003C/span>.\u003Cspan class=\"hljs-property\">cells\u003C/span>.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">header\u003C/span> =>\u003C/span> \n            header.\u003Cspan class=\"hljs-property\">length\u003C/span> < \u003Cspan class=\"hljs-number\">3\u003C/span> || [\u003Cspan class=\"hljs-string\">'data'\u003C/span>, \u003Cspan class=\"hljs-string\">'info'\u003C/span>, \u003Cspan class=\"hljs-string\">'value'\u003C/span>].\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(header.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>())\n        );\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (vagueHeaders.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            issues.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'vague-headers'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">severity\u003C/span>: \u003Cspan class=\"hljs-string\">'low'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">description\u003C/span>: \u003Cspan class=\"hljs-string\">`Headers could be more descriptive: \u003Cspan class=\"hljs-subst\">${vagueHeaders.join(\u003Cspan class=\"hljs-string\">', '\u003C/span>)}\u003C/span>`\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">tableId\u003C/span>: tableData.\u003Cspan class=\"hljs-property\">id\u003C/span>\n            });\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> issues;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateAccessibleTable\u003C/span>(\u003Cspan class=\"hljs-params\">tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> enhancements = [];\n        \n        \u003Cspan class=\"hljs-comment\">// Generate table caption\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> caption = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateTableCaption\u003C/span>(tableData);\n        \n        \u003Cspan class=\"hljs-comment\">// Generate table summary if needed\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> summary = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateTableSummary\u003C/span>(tableData);\n        \n        \u003Cspan class=\"hljs-comment\">// Build accessible table HTML\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> tableHtml = [];\n        \n        \u003Cspan class=\"hljs-comment\">// Add skip link if enabled\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">includeSkipLinks\u003C/span>) {\n            tableHtml.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`<a href="#after-\u003Cspan class=\"hljs-subst\">${tableData.id}\u003C/span>" class="skip-link">Skip \u003Cspan class=\"hljs-subst\">${tableData.id}\u003C/span></a>`\u003C/span>);\n            enhancements.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'skip-link'\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Start table with ARIA attributes\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tableAttributes = [\n            \u003Cspan class=\"hljs-string\">`id="\u003Cspan class=\"hljs-subst\">${tableData.id}\u003C/span>"`\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'role="table"'\u003C/span>\n        ];\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (summary) {\n            tableAttributes.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`aria-describedby="\u003Cspan class=\"hljs-subst\">${tableData.id}\u003C/span>-summary"`\u003C/span>);\n        }\n        \n        tableHtml.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`<table \u003Cspan class=\"hljs-subst\">${tableAttributes.join(\u003Cspan class=\"hljs-string\">' '\u003C/span>)}\u003C/span>>`\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Add caption\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (caption && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">addCaptions\u003C/span>) {\n            tableHtml.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`<caption>\u003Cspan class=\"hljs-subst\">${caption}\u003C/span></caption>`\u003C/span>);\n            enhancements.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'caption'\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Add thead with proper scope attributes\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (tableData.\u003Cspan class=\"hljs-property\">headers\u003C/span> && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enhanceHeaders\u003C/span>) {\n            tableHtml.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'<thead>'\u003C/span>);\n            tableHtml.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'<tr>'\u003C/span>);\n            \n            tableData.\u003Cspan class=\"hljs-property\">headers\u003C/span>.\u003Cspan class=\"hljs-property\">cells\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">header, index\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> headerId = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${tableData.id}\u003C/span>-header-\u003Cspan class=\"hljs-subst\">${index}\u003C/span>`\u003C/span>;\n                tableHtml.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\n                    \u003Cspan class=\"hljs-string\">`<th scope="col" id="\u003Cspan class=\"hljs-subst\">${headerId}\u003C/span>">\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.escapeHtml(header)}\u003C/span></th>`\u003C/span>\n                );\n            });\n            \n            tableHtml.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'</tr>'\u003C/span>);\n            tableHtml.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'</thead>'\u003C/span>);\n            enhancements.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'header-scope'\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Add tbody with cell associations\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (tableData.\u003Cspan class=\"hljs-property\">dataRows\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            tableHtml.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'<tbody>'\u003C/span>);\n            \n            tableData.\u003Cspan class=\"hljs-property\">dataRows\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">row, rowIndex\u003C/span>) =>\u003C/span> {\n                tableHtml.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'<tr>'\u003C/span>);\n                \n                row.\u003Cspan class=\"hljs-property\">cells\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">cell, cellIndex\u003C/span>) =>\u003C/span> {\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> headerId = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${tableData.id}\u003C/span>-header-\u003Cspan class=\"hljs-subst\">${cellIndex}\u003C/span>`\u003C/span>;\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellContent = cell.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>() === \u003Cspan class=\"hljs-string\">''\u003C/span> ? \n                        \u003Cspan class=\"hljs-string\">'<span class="empty-cell" aria-label="Empty cell">—</span>'\u003C/span> : \n                        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.escapeHtml(cell);\n                    \n                    tableHtml.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\n                        \u003Cspan class=\"hljs-string\">`<td headers="\u003Cspan class=\"hljs-subst\">${headerId}\u003C/span>">\u003Cspan class=\"hljs-subst\">${cellContent}\u003C/span></td>`\u003C/span>\n                    );\n                });\n                \n                tableHtml.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'</tr>'\u003C/span>);\n            });\n            \n            tableHtml.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'</tbody>'\u003C/span>);\n        }\n        \n        tableHtml.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'</table>'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Add summary if enabled\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (summary && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">addSummaries\u003C/span>) {\n            tableHtml.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`<div id="\u003Cspan class=\"hljs-subst\">${tableData.id}\u003C/span>-summary" class="table-summary">`\u003C/span>);\n            tableHtml.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`<strong>Table Summary:</strong> \u003Cspan class=\"hljs-subst\">${summary}\u003C/span>`\u003C/span>);\n            tableHtml.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'</div>'\u003C/span>);\n            enhancements.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'summary'\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Add skip target if skip links are enabled\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">includeSkipLinks\u003C/span>) {\n            tableHtml.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`<div id="after-\u003Cspan class=\"hljs-subst\">${tableData.id}\u003C/span>"></div>`\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Record enhancements applied\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">accessibilityReport\u003C/span>.\u003Cspan class=\"hljs-property\">enhancementsApplied\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n            \u003Cspan class=\"hljs-attr\">tableId\u003C/span>: tableData.\u003Cspan class=\"hljs-property\">id\u003C/span>,\n            enhancements\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> tableHtml.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateTableCaption\u003C/span>(\u003Cspan class=\"hljs-params\">tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">addCaptions\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Try to infer caption from context or generate descriptive one\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> columnNames = tableData.\u003Cspan class=\"hljs-property\">headers\u003C/span>.\u003Cspan class=\"hljs-property\">cells\u003C/span>.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">', '\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rowCount = tableData.\u003Cspan class=\"hljs-property\">dataRows\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`Data table with \u003Cspan class=\"hljs-subst\">${rowCount}\u003C/span> rows showing \u003Cspan class=\"hljs-subst\">${columnNames}\u003C/span>`\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateTableSummary\u003C/span>(\u003Cspan class=\"hljs-params\">tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">addSummaries\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rowCount = tableData.\u003Cspan class=\"hljs-property\">dataRows\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> colCount = tableData.\u003Cspan class=\"hljs-property\">columnCount\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = tableData.\u003Cspan class=\"hljs-property\">headers\u003C/span>.\u003Cspan class=\"hljs-property\">cells\u003C/span>.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">', '\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`This table contains \u003Cspan class=\"hljs-subst\">${rowCount}\u003C/span> rows and \u003Cspan class=\"hljs-subst\">${colCount}\u003C/span> columns. `\u003C/span> +\n               \u003Cspan class=\"hljs-string\">`Column headers are: \u003Cspan class=\"hljs-subst\">${headers}\u003C/span>. `\u003C/span> +\n               \u003Cspan class=\"hljs-string\">`Use arrow keys to navigate between cells.`\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">escapeHtml\u003C/span>(\u003Cspan class=\"hljs-params\">text\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> div = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        div.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = text;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> div.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateAccessibilityReport\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">summary\u003C/span>: {\n                \u003Cspan class=\"hljs-attr\">tablesProcessed\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">accessibilityReport\u003C/span>.\u003Cspan class=\"hljs-property\">tablesProcessed\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">totalIssues\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">accessibilityReport\u003C/span>.\u003Cspan class=\"hljs-property\">issuesFound\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">enhancementsApplied\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">accessibilityReport\u003C/span>.\u003Cspan class=\"hljs-property\">enhancementsApplied\u003C/span>.\u003Cspan class=\"hljs-title function_\">reduce\u003C/span>(\n                    \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">total, table\u003C/span>) =>\u003C/span> total + table.\u003Cspan class=\"hljs-property\">enhancements\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>\n                )\n            },\n            \u003Cspan class=\"hljs-attr\">issues\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">accessibilityReport\u003C/span>.\u003Cspan class=\"hljs-property\">issuesFound\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enhancements\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">accessibilityReport\u003C/span>.\u003Cspan class=\"hljs-property\">enhancementsApplied\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">recommendations\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateRecommendations\u003C/span>()\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateRecommendations\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> recommendations = [];\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> issues = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">accessibilityReport\u003C/span>.\u003Cspan class=\"hljs-property\">issuesFound\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// High severity issues\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> highSeverityIssues = issues.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">issue\u003C/span> =>\u003C/span> issue.\u003Cspan class=\"hljs-property\">severity\u003C/span> === \u003Cspan class=\"hljs-string\">'high'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (highSeverityIssues.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            recommendations.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">priority\u003C/span>: \u003Cspan class=\"hljs-string\">'high'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">title\u003C/span>: \u003Cspan class=\"hljs-string\">'Critical Accessibility Issues'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">description\u003C/span>: \u003Cspan class=\"hljs-string\">'Address missing headers and structural inconsistencies immediately'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">actions\u003C/span>: [\n                    \u003Cspan class=\"hljs-string\">'Add proper header rows to all tables'\u003C/span>,\n                    \u003Cspan class=\"hljs-string\">'Ensure consistent column counts across rows'\u003C/span>,\n                    \u003Cspan class=\"hljs-string\">'Verify table structure integrity'\u003C/span>\n                ]\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Medium severity issues\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> mediumSeverityIssues = issues.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">issue\u003C/span> =>\u003C/span> issue.\u003Cspan class=\"hljs-property\">severity\u003C/span> === \u003Cspan class=\"hljs-string\">'medium'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (mediumSeverityIssues.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            recommendations.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">priority\u003C/span>: \u003Cspan class=\"hljs-string\">'medium'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">title\u003C/span>: \u003Cspan class=\"hljs-string\">'Content Quality Improvements'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">description\u003C/span>: \u003Cspan class=\"hljs-string\">'Improve table content for better accessibility'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">actions\u003C/span>: [\n                    \u003Cspan class=\"hljs-string\">'Fill empty cells with meaningful content or placeholder text'\u003C/span>,\n                    \u003Cspan class=\"hljs-string\">'Add alternative text for data visualizations'\u003C/span>,\n                    \u003Cspan class=\"hljs-string\">'Consider table summaries for complex data'\u003C/span>\n                ]\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Enhancement opportunities\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">accessibilityReport\u003C/span>.\u003Cspan class=\"hljs-property\">tablesProcessed\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            recommendations.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">priority\u003C/span>: \u003Cspan class=\"hljs-string\">'low'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">title\u003C/span>: \u003Cspan class=\"hljs-string\">'Enhancement Opportunities'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">description\u003C/span>: \u003Cspan class=\"hljs-string\">'Additional accessibility improvements to consider'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">actions\u003C/span>: [\n                    \u003Cspan class=\"hljs-string\">'Add table captions for better context'\u003C/span>,\n                    \u003Cspan class=\"hljs-string\">'Include skip links for keyboard navigation'\u003C/span>,\n                    \u003Cspan class=\"hljs-string\">'Consider responsive table alternatives for mobile users'\u003C/span>,\n                    \u003Cspan class=\"hljs-string\">'Implement table sorting with accessible announcements'\u003C/span>\n                ]\n            });\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> recommendations;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// CSS styles for accessibility enhancements\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">generateAccessibilityCSS\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n/* Accessible Table Styles */\n.accessible-table {\n    border-collapse: collapse;\n    width: 100%;\n    margin: 1em 0;\n}\n\n.accessible-table caption {\n    caption-side: top;\n    text-align: left;\n    font-weight: bold;\n    margin-bottom: 0.5em;\n    padding: 0.5em 0;\n}\n\n.accessible-table th,\n.accessible-table td {\n    border: 1px solid #ccc;\n    padding: 0.5em;\n    text-align: left;\n    vertical-align: top;\n}\n\n.accessible-table th {\n    background-color: #f5f5f5;\n    font-weight: bold;\n}\n\n.accessible-table th:focus,\n.accessible-table td:focus {\n    outline: 2px solid #005fcc;\n    outline-offset: -1px;\n}\n\n/* Screen reader support */\n.empty-cell {\n    font-style: italic;\n    color: #666;\n}\n\n.table-summary {\n    margin-top: 0.5em;\n    padding: 0.5em;\n    background-color: #f9f9f9;\n    border-left: 3px solid #005fcc;\n    font-size: 0.9em;\n}\n\n/* Skip links */\n.skip-link {\n    position: absolute;\n    left: -9999px;\n    background: #000;\n    color: #fff;\n    padding: 0.5em;\n    text-decoration: none;\n    border-radius: 3px;\n}\n\n.skip-link:focus {\n    left: 0;\n    top: 0;\n    z-index: 1000;\n}\n\n/* Responsive table wrapper */\n.responsive-table-wrapper {\n    overflow-x: auto;\n    margin: 1em 0;\n}\n\n.responsive-table-wrapper:focus {\n    outline: 2px solid #005fcc;\n}\n\n/* High contrast support */\n@media (prefers-contrast: high) {\n    .accessible-table th,\n    .accessible-table td {\n        border-color: #000;\n    }\n    \n    .accessible-table th {\n        background-color: #000;\n        color: #fff;\n    }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n    .accessible-table * {\n        animation: none;\n        transition: none;\n    }\n}\n        `\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Usage example\u003C/span>\n\u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">processDocumentTables\u003C/span>(\u003Cspan class=\"hljs-params\">markdownContent\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> enhancer = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">AccessibleTableEnhancer\u003C/span>({\n        \u003Cspan class=\"hljs-attr\">addCaptions\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">enhanceHeaders\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">addSummaries\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">includeSkipLinks\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">generateAriaLabels\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n    });\n    \n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> accessibleContent = enhancer.\u003Cspan class=\"hljs-title function_\">processMarkdownContent\u003C/span>(markdownContent);\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> report = enhancer.\u003Cspan class=\"hljs-title function_\">generateAccessibilityReport\u003C/span>();\n    \n    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Accessibility Report:'\u003C/span>, report);\n    \n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n        \u003Cspan class=\"hljs-attr\">content\u003C/span>: accessibleContent,\n        report,\n        \u003Cspan class=\"hljs-attr\">styles\u003C/span>: enhancer.\u003Cspan class=\"hljs-title function_\">generateAccessibilityCSS\u003C/span>()\n    };\n}\n\n\u003Cspan class=\"hljs-variable language_\">module\u003C/span>.\u003Cspan class=\"hljs-property\">exports\u003C/span> = \u003Cspan class=\"hljs-title class_\">AccessibleTableEnhancer\u003C/span>;\n\u003C/code>\u003C/pre>\u003Ch2 id=\"screen-reader-optimization-patterns\">Screen Reader Optimization Patterns\u003C/h2>\n\u003Ch3 id=\"comprehensive-screen-reader-support\">Comprehensive Screen Reader Support\u003C/h3>\n\u003Cp>Implementing advanced screen reader optimization for complex table scenarios:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Complex table with multiple header levels -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"financial-report"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"table"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-labelledby\u003C/span>=\u003Cspan class=\"hljs-string\">"financial-caption"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"financial-summary"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">caption\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"financial-caption"\u003C/span>>\u003C/span>Quarterly Financial Report - Q3 2025\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">caption\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"metric"\u003C/span>>\u003C/span>Financial Metric\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"colgroup"\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"3"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"q3-data"\u003C/span>>\u003C/span>Q3 2025 Data\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"colgroup"\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"3"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"q2-data"\u003C/span>>\u003C/span>Q2 2025 Comparison\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"empty-metric"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-symbol\"> \u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"q3-jan"\u003C/span> \u003Cspan class=\"hljs-attr\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"q3-data"\u003C/span>>\u003C/span>January\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"q3-feb"\u003C/span> \u003Cspan class=\"hljs-attr\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"q3-data"\u003C/span>>\u003C/span>February\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"q3-mar"\u003C/span> \u003Cspan class=\"hljs-attr\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"q3-data"\u003C/span>>\u003C/span>March\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"q2-jan"\u003C/span> \u003Cspan class=\"hljs-attr\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"q2-data"\u003C/span>>\u003C/span>January\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"q2-feb"\u003C/span> \u003Cspan class=\"hljs-attr\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"q2-data"\u003C/span>>\u003C/span>February\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"q2-mar"\u003C/span> \u003Cspan class=\"hljs-attr\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"q2-data"\u003C/span>>\u003C/span>March\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"row"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"revenue"\u003C/span> \u003Cspan class=\"hljs-attr\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"metric"\u003C/span>>\u003C/span>Revenue ($M)\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"metric revenue q3-data q3-jan"\u003C/span>>\u003C/span>$2.4M\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"metric revenue q3-data q3-feb"\u003C/span>>\u003C/span>$2.8M\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"metric revenue q3-data q3-mar"\u003C/span>>\u003C/span>$3.1M\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"metric revenue q2-data q2-jan"\u003C/span>>\u003C/span>$2.2M\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"metric revenue q2-data q2-feb"\u003C/span>>\u003C/span>$2.5M\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"metric revenue q2-data q2-mar"\u003C/span>>\u003C/span>$2.7M\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"row"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"expenses"\u003C/span> \u003Cspan class=\"hljs-attr\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"metric"\u003C/span>>\u003C/span>Expenses ($M)\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"metric expenses q3-data q3-jan"\u003C/span>>\u003C/span>$1.8M\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"metric expenses q3-data q3-feb"\u003C/span>>\u003C/span>$2.0M\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"metric expenses q3-data q3-mar"\u003C/span>>\u003C/span>$2.1M\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"metric expenses q2-data q2-jan"\u003C/span>>\u003C/span>$1.7M\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"metric expenses q2-data q2-feb"\u003C/span>>\u003C/span>$1.9M\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"metric expenses q2-data q2-mar"\u003C/span>>\u003C/span>$2.0M\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"financial-summary"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"table-summary"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Table Summary:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span> This financial table compares quarterly performance \nacross six months. Use arrow keys to navigate between cells. Each cell contains \nfinancial data with row headers indicating the metric type and column headers \nshowing the time period.\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"dynamic-table-enhancement-script\">Dynamic Table Enhancement Script\u003C/h3>\n\u003Cp>JavaScript for runtime accessibility improvements:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// screen-reader-table-enhancer.js - Runtime accessibility enhancements\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">ScreenReaderTableEnhancer\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">enhancedTables\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Set\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">voiceOverMode\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">detectVoiceOver\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">screenReaderActive\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">detectScreenReader\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Keyboard navigation patterns\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">navigationKeys\u003C/span> = {\n            \u003Cspan class=\"hljs-string\">'ArrowUp'\u003C/span>: \u003Cspan class=\"hljs-string\">'previous-row'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'ArrowDown'\u003C/span>: \u003Cspan class=\"hljs-string\">'next-row'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'ArrowLeft'\u003C/span>: \u003Cspan class=\"hljs-string\">'previous-cell'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'ArrowRight'\u003C/span>: \u003Cspan class=\"hljs-string\">'next-cell'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'Home'\u003C/span>: \u003Cspan class=\"hljs-string\">'first-cell-in-row'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'End'\u003C/span>: \u003Cspan class=\"hljs-string\">'last-cell-in-row'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'PageUp'\u003C/span>: \u003Cspan class=\"hljs-string\">'first-row'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'PageDown'\u003C/span>: \u003Cspan class=\"hljs-string\">'last-row'\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">init\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">init\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Wait for DOM to be ready\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">readyState\u003C/span> === \u003Cspan class=\"hljs-string\">'loading'\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">enhanceAllTables\u003C/span>();\n            });\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">enhanceAllTables\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Set up mutation observer for dynamically added tables\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupMutationObserver\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">detectScreenReader\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Basic screen reader detection\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> navigator.\u003Cspan class=\"hljs-property\">userAgent\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'NVDA'\u003C/span>) ||\n               navigator.\u003Cspan class=\"hljs-property\">userAgent\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'JAWS'\u003C/span>) ||\n               \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">speechSynthesis\u003C/span> ||\n               \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">navigator\u003C/span>.\u003Cspan class=\"hljs-property\">userAgent\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'Talkback'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">detectVoiceOver\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Detect VoiceOver on macOS/iOS\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> navigator.\u003Cspan class=\"hljs-property\">userAgent\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'Macintosh'\u003C/span>) ||\n               navigator.\u003Cspan class=\"hljs-property\">userAgent\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'iPhone'\u003C/span>) ||\n               navigator.\u003Cspan class=\"hljs-property\">userAgent\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'iPad'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">enhanceAllTables\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tables = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'table'\u003C/span>);\n        \n        tables.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">table\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">enhancedTables\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(table)) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">enhanceTable\u003C/span>(table);\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">enhanceTable\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Enhancing table for screen reader accessibility'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Add table role if missing\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!table.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'role'\u003C/span>)) {\n            table.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'role'\u003C/span>, \u003Cspan class=\"hljs-string\">'table'\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Ensure table has unique ID\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!table.\u003Cspan class=\"hljs-property\">id\u003C/span>) {\n            table.\u003Cspan class=\"hljs-property\">id\u003C/span> = \u003Cspan class=\"hljs-string\">`accessible-table-\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-built_in\">Date\u003C/span>.now()}\u003C/span>-\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-built_in\">Math\u003C/span>.random().toString(\u003Cspan class=\"hljs-number\">36\u003C/span>).substr(\u003Cspan class=\"hljs-number\">2\u003C/span>, \u003Cspan class=\"hljs-number\">9\u003C/span>)}\u003C/span>`\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Add ARIA attributes\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addAriaAttributes\u003C/span>(table);\n        \n        \u003Cspan class=\"hljs-comment\">// Enhance headers\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">enhanceHeaders\u003C/span>(table);\n        \n        \u003Cspan class=\"hljs-comment\">// Add keyboard navigation\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addKeyboardNavigation\u003C/span>(table);\n        \n        \u003Cspan class=\"hljs-comment\">// Add focus management\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addFocusManagement\u003C/span>(table);\n        \n        \u003Cspan class=\"hljs-comment\">// Add live region for announcements\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addLiveRegion\u003C/span>(table);\n        \n        \u003Cspan class=\"hljs-comment\">// Add table summary if missing\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addTableSummary\u003C/span>(table);\n        \n        \u003Cspan class=\"hljs-comment\">// Mark as enhanced\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">enhancedTables\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(table);\n        table.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'accessibility-enhanced'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addAriaAttributes\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rowCount = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> colCount = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>)[\u003Cspan class=\"hljs-number\">0\u003C/span>]?.\u003Cspan class=\"hljs-property\">children\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> || \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        table.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-rowcount'\u003C/span>, rowCount.\u003Cspan class=\"hljs-title function_\">toString\u003C/span>());\n        table.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-colcount'\u003C/span>, colCount.\u003Cspan class=\"hljs-title function_\">toString\u003C/span>());\n        \n        \u003Cspan class=\"hljs-comment\">// Add row and column indices\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>);\n        rows.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">row, rowIndex\u003C/span>) =>\u003C/span> {\n            row.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-rowindex'\u003C/span>, (rowIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>).\u003Cspan class=\"hljs-title function_\">toString\u003C/span>());\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = row.\u003Cspan class=\"hljs-property\">children\u003C/span>;\n            \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(cells).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">cell, cellIndex\u003C/span>) =>\u003C/span> {\n                cell.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-colindex'\u003C/span>, (cellIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>).\u003Cspan class=\"hljs-title function_\">toString\u003C/span>());\n                \n                \u003Cspan class=\"hljs-comment\">// Add cell role if not already present\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (cell.\u003Cspan class=\"hljs-property\">tagName\u003C/span>.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>() === \u003Cspan class=\"hljs-string\">'td'\u003C/span> && !cell.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'role'\u003C/span>)) {\n                    cell.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'role'\u003C/span>, \u003Cspan class=\"hljs-string\">'gridcell'\u003C/span>);\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (cell.\u003Cspan class=\"hljs-property\">tagName\u003C/span>.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>() === \u003Cspan class=\"hljs-string\">'th'\u003C/span> && !cell.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'role'\u003C/span>)) {\n                    cell.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'role'\u003C/span>, \u003Cspan class=\"hljs-string\">'columnheader'\u003C/span>);\n                }\n            });\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">enhanceHeaders\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Ensure all th elements have appropriate scope attributes\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'th'\u003C/span>);\n        \n        headers.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">header, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!header.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'scope'\u003C/span>)) {\n                \u003Cspan class=\"hljs-comment\">// Determine scope based on position\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> row = header.\u003Cspan class=\"hljs-property\">parentElement\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> isInFirstRow = row === table.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> isFirstCellInRow = header === row.\u003Cspan class=\"hljs-property\">firstElementChild\u003C/span>;\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (isInFirstRow && !isFirstCellInRow) {\n                    header.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'scope'\u003C/span>, \u003Cspan class=\"hljs-string\">'col'\u003C/span>);\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (isFirstCellInRow) {\n                    header.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'scope'\u003C/span>, \u003Cspan class=\"hljs-string\">'row'\u003C/span>);\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                    header.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'scope'\u003C/span>, \u003Cspan class=\"hljs-string\">'col'\u003C/span>);\n                }\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Add unique ID if missing\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!header.\u003Cspan class=\"hljs-property\">id\u003C/span>) {\n                header.\u003Cspan class=\"hljs-property\">id\u003C/span> = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${table.id}\u003C/span>-header-\u003Cspan class=\"hljs-subst\">${index}\u003C/span>`\u003C/span>;\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Associate data cells with headers\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> dataCells = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'td'\u003C/span>);\n        dataCells.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!cell.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'headers'\u003C/span>)) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">findCellHeaders\u003C/span>(cell, table);\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (headers.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n                    cell.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'headers'\u003C/span>, headers.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">' '\u003C/span>));\n                }\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">findCellHeaders\u003C/span>(\u003Cspan class=\"hljs-params\">cell, table\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = [];\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> row = cell.\u003Cspan class=\"hljs-property\">parentElement\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellIndex = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(row.\u003Cspan class=\"hljs-property\">children\u003C/span>).\u003Cspan class=\"hljs-title function_\">indexOf\u003C/span>(cell);\n        \n        \u003Cspan class=\"hljs-comment\">// Find column header\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> firstRow = table.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> colHeader = firstRow?.\u003Cspan class=\"hljs-property\">children\u003C/span>[cellIndex];\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (colHeader?.\u003Cspan class=\"hljs-property\">tagName\u003C/span>.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>() === \u003Cspan class=\"hljs-string\">'th'\u003C/span> && colHeader.\u003Cspan class=\"hljs-property\">id\u003C/span>) {\n            headers.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(colHeader.\u003Cspan class=\"hljs-property\">id\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Find row header (first th in the same row)\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rowHeader = row.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'th'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (rowHeader && rowHeader.\u003Cspan class=\"hljs-property\">id\u003C/span>) {\n            headers.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(rowHeader.\u003Cspan class=\"hljs-property\">id\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> headers;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addKeyboardNavigation\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Make table focusable\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!table.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'tabindex'\u003C/span>)) {\n            table.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'tabindex'\u003C/span>, \u003Cspan class=\"hljs-string\">'0'\u003C/span>);\n        }\n        \n        table.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'keydown'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">event\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleTableKeydown\u003C/span>(event, table);\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Add keyboard navigation instructions\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> instructions = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createNavigationInstructions\u003C/span>(table);\n        table.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(instructions, table);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleTableKeydown\u003C/span>(\u003Cspan class=\"hljs-params\">event, table\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> navigation = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">navigationKeys\u003C/span>[event.\u003Cspan class=\"hljs-property\">key\u003C/span>];\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!navigation) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        event.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentCell = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">activeElement\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetCell = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">findTargetCell\u003C/span>(currentCell, navigation, table);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (targetCell) {\n            targetCell.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announceNavigation\u003C/span>(currentCell, targetCell, navigation);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">findTargetCell\u003C/span>(\u003Cspan class=\"hljs-params\">currentCell, direction, table\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> allCells = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'th, td'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellArray = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(allCells);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentIndex = cellArray.\u003Cspan class=\"hljs-title function_\">indexOf\u003C/span>(currentCell);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentIndex === -\u003Cspan class=\"hljs-number\">1\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> cellArray[\u003Cspan class=\"hljs-number\">0\u003C/span>]; \u003Cspan class=\"hljs-comment\">// Default to first cell\u003C/span>\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentRow = currentCell.\u003Cspan class=\"hljs-property\">parentElement\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> allRows = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>));\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rowIndex = allRows.\u003Cspan class=\"hljs-title function_\">indexOf\u003C/span>(currentRow);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellsInRow = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(currentRow.\u003Cspan class=\"hljs-property\">children\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellIndexInRow = cellsInRow.\u003Cspan class=\"hljs-title function_\">indexOf\u003C/span>(currentCell);\n        \n        \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (direction) {\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'next-cell'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> cellArray[currentIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>] || currentCell;\n            \n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'previous-cell'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> cellArray[currentIndex - \u003Cspan class=\"hljs-number\">1\u003C/span>] || currentCell;\n            \n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'next-row'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> nextRow = allRows[rowIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>];\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> nextRow?.\u003Cspan class=\"hljs-property\">children\u003C/span>[cellIndexInRow] || currentCell;\n            \n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'previous-row'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> prevRow = allRows[rowIndex - \u003Cspan class=\"hljs-number\">1\u003C/span>];\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> prevRow?.\u003Cspan class=\"hljs-property\">children\u003C/span>[cellIndexInRow] || currentCell;\n            \n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'first-cell-in-row'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> currentRow.\u003Cspan class=\"hljs-property\">children\u003C/span>[\u003Cspan class=\"hljs-number\">0\u003C/span>];\n            \n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'last-cell-in-row'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> currentRow.\u003Cspan class=\"hljs-property\">children\u003C/span>[currentRow.\u003Cspan class=\"hljs-property\">children\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>];\n            \n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'first-row'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> allRows[\u003Cspan class=\"hljs-number\">0\u003C/span>]?.\u003Cspan class=\"hljs-property\">children\u003C/span>[cellIndexInRow] || currentCell;\n            \n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'last-row'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> allRows[allRows.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>]?.\u003Cspan class=\"hljs-property\">children\u003C/span>[cellIndexInRow] || currentCell;\n            \n            \u003Cspan class=\"hljs-attr\">default\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> currentCell;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addFocusManagement\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'th, td'\u003C/span>);\n        \n        cells.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-comment\">// Make cells focusable\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!cell.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'tabindex'\u003C/span>)) {\n                cell.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'tabindex'\u003C/span>, \u003Cspan class=\"hljs-string\">'-1'\u003C/span>);\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Add focus styles\u003C/span>\n            cell.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'focus'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                cell.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'cell-focused'\u003C/span>);\n            });\n            \n            cell.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'blur'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                cell.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'cell-focused'\u003C/span>);\n            });\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Set initial focus to first cell\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> firstCell = cells[\u003Cspan class=\"hljs-number\">0\u003C/span>];\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (firstCell) {\n            firstCell.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'tabindex'\u003C/span>, \u003Cspan class=\"hljs-string\">'0'\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addLiveRegion\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Create live region for announcements\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> liveRegion = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        liveRegion.\u003Cspan class=\"hljs-property\">id\u003C/span> = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${table.id}\u003C/span>-announcements`\u003C/span>;\n        liveRegion.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-live'\u003C/span>, \u003Cspan class=\"hljs-string\">'polite'\u003C/span>);\n        liveRegion.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-atomic'\u003C/span>, \u003Cspan class=\"hljs-string\">'false'\u003C/span>);\n        liveRegion.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'sr-only'\u003C/span>;\n        liveRegion.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">'position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden;'\u003C/span>;\n        \n        table.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(liveRegion, table);\n        table.\u003Cspan class=\"hljs-property\">liveRegion\u003C/span> = liveRegion;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">announceNavigation\u003C/span>(\u003Cspan class=\"hljs-params\">fromCell, toCell, direction\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> liveRegion = fromCell.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'table'\u003C/span>).\u003Cspan class=\"hljs-property\">liveRegion\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!liveRegion) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellContent = toCell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rowHeader = toCell.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>).\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'th'\u003C/span>)?.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> colHeader = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">findColumnHeader\u003C/span>(toCell);\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> announcement = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (rowHeader && colHeader) {\n            announcement = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${rowHeader}\u003C/span>, \u003Cspan class=\"hljs-subst\">${colHeader}\u003C/span>: \u003Cspan class=\"hljs-subst\">${cellContent}\u003C/span>`\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (rowHeader) {\n            announcement = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${rowHeader}\u003C/span>: \u003Cspan class=\"hljs-subst\">${cellContent}\u003C/span>`\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (colHeader) {\n            announcement = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${colHeader}\u003C/span>: \u003Cspan class=\"hljs-subst\">${cellContent}\u003C/span>`\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            announcement = cellContent;\n        }\n        \n        liveRegion.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = announcement;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">findColumnHeader\u003C/span>(\u003Cspan class=\"hljs-params\">cell\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> table = cell.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'table'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellIndex = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(cell.\u003Cspan class=\"hljs-property\">parentElement\u003C/span>.\u003Cspan class=\"hljs-property\">children\u003C/span>).\u003Cspan class=\"hljs-title function_\">indexOf\u003C/span>(cell);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> firstRow = table.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> colHeader = firstRow?.\u003Cspan class=\"hljs-property\">children\u003C/span>[cellIndex];\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> colHeader?.\u003Cspan class=\"hljs-property\">tagName\u003C/span>.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>() === \u003Cspan class=\"hljs-string\">'th'\u003C/span> ? \n               colHeader.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>() : \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createNavigationInstructions\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> instructions = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        instructions.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'table-navigation-instructions'\u003C/span>;\n        instructions.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            <details>\n                <summary>Keyboard Navigation Instructions</summary>\n                <ul>\n                    <li><kbd>Arrow keys</kbd>: Navigate between cells</li>\n                    <li><kbd>Home/End</kbd>: Move to first/last cell in row</li>\n                    <li><kbd>Page Up/Down</kbd>: Move to first/last row</li>\n                    <li><kbd>Tab</kbd>: Exit table navigation</li>\n                </ul>\n            </details>\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> instructions;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addTableSummary\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Check if table already has a summary\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> existingSummary = table.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-describedby'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (existingSummary) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> caption = table.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'caption'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (caption) \u003Cspan class=\"hljs-keyword\">return\u003C/span>; \u003Cspan class=\"hljs-comment\">// Caption serves as summary\u003C/span>\n        \n        \u003Cspan class=\"hljs-comment\">// Generate automatic summary\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr'\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cols = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'thead th, tr:first-child th, tr:first-child td'\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'thead th, tr:first-child th'\u003C/span>))\n                            .\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">th\u003C/span> =>\u003C/span> th.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>())\n                            .\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">', '\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> summary = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        summary.\u003Cspan class=\"hljs-property\">id\u003C/span> = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${table.id}\u003C/span>-summary`\u003C/span>;\n        summary.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'table-summary sr-only'\u003C/span>;\n        summary.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">`Table with \u003Cspan class=\"hljs-subst\">${rows}\u003C/span> rows and \u003Cspan class=\"hljs-subst\">${cols}\u003C/span> columns. \u003Cspan class=\"hljs-subst\">${headers ? \u003Cspan class=\"hljs-string\">`Column headers: \u003Cspan class=\"hljs-subst\">${headers}\u003C/span>.`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span> Use arrow keys to navigate.`\u003C/span>;\n        \n        table.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-describedby'\u003C/span>, summary.\u003Cspan class=\"hljs-property\">id\u003C/span>);\n        table.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(summary, table);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupMutationObserver\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> observer = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MutationObserver\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">mutations\u003C/span>) =>\u003C/span> {\n            mutations.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">mutation\u003C/span>) =>\u003C/span> {\n                mutation.\u003Cspan class=\"hljs-property\">addedNodes\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">node\u003C/span>) =>\u003C/span> {\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (node.\u003Cspan class=\"hljs-property\">nodeType\u003C/span> === \u003Cspan class=\"hljs-title class_\">Node\u003C/span>.\u003Cspan class=\"hljs-property\">ELEMENT_NODE\u003C/span>) {\n                        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tables = node.\u003Cspan class=\"hljs-property\">tagName\u003C/span> === \u003Cspan class=\"hljs-string\">'TABLE'\u003C/span> ? \n                                     [node] : \n                                     node.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'table'\u003C/span>);\n                        \n                        tables.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">table\u003C/span> =>\u003C/span> {\n                            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">enhancedTables\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(table)) {\n                                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">enhanceTable\u003C/span>(table);\n                            }\n                        });\n                    }\n                });\n            });\n        });\n        \n        observer.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>, {\n            \u003Cspan class=\"hljs-attr\">childList\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">subtree\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n        });\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Auto-initialize when DOM is ready\u003C/span>\n\u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span> !== \u003Cspan class=\"hljs-string\">'undefined'\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">ScreenReaderTableEnhancer\u003C/span>();\n}\n\n\u003Cspan class=\"hljs-variable language_\">module\u003C/span>.\u003Cspan class=\"hljs-property\">exports\u003C/span> = \u003Cspan class=\"hljs-title class_\">ScreenReaderTableEnhancer\u003C/span>;\n\u003C/code>\u003C/pre>\u003Ch2 id=\"wcag-compliance-and-testing\">WCAG Compliance and Testing\u003C/h2>\n\u003Ch3 id=\"automated-accessibility-testing\">Automated Accessibility Testing\u003C/h3>\n\u003Cp>Comprehensive testing framework for table accessibility:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// accessibility-testing-framework.js - WCAG compliance testing for tables\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">TableAccessibilityTester\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">testResults\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">passed\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">failed\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">warnings\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">summary\u003C/span>: {}\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">wcagCriteria\u003C/span> = {\n            \u003Cspan class=\"hljs-string\">'1.3.1'\u003C/span>: \u003Cspan class=\"hljs-string\">'Info and Relationships'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'2.1.1'\u003C/span>: \u003Cspan class=\"hljs-string\">'Keyboard Accessible'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'2.4.6'\u003C/span>: \u003Cspan class=\"hljs-string\">'Headings and Labels'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'4.1.3'\u003C/span>: \u003Cspan class=\"hljs-string\">'Status Messages'\u003C/span>\n        };\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">runAccessibilityTests\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`Running accessibility tests on table: \u003Cspan class=\"hljs-subst\">${table.id || \u003Cspan class=\"hljs-string\">'unnamed'\u003C/span>}\u003C/span>`\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Reset results\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">testResults\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">passed\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">failed\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">warnings\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">summary\u003C/span>: {}\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Run individual test suites\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">testStructureCompliance\u003C/span>(table);\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">testKeyboardAccessibility\u003C/span>(table);\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">testScreenReaderSupport\u003C/span>(table);\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">testLabelingCompliance\u003C/span>(table);\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">testContrastCompliance\u003C/span>(table);\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">testResponsiveAccessibility\u003C/span>(table);\n        \n        \u003Cspan class=\"hljs-comment\">// Generate summary\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateSummary\u003C/span>();\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">testResults\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">testStructureCompliance\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> testName = \u003Cspan class=\"hljs-string\">'WCAG 1.3.1 - Table Structure'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-comment\">// Test 1: Table has proper role\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!table.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'role'\u003C/span>) || table.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'role'\u003C/span>) !== \u003Cspan class=\"hljs-string\">'table'\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addFailure\u003C/span>(testName, \u003Cspan class=\"hljs-string\">'Table missing role="table" attribute'\u003C/span>);\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addSuccess\u003C/span>(testName, \u003Cspan class=\"hljs-string\">'Table has proper role attribute'\u003C/span>);\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Test 2: Headers are properly marked\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'th'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (headers.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addFailure\u003C/span>(testName, \u003Cspan class=\"hljs-string\">'Table has no header cells (<th> elements)'\u003C/span>);\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addSuccess\u003C/span>(testName, \u003Cspan class=\"hljs-string\">`Table has \u003Cspan class=\"hljs-subst\">${headers.length}\u003C/span> header cells`\u003C/span>);\n                \n                \u003Cspan class=\"hljs-comment\">// Check header scope attributes\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> headersWithoutScope = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(headers).\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\n                    \u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">h\u003C/span> =>\u003C/span> !h.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'scope'\u003C/span>)\n                );\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (headersWithoutScope.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addWarning\u003C/span>(testName, \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${headersWithoutScope.length}\u003C/span> headers missing scope attribute`\u003C/span>);\n                }\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Test 3: Data cells have header associations\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> dataCells = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'td'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellsWithoutHeaders = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(dataCells).\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\n                \u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> !cell.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'headers'\u003C/span>) && !\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">hasImplicitHeaderAssociation\u003C/span>(cell)\n            );\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (cellsWithoutHeaders.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addWarning\u003C/span>(testName, \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${cellsWithoutHeaders.length}\u003C/span> data cells lack explicit header associations`\u003C/span>);\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Test 4: Caption or summary present\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> hasCaption = table.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'caption'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> hasSummary = table.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-describedby'\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!hasCaption && !hasSummary) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addWarning\u003C/span>(testName, \u003Cspan class=\"hljs-string\">'Table lacks caption or summary for context'\u003C/span>);\n            }\n            \n        } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addFailure\u003C/span>(testName, \u003Cspan class=\"hljs-string\">`Structure test failed: \u003Cspan class=\"hljs-subst\">${error.message}\u003C/span>`\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">testKeyboardAccessibility\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> testName = \u003Cspan class=\"hljs-string\">'WCAG 2.1.1 - Keyboard Navigation'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-comment\">// Test 1: Table is keyboard focusable\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> isTabIndexSet = table.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'tabindex'\u003C/span>) !== \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!isTabIndexSet) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addFailure\u003C/span>(testName, \u003Cspan class=\"hljs-string\">'Table is not keyboard accessible (no tabindex)'\u003C/span>);\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addSuccess\u003C/span>(testName, \u003Cspan class=\"hljs-string\">'Table is keyboard accessible'\u003C/span>);\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Test 2: All cells are reachable\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'th, td'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> focusableCells = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(cells).\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\n                \u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> cell.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'tabindex'\u003C/span>) !== \u003Cspan class=\"hljs-literal\">null\u003C/span>\n            );\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (focusableCells.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addFailure\u003C/span>(testName, \u003Cspan class=\"hljs-string\">'No cells are focusable via keyboard'\u003C/span>);\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addSuccess\u003C/span>(testName, \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${focusableCells.length}\u003C/span> cells are keyboard focusable`\u003C/span>);\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Test 3: Keyboard navigation instructions available\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> hasInstructions = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">hasKeyboardInstructions\u003C/span>(table);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!hasInstructions) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addWarning\u003C/span>(testName, \u003Cspan class=\"hljs-string\">'No keyboard navigation instructions provided'\u003C/span>);\n            }\n            \n        } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addFailure\u003C/span>(testName, \u003Cspan class=\"hljs-string\">`Keyboard accessibility test failed: \u003Cspan class=\"hljs-subst\">${error.message}\u003C/span>`\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">testScreenReaderSupport\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> testName = \u003Cspan class=\"hljs-string\">'Screen Reader Support'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-comment\">// Test 1: ARIA attributes present\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> hasAriaRowCount = table.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-rowcount'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> hasAriaColCount = table.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-colcount'\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!hasAriaRowCount || !hasAriaColCount) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addWarning\u003C/span>(testName, \u003Cspan class=\"hljs-string\">'Missing ARIA grid attributes for enhanced screen reader support'\u003C/span>);\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addSuccess\u003C/span>(testName, \u003Cspan class=\"hljs-string\">'ARIA grid attributes present'\u003C/span>);\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Test 2: Live region for announcements\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> hasLiveRegion = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">hasAssociatedLiveRegion\u003C/span>(table);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!hasLiveRegion) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addWarning\u003C/span>(testName, \u003Cspan class=\"hljs-string\">'No live region for navigation announcements'\u003C/span>);\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addSuccess\u003C/span>(testName, \u003Cspan class=\"hljs-string\">'Live region available for announcements'\u003C/span>);\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Test 3: Empty cells handled appropriately\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> emptyCells = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">findEmptyCells\u003C/span>(table);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> emptyCellsWithLabels = emptyCells.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\n                \u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> cell.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-label'\u003C/span>) || cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>()\n            );\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (emptyCells.\u003Cspan class=\"hljs-property\">length\u003C/span> > emptyCellsWithLabels.\u003Cspan class=\"hljs-property\">length\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addWarning\u003C/span>(testName, \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${emptyCells.length - emptyCellsWithLabels.length}\u003C/span> empty cells lack appropriate labels`\u003C/span>);\n            }\n            \n        } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addFailure\u003C/span>(testName, \u003Cspan class=\"hljs-string\">`Screen reader test failed: \u003Cspan class=\"hljs-subst\">${error.message}\u003C/span>`\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">testLabelingCompliance\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> testName = \u003Cspan class=\"hljs-string\">'WCAG 2.4.6 - Headings and Labels'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-comment\">// Test 1: Descriptive headers\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'th'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> vagueHeaders = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(headers).\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">header\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = header.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>().\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> text.\u003Cspan class=\"hljs-property\">length\u003C/span> < \u003Cspan class=\"hljs-number\">2\u003C/span> || [\u003Cspan class=\"hljs-string\">'data'\u003C/span>, \u003Cspan class=\"hljs-string\">'info'\u003C/span>, \u003Cspan class=\"hljs-string\">'value'\u003C/span>, \u003Cspan class=\"hljs-string\">'item'\u003C/span>].\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(text);\n            });\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (vagueHeaders.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addWarning\u003C/span>(testName, \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${vagueHeaders.length}\u003C/span> headers could be more descriptive`\u003C/span>);\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (headers.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addSuccess\u003C/span>(testName, \u003Cspan class=\"hljs-string\">'All headers are descriptive'\u003C/span>);\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Test 2: Unique labels\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> headerTexts = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(headers).\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">h\u003C/span> =>\u003C/span> h.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>());\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> duplicateHeaders = headerTexts.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\n                \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">text, index\u003C/span>) =>\u003C/span> headerTexts.\u003Cspan class=\"hljs-title function_\">indexOf\u003C/span>(text) !== index\n            );\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (duplicateHeaders.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addWarning\u003C/span>(testName, \u003Cspan class=\"hljs-string\">'Some headers have identical text'\u003C/span>);\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Test 3: Table caption appropriateness\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> caption = table.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'caption'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (caption) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> captionText = caption.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (captionText.\u003Cspan class=\"hljs-property\">length\u003C/span> < \u003Cspan class=\"hljs-number\">10\u003C/span>) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addWarning\u003C/span>(testName, \u003Cspan class=\"hljs-string\">'Table caption could be more descriptive'\u003C/span>);\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addSuccess\u003C/span>(testName, \u003Cspan class=\"hljs-string\">'Table caption is descriptive'\u003C/span>);\n                }\n            }\n            \n        } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addFailure\u003C/span>(testName, \u003Cspan class=\"hljs-string\">`Labeling test failed: \u003Cspan class=\"hljs-subst\">${error.message}\u003C/span>`\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">testContrastCompliance\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> testName = \u003Cspan class=\"hljs-string\">'Color and Contrast Compliance'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-comment\">// Test focus indicators\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> focusStyle = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getFocusStyle\u003C/span>(table);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!focusStyle.\u003Cspan class=\"hljs-property\">outline\u003C/span> && !focusStyle.\u003Cspan class=\"hljs-property\">border\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addWarning\u003C/span>(testName, \u003Cspan class=\"hljs-string\">'Focus indicators may not be visible enough'\u003C/span>);\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addSuccess\u003C/span>(testName, \u003Cspan class=\"hljs-string\">'Focus indicators are present'\u003C/span>);\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Test high contrast media query support\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> hasHighContrastStyles = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">hasHighContrastSupport\u003C/span>(table);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!hasHighContrastStyles) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addWarning\u003C/span>(testName, \u003Cspan class=\"hljs-string\">'No high contrast mode support detected'\u003C/span>);\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addSuccess\u003C/span>(testName, \u003Cspan class=\"hljs-string\">'High contrast support available'\u003C/span>);\n            }\n            \n        } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addFailure\u003C/span>(testName, \u003Cspan class=\"hljs-string\">`Contrast test failed: \u003Cspan class=\"hljs-subst\">${error.message}\u003C/span>`\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">testResponsiveAccessibility\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> testName = \u003Cspan class=\"hljs-string\">'Responsive Accessibility'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-comment\">// Test horizontal scrolling accessibility\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> hasScrollableWrapper = table.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'.responsive-table-wrapper, .table-responsive, [style*="overflow"]'\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!hasScrollableWrapper && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">isTableWide\u003C/span>(table)) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addWarning\u003C/span>(testName, \u003Cspan class=\"hljs-string\">'Wide table may cause horizontal scrolling without proper wrapper'\u003C/span>);\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (hasScrollableWrapper) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addSuccess\u003C/span>(testName, \u003Cspan class=\"hljs-string\">'Table has responsive wrapper'\u003C/span>);\n                \n                \u003Cspan class=\"hljs-comment\">// Check if wrapper is keyboard accessible\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> wrapper = hasScrollableWrapper;\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!wrapper.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'tabindex'\u003C/span>)) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addWarning\u003C/span>(testName, \u003Cspan class=\"hljs-string\">'Scrollable wrapper is not keyboard accessible'\u003C/span>);\n                }\n            }\n            \n        } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addFailure\u003C/span>(testName, \u003Cspan class=\"hljs-string\">`Responsive test failed: \u003Cspan class=\"hljs-subst\">${error.message}\u003C/span>`\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Helper methods\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">hasImplicitHeaderAssociation\u003C/span>(\u003Cspan class=\"hljs-params\">cell\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> row = cell.\u003Cspan class=\"hljs-property\">parentElement\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellIndex = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(row.\u003Cspan class=\"hljs-property\">children\u003C/span>).\u003Cspan class=\"hljs-title function_\">indexOf\u003C/span>(cell);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> table = cell.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'table'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Check for row header\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rowHeader = row.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'th'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (rowHeader) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Check for column header\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> firstRow = table.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> colHeader = firstRow?.\u003Cspan class=\"hljs-property\">children\u003C/span>[cellIndex];\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (colHeader?.\u003Cspan class=\"hljs-property\">tagName\u003C/span>.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>() === \u003Cspan class=\"hljs-string\">'th'\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">hasKeyboardInstructions\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> parent = table.\u003Cspan class=\"hljs-property\">parentElement\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> instructions = parent.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-navigation-instructions, .keyboard-instructions'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> instructions !== \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">hasAssociatedLiveRegion\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tableId = table.\u003Cspan class=\"hljs-property\">id\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!tableId) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> liveRegion = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`#\u003Cspan class=\"hljs-subst\">${tableId}\u003C/span>-announcements, [aria-live]`\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> liveRegion !== \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">findEmptyCells\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'td, th'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(cells).\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> text === \u003Cspan class=\"hljs-string\">''\u003C/span> || text === \u003Cspan class=\"hljs-string\">' '\u003C/span> || text === \u003Cspan class=\"hljs-string\">' '\u003C/span>;\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getFocusStyle\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> computedStyle = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">getComputedStyle\u003C/span>(table, \u003Cspan class=\"hljs-string\">':focus'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">outline\u003C/span>: computedStyle.\u003Cspan class=\"hljs-property\">outline\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">border\u003C/span>: computedStyle.\u003Cspan class=\"hljs-property\">border\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">boxShadow\u003C/span>: computedStyle.\u003Cspan class=\"hljs-property\">boxShadow\u003C/span>\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">hasHighContrastSupport\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Check if CSS has high contrast media queries\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> stylesheets = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">stylesheets\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> stylesheet \u003Cspan class=\"hljs-keyword\">of\u003C/span> stylesheets) {\n            \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> rules = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(stylesheet.\u003Cspan class=\"hljs-property\">cssRules\u003C/span> || []);\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> hasHighContrastRule = rules.\u003Cspan class=\"hljs-title function_\">some\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">rule\u003C/span> =>\u003C/span> \n                    rule.\u003Cspan class=\"hljs-property\">conditionText\u003C/span> && rule.\u003Cspan class=\"hljs-property\">conditionText\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'prefers-contrast: high'\u003C/span>)\n                );\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (hasHighContrastRule) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n            } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n                \u003Cspan class=\"hljs-comment\">// Skip stylesheets that can't be accessed\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">continue\u003C/span>;\n            }\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">isTableWide\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> columns = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>)[\u003Cspan class=\"hljs-number\">0\u003C/span>]?.\u003Cspan class=\"hljs-property\">children\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> || \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> columns > \u003Cspan class=\"hljs-number\">5\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addSuccess\u003C/span>(\u003Cspan class=\"hljs-params\">testName, message\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">testResults\u003C/span>.\u003Cspan class=\"hljs-property\">passed\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({ \u003Cspan class=\"hljs-attr\">test\u003C/span>: testName, message });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addFailure\u003C/span>(\u003Cspan class=\"hljs-params\">testName, message\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">testResults\u003C/span>.\u003Cspan class=\"hljs-property\">failed\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({ \u003Cspan class=\"hljs-attr\">test\u003C/span>: testName, message });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addWarning\u003C/span>(\u003Cspan class=\"hljs-params\">testName, message\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">testResults\u003C/span>.\u003Cspan class=\"hljs-property\">warnings\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({ \u003Cspan class=\"hljs-attr\">test\u003C/span>: testName, message });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateSummary\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">testResults\u003C/span>.\u003Cspan class=\"hljs-property\">summary\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">totalTests\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">testResults\u003C/span>.\u003Cspan class=\"hljs-property\">passed\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> + \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">testResults\u003C/span>.\u003Cspan class=\"hljs-property\">failed\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> + \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">testResults\u003C/span>.\u003Cspan class=\"hljs-property\">warnings\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">passed\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">testResults\u003C/span>.\u003Cspan class=\"hljs-property\">passed\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">failed\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">testResults\u003C/span>.\u003Cspan class=\"hljs-property\">failed\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">warnings\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">testResults\u003C/span>.\u003Cspan class=\"hljs-property\">warnings\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">successRate\u003C/span>: ((\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">testResults\u003C/span>.\u003Cspan class=\"hljs-property\">passed\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> / (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">testResults\u003C/span>.\u003Cspan class=\"hljs-property\">passed\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> + \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">testResults\u003C/span>.\u003Cspan class=\"hljs-property\">failed\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>)) * \u003Cspan class=\"hljs-number\">100\u003C/span>).\u003Cspan class=\"hljs-title function_\">toFixed\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>),\n            \u003Cspan class=\"hljs-attr\">complianceLevel\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">determineComplianceLevel\u003C/span>()\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">determineComplianceLevel\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> criticalFailures = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">testResults\u003C/span>.\u003Cspan class=\"hljs-property\">failed\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> warnings = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">testResults\u003C/span>.\u003Cspan class=\"hljs-property\">warnings\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (criticalFailures === \u003Cspan class=\"hljs-number\">0\u003C/span> && warnings === \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'AAA'\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (criticalFailures === \u003Cspan class=\"hljs-number\">0\u003C/span> && warnings < \u003Cspan class=\"hljs-number\">3\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'AA'\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (criticalFailures < \u003Cspan class=\"hljs-number\">2\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'A'\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'Non-compliant'\u003C/span>;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateAccessibilityReport\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> report = {\n            \u003Cspan class=\"hljs-attr\">tableId\u003C/span>: table.\u003Cspan class=\"hljs-property\">id\u003C/span> || \u003Cspan class=\"hljs-string\">'unnamed'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">timestamp\u003C/span>: \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Date\u003C/span>().\u003Cspan class=\"hljs-title function_\">toISOString\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">wcagLevel\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">testResults\u003C/span>.\u003Cspan class=\"hljs-property\">summary\u003C/span>.\u003Cspan class=\"hljs-property\">complianceLevel\u003C/span>,\n            ...\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">testResults\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            report,\n            \u003Cspan class=\"hljs-attr\">htmlReport\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateHTMLReport\u003C/span>(report),\n            \u003Cspan class=\"hljs-attr\">jsonReport\u003C/span>: \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">stringify\u003C/span>(report, \u003Cspan class=\"hljs-literal\">null\u003C/span>, \u003Cspan class=\"hljs-number\">2\u003C/span>)\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateHTMLReport\u003C/span>(\u003Cspan class=\"hljs-params\">report\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Table Accessibility Report</title>\n    <style>\n        body { font-family: Arial, sans-serif; margin: 20px; }\n        .summary { background: #f5f5f5; padding: 15px; border-radius: 5px; }\n        .passed { color: #28a745; }\n        .failed { color: #dc3545; }\n        .warning { color: #ffc107; }\n        .test-result { margin: 10px 0; padding: 10px; border-left: 3px solid #ccc; }\n        .test-result.passed { border-left-color: #28a745; }\n        .test-result.failed { border-left-color: #dc3545; }\n        .test-result.warning { border-left-color: #ffc107; }\n    </style>\n</head>\n<body>\n    <h1>Table Accessibility Report</h1>\n    \n    <div class="summary">\n        <h2>Summary</h2>\n        <p><strong>Table:</strong> \u003Cspan class=\"hljs-subst\">${report.tableId}\u003C/span></p>\n        <p><strong>WCAG Compliance Level:</strong> \u003Cspan class=\"hljs-subst\">${report.wcagLevel}\u003C/span></p>\n        <p><strong>Tests Run:</strong> \u003Cspan class=\"hljs-subst\">${report.summary.totalTests}\u003C/span></p>\n        <p><strong>Success Rate:</strong> \u003Cspan class=\"hljs-subst\">${report.summary.successRate}\u003C/span>%</p>\n        <p><strong>Results:</strong> \n           <span class="passed">\u003Cspan class=\"hljs-subst\">${report.summary.passed}\u003C/span> passed</span>, \n           <span class="failed">\u003Cspan class=\"hljs-subst\">${report.summary.failed}\u003C/span> failed</span>, \n           <span class="warning">\u003Cspan class=\"hljs-subst\">${report.summary.warnings}\u003C/span> warnings</span>\n        </p>\n    </div>\n    \n    <h2>Test Results</h2>\n    \n    \u003Cspan class=\"hljs-subst\">${report.passed.map(test => \u003Cspan class=\"hljs-string\">`\n        <div class="test-result passed">\n            <strong>✓ \u003Cspan class=\"hljs-subst\">${test.test}\u003C/span></strong><br>\n            \u003Cspan class=\"hljs-subst\">${test.message}\u003C/span>\n        </div>\n    `\u003C/span>).join(\u003Cspan class=\"hljs-string\">''\u003C/span>)}\u003C/span>\n    \n    \u003Cspan class=\"hljs-subst\">${report.failed.map(test => \u003Cspan class=\"hljs-string\">`\n        <div class="test-result failed">\n            <strong>✗ \u003Cspan class=\"hljs-subst\">${test.test}\u003C/span></strong><br>\n            \u003Cspan class=\"hljs-subst\">${test.message}\u003C/span>\n        </div>\n    `\u003C/span>).join(\u003Cspan class=\"hljs-string\">''\u003C/span>)}\u003C/span>\n    \n    \u003Cspan class=\"hljs-subst\">${report.warnings.map(test => \u003Cspan class=\"hljs-string\">`\n        <div class="test-result warning">\n            <strong>⚠ \u003Cspan class=\"hljs-subst\">${test.test}\u003C/span></strong><br>\n            \u003Cspan class=\"hljs-subst\">${test.message}\u003C/span>\n        </div>\n    `\u003C/span>).join(\u003Cspan class=\"hljs-string\">''\u003C/span>)}\u003C/span>\n    \n    <footer>\n        <p><em>Report generated on \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-built_in\">Date\u003C/span>(report.timestamp).toLocaleString()}\u003C/span></em></p>\n    </footer>\n</body>\n</html>\n        `\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Usage example\u003C/span>\n\u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">testTableAccessibility\u003C/span>(\u003Cspan class=\"hljs-params\">tableId\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> table = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(tableId);\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!table) {\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">error\u003C/span>(\u003Cspan class=\"hljs-string\">`Table with ID '\u003Cspan class=\"hljs-subst\">${tableId}\u003C/span>' not found`\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> tester = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">TableAccessibilityTester\u003C/span>();\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> results = \u003Cspan class=\"hljs-keyword\">await\u003C/span> tester.\u003Cspan class=\"hljs-title function_\">runAccessibilityTests\u003C/span>(table);\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> { report, htmlReport } = tester.\u003Cspan class=\"hljs-title function_\">generateAccessibilityReport\u003C/span>(table);\n    \n    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Accessibility Report:'\u003C/span>, report);\n    \n    \u003Cspan class=\"hljs-comment\">// Optionally save or display the HTML report\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span> !== \u003Cspan class=\"hljs-string\">'undefined'\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> reportWindow = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">open\u003C/span>(\u003Cspan class=\"hljs-string\">''\u003C/span>, \u003Cspan class=\"hljs-string\">'_blank'\u003C/span>);\n        reportWindow.\u003Cspan class=\"hljs-property\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">write\u003C/span>(htmlReport);\n        reportWindow.\u003Cspan class=\"hljs-property\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">close\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> results;\n}\n\n\u003Cspan class=\"hljs-variable language_\">module\u003C/span>.\u003Cspan class=\"hljs-property\">exports\u003C/span> = \u003Cspan class=\"hljs-title class_\">TableAccessibilityTester\u003C/span>;\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-content-management-systems\">Integration with Content Management Systems\u003C/h2>\n\u003Cp>Table accessibility techniques integrate seamlessly with comprehensive content workflows. When combined with \u003Ca href=\"/blog/markdown-automation-workflows-complete-guide\">automated documentation systems\u003C/a>, accessibility enhancements become part of the content creation pipeline, ensuring that all tables meet accessibility standards automatically without requiring manual intervention from content creators.\u003C/p>\n\u003Cp>For comprehensive table functionality, accessibility patterns work effectively with \u003Ca href=\"/blog/markdown-table-sorting-filtering-interactive-guide\">interactive table features and sorting mechanisms\u003C/a> to create inclusive user experiences where accessibility enhancements support rather than hinder advanced table functionality, providing seamless experiences for users with diverse needs and interaction patterns.\u003C/p>\n\u003Cp>When building sophisticated content architectures, accessibility features complement \u003Ca href=\"/blog/markdown-progressive-web-app-documentation-complete-guide\">progressive web app documentation systems\u003C/a> by ensuring that offline content, cached tables, and service worker-managed resources maintain full accessibility support across all user scenarios and device capabilities.\u003C/p>\n\u003Ch2 id=\"advanced-accessibility-implementation\">Advanced Accessibility Implementation\u003C/h2>\n\u003Ch3 id=\"responsive-accessibility-patterns\">Responsive Accessibility Patterns\u003C/h3>\n\u003Cp>Ensuring accessibility across all device sizes and interaction modes:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* responsive-accessible-tables.css - Comprehensive responsive accessibility */\u003C/span>\n\n\u003Cspan class=\"hljs-comment\">/* Base accessible table styles */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-collapse\u003C/span>: collapse;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: system-ui, -apple-system, sans-serif;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Enhanced focus management */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span> solid \u003Cspan class=\"hljs-number\">#005fcc\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: -\u003Cspan class=\"hljs-number\">1px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n    \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">10\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* High contrast mode support */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-contrast\u003C/span>: high) {\n    \u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: ButtonFace;\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: ButtonText;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Reduced motion support */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-reduced-motion\u003C/span>: reduce) {\n    \u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> *,\n    \u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> *\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> *\u003Cspan class=\"hljs-selector-pseudo\">::after\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">animation-duration\u003C/span>: \u003Cspan class=\"hljs-number\">0.01ms\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">animation-iteration-count\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">transition-duration\u003C/span>: \u003Cspan class=\"hljs-number\">0.01ms\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Responsive table wrapper */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">overflow-x\u003C/span>: auto;\n    \u003Cspan class=\"hljs-attribute\">overflow-y\u003C/span>: visible;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#ddd\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Make wrapper keyboard accessible */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.responsive-table-container\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>-within {\n    \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#005fcc\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Mobile-first responsive approach */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-comment\">/* Stack table for mobile if needed */\u003C/span>\n    \u003Cspan class=\"hljs-selector-class\">.stack-mobile\u003C/span> \u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.stack-mobile\u003C/span> \u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.stack-mobile\u003C/span> \u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.stack-mobile\u003C/span> \u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.stack-mobile\u003C/span> \u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.stack-mobile\u003C/span> \u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.stack-mobile\u003C/span> \u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n        \u003Cspan class=\"hljs-attribute\">top\u003C/span>: -\u003Cspan class=\"hljs-number\">9999px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">left\u003C/span>: -\u003Cspan class=\"hljs-number\">9999px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.stack-mobile\u003C/span> \u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#ddd\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.stack-mobile\u003C/span> \u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n        \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n        \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">40%\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding-top\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.stack-mobile\u003C/span> \u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:before\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-built_in\">attr\u003C/span>(data-label) \u003Cspan class=\"hljs-string\">": "\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n        \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">35%\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: nowrap;\n        \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#333\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Touch target optimization */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">hover\u003C/span>: none) \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">pointer\u003C/span>: coarse) {\n    \u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">min-height\u003C/span>: \u003Cspan class=\"hljs-number\">44px\u003C/span>; \u003Cspan class=\"hljs-comment\">/* iOS recommended minimum */\u003C/span>\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Screen reader specific styles */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.sr-only\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: -\u003Cspan class=\"hljs-number\">1px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n    \u003Cspan class=\"hljs-attribute\">clip\u003C/span>: \u003Cspan class=\"hljs-built_in\">rect\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: nowrap;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Keyboard navigation indicators */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-navigation-active\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">3px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">95\u003C/span>, \u003Cspan class=\"hljs-number\">204\u003C/span>, \u003Cspan class=\"hljs-number\">0.3\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Loading and error states */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[aria-busy=\u003Cspan class=\"hljs-string\">"true"\u003C/span>]\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">0.6\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[aria-busy=\u003Cspan class=\"hljs-string\">"true"\u003C/span>]\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:after\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">"Loading table data..."\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translate\u003C/span>(-\u003Cspan class=\"hljs-number\">50%\u003C/span>, -\u003Cspan class=\"hljs-number\">50%\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">255\u003C/span>, \u003Cspan class=\"hljs-number\">255\u003C/span>, \u003Cspan class=\"hljs-number\">255\u003C/span>, \u003Cspan class=\"hljs-number\">0.9\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Empty table states */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:empty\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:after\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">"No data available"\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: table-cell;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-style\u003C/span>: italic;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#666\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Table sorting accessibility */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.sortable-header\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n    user-select: none;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.sortable-header\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.sortable-header\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f0f0f0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.sortable-header\u003C/span> \u003Cspan class=\"hljs-selector-class\">.sort-indicator\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin-left\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.8em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.sortable-header\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[aria-sort=\u003Cspan class=\"hljs-string\">"ascending"\u003C/span>]\u003C/span> \u003Cspan class=\"hljs-selector-class\">.sort-indicator\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:after\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">"▲"\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.sortable-header\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[aria-sort=\u003Cspan class=\"hljs-string\">"descending"\u003C/span>]\u003C/span> \u003Cspan class=\"hljs-selector-class\">.sort-indicator\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:after\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">"▼"\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.sortable-header\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[aria-sort=\u003Cspan class=\"hljs-string\">"none"\u003C/span>]\u003C/span> \u003Cspan class=\"hljs-selector-class\">.sort-indicator\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:after\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">"⇅"\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Print accessibility */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> print {\n    \u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border-collapse\u003C/span>: collapse;\n        \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#000\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f0f0f0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.skip-link\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.table-navigation-instructions\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-summary\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n        \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9em\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#000\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"voice-control-and-alternative-input-support\">Voice Control and Alternative Input Support\u003C/h3>\n\u003Cp>Supporting diverse input methods and assistive technologies:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// voice-control-table-support.js - Voice control and alternative input support\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">VoiceControlTableSupport\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span> = table;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">voiceCommands\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">speechRecognition\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">isListening\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentCell\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">initializeVoiceCommands\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupSpeechRecognition\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupAlternativeInputs\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">initializeVoiceCommands\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Define voice commands for table navigation\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">voiceCommands\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(\u003Cspan class=\"hljs-string\">'go right'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">moveCell\u003C/span>(\u003Cspan class=\"hljs-string\">'right'\u003C/span>));\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">voiceCommands\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(\u003Cspan class=\"hljs-string\">'go left'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">moveCell\u003C/span>(\u003Cspan class=\"hljs-string\">'left'\u003C/span>));\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">voiceCommands\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(\u003Cspan class=\"hljs-string\">'go up'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">moveCell\u003C/span>(\u003Cspan class=\"hljs-string\">'up'\u003C/span>));\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">voiceCommands\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(\u003Cspan class=\"hljs-string\">'go down'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">moveCell\u003C/span>(\u003Cspan class=\"hljs-string\">'down'\u003C/span>));\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">voiceCommands\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(\u003Cspan class=\"hljs-string\">'first cell'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">moveToFirstCell\u003C/span>());\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">voiceCommands\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(\u003Cspan class=\"hljs-string\">'last cell'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">moveToLastCell\u003C/span>());\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">voiceCommands\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(\u003Cspan class=\"hljs-string\">'read cell'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">readCurrentCell\u003C/span>());\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">voiceCommands\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(\u003Cspan class=\"hljs-string\">'read row'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">readCurrentRow\u003C/span>());\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">voiceCommands\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(\u003Cspan class=\"hljs-string\">'read column'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">readCurrentColumn\u003C/span>());\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">voiceCommands\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(\u003Cspan class=\"hljs-string\">'table summary'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">readTableSummary\u003C/span>());\n        \n        \u003Cspan class=\"hljs-comment\">// Column/row navigation by name\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addHeaderNavigationCommands\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupSpeechRecognition\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-string\">'webkitSpeechRecognition'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">speechRecognition\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title function_\">webkitSpeechRecognition\u003C/span>();\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-string\">'SpeechRecognition'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">speechRecognition\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">SpeechRecognition\u003C/span>();\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Speech recognition not supported'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">speechRecognition\u003C/span>.\u003Cspan class=\"hljs-property\">continuous\u003C/span> = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">speechRecognition\u003C/span>.\u003Cspan class=\"hljs-property\">interimResults\u003C/span> = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">speechRecognition\u003C/span>.\u003Cspan class=\"hljs-property\">lang\u003C/span> = \u003Cspan class=\"hljs-string\">'en-US'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">speechRecognition\u003C/span>.\u003Cspan class=\"hljs-property\">onresult\u003C/span> = \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">event\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">processSpeechResult\u003C/span>(event);\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">speechRecognition\u003C/span>.\u003Cspan class=\"hljs-property\">onerror\u003C/span> = \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">event\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">error\u003C/span>(\u003Cspan class=\"hljs-string\">'Speech recognition error:'\u003C/span>, event.\u003Cspan class=\"hljs-property\">error\u003C/span>);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announceToUser\u003C/span>(\u003Cspan class=\"hljs-string\">`Speech recognition error: \u003Cspan class=\"hljs-subst\">${event.error}\u003C/span>`\u003C/span>);\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">speechRecognition\u003C/span>.\u003Cspan class=\"hljs-property\">onend\u003C/span> = \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">isListening\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">speechRecognition\u003C/span>.\u003Cspan class=\"hljs-title function_\">start\u003C/span>(); \u003Cspan class=\"hljs-comment\">// Restart if still listening\u003C/span>\n            }\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupAlternativeInputs\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Eye tracking support (simulated)\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupEyeTrackingEmulation\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Switch access support\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupSwitchAccess\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Head pointer support\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupHeadPointerSupport\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">startVoiceControl\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">speechRecognition\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announceToUser\u003C/span>(\u003Cspan class=\"hljs-string\">'Voice control not available on this device'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">isListening\u003C/span> = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">speechRecognition\u003C/span>.\u003Cspan class=\"hljs-title function_\">start\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announceToUser\u003C/span>(\u003Cspan class=\"hljs-string\">'Voice control activated. Say "help" for commands.'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Add visual indicator\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addVoiceControlIndicator\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">stopVoiceControl\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">isListening\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">speechRecognition\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">speechRecognition\u003C/span>.\u003Cspan class=\"hljs-title function_\">stop\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announceToUser\u003C/span>(\u003Cspan class=\"hljs-string\">'Voice control deactivated'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeVoiceControlIndicator\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">processSpeechResult\u003C/span>(\u003Cspan class=\"hljs-params\">event\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = event.\u003Cspan class=\"hljs-property\">resultIndex\u003C/span>; i < event.\u003Cspan class=\"hljs-property\">results\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>; i++) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> result = event.\u003Cspan class=\"hljs-property\">results\u003C/span>[i];\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (result.\u003Cspan class=\"hljs-property\">isFinal\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> command = result[\u003Cspan class=\"hljs-number\">0\u003C/span>].\u003Cspan class=\"hljs-property\">transcript\u003C/span>.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>().\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">executeVoiceCommand\u003C/span>(command);\n            }\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">executeVoiceCommand\u003C/span>(\u003Cspan class=\"hljs-params\">command\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Voice command:'\u003C/span>, command);\n        \n        \u003Cspan class=\"hljs-comment\">// Check for exact matches first\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">voiceCommands\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(command)) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">voiceCommands\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(command)();\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Check for partial matches\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> [voiceCommand, action] \u003Cspan class=\"hljs-keyword\">of\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">voiceCommands\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (command.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(voiceCommand)) {\n                \u003Cspan class=\"hljs-title function_\">action\u003C/span>();\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Special commands\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (command.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'help'\u003C/span>)) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announceAvailableCommands\u003C/span>();\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (command.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'go to column'\u003C/span>)) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleGoToColumnCommand\u003C/span>(command);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (command.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'go to row'\u003C/span>)) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleGoToRowCommand\u003C/span>(command);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announceToUser\u003C/span>(\u003Cspan class=\"hljs-string\">'Command not recognized. Say "help" for available commands.'\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addHeaderNavigationCommands\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'th'\u003C/span>);\n        headers.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">header, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> headerText = header.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>().\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">voiceCommands\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(\u003Cspan class=\"hljs-string\">`go to \u003Cspan class=\"hljs-subst\">${headerText}\u003C/span>`\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">moveToColumn\u003C/span>(index);\n            });\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">moveCell\u003C/span>(\u003Cspan class=\"hljs-params\">direction\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentCell\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentCell\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'th, td'\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetCell = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">findAdjacentCell\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentCell\u003C/span>, direction);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (targetCell) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">focusCell\u003C/span>(targetCell);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announceNavigation\u003C/span>(direction, targetCell);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announceToUser\u003C/span>(\u003Cspan class=\"hljs-string\">`Cannot move \u003Cspan class=\"hljs-subst\">${direction}\u003C/span> from current position`\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">findAdjacentCell\u003C/span>(\u003Cspan class=\"hljs-params\">currentCell, direction\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> row = currentCell.\u003Cspan class=\"hljs-property\">parentElement\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellIndex = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(row.\u003Cspan class=\"hljs-property\">children\u003C/span>).\u003Cspan class=\"hljs-title function_\">indexOf\u003C/span>(currentCell);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> allRows = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>));\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rowIndex = allRows.\u003Cspan class=\"hljs-title function_\">indexOf\u003C/span>(row);\n        \n        \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (direction) {\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'right'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> row.\u003Cspan class=\"hljs-property\">children\u003C/span>[cellIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>] || \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'left'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> row.\u003Cspan class=\"hljs-property\">children\u003C/span>[cellIndex - \u003Cspan class=\"hljs-number\">1\u003C/span>] || \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'up'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> prevRow = allRows[rowIndex - \u003Cspan class=\"hljs-number\">1\u003C/span>];\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> prevRow?.\u003Cspan class=\"hljs-property\">children\u003C/span>[cellIndex] || \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'down'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> nextRow = allRows[rowIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>];\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> nextRow?.\u003Cspan class=\"hljs-property\">children\u003C/span>[cellIndex] || \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n            \u003Cspan class=\"hljs-attr\">default\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">focusCell\u003C/span>(\u003Cspan class=\"hljs-params\">cell\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentCell\u003C/span> = cell;\n        cell.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n        cell.\u003Cspan class=\"hljs-title function_\">scrollIntoView\u003C/span>({ \u003Cspan class=\"hljs-attr\">behavior\u003C/span>: \u003Cspan class=\"hljs-string\">'smooth'\u003C/span>, \u003Cspan class=\"hljs-attr\">block\u003C/span>: \u003Cspan class=\"hljs-string\">'nearest'\u003C/span> });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">moveToFirstCell\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> firstCell = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'th, td'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (firstCell) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">focusCell\u003C/span>(firstCell);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announceToUser\u003C/span>(\u003Cspan class=\"hljs-string\">'Moved to first cell'\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">moveToLastCell\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> allCells = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'th, td'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lastCell = allCells[allCells.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>];\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (lastCell) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">focusCell\u003C/span>(lastCell);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announceToUser\u003C/span>(\u003Cspan class=\"hljs-string\">'Moved to last cell'\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">moveToColumn\u003C/span>(\u003Cspan class=\"hljs-params\">columnIndex\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> firstRow = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetCell = firstRow?.\u003Cspan class=\"hljs-property\">children\u003C/span>[columnIndex];\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (targetCell) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">focusCell\u003C/span>(targetCell);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announceToUser\u003C/span>(\u003Cspan class=\"hljs-string\">`Moved to column \u003Cspan class=\"hljs-subst\">${columnIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span>`\u003C/span>);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announceToUser\u003C/span>(\u003Cspan class=\"hljs-string\">`Column \u003Cspan class=\"hljs-subst\">${columnIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span> not found`\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">readCurrentCell\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentCell\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announceToUser\u003C/span>(\u003Cspan class=\"hljs-string\">'No cell selected'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> content = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCurrentCellDescription\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announceToUser\u003C/span>(content);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">readCurrentRow\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentCell\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announceToUser\u003C/span>(\u003Cspan class=\"hljs-string\">'No cell selected'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> row = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentCell\u003C/span>.\u003Cspan class=\"hljs-property\">parentElement\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(row.\u003Cspan class=\"hljs-property\">children\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rowContent = cells.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>()).\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">', '\u003C/span>);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announceToUser\u003C/span>(\u003Cspan class=\"hljs-string\">`Current row: \u003Cspan class=\"hljs-subst\">${rowContent}\u003C/span>`\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">readCurrentColumn\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentCell\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announceToUser\u003C/span>(\u003Cspan class=\"hljs-string\">'No cell selected'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellIndex = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentCell\u003C/span>.\u003Cspan class=\"hljs-property\">parentElement\u003C/span>.\u003Cspan class=\"hljs-property\">children\u003C/span>).\u003Cspan class=\"hljs-title function_\">indexOf\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentCell\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> columnCells = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>)).\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> row.\u003Cspan class=\"hljs-property\">children\u003C/span>[cellIndex]);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> columnContent = columnCells\n            .\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> cell)\n            .\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>())\n            .\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">', '\u003C/span>);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announceToUser\u003C/span>(\u003Cspan class=\"hljs-string\">`Current column: \u003Cspan class=\"hljs-subst\">${columnContent}\u003C/span>`\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">readTableSummary\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> summary = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateTableSummary\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announceToUser\u003C/span>(summary);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getCurrentCellDescription\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> content = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentCell\u003C/span>.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rowHeader = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">findRowHeader\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentCell\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> colHeader = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">findColumnHeader\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentCell\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> description = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (rowHeader && colHeader) {\n            description = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${rowHeader}\u003C/span>, \u003Cspan class=\"hljs-subst\">${colHeader}\u003C/span>: \u003Cspan class=\"hljs-subst\">${content}\u003C/span>`\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (rowHeader) {\n            description = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${rowHeader}\u003C/span>: \u003Cspan class=\"hljs-subst\">${content}\u003C/span>`\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (colHeader) {\n            description = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${colHeader}\u003C/span>: \u003Cspan class=\"hljs-subst\">${content}\u003C/span>`\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            description = content;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> description;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">findRowHeader\u003C/span>(\u003Cspan class=\"hljs-params\">cell\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> row = cell.\u003Cspan class=\"hljs-property\">parentElement\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rowHeader = row.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'th'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> rowHeader?.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>() || \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">findColumnHeader\u003C/span>(\u003Cspan class=\"hljs-params\">cell\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellIndex = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(cell.\u003Cspan class=\"hljs-property\">parentElement\u003C/span>.\u003Cspan class=\"hljs-property\">children\u003C/span>).\u003Cspan class=\"hljs-title function_\">indexOf\u003C/span>(cell);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> firstRow = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> colHeader = firstRow?.\u003Cspan class=\"hljs-property\">children\u003C/span>[cellIndex];\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> colHeader?.\u003Cspan class=\"hljs-property\">tagName\u003C/span>.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>() === \u003Cspan class=\"hljs-string\">'th'\u003C/span> ? \n               colHeader.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>() : \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateTableSummary\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cols = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>)?.\u003Cspan class=\"hljs-property\">children\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> || \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> caption = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'caption'\u003C/span>)?.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> summary = \u003Cspan class=\"hljs-string\">`Table with \u003Cspan class=\"hljs-subst\">${rows}\u003C/span> rows and \u003Cspan class=\"hljs-subst\">${cols}\u003C/span> columns.`\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (caption) {\n            summary = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${caption}\u003C/span>. \u003Cspan class=\"hljs-subst\">${summary}\u003C/span>`\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'th'\u003C/span>))\n            .\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">th\u003C/span> =>\u003C/span> th.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>())\n            .\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">text\u003C/span> =>\u003C/span> text.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (headers.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            summary += \u003Cspan class=\"hljs-string\">` Column headers: \u003Cspan class=\"hljs-subst\">${headers.join(\u003Cspan class=\"hljs-string\">', '\u003C/span>)}\u003C/span>.`\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> summary;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">announceNavigation\u003C/span>(\u003Cspan class=\"hljs-params\">direction, targetCell\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellDescription = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCurrentCellDescription\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announceToUser\u003C/span>(\u003Cspan class=\"hljs-string\">`Moved \u003Cspan class=\"hljs-subst\">${direction}\u003C/span>. \u003Cspan class=\"hljs-subst\">${cellDescription}\u003C/span>`\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">announceAvailableCommands\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> commands = [\n            \u003Cspan class=\"hljs-string\">'Navigation: go right, go left, go up, go down'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'Quick navigation: first cell, last cell'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'Reading: read cell, read row, read column, table summary'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'Control: help, stop listening'\u003C/span>\n        ];\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announceToUser\u003C/span>(\u003Cspan class=\"hljs-string\">'Available voice commands: '\u003C/span> + commands.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">'. '\u003C/span>));\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleGoToColumnCommand\u003C/span>(\u003Cspan class=\"hljs-params\">command\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> match = command.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/go to column (\\d+)/\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (match) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> columnNumber = \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(match[\u003Cspan class=\"hljs-number\">1\u003C/span>]) - \u003Cspan class=\"hljs-number\">1\u003C/span>;\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">moveToColumn\u003C/span>(columnNumber);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announceToUser\u003C/span>(\u003Cspan class=\"hljs-string\">'Please specify column number, for example: "go to column 3"'\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleGoToRowCommand\u003C/span>(\u003Cspan class=\"hljs-params\">command\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> match = command.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/go to row (\\d+)/\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (match) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> rowNumber = \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(match[\u003Cspan class=\"hljs-number\">1\u003C/span>]) - \u003Cspan class=\"hljs-number\">1\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetRow = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>)[rowNumber];\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> firstCell = targetRow?.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'th, td'\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (firstCell) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">focusCell\u003C/span>(firstCell);\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announceToUser\u003C/span>(\u003Cspan class=\"hljs-string\">`Moved to row \u003Cspan class=\"hljs-subst\">${rowNumber + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span>`\u003C/span>);\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announceToUser\u003C/span>(\u003Cspan class=\"hljs-string\">`Row \u003Cspan class=\"hljs-subst\">${rowNumber + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span> not found`\u003C/span>);\n            }\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announceToUser\u003C/span>(\u003Cspan class=\"hljs-string\">'Please specify row number, for example: "go to row 2"'\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">announceToUser\u003C/span>(\u003Cspan class=\"hljs-params\">message\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Announcing:'\u003C/span>, message);\n        \n        \u003Cspan class=\"hljs-comment\">// Use speech synthesis if available\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-string\">'speechSynthesis'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> utterance = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">SpeechSynthesisUtterance\u003C/span>(message);\n            utterance.\u003Cspan class=\"hljs-property\">rate\u003C/span> = \u003Cspan class=\"hljs-number\">1.2\u003C/span>;\n            utterance.\u003Cspan class=\"hljs-property\">pitch\u003C/span> = \u003Cspan class=\"hljs-number\">1\u003C/span>;\n            utterance.\u003Cspan class=\"hljs-property\">volume\u003C/span> = \u003Cspan class=\"hljs-number\">1\u003C/span>;\n            speechSynthesis.\u003Cspan class=\"hljs-title function_\">speak\u003C/span>(utterance);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Also update live region for screen readers\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> liveRegion = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">liveRegion\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (liveRegion) {\n            liveRegion.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = message;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addVoiceControlIndicator\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> indicator = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        indicator.\u003Cspan class=\"hljs-property\">id\u003C/span> = \u003Cspan class=\"hljs-string\">'voice-control-indicator'\u003C/span>;\n        indicator.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'voice-control-active'\u003C/span>;\n        indicator.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">'🎤 Voice Control Active'\u003C/span>;\n        indicator.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-live'\u003C/span>, \u003Cspan class=\"hljs-string\">'polite'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(indicator);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">removeVoiceControlIndicator\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> indicator = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'voice-control-indicator'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (indicator) {\n            indicator.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupEyeTrackingEmulation\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Placeholder for eye tracking integration\u003C/span>\n        \u003Cspan class=\"hljs-comment\">// Would integrate with eye tracking APIs when available\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">eyeTrackingEnabled\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupSwitchAccess\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Switch access support for single-button navigation\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> switchMode = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'keydown'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">event\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (event.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'F10'\u003C/span>) { \u003Cspan class=\"hljs-comment\">// Toggle switch mode\u003C/span>\n                switchMode = !switchMode;\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announceToUser\u003C/span>(switchMode ? \u003Cspan class=\"hljs-string\">'Switch access mode enabled'\u003C/span> : \u003Cspan class=\"hljs-string\">'Switch access mode disabled'\u003C/span>);\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (switchMode && event.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">' '\u003C/span>) {\n                event.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">moveCell\u003C/span>(\u003Cspan class=\"hljs-string\">'right'\u003C/span>); \u003Cspan class=\"hljs-comment\">// Space advances to next cell\u003C/span>\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupHeadPointerSupport\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Support for head pointer devices\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'mouseover'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">event\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (event.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">tagName\u003C/span>.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>() === \u003Cspan class=\"hljs-string\">'td'\u003C/span> || event.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">tagName\u003C/span>.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>() === \u003Cspan class=\"hljs-string\">'th'\u003C/span>) {\n                \u003Cspan class=\"hljs-comment\">// Provide visual feedback for head pointer users\u003C/span>\n                event.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'hover-focus'\u003C/span>);\n                \n                \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                    event.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'hover-focus'\u003C/span>);\n                }, \u003Cspan class=\"hljs-number\">2000\u003C/span>);\n            }\n        });\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Auto-initialize voice control for tables\u003C/span>\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> tables = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'table.voice-control-enabled'\u003C/span>);\n    \n    tables.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">table\u003C/span> =>\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> voiceControl = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">VoiceControlTableSupport\u003C/span>(table);\n        \n        \u003Cspan class=\"hljs-comment\">// Add voice control toggle button\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> toggleButton = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'button'\u003C/span>);\n        toggleButton.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'Toggle Voice Control'\u003C/span>;\n        toggleButton.\u003Cspan class=\"hljs-property\">onclick\u003C/span> = \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (voiceControl.\u003Cspan class=\"hljs-property\">isListening\u003C/span>) {\n                voiceControl.\u003Cspan class=\"hljs-title function_\">stopVoiceControl\u003C/span>();\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                voiceControl.\u003Cspan class=\"hljs-title function_\">startVoiceControl\u003C/span>();\n            }\n        };\n        \n        table.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(toggleButton, table);\n    });\n});\n\n\u003Cspan class=\"hljs-variable language_\">module\u003C/span>.\u003Cspan class=\"hljs-property\">exports\u003C/span> = \u003Cspan class=\"hljs-title class_\">VoiceControlTableSupport\u003C/span>;\n\u003C/code>\u003C/pre>\u003Ch2 id=\"troubleshooting-common-accessibility-issues\">Troubleshooting Common Accessibility Issues\u003C/h2>\n\u003Ch3 id=\"screen-reader-detection-and-optimization\">Screen Reader Detection and Optimization\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Screen readers not properly announcing table structure or cell relationships\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\">## Screen Reader Issues and Fixes\u003C/span>\n\n\u003Cspan class=\"hljs-section\">### Issue 1: Missing Table Context\u003C/span>\nScreen readers announce cells without proper context\n\n\u003Cspan class=\"hljs-strong\">**Fix: Add comprehensive ARIA labels**\u003C/span>\n\u003Cspan class=\"hljs-code\">```html\n<table role="table" aria-label="Sales data by region and quarter">\n  <caption>2025 Sales Performance by Region</caption>\n  <!-- table content -->\n</table>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"issue-2-navigation-confusion\">Issue 2: Navigation Confusion\u003C/h3>\n\u003Cp>Users can't understand table structure while navigating\u003C/p>\n\u003Cp>\u003Cstrong>Fix: Provide clear summary and navigation instructions\u003C/strong>\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"table-summary"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"table-summary"\u003C/span>>\u003C/span>\n  This table shows sales data with 4 regions as rows and 4 quarters as columns. \n  Use arrow keys to navigate between cells. Each cell shows revenue in thousands of dollars.\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"table-summary"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-comment\"><!-- table content -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"issue-3-empty-cells-causing-confusion\">Issue 3: Empty Cells Causing Confusion\u003C/h3>\n\u003Cp>Screen readers skip empty cells or announce them unclearly\u003C/p>\n\u003Cp>\u003Cstrong>Fix: Provide appropriate labels for empty cells\u003C/strong>\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"No data available"\u003C/span>>\u003C/span>—\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sr-only"\u003C/span>>\u003C/span>Empty cell\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Cpre>\u003Ccode>\n### Keyboard Navigation Problems\n\n**Problem**: Users cannot effectively navigate tables using only keyboard\n\n**Solutions**:\n\n```javascript\n// Common keyboard navigation fixes\nfunction fixTableKeyboardIssues(table) {\n    // Issue: Table not keyboard accessible\n    if (!table.getAttribute('tabindex')) {\n        table.setAttribute('tabindex', '0');\n        table.setAttribute('aria-label', 'Data table, use arrow keys to navigate');\n    }\n    \n    // Issue: Cells not focusable\n    const cells = table.querySelectorAll('td, th');\n    cells.forEach((cell, index) => {\n        if (!cell.getAttribute('tabindex')) {\n            cell.setAttribute('tabindex', index === 0 ? '0' : '-1');\n        }\n    });\n    \n    // Issue: No navigation instructions\n    if (!table.previousElementSibling?.classList.contains('table-instructions')) {\n        const instructions = document.createElement('div');\n        instructions.className = 'table-instructions sr-only';\n        instructions.textContent = 'Use arrow keys to navigate table cells. Press Tab to exit table.';\n        table.parentNode.insertBefore(instructions, table);\n    }\n    \n    // Issue: Focus not visible\n    const style = document.createElement('style');\n    style.textContent = `\n        ${table.id ? '#' + table.id : '.accessible-table'} th:focus,\n        ${table.id ? '#' + table.id : '.accessible-table'} td:focus {\n            outline: 3px solid #005fcc;\n            outline-offset: -1px;\n            background-color: #e6f3ff;\n        }\n    `;\n    document.head.appendChild(style);\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"mobile-accessibility-challenges\">Mobile Accessibility Challenges\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Tables not accessible on touch devices\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Mobile accessibility improvements */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-comment\">/* Ensure touch targets are large enough */\u003C/span>\n    \u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">min-height\u003C/span>: \u003Cspan class=\"hljs-number\">44px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">/* Provide alternative table view for complex tables */\u003C/span>\n    \u003Cspan class=\"hljs-selector-class\">.mobile-table-alternative\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.mobile-table-alternative\u003C/span> \u003Cspan class=\"hljs-selector-class\">.table-row\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#ddd\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.mobile-table-alternative\u003C/span> \u003Cspan class=\"hljs-selector-class\">.table-cell\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n        \u003Cspan class=\"hljs-attribute\">justify-content\u003C/span>: space-between;\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#eee\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.mobile-table-alternative\u003C/span> \u003Cspan class=\"hljs-selector-class\">.table-cell\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:last-child\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: none;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.mobile-table-alternative\u003C/span> \u003Cspan class=\"hljs-selector-class\">.cell-label\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;\n        \u003Cspan class=\"hljs-attribute\">margin-right\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Advanced Markdown table accessibility and screen reader optimization represent a comprehensive approach to inclusive content creation that ensures tables serve users with diverse accessibility needs while maintaining the simplicity and effectiveness that makes Markdown such a powerful documentation format. By implementing proper semantic structure, ARIA enhancements, and assistive technology support, content creators can build table experiences that meet the highest accessibility standards while providing exceptional usability for all users.\u003C/p>\n\u003Cp>The key to successful table accessibility lies in understanding that accessibility improvements benefit everyone, not just users with disabilities. Clear structure, descriptive labels, and intuitive navigation patterns create better experiences for all users while ensuring compliance with legal requirements and accessibility standards.\u003C/p>\n\u003Cp>Remember to test your accessible tables with actual assistive technologies, implement comprehensive keyboard navigation patterns, and continuously monitor accessibility compliance as content evolves. With proper attention to accessibility principles and implementation of the techniques covered in this guide, your Markdown tables can achieve universal design that serves users across all interaction modes and assistive technology configurations, creating truly inclusive documentation and web content experiences.\u003C/p>\n",[15,19,22,25,28,31,34,37],{"id":16,"text":17,"level":18},"why-prioritize-markdown-table-accessibility","Why Prioritize Markdown Table Accessibility?",2,{"id":20,"text":21,"level":18},"foundation-accessibility-principles","Foundation Accessibility Principles",{"id":23,"text":24,"level":18},"screen-reader-optimization-patterns","Screen Reader Optimization Patterns",{"id":26,"text":27,"level":18},"wcag-compliance-and-testing","WCAG Compliance and Testing",{"id":29,"text":30,"level":18},"integration-with-content-management-systems","Integration with Content Management Systems",{"id":32,"text":33,"level":18},"advanced-accessibility-implementation","Advanced Accessibility Implementation",{"id":35,"text":36,"level":18},"troubleshooting-common-accessibility-issues","Troubleshooting Common Accessibility Issues",{"id":38,"text":39,"level":18},"conclusion","Conclusion",[],[42,50,58],{"slug":43,"title":44,"description":45,"excerpt":46,"date":47,"category":9,"author":10,"keywords":48,"readingMinutes":49},"markdown-accessibility-screen-readers-complete-guide","Markdown Accessibility and Screen Reader Support: Complete Guide for Inclusive Documentation and Content Creation","Master Markdown accessibility techniques for screen readers, assistive technologies, and inclusive content design. Learn semantic markup, alternative text strategies, and accessibility validation for comprehensive documentation accessibility.","Advanced Markdown accessibility and screen reader support techniques enable inclusive documentation that serves users with diverse abilities and assistive technology requirements. By implementing…","2025-11-22","markdown accessibility, screen reader markdown, accessible documentation, markdown ARIA, inclusive content markdown, markdown alt text, accessibility testing markdown, WCAG markdown compliance",28,{"slug":51,"title":52,"description":53,"excerpt":54,"date":55,"category":9,"author":10,"keywords":56,"readingMinutes":57},"markdown-accessibility-screen-reader-support-complete-guide","Markdown Accessibility and Screen Reader Support: Complete Guide for Inclusive Documentation","Master Markdown accessibility techniques for screen readers, keyboard navigation, and inclusive documentation. Learn WCAG compliance, semantic HTML generation, and accessible formatting for all users.","Advanced Markdown accessibility and screen reader support techniques enable inclusive documentation that serves all users regardless of their abilities or assistive technologies. By implementing…","2025-11-23","markdown accessibility, screen reader markdown, accessible documentation, markdown WCAG, inclusive markdown, markdown semantic html, accessibility best practices, markdown for disabled users",13,{"slug":59,"title":60,"description":61,"excerpt":62,"date":63,"category":9,"author":10,"keywords":64,"readingMinutes":65},"markdown-accessibility-complete-guide","Markdown Accessibility and WCAG Compliance: Complete Guide for Inclusive Documentation and Content Creation","Master accessibility in Markdown documentation with comprehensive WCAG compliance techniques, semantic markup strategies, and assistive technology support. Learn to create inclusive content that works for all users.","Advanced Markdown accessibility and WCAG compliance enable the creation of inclusive documentation that serves users with diverse abilities and assistive technology requirements. By implementing…","2025-12-19","markdown accessibility, WCAG compliance markdown, accessible documentation, inclusive content markdown, assistive technology markdown, screen reader markdown, semantic markup markdown, accessibility testing markdown",32,1792184945002]