[{"data":1,"prerenderedAt":90},["Reactive",2],{"blog-post-markdown-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":64,"related":65},"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","Tutorial","Matthew Rathbone","markdown accessibility, screen reader markdown, accessible documentation, markdown ARIA, inclusive content markdown, markdown alt text, accessibility testing markdown, WCAG markdown compliance",28,"\u003Cp>Advanced Markdown accessibility and screen reader support techniques enable inclusive documentation that serves users with diverse abilities and assistive technology requirements. By implementing semantic markup strategies, comprehensive alternative text systems, and accessibility validation workflows, content creators can build documentation ecosystems that provide equitable access to information while maintaining the simplicity and maintainability that makes Markdown effective for technical writing and content management.\u003C/p>\n\u003Ch2 id=\"why-master-markdown-accessibility\">Why Master Markdown Accessibility?\u003C/h2>\n\u003Cp>Professional accessibility implementation provides essential benefits for inclusive content creation:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Universal Access\u003C/strong>: Ensure content is usable by people with visual, auditory, motor, and cognitive disabilities\u003C/li>\n\u003Cli>\u003Cstrong>Legal Compliance\u003C/strong>: Meet WCAG 2.1 guidelines and accessibility legislation requirements like ADA and Section 508\u003C/li>\n\u003Cli>\u003Cstrong>Enhanced SEO\u003C/strong>: Improve search engine optimization through semantic markup and structured content\u003C/li>\n\u003Cli>\u003Cstrong>Better User Experience\u003C/strong>: Create cleaner, more navigable content that benefits all users\u003C/li>\n\u003Cli>\u003Cstrong>Future-Proof Design\u003C/strong>: Build sustainable content that works across assistive technologies and devices\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"foundation-accessibility-principles\">Foundation Accessibility Principles\u003C/h2>\n\u003Ch3 id=\"semantic-markup-and-screen-reader-navigation\">Semantic Markup and Screen Reader Navigation\u003C/h3>\n\u003Cp>Understanding how screen readers interpret Markdown structure for optimal navigation:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Foundation Accessibility in Markdown\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Proper Heading Hierarchy\u003C/span>\n\nScreen readers use headings as navigation landmarks. Always use logical progression:\n\n\u003Cspan class=\"hljs-code\">```markdown\n# Main Document Title (H1)\n## Primary Section (H2)\n### Subsection (H3)\n#### Detail Section (H4)\n\n<!-- Avoid skipping levels -->\n# Title (H1)\n### Subsection (H3) <!-- Bad: skips H2 -->\n\n# Title (H1)\n## Section (H2)\n### Detail (H3) <!-- Good: logical progression -->\n```\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"descriptive-link-text\">Descriptive Link Text\u003C/h2>\n\u003Cp>Links should be meaningful when read out of context:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\"><!-- Poor: Generic link text -->\nClick [\u003Cspan class=\"hljs-string\">here\u003C/span>](\u003Cspan class=\"hljs-link\">https://example.com\u003C/span>) for more information.\n[\u003Cspan class=\"hljs-string\">Read more\u003C/span>](\u003Cspan class=\"hljs-link\">https://blog.example.com/post-1\u003C/span>) about this topic.\n\n<!-- Good: Descriptive link text -->\n[\u003Cspan class=\"hljs-string\">Download the accessibility testing guide\u003C/span>](\u003Cspan class=\"hljs-link\">https://example.com/a11y-guide.pdf\u003C/span>)\n[\u003Cspan class=\"hljs-string\">Learn about WCAG 2.1 compliance requirements\u003C/span>](\u003Cspan class=\"hljs-link\">https://blog.example.com/wcag-compliance\u003C/span>)\n\n<!-- Excellent: Context and action clear -->\n[\u003Cspan class=\"hljs-string\">Contact support via email\u003C/span>](\u003Cspan class=\"hljs-link\">mailto:support@example.com\u003C/span>) for technical assistance.\n[\u003Cspan class=\"hljs-string\">Schedule a free accessibility audit\u003C/span>](\u003Cspan class=\"hljs-link\">https://example.com/schedule\u003C/span>) (opens in new window).\n\u003C/code>\u003C/pre>\u003Ch2 id=\"alternative-text-for-images\">Alternative Text for Images\u003C/h2>\n\u003Cp>Comprehensive alt text strategies for different image types:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\"><!-- Informative images -->\n![\u003Cspan class=\"hljs-string\">Bar chart showing 65% increase in mobile traffic from 2020 to 2024\u003C/span>](\u003Cspan class=\"hljs-link\">charts/mobile-traffic-growth.png\u003C/span>)\n\n<!-- Functional images (buttons, icons) -->\n![\u003Cspan class=\"hljs-string\">Search\u003C/span>](\u003Cspan class=\"hljs-link\">icons/search.svg\u003C/span>)\n![\u003Cspan class=\"hljs-string\">Close dialog\u003C/span>](\u003Cspan class=\"hljs-link\">icons/close.svg\u003C/span>)\n\n<!-- Decorative images (use empty alt text) -->\n![](\u003Cspan class=\"hljs-link\">decorative/border.png\u003C/span>)\n\n<!-- Complex images with long descriptions -->\n![\u003Cspan class=\"hljs-string\">Complex data visualization showing quarterly sales trends\u003C/span>](\u003Cspan class=\"hljs-link\">data/quarterly-sales.png\u003C/span>)\n\n\u003Cspan class=\"hljs-emphasis\">*Long description*\u003C/span>: This chart displays quarterly sales data for four product categories over three years. Technology products show consistent growth from $2M Q1 2022 to $4.2M Q4 2024. Services revenue remained stable around $1.5M per quarter. Hardware sales peaked at $3.1M in Q3 2023 before declining to $2.8M in Q4 2024. Software subscriptions grew steadily from $800K to $1.9M over the period.\n\u003C/code>\u003C/pre>\u003Ch2 id=\"list-structure-for-screen-readers\">List Structure for Screen Readers\u003C/h2>\n\u003Cp>Properly structured lists improve navigation and comprehension:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\">## Task Completion Checklist\u003C/span>\n\nUse unordered lists for non-sequential items:\n\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] Review content for heading structure\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] Add alternative text to all images  \n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] Test with screen reader software\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] Validate HTML output for accessibility\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] Check color contrast ratios\n\n\u003Cspan class=\"hljs-section\">## Implementation Steps  \u003C/span>\n\nUse ordered lists for sequential processes:\n\n\u003Cspan class=\"hljs-bullet\">1.\u003C/span> Install accessibility testing tools\n\u003Cspan class=\"hljs-bullet\">2.\u003C/span> Configure screen reader software\n\u003Cspan class=\"hljs-bullet\">3.\u003C/span> Navigate content using only keyboard\n\u003Cspan class=\"hljs-bullet\">4.\u003C/span> Document accessibility issues found\n\u003Cspan class=\"hljs-bullet\">5.\u003C/span> Implement fixes and retest\n\u003Cspan class=\"hljs-bullet\">6.\u003C/span> Generate accessibility compliance report\n\n\u003Cspan class=\"hljs-section\">## Navigation Menu Structure\u003C/span>\n\nOrganize navigation hierarchically:\n\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-strong\">**Getting Started**\u003C/span>\n\u003Cspan class=\"hljs-bullet\">  -\u003C/span> [\u003Cspan class=\"hljs-string\">Installation Guide\u003C/span>](\u003Cspan class=\"hljs-link\">installation.md\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">  -\u003C/span> [\u003Cspan class=\"hljs-string\">Quick Start Tutorial\u003C/span>](\u003Cspan class=\"hljs-link\">quick-start.md\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">  -\u003C/span> [\u003Cspan class=\"hljs-string\">Basic Configuration\u003C/span>](\u003Cspan class=\"hljs-link\">configuration.md\u003C/span>)\n\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-strong\">**Advanced Features**\u003C/span>  \n\u003Cspan class=\"hljs-bullet\">  -\u003C/span> [\u003Cspan class=\"hljs-string\">Accessibility Testing\u003C/span>](\u003Cspan class=\"hljs-link\">accessibility-testing.md\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">  -\u003C/span> [\u003Cspan class=\"hljs-string\">Screen Reader Integration\u003C/span>](\u003Cspan class=\"hljs-link\">screen-reader-setup.md\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">  -\u003C/span> [\u003Cspan class=\"hljs-string\">ARIA Implementation\u003C/span>](\u003Cspan class=\"hljs-link\">aria-patterns.md\u003C/span>)\n\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-strong\">**Resources**\u003C/span>\n\u003Cspan class=\"hljs-bullet\">  -\u003C/span> [\u003Cspan class=\"hljs-string\">WCAG 2.1 Guidelines\u003C/span>](\u003Cspan class=\"hljs-link\">wcag-guidelines.md\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">  -\u003C/span> [\u003Cspan class=\"hljs-string\">Testing Tools\u003C/span>](\u003Cspan class=\"hljs-link\">testing-tools.md\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">  -\u003C/span> [\u003Cspan class=\"hljs-string\">Community Support\u003C/span>](\u003Cspan class=\"hljs-link\">support.md\u003C/span>)\n\u003C/code>\u003C/pre>\u003Ch3 id=\"screen-reader-testing-and-validation-system\">Screen Reader Testing and Validation System\u003C/h3>\n\u003Cp>Comprehensive testing framework for accessibility validation:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// accessibility-validator.js - Comprehensive accessibility testing system\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> puppeteer = \u003Cspan class=\"hljs-built_in\">require\u003C/span>(\u003Cspan class=\"hljs-string\">'puppeteer'\u003C/span>);\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> axeCore = \u003Cspan class=\"hljs-built_in\">require\u003C/span>(\u003Cspan class=\"hljs-string\">'@axe-core/puppeteer'\u003C/span>);\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> fs = \u003Cspan class=\"hljs-built_in\">require\u003C/span>(\u003Cspan class=\"hljs-string\">'fs'\u003C/span>).\u003Cspan class=\"hljs-property\">promises\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> path = \u003Cspan class=\"hljs-built_in\">require\u003C/span>(\u003Cspan class=\"hljs-string\">'path'\u003C/span>);\n\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownAccessibilityValidator\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\">outputDirectory\u003C/span>: options.\u003Cspan class=\"hljs-property\">outputDirectory\u003C/span> || \u003Cspan class=\"hljs-string\">'./accessibility-reports'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">wcagLevel\u003C/span>: options.\u003Cspan class=\"hljs-property\">wcagLevel\u003C/span> || \u003Cspan class=\"hljs-string\">'AA'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">includeTags\u003C/span>: options.\u003Cspan class=\"hljs-property\">includeTags\u003C/span> || [\u003Cspan class=\"hljs-string\">'wcag2a'\u003C/span>, \u003Cspan class=\"hljs-string\">'wcag2aa'\u003C/span>, \u003Cspan class=\"hljs-string\">'section508'\u003C/span>],\n            \u003Cspan class=\"hljs-attr\">excludeTags\u003C/span>: options.\u003Cspan class=\"hljs-property\">excludeTags\u003C/span> || [],\n            \u003Cspan class=\"hljs-attr\">viewports\u003C/span>: options.\u003Cspan class=\"hljs-property\">viewports\u003C/span> || [\n                { \u003Cspan class=\"hljs-attr\">width\u003C/span>: \u003Cspan class=\"hljs-number\">1920\u003C/span>, \u003Cspan class=\"hljs-attr\">height\u003C/span>: \u003Cspan class=\"hljs-number\">1080\u003C/span>, \u003Cspan class=\"hljs-attr\">name\u003C/span>: \u003Cspan class=\"hljs-string\">'desktop'\u003C/span> },\n                { \u003Cspan class=\"hljs-attr\">width\u003C/span>: \u003Cspan class=\"hljs-number\">768\u003C/span>, \u003Cspan class=\"hljs-attr\">height\u003C/span>: \u003Cspan class=\"hljs-number\">1024\u003C/span>, \u003Cspan class=\"hljs-attr\">name\u003C/span>: \u003Cspan class=\"hljs-string\">'tablet'\u003C/span> },\n                { \u003Cspan class=\"hljs-attr\">width\u003C/span>: \u003Cspan class=\"hljs-number\">375\u003C/span>, \u003Cspan class=\"hljs-attr\">height\u003C/span>: \u003Cspan class=\"hljs-number\">667\u003C/span>, \u003Cspan class=\"hljs-attr\">name\u003C/span>: \u003Cspan class=\"hljs-string\">'mobile'\u003C/span> }\n            ],\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">browser\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">testResults\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">initialize\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Initializing accessibility validator...'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">browser\u003C/span> = \u003Cspan class=\"hljs-keyword\">await\u003C/span> puppeteer.\u003Cspan class=\"hljs-title function_\">launch\u003C/span>({\n            \u003Cspan class=\"hljs-attr\">headless\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">args\u003C/span>: [\n                \u003Cspan class=\"hljs-string\">'--no-sandbox'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'--disable-setuid-sandbox'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'--disable-dev-shm-usage'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'--disable-web-security'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'--allow-running-insecure-content'\u003C/span>\n            ]\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Ensure output directory exists\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> fs.\u003Cspan class=\"hljs-title function_\">mkdir\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">outputDirectory\u003C/span>, { \u003Cspan class=\"hljs-attr\">recursive\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> });\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">validateMarkdownFiles\u003C/span>(\u003Cspan class=\"hljs-params\">markdownFiles\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">browser\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">initialize\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`Validating \u003Cspan class=\"hljs-subst\">${markdownFiles.length}\u003C/span> markdown files...`\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> validationResults = {\n            \u003Cspan class=\"hljs-attr\">summary\u003C/span>: {\n                \u003Cspan class=\"hljs-attr\">totalFiles\u003C/span>: markdownFiles.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">passedFiles\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">failedFiles\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">totalViolations\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">criticalViolations\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">moderateViolations\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">minorViolations\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>\n            },\n            \u003Cspan class=\"hljs-attr\">fileResults\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">aggregatedViolations\u003C/span>: \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">recommendations\u003C/span>: []\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> filePath \u003Cspan class=\"hljs-keyword\">of\u003C/span> markdownFiles) {\n            \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> fileResult = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateFile\u003C/span>(filePath);\n                validationResults.\u003Cspan class=\"hljs-property\">fileResults\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(fileResult);\n                \n                \u003Cspan class=\"hljs-comment\">// Update summary statistics\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (fileResult.\u003Cspan class=\"hljs-property\">violations\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n                    validationResults.\u003Cspan class=\"hljs-property\">summary\u003C/span>.\u003Cspan class=\"hljs-property\">passedFiles\u003C/span>++;\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                    validationResults.\u003Cspan class=\"hljs-property\">summary\u003C/span>.\u003Cspan class=\"hljs-property\">failedFiles\u003C/span>++;\n                }\n                \n                validationResults.\u003Cspan class=\"hljs-property\">summary\u003C/span>.\u003Cspan class=\"hljs-property\">totalViolations\u003C/span> += fileResult.\u003Cspan class=\"hljs-property\">violations\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n                \n                \u003Cspan class=\"hljs-comment\">// Categorize violations by impact\u003C/span>\n                fileResult.\u003Cspan class=\"hljs-property\">violations\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">violation\u003C/span> =>\u003C/span> {\n                    \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (violation.\u003Cspan class=\"hljs-property\">impact\u003C/span>) {\n                        \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'critical'\u003C/span>:\n                            validationResults.\u003Cspan class=\"hljs-property\">summary\u003C/span>.\u003Cspan class=\"hljs-property\">criticalViolations\u003C/span>++;\n                            \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                        \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'serious'\u003C/span>:\n                            validationResults.\u003Cspan class=\"hljs-property\">summary\u003C/span>.\u003Cspan class=\"hljs-property\">moderateViolations\u003C/span>++;\n                            \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                        \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'moderate'\u003C/span>:\n                        \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'minor'\u003C/span>:\n                            validationResults.\u003Cspan class=\"hljs-property\">summary\u003C/span>.\u003Cspan class=\"hljs-property\">minorViolations\u003C/span>++;\n                            \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    }\n                    \n                    \u003Cspan class=\"hljs-comment\">// Aggregate violation types\u003C/span>\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> violationType = violation.\u003Cspan class=\"hljs-property\">id\u003C/span>;\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!validationResults.\u003Cspan class=\"hljs-property\">aggregatedViolations\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(violationType)) {\n                        validationResults.\u003Cspan class=\"hljs-property\">aggregatedViolations\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(violationType, {\n                            \u003Cspan class=\"hljs-attr\">id\u003C/span>: violationType,\n                            \u003Cspan class=\"hljs-attr\">description\u003C/span>: violation.\u003Cspan class=\"hljs-property\">description\u003C/span>,\n                            \u003Cspan class=\"hljs-attr\">impact\u003C/span>: violation.\u003Cspan class=\"hljs-property\">impact\u003C/span>,\n                            \u003Cspan class=\"hljs-attr\">help\u003C/span>: violation.\u003Cspan class=\"hljs-property\">help\u003C/span>,\n                            \u003Cspan class=\"hljs-attr\">helpUrl\u003C/span>: violation.\u003Cspan class=\"hljs-property\">helpUrl\u003C/span>,\n                            \u003Cspan class=\"hljs-attr\">occurrences\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>,\n                            \u003Cspan class=\"hljs-attr\">affectedFiles\u003C/span>: []\n                        });\n                    }\n                    \n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> aggregated = validationResults.\u003Cspan class=\"hljs-property\">aggregatedViolations\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(violationType);\n                    aggregated.\u003Cspan class=\"hljs-property\">occurrences\u003C/span> += violation.\u003Cspan class=\"hljs-property\">nodes\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!aggregated.\u003Cspan class=\"hljs-property\">affectedFiles\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(filePath)) {\n                        aggregated.\u003Cspan class=\"hljs-property\">affectedFiles\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(filePath);\n                    }\n                });\n                \n            } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n                \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">error\u003C/span>(\u003Cspan class=\"hljs-string\">`Error validating \u003Cspan class=\"hljs-subst\">${filePath}\u003C/span>: \u003Cspan class=\"hljs-subst\">${error.message}\u003C/span>`\u003C/span>);\n                validationResults.\u003Cspan class=\"hljs-property\">fileResults\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                    \u003Cspan class=\"hljs-attr\">file\u003C/span>: filePath,\n                    \u003Cspan class=\"hljs-attr\">error\u003C/span>: error.\u003Cspan class=\"hljs-property\">message\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">violations\u003C/span>: [],\n                    \u003Cspan class=\"hljs-attr\">passed\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>\n                });\n                validationResults.\u003Cspan class=\"hljs-property\">summary\u003C/span>.\u003Cspan class=\"hljs-property\">failedFiles\u003C/span>++;\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Generate recommendations\u003C/span>\n        validationResults.\u003Cspan class=\"hljs-property\">recommendations\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateAccessibilityRecommendations\u003C/span>(validationResults);\n        \n        \u003Cspan class=\"hljs-comment\">// Convert aggregated violations map to array\u003C/span>\n        validationResults.\u003Cspan class=\"hljs-property\">aggregatedViolations\u003C/span> = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(validationResults.\u003Cspan class=\"hljs-property\">aggregatedViolations\u003C/span>.\u003Cspan class=\"hljs-title function_\">values\u003C/span>())\n            .\u003Cspan class=\"hljs-title function_\">sort\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">a, b\u003C/span>) =>\u003C/span> b.\u003Cspan class=\"hljs-property\">occurrences\u003C/span> - a.\u003Cspan class=\"hljs-property\">occurrences\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Save comprehensive report\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">saveValidationReport\u003C/span>(validationResults);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> validationResults;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">validateFile\u003C/span>(\u003Cspan class=\"hljs-params\">filePath\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`Validating accessibility for: \u003Cspan class=\"hljs-subst\">${filePath}\u003C/span>`\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Convert markdown to HTML for testing\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> htmlContent = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">convertMarkdownToHTML\u003C/span>(filePath);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> fileResults = {\n            \u003Cspan class=\"hljs-attr\">file\u003C/span>: filePath,\n            \u003Cspan class=\"hljs-attr\">violations\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">passed\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">viewportResults\u003C/span>: {},\n            \u003Cspan class=\"hljs-attr\">screenReaderTest\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">keyboardNavigationTest\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Test across different viewports\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> viewport \u003Cspan class=\"hljs-keyword\">of\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">viewports\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> page = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">browser\u003C/span>.\u003Cspan class=\"hljs-title function_\">newPage\u003C/span>();\n            \n            \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">await\u003C/span> page.\u003Cspan class=\"hljs-title function_\">setViewport\u003C/span>({ \n                    \u003Cspan class=\"hljs-attr\">width\u003C/span>: viewport.\u003Cspan class=\"hljs-property\">width\u003C/span>, \n                    \u003Cspan class=\"hljs-attr\">height\u003C/span>: viewport.\u003Cspan class=\"hljs-property\">height\u003C/span> \n                });\n                \n                \u003Cspan class=\"hljs-comment\">// Load content\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">await\u003C/span> page.\u003Cspan class=\"hljs-title function_\">setContent\u003C/span>(htmlContent, { \n                    \u003Cspan class=\"hljs-attr\">waitUntil\u003C/span>: \u003Cspan class=\"hljs-string\">'networkidle0'\u003C/span> \n                });\n                \n                \u003Cspan class=\"hljs-comment\">// Run axe-core accessibility tests\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> results = \u003Cspan class=\"hljs-keyword\">await\u003C/span> axeCore.\u003Cspan class=\"hljs-title function_\">run\u003C/span>(page, {\n                    \u003Cspan class=\"hljs-attr\">tags\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">includeTags\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">exclude\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">excludeTags\u003C/span>\n                });\n                \n                fileResults.\u003Cspan class=\"hljs-property\">viewportResults\u003C/span>[viewport.\u003Cspan class=\"hljs-property\">name\u003C/span>] = {\n                    \u003Cspan class=\"hljs-attr\">violations\u003C/span>: results.\u003Cspan class=\"hljs-property\">violations\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">passes\u003C/span>: results.\u003Cspan class=\"hljs-property\">passes\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">incomplete\u003C/span>: results.\u003Cspan class=\"hljs-property\">incomplete\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>\n                };\n                \n                \u003Cspan class=\"hljs-comment\">// Aggregate violations across viewports\u003C/span>\n                results.\u003Cspan class=\"hljs-property\">violations\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">violation\u003C/span> =>\u003C/span> {\n                    \u003Cspan class=\"hljs-comment\">// Check if this violation type already exists\u003C/span>\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> existingViolation = fileResults.\u003Cspan class=\"hljs-property\">violations\u003C/span>.\u003Cspan class=\"hljs-title function_\">find\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">v\u003C/span> =>\u003C/span> v.\u003Cspan class=\"hljs-property\">id\u003C/span> === violation.\u003Cspan class=\"hljs-property\">id\u003C/span>);\n                    \n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (existingViolation) {\n                        \u003Cspan class=\"hljs-comment\">// Merge nodes from this viewport\u003C/span>\n                        existingViolation.\u003Cspan class=\"hljs-property\">nodes\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(...violation.\u003Cspan class=\"hljs-property\">nodes\u003C/span>);\n                    } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                        \u003Cspan class=\"hljs-comment\">// Add new violation type\u003C/span>\n                        fileResults.\u003Cspan class=\"hljs-property\">violations\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                            ...violation,\n                            \u003Cspan class=\"hljs-attr\">viewport\u003C/span>: viewport.\u003Cspan class=\"hljs-property\">name\u003C/span>\n                        });\n                    }\n                });\n                \n                \u003Cspan class=\"hljs-comment\">// Test keyboard navigation if desktop viewport\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (viewport.\u003Cspan class=\"hljs-property\">name\u003C/span> === \u003Cspan class=\"hljs-string\">'desktop'\u003C/span>) {\n                    fileResults.\u003Cspan class=\"hljs-property\">keyboardNavigationTest\u003C/span> = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">testKeyboardNavigation\u003C/span>(page);\n                }\n                \n            } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n                \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">error\u003C/span>(\u003Cspan class=\"hljs-string\">`Error testing viewport \u003Cspan class=\"hljs-subst\">${viewport.name}\u003C/span>: \u003Cspan class=\"hljs-subst\">${error.message}\u003C/span>`\u003C/span>);\n                fileResults.\u003Cspan class=\"hljs-property\">viewportResults\u003C/span>[viewport.\u003Cspan class=\"hljs-property\">name\u003C/span>] = {\n                    \u003Cspan class=\"hljs-attr\">error\u003C/span>: error.\u003Cspan class=\"hljs-property\">message\u003C/span>\n                };\n            } \u003Cspan class=\"hljs-keyword\">finally\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">await\u003C/span> page.\u003Cspan class=\"hljs-title function_\">close\u003C/span>();\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Run screen reader specific tests\u003C/span>\n        fileResults.\u003Cspan class=\"hljs-property\">screenReaderTest\u003C/span> = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">testScreenReaderCompatibility\u003C/span>(htmlContent);\n        \n        fileResults.\u003Cspan class=\"hljs-property\">passed\u003C/span> = fileResults.\u003Cspan class=\"hljs-property\">violations\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> fileResults;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">convertMarkdownToHTML\u003C/span>(\u003Cspan class=\"hljs-params\">filePath\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// This is a simplified conversion - in production, use your site's actual build process\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> markdownContent = \u003Cspan class=\"hljs-keyword\">await\u003C/span> fs.\u003Cspan class=\"hljs-title function_\">readFile\u003C/span>(filePath, \u003Cspan class=\"hljs-string\">'utf8'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> marked = \u003Cspan class=\"hljs-built_in\">require\u003C/span>(\u003Cspan class=\"hljs-string\">'marked'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Configure marked for accessibility\u003C/span>\n        marked.\u003Cspan class=\"hljs-title function_\">setOptions\u003C/span>({\n            \u003Cspan class=\"hljs-attr\">headerIds\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">headerPrefix\u003C/span>: \u003Cspan class=\"hljs-string\">'heading-'\u003C/span>\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> htmlBody = \u003Cspan class=\"hljs-title function_\">marked\u003C/span>(markdownContent);\n        \n        \u003Cspan class=\"hljs-comment\">// Wrap in full HTML document structure\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>Accessibility Test Document</title>\n    <style>\n        body { \n            font-family: system-ui, -apple-system, sans-serif; \n            line-height: 1.6; \n            max-width: 800px; \n            margin: 0 auto; \n            padding: 20px; \n        }\n        img { max-width: 100%; height: auto; }\n        table { border-collapse: collapse; width: 100%; }\n        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }\n        th { background-color: #f2f2f2; }\n        code { background-color: #f4f4f4; padding: 2px 4px; border-radius: 3px; }\n        pre { background-color: #f4f4f4; padding: 15px; border-radius: 5px; overflow-x: auto; }\n    </style>\n</head>\n<body>\n    <main role="main">\n        \u003Cspan class=\"hljs-subst\">${htmlBody}\u003C/span>\n    </main>\n</body>\n</html>`\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">testKeyboardNavigation\u003C/span>(\u003Cspan class=\"hljs-params\">page\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> navigationTest = {\n            \u003Cspan class=\"hljs-attr\">passed\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">issues\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">tabbableElements\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">focusTraps\u003C/span>: []\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-comment\">// Get all interactive elements\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> interactiveElements = \u003Cspan class=\"hljs-keyword\">await\u003C/span> page.$$eval(\n                \u003Cspan class=\"hljs-string\">'a, button, input, textarea, select, [tabindex]:not([tabindex="-1"])'\u003C/span>,\n                \u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">elements\u003C/span> =>\u003C/span> elements.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">el\u003C/span> =>\u003C/span> ({\n                    \u003Cspan class=\"hljs-attr\">tagName\u003C/span>: el.\u003Cspan class=\"hljs-property\">tagName\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">type\u003C/span>: el.\u003Cspan class=\"hljs-property\">type\u003C/span> || \u003Cspan class=\"hljs-literal\">null\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">hasHref\u003C/span>: el.\u003Cspan class=\"hljs-title function_\">hasAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'href'\u003C/span>),\n                    \u003Cspan class=\"hljs-attr\">tabIndex\u003C/span>: el.\u003Cspan class=\"hljs-property\">tabIndex\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">ariaLabel\u003C/span>: el.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-label'\u003C/span>),\n                    \u003Cspan class=\"hljs-attr\">text\u003C/span>: el.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>().\u003Cspan class=\"hljs-title function_\">substring\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">50\u003C/span>)\n                }))\n            );\n            \n            navigationTest.\u003Cspan class=\"hljs-property\">tabbableElements\u003C/span> = interactiveElements.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n            \n            \u003Cspan class=\"hljs-comment\">// Test tab navigation\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">0\u003C/span>; i < interactiveElements.\u003Cspan class=\"hljs-property\">length\u003C/span> && i < \u003Cspan class=\"hljs-number\">20\u003C/span>; i++) {\n                \u003Cspan class=\"hljs-keyword\">await\u003C/span> page.\u003Cspan class=\"hljs-property\">keyboard\u003C/span>.\u003Cspan class=\"hljs-title function_\">press\u003C/span>(\u003Cspan class=\"hljs-string\">'Tab'\u003C/span>);\n                \n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> focusedElement = \u003Cspan class=\"hljs-keyword\">await\u003C/span> page.evaluate(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> focused = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">activeElement\u003C/span>;\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                        \u003Cspan class=\"hljs-attr\">tagName\u003C/span>: focused.\u003Cspan class=\"hljs-property\">tagName\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">className\u003C/span>: focused.\u003Cspan class=\"hljs-property\">className\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">visible\u003C/span>: focused.\u003Cspan class=\"hljs-property\">offsetParent\u003C/span> !== \u003Cspan class=\"hljs-literal\">null\u003C/span>\n                    };\n                });\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!focusedElement.\u003Cspan class=\"hljs-property\">visible\u003C/span>) {\n                    navigationTest.\u003Cspan class=\"hljs-property\">issues\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`Hidden element received focus: \u003Cspan class=\"hljs-subst\">${focusedElement.tagName}\u003C/span>`\u003C/span>);\n                    navigationTest.\u003Cspan class=\"hljs-property\">passed\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n                }\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Test skip links\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> skipLinks = \u003Cspan class=\"hljs-keyword\">await\u003C/span> page.$$eval(\n                \u003Cspan class=\"hljs-string\">'a[href^="#"], a[href^="#skip"]'\u003C/span>,\n                \u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">links\u003C/span> =>\u003C/span> links.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">link\u003C/span> =>\u003C/span> ({\n                    \u003Cspan class=\"hljs-attr\">href\u003C/span>: link.\u003Cspan class=\"hljs-property\">href\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">text\u003C/span>: link.\u003Cspan class=\"hljs-property\">textContent\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">visible\u003C/span>: link.\u003Cspan class=\"hljs-property\">offsetParent\u003C/span> !== \u003Cspan class=\"hljs-literal\">null\u003C/span>\n                }))\n            );\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (skipLinks.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span> && interactiveElements.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">10\u003C/span>) {\n                navigationTest.\u003Cspan class=\"hljs-property\">issues\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'No skip links found for content with many interactive elements'\u003C/span>);\n                navigationTest.\u003Cspan class=\"hljs-property\">passed\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n            }\n            \n        } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n            navigationTest.\u003Cspan class=\"hljs-property\">passed\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n            navigationTest.\u003Cspan class=\"hljs-property\">issues\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`Keyboard navigation test failed: \u003Cspan class=\"hljs-subst\">${error.message}\u003C/span>`\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> navigationTest;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">testScreenReaderCompatibility\u003C/span>(\u003Cspan class=\"hljs-params\">htmlContent\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> srTest = {\n            \u003Cspan class=\"hljs-attr\">passed\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">issues\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">landmarks\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">headingStructure\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">listStructure\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">imageAnalysis\u003C/span>: []\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-comment\">// Parse HTML for screen reader specific analysis\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cheerio = \u003Cspan class=\"hljs-built_in\">require\u003C/span>(\u003Cspan class=\"hljs-string\">'cheerio'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> $ = cheerio.\u003Cspan class=\"hljs-title function_\">load\u003C/span>(htmlContent);\n            \n            \u003Cspan class=\"hljs-comment\">// Check landmark elements\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> landmarks = $(\u003Cspan class=\"hljs-string\">'main, nav, header, footer, section, article, aside, [role="banner"], [role="navigation"], [role="main"], [role="contentinfo"], [role="complementary"]'\u003C/span>);\n            srTest.\u003Cspan class=\"hljs-property\">landmarks\u003C/span> = landmarks.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (srTest.\u003Cspan class=\"hljs-property\">landmarks\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n                srTest.\u003Cspan class=\"hljs-property\">issues\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'No landmark elements found - screen reader navigation will be difficult'\u003C/span>);\n                srTest.\u003Cspan class=\"hljs-property\">passed\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Analyze heading structure\u003C/span>\n            $(\u003Cspan class=\"hljs-string\">'h1, h2, h3, h4, h5, h6'\u003C/span>).\u003Cspan class=\"hljs-title function_\">each\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">i, el\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> level = \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(el.\u003Cspan class=\"hljs-property\">tagName\u003C/span>.\u003Cspan class=\"hljs-title function_\">substring\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>));\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = $(el).\u003Cspan class=\"hljs-title function_\">text\u003C/span>().\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n                srTest.\u003Cspan class=\"hljs-property\">headingStructure\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({ level, text });\n            });\n            \n            \u003Cspan class=\"hljs-comment\">// Check for proper heading hierarchy\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">1\u003C/span>; i < srTest.\u003Cspan class=\"hljs-property\">headingStructure\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>; i++) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> current = srTest.\u003Cspan class=\"hljs-property\">headingStructure\u003C/span>[i];\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> previous = srTest.\u003Cspan class=\"hljs-property\">headingStructure\u003C/span>[i - \u003Cspan class=\"hljs-number\">1\u003C/span>];\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (current.\u003Cspan class=\"hljs-property\">level\u003C/span> > previous.\u003Cspan class=\"hljs-property\">level\u003C/span> + \u003Cspan class=\"hljs-number\">1\u003C/span>) {\n                    srTest.\u003Cspan class=\"hljs-property\">issues\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`Heading level skip detected: \u003Cspan class=\"hljs-subst\">${previous.level}\u003C/span> to \u003Cspan class=\"hljs-subst\">${current.level}\u003C/span>`\u003C/span>);\n                    srTest.\u003Cspan class=\"hljs-property\">passed\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n                }\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Analyze list structure\u003C/span>\n            $(\u003Cspan class=\"hljs-string\">'ul, ol'\u003C/span>).\u003Cspan class=\"hljs-title function_\">each\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">i, list\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> $list = $(list);\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> items = $list.\u003Cspan class=\"hljs-title function_\">children\u003C/span>(\u003Cspan class=\"hljs-string\">'li'\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> nested = $list.\u003Cspan class=\"hljs-title function_\">find\u003C/span>(\u003Cspan class=\"hljs-string\">'ul, ol'\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>;\n                \n                srTest.\u003Cspan class=\"hljs-property\">listStructure\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                    \u003Cspan class=\"hljs-attr\">type\u003C/span>: list.\u003Cspan class=\"hljs-property\">tagName\u003C/span>,\n                    items,\n                    nested,\n                    \u003Cspan class=\"hljs-attr\">hasProperStructure\u003C/span>: items > \u003Cspan class=\"hljs-number\">0\u003C/span>\n                });\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (items === \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n                    srTest.\u003Cspan class=\"hljs-property\">issues\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`Empty \u003Cspan class=\"hljs-subst\">${list.tagName}\u003C/span> found`\u003C/span>);\n                    srTest.\u003Cspan class=\"hljs-property\">passed\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n                }\n            });\n            \n            \u003Cspan class=\"hljs-comment\">// Analyze images for alt text\u003C/span>\n            $(\u003Cspan class=\"hljs-string\">'img'\u003C/span>).\u003Cspan class=\"hljs-title function_\">each\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">i, img\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> $img = $(img);\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> src = $img.\u003Cspan class=\"hljs-title function_\">attr\u003C/span>(\u003Cspan class=\"hljs-string\">'src'\u003C/span>) || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> alt = $img.\u003Cspan class=\"hljs-title function_\">attr\u003C/span>(\u003Cspan class=\"hljs-string\">'alt'\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> isDecorative = alt === \u003Cspan class=\"hljs-string\">''\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> hasAlt = alt !== \u003Cspan class=\"hljs-literal\">undefined\u003C/span>;\n                \n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> analysis = {\n                    \u003Cspan class=\"hljs-attr\">src\u003C/span>: src.\u003Cspan class=\"hljs-title function_\">substring\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">50\u003C/span>),\n                    hasAlt,\n                    isDecorative,\n                    \u003Cspan class=\"hljs-attr\">altLength\u003C/span>: alt ? alt.\u003Cspan class=\"hljs-property\">length\u003C/span> : \u003Cspan class=\"hljs-number\">0\u003C/span>\n                };\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!hasAlt) {\n                    srTest.\u003Cspan class=\"hljs-property\">issues\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`Image missing alt attribute: \u003Cspan class=\"hljs-subst\">${src}\u003C/span>`\u003C/span>);\n                    srTest.\u003Cspan class=\"hljs-property\">passed\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!isDecorative && alt.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">125\u003C/span>) {\n                    srTest.\u003Cspan class=\"hljs-property\">issues\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`Alt text too long (\u003Cspan class=\"hljs-subst\">${alt.length}\u003C/span> chars): \u003Cspan class=\"hljs-subst\">${src}\u003C/span>`\u003C/span>);\n                    srTest.\u003Cspan class=\"hljs-property\">passed\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!isDecorative && alt.\u003Cspan class=\"hljs-property\">length\u003C/span> < \u003Cspan class=\"hljs-number\">5\u003C/span>) {\n                    srTest.\u003Cspan class=\"hljs-property\">issues\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`Alt text too short: \u003Cspan class=\"hljs-subst\">${src}\u003C/span>`\u003C/span>);\n                    srTest.\u003Cspan class=\"hljs-property\">passed\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n                }\n                \n                srTest.\u003Cspan class=\"hljs-property\">imageAnalysis\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(analysis);\n            });\n            \n            \u003Cspan class=\"hljs-comment\">// Check for table headers\u003C/span>\n            $(\u003Cspan class=\"hljs-string\">'table'\u003C/span>).\u003Cspan class=\"hljs-title function_\">each\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">i, table\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> $table = $(table);\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> hasHeaders = $table.\u003Cspan class=\"hljs-title function_\">find\u003C/span>(\u003Cspan class=\"hljs-string\">'th'\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> hasCaption = $table.\u003Cspan class=\"hljs-title function_\">find\u003C/span>(\u003Cspan class=\"hljs-string\">'caption'\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>;\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!hasHeaders) {\n                    srTest.\u003Cspan class=\"hljs-property\">issues\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'Table found without header cells (th)'\u003C/span>);\n                    srTest.\u003Cspan class=\"hljs-property\">passed\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n                }\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!hasCaption && $table.\u003Cspan class=\"hljs-title function_\">find\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">3\u003C/span>) {\n                    srTest.\u003Cspan class=\"hljs-property\">issues\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'Complex table found without caption'\u003C/span>);\n                    srTest.\u003Cspan class=\"hljs-property\">passed\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n                }\n            });\n            \n        } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n            srTest.\u003Cspan class=\"hljs-property\">passed\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n            srTest.\u003Cspan class=\"hljs-property\">issues\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`Screen reader analysis failed: \u003Cspan class=\"hljs-subst\">${error.message}\u003C/span>`\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> srTest;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateAccessibilityRecommendations\u003C/span>(\u003Cspan class=\"hljs-params\">validationResults\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> recommendations = [];\n        \n        \u003Cspan class=\"hljs-comment\">// Critical violations need immediate attention\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (validationResults.\u003Cspan class=\"hljs-property\">summary\u003C/span>.\u003Cspan class=\"hljs-property\">criticalViolations\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\">'critical'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">title\u003C/span>: \u003Cspan class=\"hljs-string\">'Critical Accessibility Violations Found'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">description\u003C/span>: \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${validationResults.summary.criticalViolations}\u003C/span> critical violations must be addressed immediately for WCAG compliance`\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">action\u003C/span>: \u003Cspan class=\"hljs-string\">'Review critical violations in the detailed report and implement fixes'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">impact\u003C/span>: \u003Cspan class=\"hljs-string\">'Blocks users with disabilities from accessing content'\u003C/span>\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Check for common patterns in aggregated violations\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> topViolations = validationResults.\u003Cspan class=\"hljs-property\">aggregatedViolations\u003C/span>.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">5\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (topViolations.\u003Cspan class=\"hljs-title function_\">some\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">v\u003C/span> =>\u003C/span> v.\u003Cspan class=\"hljs-property\">id\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'alt-text'\u003C/span>) || v.\u003Cspan class=\"hljs-property\">id\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'image'\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\">'Improve Image Accessibility'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">description\u003C/span>: \u003Cspan class=\"hljs-string\">'Multiple images lack proper alternative text'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">action\u003C/span>: \u003Cspan class=\"hljs-string\">'Add descriptive alt attributes to all informative images, use empty alt="" for decorative images'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">impact\u003C/span>: \u003Cspan class=\"hljs-string\">'Screen reader users cannot understand image content'\u003C/span>\n            });\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (topViolations.\u003Cspan class=\"hljs-title function_\">some\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">v\u003C/span> =>\u003C/span> v.\u003Cspan class=\"hljs-property\">id\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'heading'\u003C/span>) || v.\u003Cspan class=\"hljs-property\">id\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'structure'\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\">'Fix Heading Structure'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">description\u003C/span>: \u003Cspan class=\"hljs-string\">'Improper heading hierarchy affects navigation'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">action\u003C/span>: \u003Cspan class=\"hljs-string\">'Use logical heading progression (H1 → H2 → H3) without skipping levels'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">impact\u003C/span>: \u003Cspan class=\"hljs-string\">'Screen reader users cannot navigate content efficiently'\u003C/span>\n            });\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (topViolations.\u003Cspan class=\"hljs-title function_\">some\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">v\u003C/span> =>\u003C/span> v.\u003Cspan class=\"hljs-property\">id\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'link'\u003C/span>) || v.\u003Cspan class=\"hljs-property\">id\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'anchor'\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\">'Improve Link Accessibility'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">description\u003C/span>: \u003Cspan class=\"hljs-string\">'Links need more descriptive text or context'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">action\u003C/span>: \u003Cspan class=\"hljs-string\">'Use descriptive link text that makes sense out of context'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">impact\u003C/span>: \u003Cspan class=\"hljs-string\">'Users cannot understand link destinations or purposes'\u003C/span>\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Check for missing landmarks\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> hasLandmarkIssues = validationResults.\u003Cspan class=\"hljs-property\">fileResults\u003C/span>.\u003Cspan class=\"hljs-title function_\">some\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">result\u003C/span> =>\u003C/span> \n            result.\u003Cspan class=\"hljs-property\">screenReaderTest\u003C/span> && result.\u003Cspan class=\"hljs-property\">screenReaderTest\u003C/span>.\u003Cspan class=\"hljs-property\">landmarks\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>\n        );\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (hasLandmarkIssues) {\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\">'Add Semantic Landmarks'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">description\u003C/span>: \u003Cspan class=\"hljs-string\">'Documents lack proper landmark elements for navigation'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">action\u003C/span>: \u003Cspan class=\"hljs-string\">'Use semantic HTML elements like <main>, <nav>, <header>, <footer>'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">impact\u003C/span>: \u003Cspan class=\"hljs-string\">'Screen reader users cannot navigate page structure efficiently'\u003C/span>\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Performance recommendations\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (validationResults.\u003Cspan class=\"hljs-property\">summary\u003C/span>.\u003Cspan class=\"hljs-property\">totalFiles\u003C/span> > \u003Cspan class=\"hljs-number\">10\u003C/span> && validationResults.\u003Cspan class=\"hljs-property\">summary\u003C/span>.\u003Cspan class=\"hljs-property\">passedFiles\u003C/span> < validationResults.\u003Cspan class=\"hljs-property\">summary\u003C/span>.\u003Cspan class=\"hljs-property\">totalFiles\u003C/span> * \u003Cspan class=\"hljs-number\">0.8\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\">'Implement Accessibility CI/CD'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">description\u003C/span>: \u003Cspan class=\"hljs-string\">'Consider automating accessibility testing in your build process'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">action\u003C/span>: \u003Cspan class=\"hljs-string\">'Integrate accessibility testing into continuous integration pipeline'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">impact\u003C/span>: \u003Cspan class=\"hljs-string\">'Prevent accessibility regressions and catch issues early'\u003C/span>\n            });\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> recommendations.\u003Cspan class=\"hljs-title function_\">sort\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">a, b\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> priorityOrder = { \u003Cspan class=\"hljs-attr\">critical\u003C/span>: \u003Cspan class=\"hljs-number\">3\u003C/span>, \u003Cspan class=\"hljs-attr\">high\u003C/span>: \u003Cspan class=\"hljs-number\">2\u003C/span>, \u003Cspan class=\"hljs-attr\">medium\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>, \u003Cspan class=\"hljs-attr\">low\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> };\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> (priorityOrder[b.\u003Cspan class=\"hljs-property\">priority\u003C/span>] || \u003Cspan class=\"hljs-number\">0\u003C/span>) - (priorityOrder[a.\u003Cspan class=\"hljs-property\">priority\u003C/span>] || \u003Cspan class=\"hljs-number\">0\u003C/span>);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">saveValidationReport\u003C/span>(\u003Cspan class=\"hljs-params\">validationResults\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> timestamp = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Date\u003C/span>().\u003Cspan class=\"hljs-title function_\">toISOString\u003C/span>().\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'T'\u003C/span>)[\u003Cspan class=\"hljs-number\">0\u003C/span>];\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> reportPath = path.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">outputDirectory\u003C/span>, \u003Cspan class=\"hljs-string\">`accessibility-report-\u003Cspan class=\"hljs-subst\">${timestamp}\u003C/span>.json`\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> htmlReportPath = path.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">outputDirectory\u003C/span>, \u003Cspan class=\"hljs-string\">`accessibility-report-\u003Cspan class=\"hljs-subst\">${timestamp}\u003C/span>.html`\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Save JSON report\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> fs.\u003Cspan class=\"hljs-title function_\">writeFile\u003C/span>(reportPath, \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">stringify\u003C/span>(validationResults, \u003Cspan class=\"hljs-literal\">null\u003C/span>, \u003Cspan class=\"hljs-number\">2\u003C/span>));\n        \n        \u003Cspan class=\"hljs-comment\">// Generate and save HTML report\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> htmlReport = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateHTMLReport\u003C/span>(validationResults);\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> fs.\u003Cspan class=\"hljs-title function_\">writeFile\u003C/span>(htmlReportPath, htmlReport);\n        \n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`Accessibility reports saved:`\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`  JSON: \u003Cspan class=\"hljs-subst\">${reportPath}\u003C/span>`\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`  HTML: \u003Cspan class=\"hljs-subst\">${htmlReportPath}\u003C/span>`\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> { \u003Cspan class=\"hljs-attr\">jsonReport\u003C/span>: reportPath, \u003Cspan class=\"hljs-attr\">htmlReport\u003C/span>: htmlReportPath };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateHTMLReport\u003C/span>(\u003Cspan class=\"hljs-params\">validationResults\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { summary, fileResults, aggregatedViolations, recommendations } = validationResults;\n        \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>Accessibility Report</title>\n    <style>\n        body { font-family: system-ui, sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; }\n        .summary { background: #f8f9fa; padding: 20px; border-radius: 8px; margin-bottom: 30px; }\n        .metric { display: inline-block; margin: 10px 20px 10px 0; }\n        .metric-value { font-size: 2em; font-weight: bold; display: block; }\n        .critical { color: #dc3545; }\n        .warning { color: #fd7e14; }\n        .success { color: #28a745; }\n        .violation-card { border: 1px solid #ddd; border-radius: 8px; margin: 15px 0; padding: 15px; }\n        .violation-header { font-weight: bold; margin-bottom: 10px; }\n        .file-result { border-left: 4px solid #ccc; margin: 10px 0; padding: 15px; background: #f8f9fa; }\n        .file-result.passed { border-color: #28a745; }\n        .file-result.failed { border-color: #dc3545; }\n        .recommendation { border-left: 4px solid #007bff; padding: 15px; margin: 10px 0; background: #f8f9fa; }\n        .recommendation.critical { border-color: #dc3545; }\n        .recommendation.high { border-color: #fd7e14; }\n        .recommendation.medium { border-color: #ffc107; }\n        table { width: 100%; border-collapse: collapse; margin: 20px 0; }\n        th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }\n        th { background-color: #f2f2f2; }\n    </style>\n</head>\n<body>\n    <h1>Accessibility Report</h1>\n    \n    <div class="summary">\n        <h2>Summary</h2>\n        <div class="metric">\n            <span class="metric-value">\u003Cspan class=\"hljs-subst\">${summary.totalFiles}\u003C/span></span>\n            Total Files\n        </div>\n        <div class="metric">\n            <span class="metric-value \u003Cspan class=\"hljs-subst\">${summary.passedFiles === summary.totalFiles ? \u003Cspan class=\"hljs-string\">'success'\u003C/span> : \u003Cspan class=\"hljs-string\">'warning'\u003C/span>}\u003C/span>">\u003Cspan class=\"hljs-subst\">${summary.passedFiles}\u003C/span></span>\n            Passed\n        </div>\n        <div class="metric">\n            <span class="metric-value \u003Cspan class=\"hljs-subst\">${summary.failedFiles > \u003Cspan class=\"hljs-number\">0\u003C/span> ? \u003Cspan class=\"hljs-string\">'critical'\u003C/span> : \u003Cspan class=\"hljs-string\">'success'\u003C/span>}\u003C/span>">\u003Cspan class=\"hljs-subst\">${summary.failedFiles}\u003C/span></span>\n            Failed\n        </div>\n        <div class="metric">\n            <span class="metric-value \u003Cspan class=\"hljs-subst\">${summary.criticalViolations > \u003Cspan class=\"hljs-number\">0\u003C/span> ? \u003Cspan class=\"hljs-string\">'critical'\u003C/span> : \u003Cspan class=\"hljs-string\">'success'\u003C/span>}\u003C/span>">\u003Cspan class=\"hljs-subst\">${summary.criticalViolations}\u003C/span></span>\n            Critical Violations\n        </div>\n    </div>\n    \n    \u003Cspan class=\"hljs-subst\">${recommendations.length > \u003Cspan class=\"hljs-number\">0\u003C/span> ? \u003Cspan class=\"hljs-string\">`\n    <section>\n        <h2>Recommendations</h2>\n        \u003Cspan class=\"hljs-subst\">${recommendations.map(rec => \u003Cspan class=\"hljs-string\">`\n        <div class="recommendation \u003Cspan class=\"hljs-subst\">${rec.priority}\u003C/span>">\n            <h3>\u003Cspan class=\"hljs-subst\">${rec.title}\u003C/span></h3>\n            <p><strong>Priority:</strong> \u003Cspan class=\"hljs-subst\">${rec.priority.toUpperCase()}\u003C/span></p>\n            <p><strong>Description:</strong> \u003Cspan class=\"hljs-subst\">${rec.description}\u003C/span></p>\n            <p><strong>Action:</strong> \u003Cspan class=\"hljs-subst\">${rec.action}\u003C/span></p>\n            <p><strong>Impact:</strong> \u003Cspan class=\"hljs-subst\">${rec.impact}\u003C/span></p>\n        </div>\n        `\u003C/span>).join(\u003Cspan class=\"hljs-string\">''\u003C/span>)}\u003C/span>\n    </section>\n    `\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n    \n    <section>\n        <h2>Top Violation Types</h2>\n        <table>\n            <thead>\n                <tr>\n                    <th>Violation Type</th>\n                    <th>Impact</th>\n                    <th>Occurrences</th>\n                    <th>Files Affected</th>\n                    <th>Description</th>\n                </tr>\n            </thead>\n            <tbody>\n                \u003Cspan class=\"hljs-subst\">${aggregatedViolations.slice(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">10\u003C/span>).map(violation => \u003Cspan class=\"hljs-string\">`\n                <tr>\n                    <td><code>\u003Cspan class=\"hljs-subst\">${violation.id}\u003C/span></code></td>\n                    <td><span class="\u003Cspan class=\"hljs-subst\">${violation.impact === \u003Cspan class=\"hljs-string\">'critical'\u003C/span> ? \u003Cspan class=\"hljs-string\">'critical'\u003C/span> : violation.impact === \u003Cspan class=\"hljs-string\">'serious'\u003C/span> ? \u003Cspan class=\"hljs-string\">'warning'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>">\u003Cspan class=\"hljs-subst\">${violation.impact}\u003C/span></span></td>\n                    <td>\u003Cspan class=\"hljs-subst\">${violation.occurrences}\u003C/span></td>\n                    <td>\u003Cspan class=\"hljs-subst\">${violation.affectedFiles.length}\u003C/span></td>\n                    <td>\u003Cspan class=\"hljs-subst\">${violation.description}\u003C/span></td>\n                </tr>\n                `\u003C/span>).join(\u003Cspan class=\"hljs-string\">''\u003C/span>)}\u003C/span>\n            </tbody>\n        </table>\n    </section>\n    \n    <section>\n        <h2>File Results</h2>\n        \u003Cspan class=\"hljs-subst\">${fileResults.map(result => \u003Cspan class=\"hljs-string\">`\n        <div class="file-result \u003Cspan class=\"hljs-subst\">${result.passed ? \u003Cspan class=\"hljs-string\">'passed'\u003C/span> : \u003Cspan class=\"hljs-string\">'failed'\u003C/span>}\u003C/span>">\n            <h3>\u003Cspan class=\"hljs-subst\">${result.file}\u003C/span></h3>\n            <p><strong>Status:</strong> \u003Cspan class=\"hljs-subst\">${result.passed ? \u003Cspan class=\"hljs-string\">'✅ Passed'\u003C/span> : \u003Cspan class=\"hljs-string\">'❌ Failed'\u003C/span>}\u003C/span></p>\n            <p><strong>Violations:</strong> \u003Cspan class=\"hljs-subst\">${result.violations.length}\u003C/span></p>\n            \n            \u003Cspan class=\"hljs-subst\">${result.keyboardNavigationTest ? \u003Cspan class=\"hljs-string\">`\n            <p><strong>Keyboard Navigation:</strong> \u003Cspan class=\"hljs-subst\">${result.keyboardNavigationTest.passed ? \u003Cspan class=\"hljs-string\">'✅ Passed'\u003C/span> : \u003Cspan class=\"hljs-string\">'❌ Failed'\u003C/span>}\u003C/span></p>\n            \u003Cspan class=\"hljs-subst\">${result.keyboardNavigationTest.issues.length > \u003Cspan class=\"hljs-number\">0\u003C/span> ? \u003Cspan class=\"hljs-string\">`\n            <ul>\n                \u003Cspan class=\"hljs-subst\">${result.keyboardNavigationTest.issues.map(issue => \u003Cspan class=\"hljs-string\">`<li>\u003Cspan class=\"hljs-subst\">${issue}\u003C/span></li>`\u003C/span>).join(\u003Cspan class=\"hljs-string\">''\u003C/span>)}\u003C/span>\n            </ul>\n            `\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n            `\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n            \n            \u003Cspan class=\"hljs-subst\">${result.screenReaderTest ? \u003Cspan class=\"hljs-string\">`\n            <p><strong>Screen Reader Compatibility:</strong> \u003Cspan class=\"hljs-subst\">${result.screenReaderTest.passed ? \u003Cspan class=\"hljs-string\">'✅ Passed'\u003C/span> : \u003Cspan class=\"hljs-string\">'❌ Failed'\u003C/span>}\u003C/span></p>\n            <p><strong>Landmarks:</strong> \u003Cspan class=\"hljs-subst\">${result.screenReaderTest.landmarks}\u003C/span></p>\n            <p><strong>Heading Structure:</strong> \u003Cspan class=\"hljs-subst\">${result.screenReaderTest.headingStructure.length}\u003C/span> headings</p>\n            `\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n            \n            \u003Cspan class=\"hljs-subst\">${result.violations.length > \u003Cspan class=\"hljs-number\">0\u003C/span> ? \u003Cspan class=\"hljs-string\">`\n            <details>\n                <summary>Show Violations (\u003Cspan class=\"hljs-subst\">${result.violations.length}\u003C/span>)</summary>\n                \u003Cspan class=\"hljs-subst\">${result.violations.map(violation => \u003Cspan class=\"hljs-string\">`\n                <div class="violation-card">\n                    <div class="violation-header">\u003Cspan class=\"hljs-subst\">${violation.id}\u003C/span> - \u003Cspan class=\"hljs-subst\">${violation.impact}\u003C/span></div>\n                    <p>\u003Cspan class=\"hljs-subst\">${violation.description}\u003C/span></p>\n                    <p><strong>Help:</strong> <a href="\u003Cspan class=\"hljs-subst\">${violation.helpUrl}\u003C/span>" target="_blank">\u003Cspan class=\"hljs-subst\">${violation.help}\u003C/span></a></p>\n                    <p><strong>Affected elements:</strong> \u003Cspan class=\"hljs-subst\">${violation.nodes.length}\u003C/span></p>\n                </div>\n                `\u003C/span>).join(\u003Cspan class=\"hljs-string\">''\u003C/span>)}\u003C/span>\n            </details>\n            `\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n        </div>\n        `\u003C/span>).join(\u003Cspan class=\"hljs-string\">''\u003C/span>)}\u003C/span>\n    </section>\n    \n    <footer style="margin-top: 50px; padding-top: 20px; border-top: 1px solid #ddd; color: #666;">\n        <p>Report generated on \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-built_in\">Date\u003C/span>().toLocaleString()}\u003C/span></p>\n        <p>Generated by Markdown Accessibility Validator</p>\n    </footer>\n</body>\n</html>`\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">cleanup\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\">browser\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">browser\u003C/span>.\u003Cspan class=\"hljs-title function_\">close\u003C/span>();\n        }\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_\">validateDocumentationAccessibility\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> validator = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownAccessibilityValidator\u003C/span>({\n        \u003Cspan class=\"hljs-attr\">outputDirectory\u003C/span>: \u003Cspan class=\"hljs-string\">'./reports/accessibility'\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">wcagLevel\u003C/span>: \u003Cspan class=\"hljs-string\">'AA'\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">includeTags\u003C/span>: [\u003Cspan class=\"hljs-string\">'wcag2a'\u003C/span>, \u003Cspan class=\"hljs-string\">'wcag2aa'\u003C/span>, \u003Cspan class=\"hljs-string\">'section508'\u003C/span>, \u003Cspan class=\"hljs-string\">'best-practice'\u003C/span>]\n    });\n    \n    \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n        \u003Cspan class=\"hljs-comment\">// Find all markdown files\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> glob = \u003Cspan class=\"hljs-built_in\">require\u003C/span>(\u003Cspan class=\"hljs-string\">'glob'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> markdownFiles = glob.\u003Cspan class=\"hljs-title function_\">sync\u003C/span>(\u003Cspan class=\"hljs-string\">'**/*.md'\u003C/span>, {\n            \u003Cspan class=\"hljs-attr\">ignore\u003C/span>: [\u003Cspan class=\"hljs-string\">'node_modules/**'\u003C/span>, \u003Cspan class=\"hljs-string\">'.git/**'\u003C/span>]\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`Found \u003Cspan class=\"hljs-subst\">${markdownFiles.length}\u003C/span> markdown files to validate`\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Run validation\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> results = \u003Cspan class=\"hljs-keyword\">await\u003C/span> validator.\u003Cspan class=\"hljs-title function_\">validateMarkdownFiles\u003C/span>(markdownFiles);\n        \n        \u003Cspan class=\"hljs-comment\">// Log summary\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n=== Accessibility Validation Results ==='\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`Total files: \u003Cspan class=\"hljs-subst\">${results.summary.totalFiles}\u003C/span>`\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`Passed: \u003Cspan class=\"hljs-subst\">${results.summary.passedFiles}\u003C/span>`\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`Failed: \u003Cspan class=\"hljs-subst\">${results.summary.failedFiles}\u003C/span>`\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`Critical violations: \u003Cspan class=\"hljs-subst\">${results.summary.criticalViolations}\u003C/span>`\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`Total violations: \u003Cspan class=\"hljs-subst\">${results.summary.totalViolations}\u003C/span>`\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (results.\u003Cspan class=\"hljs-property\">recommendations\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n=== Top Recommendations ==='\u003C/span>);\n            results.\u003Cspan class=\"hljs-property\">recommendations\u003C/span>.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">3\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">rec\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${rec.priority.toUpperCase()}\u003C/span>: \u003Cspan class=\"hljs-subst\">${rec.title}\u003C/span>`\u003C/span>);\n                \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`  \u003Cspan class=\"hljs-subst\">${rec.action}\u003C/span>`\u003C/span>);\n            });\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> results;\n        \n    } \u003Cspan class=\"hljs-keyword\">finally\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> validator.\u003Cspan class=\"hljs-title function_\">cleanup\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_\">MarkdownAccessibilityValidator\u003C/span>;\n\n\u003Cspan class=\"hljs-comment\">// CLI interface\u003C/span>\n\u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-built_in\">require\u003C/span>.\u003Cspan class=\"hljs-property\">main\u003C/span> === \u003Cspan class=\"hljs-variable language_\">module\u003C/span>) {\n    \u003Cspan class=\"hljs-title function_\">validateDocumentationAccessibility\u003C/span>()\n        .\u003Cspan class=\"hljs-title function_\">then\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">results\u003C/span> =>\u003C/span> {\n            process.\u003Cspan class=\"hljs-title function_\">exit\u003C/span>(results.\u003Cspan class=\"hljs-property\">summary\u003C/span>.\u003Cspan class=\"hljs-property\">criticalViolations\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span> ? \u003Cspan class=\"hljs-number\">1\u003C/span> : \u003Cspan class=\"hljs-number\">0\u003C/span>);\n        })\n        .\u003Cspan class=\"hljs-title function_\">catch\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">error\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\">'Validation failed:'\u003C/span>, error);\n            process.\u003Cspan class=\"hljs-title function_\">exit\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>);\n        });\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"alternative-text-and-image-accessibility\">Alternative Text and Image Accessibility\u003C/h3>\n\u003Cp>Comprehensive image accessibility strategies for different content types:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Advanced Image Accessibility Patterns\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Informative Images\u003C/span>\n\nImages that convey important information require descriptive alt text:\n\n\u003Cspan class=\"hljs-code\">```markdown\n<!-- Data visualizations -->\n![Sales performance chart showing 23% increase in Q3 2024 compared to Q2, with mobile sales leading at 45% growth](charts/q3-sales-performance.png)\n\n<!-- Screenshots with UI elements -->\n![Screenshot of accessibility settings panel with "Enable screen reader support" checkbox selected and "High contrast mode" toggle activated](screenshots/accessibility-settings.png)\n\n<!-- Diagrams and flowcharts -->\n![Software architecture diagram showing three-tier structure: presentation layer (React frontend), business logic layer (Node.js API), and data layer (PostgreSQL database) with bidirectional arrows indicating data flow](diagrams/architecture-overview.png)\n```\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"functional-images\">Functional Images\u003C/h2>\n\u003Cp>Images that serve as buttons or interactive elements:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\"><!-- Navigation icons -->\n[\u003Cspan class=\"hljs-string\">![Home page\u003C/span>](\u003Cspan class=\"hljs-link\">icons/home.svg\u003C/span>)](\u003Cspan class=\"hljs-link\">/\u003C/span>)\n[\u003Cspan class=\"hljs-string\">![User settings\u003C/span>](\u003Cspan class=\"hljs-link\">icons/settings.svg\u003C/span>)](\u003Cspan class=\"hljs-link\">/settings\u003C/span>)\n[\u003Cspan class=\"hljs-string\">![Search documentation\u003C/span>](\u003Cspan class=\"hljs-link\">icons/search.svg\u003C/span>)](\u003Cspan class=\"hljs-link\">/search\u003C/span>)\n\n<!-- Social media links -->\n[\u003Cspan class=\"hljs-string\">![Follow us on Twitter\u003C/span>](\u003Cspan class=\"hljs-link\">icons/twitter.svg\u003C/span>)](\u003Cspan class=\"hljs-link\">https://twitter.com/company\u003C/span>)\n[\u003Cspan class=\"hljs-string\">![Connect on LinkedIn\u003C/span>](\u003Cspan class=\"hljs-link\">icons/linkedin.svg\u003C/span>)](\u003Cspan class=\"hljs-link\">https://linkedin.com/company/company\u003C/span>)\n\n<!-- Download buttons -->\n[\u003Cspan class=\"hljs-string\">![Download user guide PDF (2.3 MB)\u003C/span>](\u003Cspan class=\"hljs-link\">icons/pdf-download.svg\u003C/span>)](\u003Cspan class=\"hljs-link\">guides/user-guide.pdf\u003C/span>)\n\u003C/code>\u003C/pre>\u003Ch2 id=\"complex-images-with-extended-descriptions\">Complex Images with Extended Descriptions\u003C/h2>\n\u003Cp>For detailed images requiring longer explanations:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">![\u003Cspan class=\"hljs-string\">Complex network topology diagram\u003C/span>](\u003Cspan class=\"hljs-link\">diagrams/network-topology.png\u003C/span>)\n\n\u003Cspan class=\"hljs-strong\">**Extended Description of Network Topology:**\u003C/span>\n\nThe network architecture consists of four main components arranged in a hierarchical structure:\n\n\u003Cspan class=\"hljs-bullet\">1.\u003C/span> \u003Cspan class=\"hljs-strong\">**Internet Gateway**\u003C/span> (top): Single point of external connectivity\n\u003Cspan class=\"hljs-bullet\">2.\u003C/span> \u003Cspan class=\"hljs-strong\">**Load Balancer Layer**\u003C/span>: Three redundant load balancers (LB-01, LB-02, LB-03) distribute traffic\n\u003Cspan class=\"hljs-bullet\">3.\u003C/span> \u003Cspan class=\"hljs-strong\">**Web Server Tier**\u003C/span>: Six web servers (WEB-01 through WEB-06) arranged in two availability zones\n\u003Cspan class=\"hljs-bullet\">4.\u003C/span> \u003Cspan class=\"hljs-strong\">**Database Cluster**\u003C/span>: Primary database server with two read replicas for high availability\n\nData flows from the internet gateway through the load balancers, which distribute requests across web servers based on current load. Web servers connect to either the primary database (for writes) or read replicas (for read operations). A dedicated backup connection links the primary database to an off-site backup facility.\n\nAll connections use encrypted channels (indicated by lock icons), and each tier includes monitoring agents (shown as small circle icons) that report to a centralized monitoring dashboard.\n\u003C/code>\u003C/pre>\u003Ch2 id=\"decorative-images\">Decorative Images\u003C/h2>\n\u003Cp>Images used purely for visual appeal should use empty alt text:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\"><!-- Decorative borders, patterns, or spacing images -->\n![](\u003Cspan class=\"hljs-link\">decorative/page-divider.png\u003C/span>)\n![](\u003Cspan class=\"hljs-link\">assets/decorative-border.svg\u003C/span>)\n![](\u003Cspan class=\"hljs-link\">images/background-pattern.jpg\u003C/span>)\n\n<!-- Note: Empty alt="" tells screen readers to skip these images -->\n\u003C/code>\u003C/pre>\u003Ch3 id=\"wcag-compliance-and-testing-framework\">WCAG Compliance and Testing Framework\u003C/h3>\n\u003Cp>Automated compliance testing and validation workflows:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-python\">\u003Cspan class=\"hljs-comment\"># wcag-compliance-checker.py - WCAG 2.1 compliance validation\u003C/span>\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> re\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> json\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> requests\n\u003Cspan class=\"hljs-keyword\">from\u003C/span> typing \u003Cspan class=\"hljs-keyword\">import\u003C/span> \u003Cspan class=\"hljs-type\">List\u003C/span>, \u003Cspan class=\"hljs-type\">Dict\u003C/span>, \u003Cspan class=\"hljs-type\">Tuple\u003C/span>, \u003Cspan class=\"hljs-type\">Optional\u003C/span>\n\u003Cspan class=\"hljs-keyword\">from\u003C/span> dataclasses \u003Cspan class=\"hljs-keyword\">import\u003C/span> dataclass\n\u003Cspan class=\"hljs-keyword\">from\u003C/span> bs4 \u003Cspan class=\"hljs-keyword\">import\u003C/span> BeautifulSoup\n\u003Cspan class=\"hljs-keyword\">from\u003C/span> urllib.parse \u003Cspan class=\"hljs-keyword\">import\u003C/span> urljoin, urlparse\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> colorsys\n\n\u003Cspan class=\"hljs-meta\">@dataclass\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">AccessibilityIssue\u003C/span>:\n    rule_id: \u003Cspan class=\"hljs-built_in\">str\u003C/span>\n    severity: \u003Cspan class=\"hljs-built_in\">str\u003C/span>\n    description: \u003Cspan class=\"hljs-built_in\">str\u003C/span>\n    element: \u003Cspan class=\"hljs-built_in\">str\u003C/span>\n    line_number: \u003Cspan class=\"hljs-built_in\">int\u003C/span>\n    recommendation: \u003Cspan class=\"hljs-built_in\">str\u003C/span>\n    wcag_criterion: \u003Cspan class=\"hljs-built_in\">str\u003C/span>\n\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">WCAGComplianceChecker\u003C/span>:\n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">__init__\u003C/span>(\u003Cspan class=\"hljs-params\">self, wcag_level: \u003Cspan class=\"hljs-built_in\">str\u003C/span> = \u003Cspan class=\"hljs-string\">'AA'\u003C/span>\u003C/span>):\n        self.wcag_level = wcag_level\n        self.wcag_rules = self.load_wcag_rules()\n        self.color_contrast_ratios = {\n            \u003Cspan class=\"hljs-string\">'AA'\u003C/span>: {\u003Cspan class=\"hljs-string\">'normal'\u003C/span>: \u003Cspan class=\"hljs-number\">4.5\u003C/span>, \u003Cspan class=\"hljs-string\">'large'\u003C/span>: \u003Cspan class=\"hljs-number\">3.0\u003C/span>},\n            \u003Cspan class=\"hljs-string\">'AAA'\u003C/span>: {\u003Cspan class=\"hljs-string\">'normal'\u003C/span>: \u003Cspan class=\"hljs-number\">7.0\u003C/span>, \u003Cspan class=\"hljs-string\">'large'\u003C/span>: \u003Cspan class=\"hljs-number\">4.5\u003C/span>}\n        }\n        \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">load_wcag_rules\u003C/span>(\u003Cspan class=\"hljs-params\">self\u003C/span>) -> \u003Cspan class=\"hljs-type\">Dict\u003C/span>:\n        \u003Cspan class=\"hljs-string\">"""Load WCAG 2.1 success criteria and guidelines"""\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-string\">'1.1.1'\u003C/span>: {\n                \u003Cspan class=\"hljs-string\">'title'\u003C/span>: \u003Cspan class=\"hljs-string\">'Non-text Content'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'level'\u003C/span>: \u003Cspan class=\"hljs-string\">'A'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'description'\u003C/span>: \u003Cspan class=\"hljs-string\">'All non-text content has alternative text'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'techniques'\u003C/span>: [\u003Cspan class=\"hljs-string\">'H37'\u003C/span>, \u003Cspan class=\"hljs-string\">'H36'\u003C/span>, \u003Cspan class=\"hljs-string\">'H24'\u003C/span>, \u003Cspan class=\"hljs-string\">'H53'\u003C/span>]\n            },\n            \u003Cspan class=\"hljs-string\">'1.3.1'\u003C/span>: {\n                \u003Cspan class=\"hljs-string\">'title'\u003C/span>: \u003Cspan class=\"hljs-string\">'Info and Relationships'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'level'\u003C/span>: \u003Cspan class=\"hljs-string\">'A'\u003C/span>, \n                \u003Cspan class=\"hljs-string\">'description'\u003C/span>: \u003Cspan class=\"hljs-string\">'Information and structure are programmatically determinable'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'techniques'\u003C/span>: [\u003Cspan class=\"hljs-string\">'H42'\u003C/span>, \u003Cspan class=\"hljs-string\">'H43'\u003C/span>, \u003Cspan class=\"hljs-string\">'H44'\u003C/span>, \u003Cspan class=\"hljs-string\">'H51'\u003C/span>]\n            },\n            \u003Cspan class=\"hljs-string\">'1.3.2'\u003C/span>: {\n                \u003Cspan class=\"hljs-string\">'title'\u003C/span>: \u003Cspan class=\"hljs-string\">'Meaningful Sequence'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'level'\u003C/span>: \u003Cspan class=\"hljs-string\">'A'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'description'\u003C/span>: \u003Cspan class=\"hljs-string\">'Content order is meaningful when presented sequentially'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'techniques'\u003C/span>: [\u003Cspan class=\"hljs-string\">'G57'\u003C/span>, \u003Cspan class=\"hljs-string\">'C6'\u003C/span>, \u003Cspan class=\"hljs-string\">'C8'\u003C/span>]\n            },\n            \u003Cspan class=\"hljs-string\">'1.4.1'\u003C/span>: {\n                \u003Cspan class=\"hljs-string\">'title'\u003C/span>: \u003Cspan class=\"hljs-string\">'Use of Color'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'level'\u003C/span>: \u003Cspan class=\"hljs-string\">'A'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'description'\u003C/span>: \u003Cspan class=\"hljs-string\">'Color is not the only means of conveying information'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'techniques'\u003C/span>: [\u003Cspan class=\"hljs-string\">'G14'\u003C/span>, \u003Cspan class=\"hljs-string\">'G122'\u003C/span>, \u003Cspan class=\"hljs-string\">'G138'\u003C/span>]\n            },\n            \u003Cspan class=\"hljs-string\">'1.4.3'\u003C/span>: {\n                \u003Cspan class=\"hljs-string\">'title'\u003C/span>: \u003Cspan class=\"hljs-string\">'Contrast (Minimum)'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'level'\u003C/span>: \u003Cspan class=\"hljs-string\">'AA'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'description'\u003C/span>: \u003Cspan class=\"hljs-string\">'Text has sufficient contrast ratio'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'techniques'\u003C/span>: [\u003Cspan class=\"hljs-string\">'G18'\u003C/span>, \u003Cspan class=\"hljs-string\">'G145'\u003C/span>, \u003Cspan class=\"hljs-string\">'G174'\u003C/span>]\n            },\n            \u003Cspan class=\"hljs-string\">'2.1.1'\u003C/span>: {\n                \u003Cspan class=\"hljs-string\">'title'\u003C/span>: \u003Cspan class=\"hljs-string\">'Keyboard'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'level'\u003C/span>: \u003Cspan class=\"hljs-string\">'A'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'description'\u003C/span>: \u003Cspan class=\"hljs-string\">'All functionality is available via keyboard'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'techniques'\u003C/span>: [\u003Cspan class=\"hljs-string\">'G202'\u003C/span>, \u003Cspan class=\"hljs-string\">'H91'\u003C/span>, \u003Cspan class=\"hljs-string\">'SCR20'\u003C/span>]\n            },\n            \u003Cspan class=\"hljs-string\">'2.4.1'\u003C/span>: {\n                \u003Cspan class=\"hljs-string\">'title'\u003C/span>: \u003Cspan class=\"hljs-string\">'Bypass Blocks'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'level'\u003C/span>: \u003Cspan class=\"hljs-string\">'A'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'description'\u003C/span>: \u003Cspan class=\"hljs-string\">'Mechanism to skip repeated content blocks'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'techniques'\u003C/span>: [\u003Cspan class=\"hljs-string\">'G1'\u003C/span>, \u003Cspan class=\"hljs-string\">'G123'\u003C/span>, \u003Cspan class=\"hljs-string\">'G124'\u003C/span>]\n            },\n            \u003Cspan class=\"hljs-string\">'2.4.2'\u003C/span>: {\n                \u003Cspan class=\"hljs-string\">'title'\u003C/span>: \u003Cspan class=\"hljs-string\">'Page Titled'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'level'\u003C/span>: \u003Cspan class=\"hljs-string\">'A'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'description'\u003C/span>: \u003Cspan class=\"hljs-string\">'Web pages have descriptive titles'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'techniques'\u003C/span>: [\u003Cspan class=\"hljs-string\">'G88'\u003C/span>, \u003Cspan class=\"hljs-string\">'H25'\u003C/span>]\n            },\n            \u003Cspan class=\"hljs-string\">'2.4.3'\u003C/span>: {\n                \u003Cspan class=\"hljs-string\">'title'\u003C/span>: \u003Cspan class=\"hljs-string\">'Focus Order'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'level'\u003C/span>: \u003Cspan class=\"hljs-string\">'A'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'description'\u003C/span>: \u003Cspan class=\"hljs-string\">'Focus order preserves meaning and operability'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'techniques'\u003C/span>: [\u003Cspan class=\"hljs-string\">'G59'\u003C/span>, \u003Cspan class=\"hljs-string\">'H4'\u003C/span>, \u003Cspan class=\"hljs-string\">'C15'\u003C/span>]\n            },\n            \u003Cspan class=\"hljs-string\">'2.4.4'\u003C/span>: {\n                \u003Cspan class=\"hljs-string\">'title'\u003C/span>: \u003Cspan class=\"hljs-string\">'Link Purpose (In Context)'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'level'\u003C/span>: \u003Cspan class=\"hljs-string\">'A'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'description'\u003C/span>: \u003Cspan class=\"hljs-string\">'Link purpose is clear from link text or context'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'techniques'\u003C/span>: [\u003Cspan class=\"hljs-string\">'G91'\u003C/span>, \u003Cspan class=\"hljs-string\">'H30'\u003C/span>, \u003Cspan class=\"hljs-string\">'H24'\u003C/span>]\n            },\n            \u003Cspan class=\"hljs-string\">'2.4.6'\u003C/span>: {\n                \u003Cspan class=\"hljs-string\">'title'\u003C/span>: \u003Cspan class=\"hljs-string\">'Headings and Labels'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'level'\u003C/span>: \u003Cspan class=\"hljs-string\">'AA'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'description'\u003C/span>: \u003Cspan class=\"hljs-string\">'Headings and labels describe topic or purpose'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'techniques'\u003C/span>: [\u003Cspan class=\"hljs-string\">'G130'\u003C/span>, \u003Cspan class=\"hljs-string\">'G131'\u003C/span>]\n            },\n            \u003Cspan class=\"hljs-string\">'3.1.1'\u003C/span>: {\n                \u003Cspan class=\"hljs-string\">'title'\u003C/span>: \u003Cspan class=\"hljs-string\">'Language of Page'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'level'\u003C/span>: \u003Cspan class=\"hljs-string\">'A'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'description'\u003C/span>: \u003Cspan class=\"hljs-string\">'Primary language of page is programmatically determinable'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'techniques'\u003C/span>: [\u003Cspan class=\"hljs-string\">'H57'\u003C/span>, \u003Cspan class=\"hljs-string\">'H58'\u003C/span>]\n            },\n            \u003Cspan class=\"hljs-string\">'3.2.1'\u003C/span>: {\n                \u003Cspan class=\"hljs-string\">'title'\u003C/span>: \u003Cspan class=\"hljs-string\">'On Focus'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'level'\u003C/span>: \u003Cspan class=\"hljs-string\">'A'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'description'\u003C/span>: \u003Cspan class=\"hljs-string\">'Focus does not trigger unexpected context changes'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'techniques'\u003C/span>: [\u003Cspan class=\"hljs-string\">'G107'\u003C/span>, \u003Cspan class=\"hljs-string\">'G201'\u003C/span>]\n            },\n            \u003Cspan class=\"hljs-string\">'4.1.1'\u003C/span>: {\n                \u003Cspan class=\"hljs-string\">'title'\u003C/span>: \u003Cspan class=\"hljs-string\">'Parsing'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'level'\u003C/span>: \u003Cspan class=\"hljs-string\">'A'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'description'\u003C/span>: \u003Cspan class=\"hljs-string\">'Markup is valid and well-formed'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'techniques'\u003C/span>: [\u003Cspan class=\"hljs-string\">'G134'\u003C/span>, \u003Cspan class=\"hljs-string\">'G192'\u003C/span>, \u003Cspan class=\"hljs-string\">'H88'\u003C/span>]\n            },\n            \u003Cspan class=\"hljs-string\">'4.1.2'\u003C/span>: {\n                \u003Cspan class=\"hljs-string\">'title'\u003C/span>: \u003Cspan class=\"hljs-string\">'Name, Role, Value'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'level'\u003C/span>: \u003Cspan class=\"hljs-string\">'A'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'description'\u003C/span>: \u003Cspan class=\"hljs-string\">'UI components have accessible names and roles'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'techniques'\u003C/span>: [\u003Cspan class=\"hljs-string\">'H44'\u003C/span>, \u003Cspan class=\"hljs-string\">'H65'\u003C/span>, \u003Cspan class=\"hljs-string\">'G10'\u003C/span>]\n            }\n        }\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">validate_markdown_file\u003C/span>(\u003Cspan class=\"hljs-params\">self, file_path: \u003Cspan class=\"hljs-built_in\">str\u003C/span>, html_content: \u003Cspan class=\"hljs-built_in\">str\u003C/span>\u003C/span>) -> \u003Cspan class=\"hljs-type\">List\u003C/span>[AccessibilityIssue]:\n        \u003Cspan class=\"hljs-string\">"""Validate a markdown file for WCAG compliance"""\u003C/span>\n        issues = []\n        soup = BeautifulSoup(html_content, \u003Cspan class=\"hljs-string\">'html.parser'\u003C/span>)\n        \n        \u003Cspan class=\"hljs-comment\"># Check each WCAG criterion\u003C/span>\n        issues.extend(self.check_non_text_content(soup, file_path))\n        issues.extend(self.check_heading_structure(soup, file_path))\n        issues.extend(self.check_link_accessibility(soup, file_path))\n        issues.extend(self.check_image_accessibility(soup, file_path))\n        issues.extend(self.check_table_accessibility(soup, file_path))\n        issues.extend(self.check_language_attributes(soup, file_path))\n        issues.extend(self.check_page_structure(soup, file_path))\n        issues.extend(self.check_form_accessibility(soup, file_path))\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> issues\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">check_non_text_content\u003C/span>(\u003Cspan class=\"hljs-params\">self, soup: BeautifulSoup, file_path: \u003Cspan class=\"hljs-built_in\">str\u003C/span>\u003C/span>) -> \u003Cspan class=\"hljs-type\">List\u003C/span>[AccessibilityIssue]:\n        \u003Cspan class=\"hljs-string\">"""Check WCAG 1.1.1 - Non-text Content"""\u003C/span>\n        issues = []\n        \n        \u003Cspan class=\"hljs-comment\"># Check images without alt text\u003C/span>\n        images = soup.find_all(\u003Cspan class=\"hljs-string\">'img'\u003C/span>)\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> i, img \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-built_in\">enumerate\u003C/span>(images):\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-keyword\">not\u003C/span> img.has_attr(\u003Cspan class=\"hljs-string\">'alt'\u003C/span>):\n                issues.append(AccessibilityIssue(\n                    rule_id=\u003Cspan class=\"hljs-string\">'1.1.1'\u003C/span>,\n                    severity=\u003Cspan class=\"hljs-string\">'error'\u003C/span>,\n                    description=\u003Cspan class=\"hljs-string\">'Image missing alt attribute'\u003C/span>,\n                    element=\u003Cspan class=\"hljs-string\">f'<img src="\u003Cspan class=\"hljs-subst\">{img.get(\u003Cspan class=\"hljs-string\">"src"\u003C/span>, \u003Cspan class=\"hljs-string\">""\u003C/span>)[:\u003Cspan class=\"hljs-number\">50\u003C/span>]}\u003C/span>...">'\u003C/span>,\n                    line_number=i + \u003Cspan class=\"hljs-number\">1\u003C/span>,\n                    recommendation=\u003Cspan class=\"hljs-string\">'Add alt attribute with descriptive text or alt="" for decorative images'\u003C/span>,\n                    wcag_criterion=\u003Cspan class=\"hljs-string\">'1.1.1 Non-text Content (Level A)'\u003C/span>\n                ))\n            \u003Cspan class=\"hljs-keyword\">elif\u003C/span> img.get(\u003Cspan class=\"hljs-string\">'alt'\u003C/span>) \u003Cspan class=\"hljs-keyword\">and\u003C/span> \u003Cspan class=\"hljs-built_in\">len\u003C/span>(img.get(\u003Cspan class=\"hljs-string\">'alt'\u003C/span>)) > \u003Cspan class=\"hljs-number\">125\u003C/span>:\n                issues.append(AccessibilityIssue(\n                    rule_id=\u003Cspan class=\"hljs-string\">'1.1.1'\u003C/span>,\n                    severity=\u003Cspan class=\"hljs-string\">'warning'\u003C/span>,\n                    description=\u003Cspan class=\"hljs-string\">'Alt text too long'\u003C/span>,\n                    element=\u003Cspan class=\"hljs-string\">f'<img alt="\u003Cspan class=\"hljs-subst\">{img.get(\u003Cspan class=\"hljs-string\">"alt"\u003C/span>)[:\u003Cspan class=\"hljs-number\">30\u003C/span>]}\u003C/span>...">'\u003C/span>,\n                    line_number=i + \u003Cspan class=\"hljs-number\">1\u003C/span>,\n                    recommendation=\u003Cspan class=\"hljs-string\">'Keep alt text under 125 characters, use longdesc or caption for detailed descriptions'\u003C/span>,\n                    wcag_criterion=\u003Cspan class=\"hljs-string\">'1.1.1 Non-text Content (Level A)'\u003C/span>\n                ))\n        \n        \u003Cspan class=\"hljs-comment\"># Check for audio/video without text alternatives\u003C/span>\n        media_elements = soup.find_all([\u003Cspan class=\"hljs-string\">'audio'\u003C/span>, \u003Cspan class=\"hljs-string\">'video'\u003C/span>])\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> i, media \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-built_in\">enumerate\u003C/span>(media_elements):\n            has_captions = media.find(\u003Cspan class=\"hljs-string\">'track'\u003C/span>, {\u003Cspan class=\"hljs-string\">'kind'\u003C/span>: \u003Cspan class=\"hljs-string\">'captions'\u003C/span>})\n            has_transcript = media.find_next(\u003Cspan class=\"hljs-string\">'details'\u003C/span>) \u003Cspan class=\"hljs-keyword\">or\u003C/span> media.find_previous(\u003Cspan class=\"hljs-string\">'details'\u003C/span>)\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-keyword\">not\u003C/span> has_captions \u003Cspan class=\"hljs-keyword\">and\u003C/span> \u003Cspan class=\"hljs-keyword\">not\u003C/span> has_transcript:\n                issues.append(AccessibilityIssue(\n                    rule_id=\u003Cspan class=\"hljs-string\">'1.1.1'\u003C/span>,\n                    severity=\u003Cspan class=\"hljs-string\">'error'\u003C/span>,\n                    description=\u003Cspan class=\"hljs-string\">f'\u003Cspan class=\"hljs-subst\">{media.name}\u003C/span> element missing text alternative'\u003C/span>,\n                    element=\u003Cspan class=\"hljs-built_in\">str\u003C/span>(media)[:\u003Cspan class=\"hljs-number\">100\u003C/span>],\n                    line_number=i + \u003Cspan class=\"hljs-number\">1\u003C/span>,\n                    recommendation=\u003Cspan class=\"hljs-string\">'Provide captions for video or transcript for audio content'\u003C/span>,\n                    wcag_criterion=\u003Cspan class=\"hljs-string\">'1.1.1 Non-text Content (Level A)'\u003C/span>\n                ))\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> issues\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">check_heading_structure\u003C/span>(\u003Cspan class=\"hljs-params\">self, soup: BeautifulSoup, file_path: \u003Cspan class=\"hljs-built_in\">str\u003C/span>\u003C/span>) -> \u003Cspan class=\"hljs-type\">List\u003C/span>[AccessibilityIssue]:\n        \u003Cspan class=\"hljs-string\">"""Check WCAG 1.3.1 - Info and Relationships (Heading Structure)"""\u003C/span>\n        issues = []\n        \n        headings = soup.find_all([\u003Cspan class=\"hljs-string\">'h1'\u003C/span>, \u003Cspan class=\"hljs-string\">'h2'\u003C/span>, \u003Cspan class=\"hljs-string\">'h3'\u003C/span>, \u003Cspan class=\"hljs-string\">'h4'\u003C/span>, \u003Cspan class=\"hljs-string\">'h5'\u003C/span>, \u003Cspan class=\"hljs-string\">'h6'\u003C/span>])\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-keyword\">not\u003C/span> headings:\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> issues\n            \n        \u003Cspan class=\"hljs-comment\"># Check for logical heading progression\u003C/span>\n        heading_levels = []\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> heading \u003Cspan class=\"hljs-keyword\">in\u003C/span> headings:\n            level = \u003Cspan class=\"hljs-built_in\">int\u003C/span>(heading.name[\u003Cspan class=\"hljs-number\">1\u003C/span>])\n            heading_levels.append(level)\n        \n        \u003Cspan class=\"hljs-comment\"># Check for skipped heading levels\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> i \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-built_in\">range\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>, \u003Cspan class=\"hljs-built_in\">len\u003C/span>(heading_levels)):\n            current_level = heading_levels[i]\n            previous_level = heading_levels[i-\u003Cspan class=\"hljs-number\">1\u003C/span>]\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> current_level > previous_level + \u003Cspan class=\"hljs-number\">1\u003C/span>:\n                issues.append(AccessibilityIssue(\n                    rule_id=\u003Cspan class=\"hljs-string\">'1.3.1'\u003C/span>,\n                    severity=\u003Cspan class=\"hljs-string\">'error'\u003C/span>,\n                    description=\u003Cspan class=\"hljs-string\">f'Heading level skip detected: h\u003Cspan class=\"hljs-subst\">{previous_level}\u003C/span> to h\u003Cspan class=\"hljs-subst\">{current_level}\u003C/span>'\u003C/span>,\n                    element=\u003Cspan class=\"hljs-string\">f'<h\u003Cspan class=\"hljs-subst\">{current_level}\u003C/span>>\u003Cspan class=\"hljs-subst\">{headings[i].get_text()[:\u003Cspan class=\"hljs-number\">50\u003C/span>]}\u003C/span></h\u003Cspan class=\"hljs-subst\">{current_level}\u003C/span>>'\u003C/span>,\n                    line_number=i + \u003Cspan class=\"hljs-number\">1\u003C/span>,\n                    recommendation=\u003Cspan class=\"hljs-string\">'Use logical heading progression without skipping levels'\u003C/span>,\n                    wcag_criterion=\u003Cspan class=\"hljs-string\">'1.3.1 Info and Relationships (Level A)'\u003C/span>\n                ))\n        \n        \u003Cspan class=\"hljs-comment\"># Check for multiple H1s\u003C/span>\n        h1_count = \u003Cspan class=\"hljs-built_in\">len\u003C/span>([h \u003Cspan class=\"hljs-keyword\">for\u003C/span> h \u003Cspan class=\"hljs-keyword\">in\u003C/span> headings \u003Cspan class=\"hljs-keyword\">if\u003C/span> h.name == \u003Cspan class=\"hljs-string\">'h1'\u003C/span>])\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> h1_count > \u003Cspan class=\"hljs-number\">1\u003C/span>:\n            issues.append(AccessibilityIssue(\n                rule_id=\u003Cspan class=\"hljs-string\">'2.4.6'\u003C/span>,\n                severity=\u003Cspan class=\"hljs-string\">'warning'\u003C/span>,\n                description=\u003Cspan class=\"hljs-string\">f'Multiple H1 headings found (\u003Cspan class=\"hljs-subst\">{h1_count}\u003C/span>)'\u003C/span>,\n                element=\u003Cspan class=\"hljs-string\">'Multiple <h1> elements'\u003C/span>,\n                line_number=\u003Cspan class=\"hljs-number\">1\u003C/span>,\n                recommendation=\u003Cspan class=\"hljs-string\">'Use only one H1 per page for main heading'\u003C/span>,\n                wcag_criterion=\u003Cspan class=\"hljs-string\">'2.4.6 Headings and Labels (Level AA)'\u003C/span>\n            ))\n        \n        \u003Cspan class=\"hljs-comment\"># Check for empty headings\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> i, heading \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-built_in\">enumerate\u003C/span>(headings):\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-keyword\">not\u003C/span> heading.get_text().strip():\n                issues.append(AccessibilityIssue(\n                    rule_id=\u003Cspan class=\"hljs-string\">'2.4.6'\u003C/span>,\n                    severity=\u003Cspan class=\"hljs-string\">'error'\u003C/span>,\n                    description=\u003Cspan class=\"hljs-string\">'Empty heading found'\u003C/span>,\n                    element=\u003Cspan class=\"hljs-string\">f'<\u003Cspan class=\"hljs-subst\">{heading.name}\u003C/span>></\u003Cspan class=\"hljs-subst\">{heading.name}\u003C/span>>'\u003C/span>,\n                    line_number=i + \u003Cspan class=\"hljs-number\">1\u003C/span>,\n                    recommendation=\u003Cspan class=\"hljs-string\">'Provide descriptive heading text'\u003C/span>,\n                    wcag_criterion=\u003Cspan class=\"hljs-string\">'2.4.6 Headings and Labels (Level AA)'\u003C/span>\n                ))\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> issues\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">check_link_accessibility\u003C/span>(\u003Cspan class=\"hljs-params\">self, soup: BeautifulSoup, file_path: \u003Cspan class=\"hljs-built_in\">str\u003C/span>\u003C/span>) -> \u003Cspan class=\"hljs-type\">List\u003C/span>[AccessibilityIssue]:\n        \u003Cspan class=\"hljs-string\">"""Check WCAG 2.4.4 - Link Purpose (In Context)"""\u003C/span>\n        issues = []\n        \n        links = soup.find_all(\u003Cspan class=\"hljs-string\">'a'\u003C/span>, href=\u003Cspan class=\"hljs-literal\">True\u003C/span>)\n        generic_link_text = [\u003Cspan class=\"hljs-string\">'click here'\u003C/span>, \u003Cspan class=\"hljs-string\">'read more'\u003C/span>, \u003Cspan class=\"hljs-string\">'more'\u003C/span>, \u003Cspan class=\"hljs-string\">'link'\u003C/span>, \u003Cspan class=\"hljs-string\">'here'\u003C/span>, \u003Cspan class=\"hljs-string\">'this'\u003C/span>, \u003Cspan class=\"hljs-string\">'continue'\u003C/span>]\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> i, link \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-built_in\">enumerate\u003C/span>(links):\n            link_text = link.get_text().strip().lower()\n            href = link.get(\u003Cspan class=\"hljs-string\">'href'\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>)\n            \n            \u003Cspan class=\"hljs-comment\"># Check for generic link text\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> link_text \u003Cspan class=\"hljs-keyword\">in\u003C/span> generic_link_text:\n                issues.append(AccessibilityIssue(\n                    rule_id=\u003Cspan class=\"hljs-string\">'2.4.4'\u003C/span>,\n                    severity=\u003Cspan class=\"hljs-string\">'error'\u003C/span>,\n                    description=\u003Cspan class=\"hljs-string\">f'Generic link text: "\u003Cspan class=\"hljs-subst\">{link_text}\u003C/span>"'\u003C/span>,\n                    element=\u003Cspan class=\"hljs-string\">f'<a href="\u003Cspan class=\"hljs-subst\">{href}\u003C/span>">\u003Cspan class=\"hljs-subst\">{link_text}\u003C/span></a>'\u003C/span>,\n                    line_number=i + \u003Cspan class=\"hljs-number\">1\u003C/span>,\n                    recommendation=\u003Cspan class=\"hljs-string\">'Use descriptive link text that makes sense out of context'\u003C/span>,\n                    wcag_criterion=\u003Cspan class=\"hljs-string\">'2.4.4 Link Purpose (In Context) (Level A)'\u003C/span>\n                ))\n            \n            \u003Cspan class=\"hljs-comment\"># Check for empty link text\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-keyword\">not\u003C/span> link_text \u003Cspan class=\"hljs-keyword\">and\u003C/span> \u003Cspan class=\"hljs-keyword\">not\u003C/span> link.get(\u003Cspan class=\"hljs-string\">'aria-label'\u003C/span>) \u003Cspan class=\"hljs-keyword\">and\u003C/span> \u003Cspan class=\"hljs-keyword\">not\u003C/span> link.get(\u003Cspan class=\"hljs-string\">'title'\u003C/span>):\n                issues.append(AccessibilityIssue(\n                    rule_id=\u003Cspan class=\"hljs-string\">'2.4.4'\u003C/span>,\n                    severity=\u003Cspan class=\"hljs-string\">'error'\u003C/span>,\n                    description=\u003Cspan class=\"hljs-string\">'Link with no accessible text'\u003C/span>,\n                    element=\u003Cspan class=\"hljs-string\">f'<a href="\u003Cspan class=\"hljs-subst\">{href}\u003C/span>"></a>'\u003C/span>,\n                    line_number=i + \u003Cspan class=\"hljs-number\">1\u003C/span>,\n                    recommendation=\u003Cspan class=\"hljs-string\">'Provide link text, aria-label, or title attribute'\u003C/span>,\n                    wcag_criterion=\u003Cspan class=\"hljs-string\">'2.4.4 Link Purpose (In Context) (Level A)'\u003C/span>\n                ))\n            \n            \u003Cspan class=\"hljs-comment\"># Check for very long link text\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-built_in\">len\u003C/span>(link_text) > \u003Cspan class=\"hljs-number\">80\u003C/span>:\n                issues.append(AccessibilityIssue(\n                    rule_id=\u003Cspan class=\"hljs-string\">'2.4.4'\u003C/span>,\n                    severity=\u003Cspan class=\"hljs-string\">'warning'\u003C/span>,\n                    description=\u003Cspan class=\"hljs-string\">'Link text too long'\u003C/span>,\n                    element=\u003Cspan class=\"hljs-string\">f'<a href="\u003Cspan class=\"hljs-subst\">{href}\u003C/span>">\u003Cspan class=\"hljs-subst\">{link_text[:\u003Cspan class=\"hljs-number\">30\u003C/span>]}\u003C/span>...</a>'\u003C/span>,\n                    line_number=i + \u003Cspan class=\"hljs-number\">1\u003C/span>,\n                    recommendation=\u003Cspan class=\"hljs-string\">'Keep link text concise while remaining descriptive'\u003C/span>,\n                    wcag_criterion=\u003Cspan class=\"hljs-string\">'2.4.4 Link Purpose (In Context) (Level A)'\u003C/span>\n                ))\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> issues\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">check_image_accessibility\u003C/span>(\u003Cspan class=\"hljs-params\">self, soup: BeautifulSoup, file_path: \u003Cspan class=\"hljs-built_in\">str\u003C/span>\u003C/span>) -> \u003Cspan class=\"hljs-type\">List\u003C/span>[AccessibilityIssue]:\n        \u003Cspan class=\"hljs-string\">"""Enhanced image accessibility checks"""\u003C/span>\n        issues = []\n        \n        images = soup.find_all(\u003Cspan class=\"hljs-string\">'img'\u003C/span>)\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> i, img \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-built_in\">enumerate\u003C/span>(images):\n            src = img.get(\u003Cspan class=\"hljs-string\">'src'\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>)\n            alt = img.get(\u003Cspan class=\"hljs-string\">'alt'\u003C/span>, \u003Cspan class=\"hljs-literal\">None\u003C/span>)\n            \n            \u003Cspan class=\"hljs-comment\"># Skip if already checked in check_non_text_content\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> alt \u003Cspan class=\"hljs-keyword\">is\u003C/span> \u003Cspan class=\"hljs-literal\">None\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">continue\u003C/span>\n                \n            \u003Cspan class=\"hljs-comment\"># Check for redundant text in alt\u003C/span>\n            redundant_phrases = [\u003Cspan class=\"hljs-string\">'image of'\u003C/span>, \u003Cspan class=\"hljs-string\">'picture of'\u003C/span>, \u003Cspan class=\"hljs-string\">'photo of'\u003C/span>, \u003Cspan class=\"hljs-string\">'graphic of'\u003C/span>, \u003Cspan class=\"hljs-string\">'illustration of'\u003C/span>]\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> alt \u003Cspan class=\"hljs-keyword\">and\u003C/span> \u003Cspan class=\"hljs-built_in\">any\u003C/span>(phrase \u003Cspan class=\"hljs-keyword\">in\u003C/span> alt.lower() \u003Cspan class=\"hljs-keyword\">for\u003C/span> phrase \u003Cspan class=\"hljs-keyword\">in\u003C/span> redundant_phrases):\n                issues.append(AccessibilityIssue(\n                    rule_id=\u003Cspan class=\"hljs-string\">'1.1.1'\u003C/span>,\n                    severity=\u003Cspan class=\"hljs-string\">'warning'\u003C/span>,\n                    description=\u003Cspan class=\"hljs-string\">'Alt text contains redundant phrases'\u003C/span>,\n                    element=\u003Cspan class=\"hljs-string\">f'<img alt="\u003Cspan class=\"hljs-subst\">{alt[:\u003Cspan class=\"hljs-number\">30\u003C/span>]}\u003C/span>...">'\u003C/span>,\n                    line_number=i + \u003Cspan class=\"hljs-number\">1\u003C/span>,\n                    recommendation=\u003Cspan class=\"hljs-string\">'Remove redundant phrases like "image of" from alt text'\u003C/span>,\n                    wcag_criterion=\u003Cspan class=\"hljs-string\">'1.1.1 Non-text Content (Level A)'\u003C/span>\n                ))\n            \n            \u003Cspan class=\"hljs-comment\"># Check for file extensions in alt text\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> alt \u003Cspan class=\"hljs-keyword\">and\u003C/span> \u003Cspan class=\"hljs-built_in\">any\u003C/span>(ext \u003Cspan class=\"hljs-keyword\">in\u003C/span> alt.lower() \u003Cspan class=\"hljs-keyword\">for\u003C/span> ext \u003Cspan class=\"hljs-keyword\">in\u003C/span> [\u003Cspan class=\"hljs-string\">'.jpg'\u003C/span>, \u003Cspan class=\"hljs-string\">'.png'\u003C/span>, \u003Cspan class=\"hljs-string\">'.gif'\u003C/span>, \u003Cspan class=\"hljs-string\">'.svg'\u003C/span>, \u003Cspan class=\"hljs-string\">'.jpeg'\u003C/span>]):\n                issues.append(AccessibilityIssue(\n                    rule_id=\u003Cspan class=\"hljs-string\">'1.1.1'\u003C/span>,\n                    severity=\u003Cspan class=\"hljs-string\">'warning'\u003C/span>,\n                    description=\u003Cspan class=\"hljs-string\">'Alt text contains file extension'\u003C/span>,\n                    element=\u003Cspan class=\"hljs-string\">f'<img alt="\u003Cspan class=\"hljs-subst\">{alt[:\u003Cspan class=\"hljs-number\">30\u003C/span>]}\u003C/span>...">'\u003C/span>,\n                    line_number=i + \u003Cspan class=\"hljs-number\">1\u003C/span>,\n                    recommendation=\u003Cspan class=\"hljs-string\">'Remove file extensions from alt text'\u003C/span>,\n                    wcag_criterion=\u003Cspan class=\"hljs-string\">'1.1.1 Non-text Content (Level A)'\u003C/span>\n                ))\n            \n            \u003Cspan class=\"hljs-comment\"># Check for images that might be complex (charts, diagrams)\u003C/span>\n            complex_indicators = [\u003Cspan class=\"hljs-string\">'chart'\u003C/span>, \u003Cspan class=\"hljs-string\">'graph'\u003C/span>, \u003Cspan class=\"hljs-string\">'diagram'\u003C/span>, \u003Cspan class=\"hljs-string\">'flowchart'\u003C/span>, \u003Cspan class=\"hljs-string\">'timeline'\u003C/span>, \u003Cspan class=\"hljs-string\">'map'\u003C/span>]\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> alt \u003Cspan class=\"hljs-keyword\">and\u003C/span> \u003Cspan class=\"hljs-built_in\">any\u003C/span>(indicator \u003Cspan class=\"hljs-keyword\">in\u003C/span> alt.lower() \u003Cspan class=\"hljs-keyword\">for\u003C/span> indicator \u003Cspan class=\"hljs-keyword\">in\u003C/span> complex_indicators):\n                \u003Cspan class=\"hljs-comment\"># Look for extended description\u003C/span>\n                has_longdesc = img.get(\u003Cspan class=\"hljs-string\">'longdesc'\u003C/span>)\n                has_caption = img.find_next([\u003Cspan class=\"hljs-string\">'figcaption'\u003C/span>, \u003Cspan class=\"hljs-string\">'details'\u003C/span>])\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-keyword\">not\u003C/span> has_longdesc \u003Cspan class=\"hljs-keyword\">and\u003C/span> \u003Cspan class=\"hljs-keyword\">not\u003C/span> has_caption:\n                    issues.append(AccessibilityIssue(\n                        rule_id=\u003Cspan class=\"hljs-string\">'1.1.1'\u003C/span>,\n                        severity=\u003Cspan class=\"hljs-string\">'warning'\u003C/span>,\n                        description=\u003Cspan class=\"hljs-string\">'Complex image may need extended description'\u003C/span>,\n                        element=\u003Cspan class=\"hljs-string\">f'<img alt="\u003Cspan class=\"hljs-subst\">{alt[:\u003Cspan class=\"hljs-number\">30\u003C/span>]}\u003C/span>...">'\u003C/span>,\n                        line_number=i + \u003Cspan class=\"hljs-number\">1\u003C/span>,\n                        recommendation=\u003Cspan class=\"hljs-string\">'Consider adding a detailed description via longdesc or adjacent text'\u003C/span>,\n                        wcag_criterion=\u003Cspan class=\"hljs-string\">'1.1.1 Non-text Content (Level A)'\u003C/span>\n                    ))\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> issues\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">check_table_accessibility\u003C/span>(\u003Cspan class=\"hljs-params\">self, soup: BeautifulSoup, file_path: \u003Cspan class=\"hljs-built_in\">str\u003C/span>\u003C/span>) -> \u003Cspan class=\"hljs-type\">List\u003C/span>[AccessibilityIssue]:\n        \u003Cspan class=\"hljs-string\">"""Check table accessibility"""\u003C/span>\n        issues = []\n        \n        tables = soup.find_all(\u003Cspan class=\"hljs-string\">'table'\u003C/span>)\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> i, table \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-built_in\">enumerate\u003C/span>(tables):\n            \u003Cspan class=\"hljs-comment\"># Check for table headers\u003C/span>\n            headers = table.find_all(\u003Cspan class=\"hljs-string\">'th'\u003C/span>)\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-keyword\">not\u003C/span> headers:\n                \u003Cspan class=\"hljs-comment\"># Check if first row contains what should be headers\u003C/span>\n                first_row = table.find(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>)\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> first_row \u003Cspan class=\"hljs-keyword\">and\u003C/span> \u003Cspan class=\"hljs-built_in\">len\u003C/span>(first_row.find_all(\u003Cspan class=\"hljs-string\">'td'\u003C/span>)) > \u003Cspan class=\"hljs-number\">1\u003C/span>:\n                    issues.append(AccessibilityIssue(\n                        rule_id=\u003Cspan class=\"hljs-string\">'1.3.1'\u003C/span>,\n                        severity=\u003Cspan class=\"hljs-string\">'error'\u003C/span>,\n                        description=\u003Cspan class=\"hljs-string\">'Table missing header cells'\u003C/span>,\n                        element=\u003Cspan class=\"hljs-built_in\">str\u003C/span>(table)[:\u003Cspan class=\"hljs-number\">100\u003C/span>] + \u003Cspan class=\"hljs-string\">'...'\u003C/span>,\n                        line_number=i + \u003Cspan class=\"hljs-number\">1\u003C/span>,\n                        recommendation=\u003Cspan class=\"hljs-string\">'Use <th> elements for table headers'\u003C/span>,\n                        wcag_criterion=\u003Cspan class=\"hljs-string\">'1.3.1 Info and Relationships (Level A)'\u003C/span>\n                    ))\n            \n            \u003Cspan class=\"hljs-comment\"># Check for table caption\u003C/span>\n            caption = table.find(\u003Cspan class=\"hljs-string\">'caption'\u003C/span>)\n            rows = table.find_all(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>)\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-keyword\">not\u003C/span> caption \u003Cspan class=\"hljs-keyword\">and\u003C/span> \u003Cspan class=\"hljs-built_in\">len\u003C/span>(rows) > \u003Cspan class=\"hljs-number\">3\u003C/span>:\n                issues.append(AccessibilityIssue(\n                    rule_id=\u003Cspan class=\"hljs-string\">'1.3.1'\u003C/span>,\n                    severity=\u003Cspan class=\"hljs-string\">'warning'\u003C/span>,\n                    description=\u003Cspan class=\"hljs-string\">'Complex table missing caption'\u003C/span>,\n                    element=\u003Cspan class=\"hljs-built_in\">str\u003C/span>(table)[:\u003Cspan class=\"hljs-number\">100\u003C/span>] + \u003Cspan class=\"hljs-string\">'...'\u003C/span>,\n                    line_number=i + \u003Cspan class=\"hljs-number\">1\u003C/span>,\n                    recommendation=\u003Cspan class=\"hljs-string\">'Add <caption> element to describe table purpose'\u003C/span>,\n                    wcag_criterion=\u003Cspan class=\"hljs-string\">'1.3.1 Info and Relationships (Level A)'\u003C/span>\n                ))\n            \n            \u003Cspan class=\"hljs-comment\"># Check for scope attributes in complex tables\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-built_in\">len\u003C/span>(headers) > \u003Cspan class=\"hljs-number\">2\u003C/span> \u003Cspan class=\"hljs-keyword\">or\u003C/span> \u003Cspan class=\"hljs-built_in\">len\u003C/span>(rows) > \u003Cspan class=\"hljs-number\">5\u003C/span>:\n                headers_with_scope = [h \u003Cspan class=\"hljs-keyword\">for\u003C/span> h \u003Cspan class=\"hljs-keyword\">in\u003C/span> headers \u003Cspan class=\"hljs-keyword\">if\u003C/span> h.get(\u003Cspan class=\"hljs-string\">'scope'\u003C/span>)]\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-built_in\">len\u003C/span>(headers_with_scope) != \u003Cspan class=\"hljs-built_in\">len\u003C/span>(headers):\n                    issues.append(AccessibilityIssue(\n                        rule_id=\u003Cspan class=\"hljs-string\">'1.3.1'\u003C/span>,\n                        severity=\u003Cspan class=\"hljs-string\">'warning'\u003C/span>,\n                        description=\u003Cspan class=\"hljs-string\">'Complex table headers missing scope attributes'\u003C/span>,\n                        element=\u003Cspan class=\"hljs-built_in\">str\u003C/span>(table)[:\u003Cspan class=\"hljs-number\">100\u003C/span>] + \u003Cspan class=\"hljs-string\">'...'\u003C/span>,\n                        line_number=i + \u003Cspan class=\"hljs-number\">1\u003C/span>,\n                        recommendation=\u003Cspan class=\"hljs-string\">'Add scope="row" or scope="col" to table headers'\u003C/span>,\n                        wcag_criterion=\u003Cspan class=\"hljs-string\">'1.3.1 Info and Relationships (Level A)'\u003C/span>\n                    ))\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> issues\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">check_language_attributes\u003C/span>(\u003Cspan class=\"hljs-params\">self, soup: BeautifulSoup, file_path: \u003Cspan class=\"hljs-built_in\">str\u003C/span>\u003C/span>) -> \u003Cspan class=\"hljs-type\">List\u003C/span>[AccessibilityIssue]:\n        \u003Cspan class=\"hljs-string\">"""Check WCAG 3.1.1 - Language of Page"""\u003C/span>\n        issues = []\n        \n        html_tag = soup.find(\u003Cspan class=\"hljs-string\">'html'\u003C/span>)\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> html_tag \u003Cspan class=\"hljs-keyword\">and\u003C/span> \u003Cspan class=\"hljs-keyword\">not\u003C/span> html_tag.get(\u003Cspan class=\"hljs-string\">'lang'\u003C/span>):\n            issues.append(AccessibilityIssue(\n                rule_id=\u003Cspan class=\"hljs-string\">'3.1.1'\u003C/span>,\n                severity=\u003Cspan class=\"hljs-string\">'error'\u003C/span>,\n                description=\u003Cspan class=\"hljs-string\">'HTML element missing lang attribute'\u003C/span>,\n                element=\u003Cspan class=\"hljs-string\">'<html>'\u003C/span>,\n                line_number=\u003Cspan class=\"hljs-number\">1\u003C/span>,\n                recommendation=\u003Cspan class=\"hljs-string\">'Add lang="en" or appropriate language code to <html> element'\u003C/span>,\n                wcag_criterion=\u003Cspan class=\"hljs-string\">'3.1.1 Language of Page (Level A)'\u003C/span>\n            ))\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> issues\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">check_page_structure\u003C/span>(\u003Cspan class=\"hljs-params\">self, soup: BeautifulSoup, file_path: \u003Cspan class=\"hljs-built_in\">str\u003C/span>\u003C/span>) -> \u003Cspan class=\"hljs-type\">List\u003C/span>[AccessibilityIssue]:\n        \u003Cspan class=\"hljs-string\">"""Check for proper page landmarks and structure"""\u003C/span>\n        issues = []\n        \n        \u003Cspan class=\"hljs-comment\"># Check for main landmark\u003C/span>\n        main_element = soup.find(\u003Cspan class=\"hljs-string\">'main'\u003C/span>) \u003Cspan class=\"hljs-keyword\">or\u003C/span> soup.find(attrs={\u003Cspan class=\"hljs-string\">'role'\u003C/span>: \u003Cspan class=\"hljs-string\">'main'\u003C/span>})\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-keyword\">not\u003C/span> main_element:\n            issues.append(AccessibilityIssue(\n                rule_id=\u003Cspan class=\"hljs-string\">'2.4.1'\u003C/span>,\n                severity=\u003Cspan class=\"hljs-string\">'warning'\u003C/span>,\n                description=\u003Cspan class=\"hljs-string\">'Page missing main landmark'\u003C/span>,\n                element=\u003Cspan class=\"hljs-string\">'Document structure'\u003C/span>,\n                line_number=\u003Cspan class=\"hljs-number\">1\u003C/span>,\n                recommendation=\u003Cspan class=\"hljs-string\">'Add <main> element or role="main" to identify main content'\u003C/span>,\n                wcag_criterion=\u003Cspan class=\"hljs-string\">'2.4.1 Bypass Blocks (Level A)'\u003C/span>\n            ))\n        \n        \u003Cspan class=\"hljs-comment\"># Check for skip links\u003C/span>\n        skip_links = soup.find_all(\u003Cspan class=\"hljs-string\">'a'\u003C/span>, href=re.\u003Cspan class=\"hljs-built_in\">compile\u003C/span>(\u003Cspan class=\"hljs-string\">r'^#'\u003C/span>))\n        visible_skip_links = [link \u003Cspan class=\"hljs-keyword\">for\u003C/span> link \u003Cspan class=\"hljs-keyword\">in\u003C/span> skip_links \n                            \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-string\">'skip'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> link.get_text().lower() \u003Cspan class=\"hljs-keyword\">or\u003C/span> \u003Cspan class=\"hljs-string\">'main'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> link.get_text().lower()]\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-keyword\">not\u003C/span> visible_skip_links \u003Cspan class=\"hljs-keyword\">and\u003C/span> \u003Cspan class=\"hljs-built_in\">len\u003C/span>(soup.find_all([\u003Cspan class=\"hljs-string\">'nav'\u003C/span>, \u003Cspan class=\"hljs-string\">'header'\u003C/span>, \u003Cspan class=\"hljs-string\">'footer'\u003C/span>])) > \u003Cspan class=\"hljs-number\">1\u003C/span>:\n            issues.append(AccessibilityIssue(\n                rule_id=\u003Cspan class=\"hljs-string\">'2.4.1'\u003C/span>,\n                severity=\u003Cspan class=\"hljs-string\">'warning'\u003C/span>,\n                description=\u003Cspan class=\"hljs-string\">'Page may benefit from skip links'\u003C/span>,\n                element=\u003Cspan class=\"hljs-string\">'Document structure'\u003C/span>,\n                line_number=\u003Cspan class=\"hljs-number\">1\u003C/span>,\n                recommendation=\u003Cspan class=\"hljs-string\">'Add skip links to help users bypass repetitive content'\u003C/span>,\n                wcag_criterion=\u003Cspan class=\"hljs-string\">'2.4.1 Bypass Blocks (Level A)'\u003C/span>\n            ))\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> issues\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">check_form_accessibility\u003C/span>(\u003Cspan class=\"hljs-params\">self, soup: BeautifulSoup, file_path: \u003Cspan class=\"hljs-built_in\">str\u003C/span>\u003C/span>) -> \u003Cspan class=\"hljs-type\">List\u003C/span>[AccessibilityIssue]:\n        \u003Cspan class=\"hljs-string\">"""Check form accessibility if forms are present"""\u003C/span>\n        issues = []\n        \n        \u003Cspan class=\"hljs-comment\"># Check for form labels\u003C/span>\n        inputs = soup.find_all([\u003Cspan class=\"hljs-string\">'input'\u003C/span>, \u003Cspan class=\"hljs-string\">'select'\u003C/span>, \u003Cspan class=\"hljs-string\">'textarea'\u003C/span>])\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> i, input_element \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-built_in\">enumerate\u003C/span>(inputs):\n            input_type = input_element.get(\u003Cspan class=\"hljs-string\">'type'\u003C/span>, \u003Cspan class=\"hljs-string\">'text'\u003C/span>)\n            \n            \u003Cspan class=\"hljs-comment\"># Skip hidden inputs and buttons\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> input_type \u003Cspan class=\"hljs-keyword\">in\u003C/span> [\u003Cspan class=\"hljs-string\">'hidden'\u003C/span>, \u003Cspan class=\"hljs-string\">'submit'\u003C/span>, \u003Cspan class=\"hljs-string\">'button'\u003C/span>, \u003Cspan class=\"hljs-string\">'reset'\u003C/span>]:\n                \u003Cspan class=\"hljs-keyword\">continue\u003C/span>\n            \n            input_id = input_element.get(\u003Cspan class=\"hljs-string\">'id'\u003C/span>)\n            aria_label = input_element.get(\u003Cspan class=\"hljs-string\">'aria-label'\u003C/span>)\n            aria_labelledby = input_element.get(\u003Cspan class=\"hljs-string\">'aria-labelledby'\u003C/span>)\n            \n            \u003Cspan class=\"hljs-comment\"># Look for associated label\u003C/span>\n            label = \u003Cspan class=\"hljs-literal\">None\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> input_id:\n                label = soup.find(\u003Cspan class=\"hljs-string\">'label'\u003C/span>, {\u003Cspan class=\"hljs-string\">'for'\u003C/span>: input_id})\n            \n            \u003Cspan class=\"hljs-comment\"># Check if input has accessible name\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-keyword\">not\u003C/span> label \u003Cspan class=\"hljs-keyword\">and\u003C/span> \u003Cspan class=\"hljs-keyword\">not\u003C/span> aria_label \u003Cspan class=\"hljs-keyword\">and\u003C/span> \u003Cspan class=\"hljs-keyword\">not\u003C/span> aria_labelledby:\n                issues.append(AccessibilityIssue(\n                    rule_id=\u003Cspan class=\"hljs-string\">'4.1.2'\u003C/span>,\n                    severity=\u003Cspan class=\"hljs-string\">'error'\u003C/span>,\n                    description=\u003Cspan class=\"hljs-string\">'Form input missing accessible label'\u003C/span>,\n                    element=\u003Cspan class=\"hljs-built_in\">str\u003C/span>(input_element)[:\u003Cspan class=\"hljs-number\">100\u003C/span>] + \u003Cspan class=\"hljs-string\">'...'\u003C/span>,\n                    line_number=i + \u003Cspan class=\"hljs-number\">1\u003C/span>,\n                    recommendation=\u003Cspan class=\"hljs-string\">'Add <label> element or aria-label attribute'\u003C/span>,\n                    wcag_criterion=\u003Cspan class=\"hljs-string\">'4.1.2 Name, Role, Value (Level A)'\u003C/span>\n                ))\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> issues\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">generate_compliance_report\u003C/span>(\u003Cspan class=\"hljs-params\">self, issues: \u003Cspan class=\"hljs-type\">List\u003C/span>[AccessibilityIssue], file_path: \u003Cspan class=\"hljs-built_in\">str\u003C/span>\u003C/span>) -> \u003Cspan class=\"hljs-type\">Dict\u003C/span>:\n        \u003Cspan class=\"hljs-string\">"""Generate comprehensive compliance report"""\u003C/span>\n        \n        \u003Cspan class=\"hljs-comment\"># Categorize issues by WCAG level and severity\u003C/span>\n        level_a_issues = [issue \u003Cspan class=\"hljs-keyword\">for\u003C/span> issue \u003Cspan class=\"hljs-keyword\">in\u003C/span> issues \u003Cspan class=\"hljs-keyword\">if\u003C/span> self.get_wcag_level(issue.rule_id) == \u003Cspan class=\"hljs-string\">'A'\u003C/span>]\n        level_aa_issues = [issue \u003Cspan class=\"hljs-keyword\">for\u003C/span> issue \u003Cspan class=\"hljs-keyword\">in\u003C/span> issues \u003Cspan class=\"hljs-keyword\">if\u003C/span> self.get_wcag_level(issue.rule_id) == \u003Cspan class=\"hljs-string\">'AA'\u003C/span>]\n        level_aaa_issues = [issue \u003Cspan class=\"hljs-keyword\">for\u003C/span> issue \u003Cspan class=\"hljs-keyword\">in\u003C/span> issues \u003Cspan class=\"hljs-keyword\">if\u003C/span> self.get_wcag_level(issue.rule_id) == \u003Cspan class=\"hljs-string\">'AAA'\u003C/span>]\n        \n        error_issues = [issue \u003Cspan class=\"hljs-keyword\">for\u003C/span> issue \u003Cspan class=\"hljs-keyword\">in\u003C/span> issues \u003Cspan class=\"hljs-keyword\">if\u003C/span> issue.severity == \u003Cspan class=\"hljs-string\">'error'\u003C/span>]\n        warning_issues = [issue \u003Cspan class=\"hljs-keyword\">for\u003C/span> issue \u003Cspan class=\"hljs-keyword\">in\u003C/span> issues \u003Cspan class=\"hljs-keyword\">if\u003C/span> issue.severity == \u003Cspan class=\"hljs-string\">'warning'\u003C/span>]\n        \n        \u003Cspan class=\"hljs-comment\"># Calculate compliance score\u003C/span>\n        total_checks = \u003Cspan class=\"hljs-built_in\">len\u003C/span>(self.wcag_rules)\n        failed_checks = \u003Cspan class=\"hljs-built_in\">len\u003C/span>(\u003Cspan class=\"hljs-built_in\">set\u003C/span>(issue.rule_id \u003Cspan class=\"hljs-keyword\">for\u003C/span> issue \u003Cspan class=\"hljs-keyword\">in\u003C/span> error_issues))\n        compliance_score = \u003Cspan class=\"hljs-built_in\">max\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, (total_checks - failed_checks) / total_checks * \u003Cspan class=\"hljs-number\">100\u003C/span>)\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-string\">'file'\u003C/span>: file_path,\n            \u003Cspan class=\"hljs-string\">'compliance_score'\u003C/span>: \u003Cspan class=\"hljs-built_in\">round\u003C/span>(compliance_score, \u003Cspan class=\"hljs-number\">2\u003C/span>),\n            \u003Cspan class=\"hljs-string\">'summary'\u003C/span>: {\n                \u003Cspan class=\"hljs-string\">'total_issues'\u003C/span>: \u003Cspan class=\"hljs-built_in\">len\u003C/span>(issues),\n                \u003Cspan class=\"hljs-string\">'errors'\u003C/span>: \u003Cspan class=\"hljs-built_in\">len\u003C/span>(error_issues),\n                \u003Cspan class=\"hljs-string\">'warnings'\u003C/span>: \u003Cspan class=\"hljs-built_in\">len\u003C/span>(warning_issues),\n                \u003Cspan class=\"hljs-string\">'level_a_issues'\u003C/span>: \u003Cspan class=\"hljs-built_in\">len\u003C/span>(level_a_issues),\n                \u003Cspan class=\"hljs-string\">'level_aa_issues'\u003C/span>: \u003Cspan class=\"hljs-built_in\">len\u003C/span>(level_aa_issues),\n                \u003Cspan class=\"hljs-string\">'level_aaa_issues'\u003C/span>: \u003Cspan class=\"hljs-built_in\">len\u003C/span>(level_aaa_issues)\n            },\n            \u003Cspan class=\"hljs-string\">'issues'\u003C/span>: [\n                {\n                    \u003Cspan class=\"hljs-string\">'rule_id'\u003C/span>: issue.rule_id,\n                    \u003Cspan class=\"hljs-string\">'severity'\u003C/span>: issue.severity,\n                    \u003Cspan class=\"hljs-string\">'description'\u003C/span>: issue.description,\n                    \u003Cspan class=\"hljs-string\">'element'\u003C/span>: issue.element,\n                    \u003Cspan class=\"hljs-string\">'recommendation'\u003C/span>: issue.recommendation,\n                    \u003Cspan class=\"hljs-string\">'wcag_criterion'\u003C/span>: issue.wcag_criterion\n                } \u003Cspan class=\"hljs-keyword\">for\u003C/span> issue \u003Cspan class=\"hljs-keyword\">in\u003C/span> issues\n            ],\n            \u003Cspan class=\"hljs-string\">'compliance_status'\u003C/span>: {\n                \u003Cspan class=\"hljs-string\">'level_a'\u003C/span>: \u003Cspan class=\"hljs-built_in\">len\u003C/span>(level_a_issues) == \u003Cspan class=\"hljs-number\">0\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'level_aa'\u003C/span>: \u003Cspan class=\"hljs-built_in\">len\u003C/span>(level_a_issues + level_aa_issues) == \u003Cspan class=\"hljs-number\">0\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'level_aaa'\u003C/span>: \u003Cspan class=\"hljs-built_in\">len\u003C/span>(issues) == \u003Cspan class=\"hljs-number\">0\u003C/span>\n            }\n        }\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">get_wcag_level\u003C/span>(\u003Cspan class=\"hljs-params\">self, rule_id: \u003Cspan class=\"hljs-built_in\">str\u003C/span>\u003C/span>) -> \u003Cspan class=\"hljs-built_in\">str\u003C/span>:\n        \u003Cspan class=\"hljs-string\">"""Get WCAG level for a given rule"""\u003C/span>\n        rule = self.wcag_rules.get(rule_id)\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> rule[\u003Cspan class=\"hljs-string\">'level'\u003C/span>] \u003Cspan class=\"hljs-keyword\">if\u003C/span> rule \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-string\">'A'\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"># Usage example\u003C/span>\n\u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">validate_markdown_accessibility\u003C/span>(\u003Cspan class=\"hljs-params\">file_path: \u003Cspan class=\"hljs-built_in\">str\u003C/span>\u003C/span>) -> \u003Cspan class=\"hljs-type\">Dict\u003C/span>:\n    \u003Cspan class=\"hljs-string\">"""Validate a single markdown file for accessibility compliance"""\u003C/span>\n    checker = WCAGComplianceChecker(wcag_level=\u003Cspan class=\"hljs-string\">'AA'\u003C/span>)\n    \n    \u003Cspan class=\"hljs-comment\"># Convert markdown to HTML (simplified - use your actual conversion process)\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">with\u003C/span> \u003Cspan class=\"hljs-built_in\">open\u003C/span>(file_path, \u003Cspan class=\"hljs-string\">'r'\u003C/span>) \u003Cspan class=\"hljs-keyword\">as\u003C/span> f:\n        content = f.read()\n    \n    \u003Cspan class=\"hljs-comment\"># You would use your actual markdown processor here\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">import\u003C/span> markdown\n    html_content = markdown.markdown(content)\n    \n    \u003Cspan class=\"hljs-comment\"># Add basic HTML structure\u003C/span>\n    full_html = \u003Cspan class=\"hljs-string\">f"""\n    <!DOCTYPE html>\n    <html lang="en">\n    <head><title>Test Document</title></head>\n    <body><main>\u003Cspan class=\"hljs-subst\">{html_content}\u003C/span></main></body>\n    </html>\n    """\u003C/span>\n    \n    \u003Cspan class=\"hljs-comment\"># Validate accessibility\u003C/span>\n    issues = checker.validate_markdown_file(file_path, full_html)\n    \n    \u003Cspan class=\"hljs-comment\"># Generate report\u003C/span>\n    report = checker.generate_compliance_report(issues, file_path)\n    \n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> report\n\n\u003Cspan class=\"hljs-keyword\">if\u003C/span> __name__ == \u003Cspan class=\"hljs-string\">"__main__"\u003C/span>:\n    \u003Cspan class=\"hljs-keyword\">import\u003C/span> sys\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-built_in\">len\u003C/span>(sys.argv) > \u003Cspan class=\"hljs-number\">1\u003C/span>:\n        file_path = sys.argv[\u003Cspan class=\"hljs-number\">1\u003C/span>]\n        report = validate_markdown_accessibility(file_path)\n        \n        \u003Cspan class=\"hljs-built_in\">print\u003C/span>(\u003Cspan class=\"hljs-string\">f"Accessibility Report for \u003Cspan class=\"hljs-subst\">{file_path}\u003C/span>"\u003C/span>)\n        \u003Cspan class=\"hljs-built_in\">print\u003C/span>(\u003Cspan class=\"hljs-string\">f"Compliance Score: \u003Cspan class=\"hljs-subst\">{report[\u003Cspan class=\"hljs-string\">'compliance_score'\u003C/span>]}\u003C/span>%"\u003C/span>)\n        \u003Cspan class=\"hljs-built_in\">print\u003C/span>(\u003Cspan class=\"hljs-string\">f"Total Issues: \u003Cspan class=\"hljs-subst\">{report[\u003Cspan class=\"hljs-string\">'summary'\u003C/span>][\u003Cspan class=\"hljs-string\">'total_issues'\u003C/span>]}\u003C/span>"\u003C/span>)\n        \u003Cspan class=\"hljs-built_in\">print\u003C/span>(\u003Cspan class=\"hljs-string\">f"Errors: \u003Cspan class=\"hljs-subst\">{report[\u003Cspan class=\"hljs-string\">'summary'\u003C/span>][\u003Cspan class=\"hljs-string\">'errors'\u003C/span>]}\u003C/span>"\u003C/span>)\n        \u003Cspan class=\"hljs-built_in\">print\u003C/span>(\u003Cspan class=\"hljs-string\">f"Warnings: \u003Cspan class=\"hljs-subst\">{report[\u003Cspan class=\"hljs-string\">'summary'\u003C/span>][\u003Cspan class=\"hljs-string\">'warnings'\u003C/span>]}\u003C/span>"\u003C/span>)\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> report[\u003Cspan class=\"hljs-string\">'issues'\u003C/span>]:\n            \u003Cspan class=\"hljs-built_in\">print\u003C/span>(\u003Cspan class=\"hljs-string\">"\\nIssues Found:"\u003C/span>)\n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> issue \u003Cspan class=\"hljs-keyword\">in\u003C/span> report[\u003Cspan class=\"hljs-string\">'issues'\u003C/span>][:\u003Cspan class=\"hljs-number\">5\u003C/span>]:  \u003Cspan class=\"hljs-comment\"># Show first 5 issues\u003C/span>\n                \u003Cspan class=\"hljs-built_in\">print\u003C/span>(\u003Cspan class=\"hljs-string\">f"- \u003Cspan class=\"hljs-subst\">{issue[\u003Cspan class=\"hljs-string\">'severity'\u003C/span>].upper()}\u003C/span>: \u003Cspan class=\"hljs-subst\">{issue[\u003Cspan class=\"hljs-string\">'description'\u003C/span>]}\u003C/span>"\u003C/span>)\n                \u003Cspan class=\"hljs-built_in\">print\u003C/span>(\u003Cspan class=\"hljs-string\">f"  Recommendation: \u003Cspan class=\"hljs-subst\">{issue[\u003Cspan class=\"hljs-string\">'recommendation'\u003C/span>]}\u003C/span>"\u003C/span>)\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-documentation-systems\">Integration with Documentation Systems\u003C/h2>\n\u003Cp>Accessibility features integrate seamlessly with comprehensive documentation workflows. When combined with \u003Ca href=\"/blog/markdown-tables-advanced-features-and-styling-guide\">table accessibility and data presentation techniques\u003C/a>, accessible design principles ensure that complex data structures remain navigable and understandable for users with assistive technologies, creating inclusive information architectures that serve diverse user needs.\u003C/p>\n\u003Cp>For sophisticated content management, accessibility systems work effectively with \u003Ca href=\"/blog/markdown-automation-workflows-complete-guide\">automation workflows and testing integration\u003C/a> to ensure that accessibility requirements are validated continuously as content is created and updated, preventing regressions and maintaining compliance standards across large documentation repositories.\u003C/p>\n\u003Cp>When building comprehensive content architectures, accessibility complements \u003Ca href=\"/blog/markdown-link-management-cross-referencing-complete-guide\">link management and cross-referencing systems\u003C/a> by ensuring that navigation aids and content relationships are properly communicated to screen readers and other assistive technologies, creating cohesive user experiences that support independent content exploration.\u003C/p>\n\u003Ch2 id=\"advanced-accessibility-techniques\">Advanced Accessibility Techniques\u003C/h2>\n\u003Ch3 id=\"aria-integration-in-markdown\">ARIA Integration in Markdown\u003C/h3>\n\u003Cp>Implementing ARIA (Accessible Rich Internet Applications) patterns in markdown-generated content:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Advanced ARIA Implementation\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Custom Landmarks and Roles\u003C/span>\n\nWhen your markdown generates complex layouts, use ARIA to enhance structure:\n\n\u003Cspan class=\"hljs-code\">```html\n<!-- In your markdown processor templates -->\n<nav role="navigation" aria-label="Main navigation">\n  <!-- Navigation content from markdown -->\n</nav>\n\n<section role="search" aria-label="Documentation search">\n  <!-- Search functionality -->\n</section>\n\n<aside role="complementary" aria-label="Related topics">\n  <!-- Related content from cross-references -->\n</aside>\n```\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"progressive-enhancement-for-accessibility\">Progressive Enhancement for Accessibility\u003C/h2>\n\u003Cp>Build accessibility into your markdown processing pipeline:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// Enhanced markdown processor with accessibility features\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">AccessibleMarkdownProcessor\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\">renderer\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> marked.\u003Cspan class=\"hljs-title class_\">Renderer\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">configureAccessibleRendering\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">configureAccessibleRendering\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Enhanced heading rendering with landmarks\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">renderer\u003C/span>.\u003Cspan class=\"hljs-property\">heading\u003C/span> = \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">text, level, raw\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> escapedText = text.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>().\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/[^\\w]+/g\u003C/span>, \u003Cspan class=\"hljs-string\">'-'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> id = \u003Cspan class=\"hljs-string\">`heading-\u003Cspan class=\"hljs-subst\">${escapedText}\u003C/span>`\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n                <h\u003Cspan class=\"hljs-subst\">${level}\u003C/span> id="\u003Cspan class=\"hljs-subst\">${id}\u003C/span>" tabindex="-1">\n                    \u003Cspan class=\"hljs-subst\">${text}\u003C/span>\n                    <a href="#\u003Cspan class=\"hljs-subst\">${id}\u003C/span>" class="header-anchor" aria-label="Permalink to \u003Cspan class=\"hljs-subst\">${text}\u003C/span>" title="Permalink">\n                        <span aria-hidden="true">#</span>\n                    </a>\n                </h\u003Cspan class=\"hljs-subst\">${level}\u003C/span>>\n            `\u003C/span>;\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Enhanced image rendering with better alt text handling\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">renderer\u003C/span>.\u003Cspan class=\"hljs-property\">image\u003C/span> = \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">href, title, text\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> isDecorative = text === \u003Cspan class=\"hljs-string\">''\u003C/span> || text === \u003Cspan class=\"hljs-string\">'decorative'\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> alt = isDecorative ? \u003Cspan class=\"hljs-string\">''\u003C/span> : text;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> titleAttr = title ? \u003Cspan class=\"hljs-string\">` title="\u003Cspan class=\"hljs-subst\">${title}\u003C/span>"`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (isDecorative) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`<img src="\u003Cspan class=\"hljs-subst\">${href}\u003C/span>" alt=""\u003Cspan class=\"hljs-subst\">${titleAttr}\u003C/span> role="presentation">`\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`<img src="\u003Cspan class=\"hljs-subst\">${href}\u003C/span>" alt="\u003Cspan class=\"hljs-subst\">${alt}\u003C/span>"\u003Cspan class=\"hljs-subst\">${titleAttr}\u003C/span>>`\u003C/span>;\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Enhanced link rendering with better context\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">renderer\u003C/span>.\u003Cspan class=\"hljs-property\">link\u003C/span> = \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">href, title, text\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> isExternal = href.\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'http'\u003C/span>) && !href.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">location\u003C/span>.\u003Cspan class=\"hljs-property\">hostname\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> titleAttr = title ? \u003Cspan class=\"hljs-string\">` title="\u003Cspan class=\"hljs-subst\">${title}\u003C/span>"`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> externalAttr = isExternal ? \u003Cspan class=\"hljs-string\">' rel="noopener noreferrer" target="_blank"'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> ariaLabel = isExternal ? \u003Cspan class=\"hljs-string\">` aria-label="\u003Cspan class=\"hljs-subst\">${text}\u003C/span> (opens in new window)"`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`<a href="\u003Cspan class=\"hljs-subst\">${href}\u003C/span>"\u003Cspan class=\"hljs-subst\">${titleAttr}\u003C/span>\u003Cspan class=\"hljs-subst\">${externalAttr}\u003C/span>\u003Cspan class=\"hljs-subst\">${ariaLabel}\u003C/span>>\u003Cspan class=\"hljs-subst\">${text}\u003C/span>\u003Cspan class=\"hljs-subst\">${isExternal ? \u003Cspan class=\"hljs-string\">' <span aria-hidden="true">↗</span>'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span></a>`\u003C/span>;\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Enhanced table rendering with accessibility features\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">renderer\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span> = \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">header, body\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n                <div class="table-container" role="region" aria-label="Data table" tabindex="0">\n                    <table>\n                        <thead>\u003Cspan class=\"hljs-subst\">${header}\u003C/span></thead>\n                        <tbody>\u003Cspan class=\"hljs-subst\">${body}\u003C/span></tbody>\n                    </table>\n                </div>\n            `\u003C/span>;\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Enhanced code block rendering with copy functionality\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">renderer\u003C/span>.\u003Cspan class=\"hljs-property\">code\u003C/span> = \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">code, language, escaped\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> langClass = language ? \u003Cspan class=\"hljs-string\">` class="language-\u003Cspan class=\"hljs-subst\">${language}\u003C/span>"`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> copyButton = \u003Cspan class=\"hljs-string\">`\n                <button class="copy-code" \n                        aria-label="Copy code to clipboard"\n                        data-code="\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-built_in\">encodeURIComponent\u003C/span>(code)}\u003C/span>">\n                    <span aria-hidden="true">📋</span>\n                    Copy\n                </button>\n            `\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n                <div class="code-block" role="region" aria-label="Code example\u003Cspan class=\"hljs-subst\">${language ? \u003Cspan class=\"hljs-string\">` in \u003Cspan class=\"hljs-subst\">${language}\u003C/span>`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>">\n                    \u003Cspan class=\"hljs-subst\">${copyButton}\u003C/span>\n                    <pre><code\u003Cspan class=\"hljs-subst\">${langClass}\u003C/span>>\u003Cspan class=\"hljs-subst\">${escaped ? code : \u003Cspan class=\"hljs-built_in\">escape\u003C/span>(code)}\u003C/span></code></pre>\n                </div>\n            `\u003C/span>;\n        };\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"screen-reader-navigation-optimization\">Screen Reader Navigation Optimization\u003C/h2>\n\u003Cp>Advanced techniques for optimizing screen reader navigation:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Screen Reader Navigation Patterns\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Descriptive Navigation Structure\u003C/span>\n\nCreate clear navigation hierarchies that work well with screen readers:\n\n\u003Cspan class=\"hljs-code\">```markdown\n<!-- Main document structure -->\n# User Guide (Main heading)\n\n## Getting Started (Primary section)\n### Installation (Sub-section)\n#### System Requirements (Detail level)\n#### Download Instructions (Detail level)\n### Configuration (Sub-section)\n#### Basic Setup (Detail level)\n#### Advanced Options (Detail level)\n\n## Advanced Features (Primary section)\n### Integration Options (Sub-section)\n### Customization (Sub-section)\n\n## Troubleshooting (Primary section)\n### Common Issues (Sub-section)\n### Support Resources (Sub-section)\n```\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"content-landmarks-and-skip-links\">Content Landmarks and Skip Links\u003C/h2>\n\u003Cp>Implement proper landmark navigation:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Skip links at the beginning of content -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"skip-links"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">a\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"#main-content"\u003C/span>>\u003C/span>Skip to main content\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">a\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"#navigation"\u003C/span>>\u003C/span>Skip to navigation\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">a\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"#search"\u003C/span>>\u003C/span>Skip to search\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Semantic document structure -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">header\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"banner"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">nav\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"navigation"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Main navigation"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-comment\"><!-- Navigation menu -->\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">nav\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">header\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">main\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"main"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"main-content"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-comment\"><!-- Main content from markdown -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">main\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">aside\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"complementary"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Table of contents"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-comment\"><!-- Table of contents -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">aside\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">footer\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"contentinfo"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-comment\"><!-- Footer information -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">footer\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"focus-management-and-keyboard-navigation\">Focus Management and Keyboard Navigation\u003C/h2>\n\u003Cp>Ensure proper focus management for keyboard users:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Visual focus indicators */\u003C/span>\n\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#0066cc\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\">/* Skip links styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.skip-links\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: -\u003Cspan class=\"hljs-number\">40px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#0066cc\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">1000\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.skip-links\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Focus management for dynamic content */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.content-updated\u003C/span> {\n    focus: outline;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Accessible button states */\u003C/span>\n\u003Cspan class=\"hljs-selector-tag\">button\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>,\n\u003Cspan class=\"hljs-selector-tag\">button\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#0052a3\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-tag\">button\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:disabled\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">0.5\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: not-allowed;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"troubleshooting-common-accessibility-issues\">Troubleshooting Common Accessibility Issues\u003C/h2>\n\u003Ch3 id=\"screen-reader-compatibility-problems\">Screen Reader Compatibility Problems\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Content not being announced properly by screen readers\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\"><!-- Problematic patterns -->\nClick [\u003Cspan class=\"hljs-string\">here\u003C/span>](\u003Cspan class=\"hljs-link\">https://example.com\u003C/span>) to download.\nSee the image below. ![](\u003Cspan class=\"hljs-link\">chart.png\u003C/span>)\n[\u003Cspan class=\"hljs-string\">More info\u003C/span>](\u003Cspan class=\"hljs-link\">https://example.com\u003C/span>)\n\n<!-- Improved patterns -->\n[\u003Cspan class=\"hljs-string\">Download the accessibility guide (PDF, 2.3 MB)\u003C/span>](\u003Cspan class=\"hljs-link\">https://example.com/guide.pdf\u003C/span>)\nThe following chart shows quarterly sales data:\n![\u003Cspan class=\"hljs-string\">Bar chart displaying Q1-Q4 sales figures with 23% overall growth trend\u003C/span>](\u003Cspan class=\"hljs-link\">chart.png\u003C/span>)\n[\u003Cspan class=\"hljs-string\">Learn more about WCAG 2.1 compliance requirements\u003C/span>](\u003Cspan class=\"hljs-link\">https://example.com/wcag\u003C/span>)\n\u003C/code>\u003C/pre>\u003Ch3 id=\"keyboard-navigation-issues\">Keyboard Navigation Issues\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Content not accessible via keyboard navigation\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// Enhance markdown-generated content for keyboard accessibility\u003C/span>\n\u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">enhanceKeyboardAccessibility\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-comment\">// Add keyboard event handlers to interactive elements\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'[role="button"], .interactive'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">element\u003C/span> =>\u003C/span> {\n        element.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'keydown'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'Enter'\u003C/span> || e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">' '\u003C/span>) {\n                e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                element.\u003Cspan class=\"hljs-title function_\">click\u003C/span>();\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Ensure focusable elements have tabindex\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!element.\u003Cspan class=\"hljs-title function_\">hasAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'tabindex'\u003C/span>)) {\n            element.\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-comment\">// Manage focus for dynamic content updates\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            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (mutation.\u003Cspan class=\"hljs-property\">addedNodes\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> newContent = mutation.\u003Cspan class=\"hljs-property\">addedNodes\u003C/span>[\u003Cspan class=\"hljs-number\">0\u003C/span>];\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (newContent.\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-comment\">// Focus first heading in new content\u003C/span>\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> firstHeading = newContent.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'h1, h2, h3, h4, h5, h6'\u003C/span>);\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (firstHeading) {\n                        firstHeading.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'tabindex'\u003C/span>, \u003Cspan class=\"hljs-string\">'-1'\u003C/span>);\n                        firstHeading.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\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\u003C/code>\u003C/pre>\u003Ch3 id=\"color-and-contrast-issues\">Color and Contrast Issues\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Insufficient color contrast or color-only information\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Ensure sufficient color contrast */\u003C/span>\n\u003Cspan class=\"hljs-selector-pseudo\">:root\u003C/span> {\n    \u003Cspan class=\"hljs-attr\">--text-color\u003C/span>: \u003Cspan class=\"hljs-number\">#212529\u003C/span>;           \u003Cspan class=\"hljs-comment\">/* 16.75:1 contrast ratio on white */\u003C/span>\n    \u003Cspan class=\"hljs-attr\">--link-color\u003C/span>: \u003Cspan class=\"hljs-number\">#0056b3\u003C/span>;           \u003Cspan class=\"hljs-comment\">/* 7.03:1 contrast ratio */\u003C/span>\n    \u003Cspan class=\"hljs-attr\">--link-hover\u003C/span>: \u003Cspan class=\"hljs-number\">#004085\u003C/span>;           \u003Cspan class=\"hljs-comment\">/* 9.26:1 contrast ratio */\u003C/span>\n    \u003Cspan class=\"hljs-attr\">--success-color\u003C/span>: \u003Cspan class=\"hljs-number\">#155724\u003C/span>;        \u003Cspan class=\"hljs-comment\">/* 7.47:1 contrast ratio */\u003C/span>\n    \u003Cspan class=\"hljs-attr\">--warning-color\u003C/span>: \u003Cspan class=\"hljs-number\">#856404\u003C/span>;        \u003Cspan class=\"hljs-comment\">/* 5.14:1 contrast ratio */\u003C/span>\n    \u003Cspan class=\"hljs-attr\">--error-color\u003C/span>: \u003Cspan class=\"hljs-number\">#721c24\u003C/span>;          \u003Cspan class=\"hljs-comment\">/* 8.66:1 contrast ratio */\u003C/span>\n}\n\n\u003Cspan class=\"hljs-comment\">/* Don't rely solely on color for meaning */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.status-indicator\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">''\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: inline-block;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">1em\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">1em\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin-right\u003C/span>: \u003Cspan class=\"hljs-number\">0.5em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.status-success\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'✓'\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--success-color);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.status-warning\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'⚠'\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--warning-color);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.status-error\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'✗'\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--error-color);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Focus indicators for dark themes */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-color-scheme\u003C/span>: dark) {\n    \u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">outline-color\u003C/span>: \u003Cspan class=\"hljs-number\">#66b3ff\u003C/span>;\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Advanced Markdown accessibility and screen reader support represents a comprehensive approach to inclusive content creation that ensures documentation and technical content serves users with diverse abilities and assistive technology requirements. By implementing semantic markup strategies, comprehensive testing frameworks, and thoughtful design patterns, content creators can build documentation ecosystems that provide equitable access to information while maintaining the efficiency and maintainability that makes Markdown such an effective content creation format.\u003C/p>\n\u003Cp>The key to successful accessibility implementation lies in understanding that accessibility benefits all users, not just those with disabilities. Clear heading structures, descriptive link text, and well-organized content improve the experience for everyone while ensuring compliance with legal requirements and ethical standards for inclusive design. Whether you're building technical documentation, educational content, or public information resources, the techniques covered in this guide provide the foundation for creating accessible, sustainable content that serves diverse user needs.\u003C/p>\n\u003Cp>Remember to implement accessibility testing as part of your content creation workflow, regularly validate your accessibility improvements with actual users of assistive technologies, and stay current with evolving accessibility standards and best practices. With proper implementation of accessibility principles and testing frameworks, your Markdown-based content can achieve excellent accessibility compliance while delivering exceptional user experiences that demonstrate your commitment to inclusive design and universal access to information.\u003C/p>\n",[15,19,22,25,28,31,34,37,40,43,46,49,52,55,58,61],{"id":16,"text":17,"level":18},"why-master-markdown-accessibility","Why Master Markdown Accessibility?",2,{"id":20,"text":21,"level":18},"foundation-accessibility-principles","Foundation Accessibility Principles",{"id":23,"text":24,"level":18},"descriptive-link-text","Descriptive Link Text",{"id":26,"text":27,"level":18},"alternative-text-for-images","Alternative Text for Images",{"id":29,"text":30,"level":18},"list-structure-for-screen-readers","List Structure for Screen Readers",{"id":32,"text":33,"level":18},"functional-images","Functional Images",{"id":35,"text":36,"level":18},"complex-images-with-extended-descriptions","Complex Images with Extended Descriptions",{"id":38,"text":39,"level":18},"decorative-images","Decorative Images",{"id":41,"text":42,"level":18},"integration-with-documentation-systems","Integration with Documentation Systems",{"id":44,"text":45,"level":18},"advanced-accessibility-techniques","Advanced Accessibility Techniques",{"id":47,"text":48,"level":18},"progressive-enhancement-for-accessibility","Progressive Enhancement for Accessibility",{"id":50,"text":51,"level":18},"screen-reader-navigation-optimization","Screen Reader Navigation Optimization",{"id":53,"text":54,"level":18},"content-landmarks-and-skip-links","Content Landmarks and Skip Links",{"id":56,"text":57,"level":18},"focus-management-and-keyboard-navigation","Focus Management and Keyboard Navigation",{"id":59,"text":60,"level":18},"troubleshooting-common-accessibility-issues","Troubleshooting Common Accessibility Issues",{"id":62,"text":63,"level":18},"conclusion","Conclusion",[],[66,74,82],{"slug":67,"title":68,"description":69,"excerpt":70,"date":71,"category":9,"author":10,"keywords":72,"readingMinutes":73},"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":75,"title":76,"description":77,"excerpt":78,"date":79,"category":9,"author":10,"keywords":80,"readingMinutes":81},"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","markdown table accessibility, screen reader tables, accessible markdown, aria labels markdown, wcag compliance markdown, inclusive design tables, semantic table markup, assistive technology markdown",29,{"slug":83,"title":84,"description":85,"excerpt":86,"date":87,"category":9,"author":10,"keywords":88,"readingMinutes":89},"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,1792184945053]