[{"data":1,"prerenderedAt":66},["Reactive",2],{"blog-post-markdown-accessibility-complete-guide":3},{"slug":4,"title":5,"description":6,"excerpt":7,"date":8,"category":9,"author":10,"keywords":11,"readingMinutes":12,"html":13,"headings":14,"tools":40,"related":41},"markdown-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","Tutorial","Matthew Rathbone","markdown accessibility, WCAG compliance markdown, accessible documentation, inclusive content markdown, assistive technology markdown, screen reader markdown, semantic markup markdown, accessibility testing markdown",32,"\u003Cp>Advanced Markdown accessibility and WCAG compliance enable the creation of inclusive documentation that serves users with diverse abilities and assistive technology requirements. By implementing comprehensive accessibility strategies, semantic markup patterns, and universal design principles, content creators can build documentation ecosystems that provide equal access to information while maintaining the simplicity and efficiency that makes Markdown an effective content creation format.\u003C/p>\n\u003Ch2 id=\"why-master-markdown-accessibility-and-wcag-compliance\">Why Master Markdown Accessibility and WCAG Compliance?\u003C/h2>\n\u003Cp>Professional accessibility implementation provides essential benefits for inclusive content creation:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Legal Compliance\u003C/strong>: Meet WCAG 2.1 AA standards and accessibility legislation requirements across jurisdictions\u003C/li>\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>Assistive Technology Support\u003C/strong>: Optimize content for screen readers, voice control, and other assistive devices\u003C/li>\n\u003Cli>\u003Cstrong>SEO Benefits\u003C/strong>: Semantic markup and accessibility improvements enhance search engine optimization\u003C/li>\n\u003Cli>\u003Cstrong>Quality Enhancement\u003C/strong>: Accessible design patterns improve usability for all users, not just those with disabilities\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"foundation-accessibility-principles\">Foundation Accessibility Principles\u003C/h2>\n\u003Ch3 id=\"wcag-21-compliance-framework\">WCAG 2.1 Compliance Framework\u003C/h3>\n\u003Cp>Understanding the four principles of web accessibility and their implementation in Markdown:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># WCAG 2.1 Principles in Markdown Context\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Principle 1: Perceivable\u003C/span>\nInformation must be presentable in ways users can perceive.\n\n\u003Cspan class=\"hljs-section\">### Text Alternatives for Images\u003C/span>\n\u003Cspan class=\"hljs-code\">```markdown\n<!-- Accessible image with descriptive alt text -->\n![Screenshot showing the main navigation menu with File, Edit, and View options highlighted in blue](navigation-screenshot.png)\n\n<!-- Decorative image that should be ignored by screen readers -->\n![](decorative-border.png)\n\n<!-- Complex image with detailed description -->\n![Chart showing quarterly sales data](sales-chart.png "Detailed description: Bar chart displays Q1-Q4 sales with Q3 showing highest performance at $2.3M, Q1 at $1.8M, Q2 at $2.1M, and Q4 at $1.9M")\n```\u003C/span>\n\n\u003Cspan class=\"hljs-section\">### Meaningful Content Structure\u003C/span>\n\u003Cspan class=\"hljs-code\">```markdown\n<!-- Logical heading hierarchy -->\n# Main Document Title (h1)\n## Primary Section (h2)\n### Subsection (h3)\n#### Detail Section (h4)\n\n<!-- Meaningful list structure -->\n## Installation Steps\n1. Download the installer package\n2. Run the installer with administrator privileges\n3. Follow the setup wizard prompts\n4. Restart your system to complete installation\n\n## Feature List\n- **Core Features**: Essential functionality for basic usage\n- **Advanced Features**: Extended capabilities for power users\n- **Experimental Features**: Beta functionality for early adopters\n```\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Principle 2: Operable\u003C/span>\nInterface components must be operable.\n\n\u003Cspan class=\"hljs-section\">### Keyboard Navigation Support\u003C/span>\n\u003Cspan class=\"hljs-code\">```markdown\n<!-- Accessible link text -->\n<!-- Bad: Generic link text -->\n[Click here](download-page.html) for downloads.\n\n<!-- Good: Descriptive link text -->\n[Download the user manual PDF (2.3 MB)](user-manual.pdf)\n\n<!-- Link with context -->\nRead more about [accessibility testing procedures in our development guide](dev-guide.html#accessibility-testing).\n```\u003C/span>\n\n\u003Cspan class=\"hljs-section\">### Focus Management\u003C/span>\n\u003Cspan class=\"hljs-code\">```html\n<!-- In generated HTML, ensure focus indicators are visible -->\n<style>\n/* Ensure focus indicators are clearly visible */\na:focus {\n    outline: 2px solid #005fcc;\n    outline-offset: 2px;\n    background-color: #fffbf0;\n}\n\n/* Skip navigation link for keyboard users */\n.skip-link {\n    position: absolute;\n    top: -40px;\n    left: 6px;\n    background: #000;\n    color: #fff;\n    padding: 8px;\n    text-decoration: none;\n    z-index: 1000;\n}\n\n.skip-link:focus {\n    top: 6px;\n}\n</style>\n```\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Principle 3: Understandable\u003C/span>\nInformation and UI operation must be understandable.\n\n\u003Cspan class=\"hljs-section\">### Clear Language and Structure\u003C/span>\n\u003Cspan class=\"hljs-code\">```markdown\n<!-- Use clear, simple language -->\n## How to Create a New Project\n\nTo create a new project:\n\n1. **Open the application**\n   - Double-click the desktop icon, or\n   - Press Ctrl+Alt+N for the new project shortcut\n\n2. **Select project type**\n   - Choose "Basic Project" for standard features\n   - Choose "Advanced Project" for custom configurations\n\n3. **Configure settings**\n   - Enter project name (required)\n   - Select save location (optional, defaults to Documents folder)\n   - Choose template (optional, uses blank template by default)\n\n### Important Notes\n- Project names cannot contain special characters: / \\ : * ? " < > |\n- Save locations must be accessible and writable\n- Templates can be customized after project creation\n```\u003C/span>\n\n\u003Cspan class=\"hljs-section\">### Consistent Terminology\u003C/span>\n\u003Cspan class=\"hljs-code\">```markdown\n<!-- Maintain consistent terminology throughout documentation -->\n## Glossary\n\n**Project**: A collection of files and settings that define a complete work unit\n**Workspace**: The main application window where projects are edited\n**Template**: A pre-configured project structure that provides starting content\n**Export**: The process of converting project content to output formats\n\n<!-- Use consistent terms in content -->\n## Creating Your First Project\n\nWhen you create a new **project**, it opens in the main **workspace**. You can choose to start from a blank **project** or select a **template** that matches your needs. Once your **project** is complete, you can **export** it to various formats.\n```\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Principle 4: Robust\u003C/span>\nContent must be robust enough for interpretation by assistive technologies.\n\n\u003Cspan class=\"hljs-section\">### Semantic Markup\u003C/span>\n\u003Cspan class=\"hljs-code\">```markdown\n<!-- Use semantic markup patterns -->\n## Data Comparison\n\n| Feature | Basic Plan | Premium Plan | Enterprise Plan |\n|---------|------------|--------------|-----------------|\n| **Storage** | 10 GB | 100 GB | Unlimited |\n| **Users** | 1 | 5 | Unlimited |\n| **Support** | Email | Email + Chat | 24/7 Phone |\n| **Price** | $9/month | $29/month | Contact Sales |\n\n### Key Differences Summary\n- **Basic Plan**: Suitable for individual users with light storage needs\n- **Premium Plan**: Ideal for small teams requiring collaboration features  \n- **Enterprise Plan**: Comprehensive solution for large organizations\n```\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"advanced-accessibility-implementation\">Advanced Accessibility Implementation\u003C/h3>\n\u003Cp>Creating comprehensive accessibility systems for Markdown documentation:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// accessibility-validator.js - Markdown accessibility validation system\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> { \u003Cspan class=\"hljs-variable constant_\">JSDOM\u003C/span> } = \u003Cspan class=\"hljs-built_in\">require\u003C/span>(\u003Cspan class=\"hljs-string\">'jsdom'\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\u003Cspan class=\"hljs-keyword\">const\u003C/span> axe = \u003Cspan class=\"hljs-built_in\">require\u003C/span>(\u003Cspan class=\"hljs-string\">'@axe-core/playwright'\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\">wcagLevel\u003C/span>: options.\u003Cspan class=\"hljs-property\">wcagLevel\u003C/span> || \u003Cspan class=\"hljs-string\">'AA'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">wcagVersion\u003C/span>: options.\u003Cspan class=\"hljs-property\">wcagVersion\u003C/span> || \u003Cspan class=\"hljs-string\">'2.1'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">includeExperimental\u003C/span>: options.\u003Cspan class=\"hljs-property\">includeExperimental\u003C/span> || \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">generateReport\u003C/span>: options.\u003Cspan class=\"hljs-property\">generateReport\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">violations\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">warnings\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">suggestions\u003C/span> = [];\n        \n        \u003Cspan class=\"hljs-comment\">// Configure marked for accessibility-optimized HTML generation\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_\">setupAccessibleRenderer\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Validation rules\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validationRules\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">headingHierarchy\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">imageAltText\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">linkAccessibility\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">listStructure\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">tableAccessibility\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">languageSpecification\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">colorContrast\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">keyboardNavigation\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupAccessibleRenderer\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Override heading renderer to ensure proper hierarchy\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\">return\u003C/span> \u003Cspan class=\"hljs-string\">`<h\u003Cspan class=\"hljs-subst\">${level}\u003C/span> id="\u003Cspan class=\"hljs-subst\">${escapedText}\u003C/span>" tabindex="-1">\u003Cspan class=\"hljs-subst\">${text}\u003C/span></h\u003Cspan class=\"hljs-subst\">${level}\u003C/span>>\\n`\u003C/span>;\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Override image renderer for better accessibility\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\">let\u003C/span> alt = text || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">let\u003C/span> longDesc = title || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            \n            \u003Cspan class=\"hljs-comment\">// Check if image appears to be decorative\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> isDecorative = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">isDecorativeImage\u003C/span>(href, alt);\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="" role="presentation">\\n`\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">let\u003C/span> imgTag = \u003Cspan class=\"hljs-string\">`<img src="\u003Cspan class=\"hljs-subst\">${href}\u003C/span>" alt="\u003Cspan class=\"hljs-subst\">${alt}\u003C/span>"`\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (longDesc && longDesc !== alt) {\n                imgTag += \u003Cspan class=\"hljs-string\">` title="\u003Cspan class=\"hljs-subst\">${longDesc}\u003C/span>"`\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Add loading attribute for performance\u003C/span>\n            imgTag += \u003Cspan class=\"hljs-string\">` loading="lazy"`\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> imgTag + \u003Cspan class=\"hljs-string\">'>\\n'\u003C/span>;\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Override link renderer for accessibility\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 = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">isExternalLink\u003C/span>(href);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> isFileLink = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">isFileLink\u003C/span>(href);\n            \n            \u003Cspan class=\"hljs-keyword\">let\u003C/span> linkTag = \u003Cspan class=\"hljs-string\">`<a href="\u003Cspan class=\"hljs-subst\">${href}\u003C/span>"`\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (title) {\n                linkTag += \u003Cspan class=\"hljs-string\">` title="\u003Cspan class=\"hljs-subst\">${title}\u003C/span>"`\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Add attributes for external links\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (isExternal) {\n                linkTag += \u003Cspan class=\"hljs-string\">` target="_blank" rel="noopener noreferrer"`\u003C/span>;\n                linkTag += \u003Cspan class=\"hljs-string\">` aria-describedby="external-link-warning"`\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Add attributes for file downloads\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (isFileLink) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> fileSize = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getFileSizeInfo\u003C/span>(href);\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> fileType = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getFileType\u003C/span>(href);\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (fileSize || fileType) {\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> fileInfo = [];\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (fileType) fileInfo.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(fileType.\u003Cspan class=\"hljs-title function_\">toUpperCase\u003C/span>());\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (fileSize) fileInfo.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(fileSize);\n                    \n                    linkTag += \u003Cspan class=\"hljs-string\">` aria-describedby="file-link-info"`\u003C/span>;\n                    linkTag += \u003Cspan class=\"hljs-string\">` data-file-info="\u003Cspan class=\"hljs-subst\">${fileInfo.join(\u003Cspan class=\"hljs-string\">', '\u003C/span>)}\u003C/span>"`\u003C/span>;\n                }\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> linkTag + \u003Cspan class=\"hljs-string\">`>\u003Cspan class=\"hljs-subst\">${text}\u003C/span></a>`\u003C/span>;\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Override table renderer for accessibility\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\">`<div class="table-container" role="region" aria-label="Data table" tabindex="0">\n                <table role="table">\n                    <thead role="rowgroup">\u003Cspan class=\"hljs-subst\">${header}\u003C/span></thead>\n                    <tbody role="rowgroup">\u003Cspan class=\"hljs-subst\">${body}\u003C/span></tbody>\n                </table>\n            </div>\\n`\u003C/span>;\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Override table row renderer\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">renderer\u003C/span>.\u003Cspan class=\"hljs-property\">tablerow\u003C/span> = \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">content, flags\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> tag = flags?.\u003Cspan class=\"hljs-property\">header\u003C/span> ? \u003Cspan class=\"hljs-string\">'th'\u003C/span> : \u003Cspan class=\"hljs-string\">'td'\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> role = flags?.\u003Cspan class=\"hljs-property\">header\u003C/span> ? \u003Cspan class=\"hljs-string\">'columnheader'\u003C/span> : \u003Cspan class=\"hljs-string\">'cell'\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> scope = flags?.\u003Cspan class=\"hljs-property\">header\u003C/span> ? \u003Cspan class=\"hljs-string\">' scope="col"'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`<tr role="row">\u003Cspan class=\"hljs-subst\">${content.replace(/<t[dh]>/g, \u003Cspan class=\"hljs-string\">`<\u003Cspan class=\"hljs-subst\">${tag}\u003C/span> role="\u003Cspan class=\"hljs-subst\">${role}\u003C/span>"\u003Cspan class=\"hljs-subst\">${scope}\u003C/span>>`\u003C/span>).replace(/<\\/t[dh]>/g, \u003Cspan class=\"hljs-string\">`</\u003Cspan class=\"hljs-subst\">${tag}\u003C/span>>`\u003C/span>)}\u003C/span></tr>\\n`\u003C/span>;\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Configure marked with accessibility options\u003C/span>\n        marked.\u003Cspan class=\"hljs-title function_\">setOptions\u003C/span>({\n            \u003Cspan class=\"hljs-attr\">renderer\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">renderer\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">gfm\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">breaks\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">pedantic\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">smartLists\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">smartypants\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>\n        });\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">validateMarkdown\u003C/span>(\u003Cspan class=\"hljs-params\">markdownContent, options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Starting accessibility validation...'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Reset validation state\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">violations\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">warnings\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">suggestions\u003C/span> = [];\n        \n        \u003Cspan class=\"hljs-comment\">// Validate raw Markdown structure\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateMarkdownStructure\u003C/span>(markdownContent);\n        \n        \u003Cspan class=\"hljs-comment\">// Convert to HTML and validate\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> html = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">convertToHTML\u003C/span>(markdownContent);\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateHTML\u003C/span>(html);\n        \n        \u003Cspan class=\"hljs-comment\">// Generate comprehensive report\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> report = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateAccessibilityReport\u003C/span>(markdownContent, html);\n        \n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`Validation completed. Found \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.violations.length}\u003C/span> violations and \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.warnings.length}\u003C/span> warnings.`\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> report;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">validateMarkdownStructure\u003C/span>(\u003Cspan class=\"hljs-params\">markdownContent\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lines = markdownContent.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Check heading hierarchy\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validationRules\u003C/span>.\u003Cspan class=\"hljs-property\">headingHierarchy\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateHeadingHierarchy\u003C/span>(lines);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Check image alt text\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validationRules\u003C/span>.\u003Cspan class=\"hljs-property\">imageAltText\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateImageAltText\u003C/span>(lines);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Check link accessibility\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validationRules\u003C/span>.\u003Cspan class=\"hljs-property\">linkAccessibility\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateLinkAccessibility\u003C/span>(lines);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Check list structure\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validationRules\u003C/span>.\u003Cspan class=\"hljs-property\">listStructure\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateListStructure\u003C/span>(lines);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Check language specification\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validationRules\u003C/span>.\u003Cspan class=\"hljs-property\">languageSpecification\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateLanguageSpecification\u003C/span>(markdownContent);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">validateHeadingHierarchy\u003C/span>(\u003Cspan class=\"hljs-params\">lines\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> previousLevel = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> hasH1 = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">0\u003C/span>; i < lines.\u003Cspan class=\"hljs-property\">length\u003C/span>; i++) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> line = lines[i].\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> headingMatch = line.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/^(#{1,6})\\s+(.+)$/\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (headingMatch) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> level = headingMatch[\u003Cspan class=\"hljs-number\">1\u003C/span>].\u003Cspan class=\"hljs-property\">length\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = headingMatch[\u003Cspan class=\"hljs-number\">2\u003C/span>];\n                \n                \u003Cspan class=\"hljs-comment\">// Check for H1\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (level === \u003Cspan class=\"hljs-number\">1\u003C/span>) {\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (hasH1) {\n                        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">violations\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                            \u003Cspan class=\"hljs-attr\">rule\u003C/span>: \u003Cspan class=\"hljs-string\">'heading-hierarchy'\u003C/span>,\n                            \u003Cspan class=\"hljs-attr\">severity\u003C/span>: \u003Cspan class=\"hljs-string\">'error'\u003C/span>,\n                            \u003Cspan class=\"hljs-attr\">line\u003C/span>: i + \u003Cspan class=\"hljs-number\">1\u003C/span>,\n                            \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">'Multiple H1 headings found. Document should have only one H1.'\u003C/span>,\n                            \u003Cspan class=\"hljs-attr\">wcagReference\u003C/span>: \u003Cspan class=\"hljs-string\">'SC 1.3.1'\u003C/span>\n                        });\n                    }\n                    hasH1 = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                    \u003Cspan class=\"hljs-comment\">// Check heading sequence\u003C/span>\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (previousLevel > \u003Cspan class=\"hljs-number\">0\u003C/span> && level > previousLevel + \u003Cspan class=\"hljs-number\">1\u003C/span>) {\n                        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">violations\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                            \u003Cspan class=\"hljs-attr\">rule\u003C/span>: \u003Cspan class=\"hljs-string\">'heading-hierarchy'\u003C/span>,\n                            \u003Cspan class=\"hljs-attr\">severity\u003C/span>: \u003Cspan class=\"hljs-string\">'error'\u003C/span>,\n                            \u003Cspan class=\"hljs-attr\">line\u003C/span>: i + \u003Cspan class=\"hljs-number\">1\u003C/span>,\n                            \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">`Heading level \u003Cspan class=\"hljs-subst\">${level}\u003C/span> follows level \u003Cspan class=\"hljs-subst\">${previousLevel}\u003C/span>. Heading levels should not skip levels.`\u003C/span>,\n                            \u003Cspan class=\"hljs-attr\">wcagReference\u003C/span>: \u003Cspan class=\"hljs-string\">'SC 1.3.1'\u003C/span>,\n                            \u003Cspan class=\"hljs-attr\">suggestion\u003C/span>: \u003Cspan class=\"hljs-string\">`Use heading level \u003Cspan class=\"hljs-subst\">${previousLevel + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span> instead`\u003C/span>\n                        });\n                    }\n                }\n                \n                \u003Cspan class=\"hljs-comment\">// Check for empty headings\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!text.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>()) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">violations\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                        \u003Cspan class=\"hljs-attr\">rule\u003C/span>: \u003Cspan class=\"hljs-string\">'heading-content'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">severity\u003C/span>: \u003Cspan class=\"hljs-string\">'error'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">line\u003C/span>: i + \u003Cspan class=\"hljs-number\">1\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">'Heading is empty. Headings must contain meaningful text.'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">wcagReference\u003C/span>: \u003Cspan class=\"hljs-string\">'SC 2.4.6'\u003C/span>\n                    });\n                }\n                \n                \u003Cspan class=\"hljs-comment\">// Check heading length\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (text.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">120\u003C/span>) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">warnings\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                        \u003Cspan class=\"hljs-attr\">rule\u003C/span>: \u003Cspan class=\"hljs-string\">'heading-length'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">severity\u003C/span>: \u003Cspan class=\"hljs-string\">'warning'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">line\u003C/span>: i + \u003Cspan class=\"hljs-number\">1\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">'Heading is very long. Consider shortening for better accessibility.'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">suggestion\u003C/span>: \u003Cspan class=\"hljs-string\">'Keep headings under 120 characters'\u003C/span>\n                    });\n                }\n                \n                previousLevel = level;\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Check if document has H1\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!hasH1) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">violations\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">rule\u003C/span>: \u003Cspan class=\"hljs-string\">'document-structure'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">severity\u003C/span>: \u003Cspan class=\"hljs-string\">'error'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">'Document must have exactly one H1 heading for proper document structure.'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">wcagReference\u003C/span>: \u003Cspan class=\"hljs-string\">'SC 1.3.1'\u003C/span>\n            });\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">validateImageAltText\u003C/span>(\u003Cspan class=\"hljs-params\">lines\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 < lines.\u003Cspan class=\"hljs-property\">length\u003C/span>; i++) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> line = lines[i];\n            \n            \u003Cspan class=\"hljs-comment\">// Match markdown image syntax\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> imageMatches = line.\u003Cspan class=\"hljs-title function_\">matchAll\u003C/span>(\u003Cspan class=\"hljs-regexp\">/!\\[([^\\]]*)\\]\\(([^)]+)\\)/g\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> match \u003Cspan class=\"hljs-keyword\">of\u003C/span> imageMatches) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> altText = match[\u003Cspan class=\"hljs-number\">1\u003C/span>];\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> imagePath = match[\u003Cspan class=\"hljs-number\">2\u003C/span>];\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> fullMatch = match[\u003Cspan class=\"hljs-number\">0\u003C/span>];\n                \n                \u003Cspan class=\"hljs-comment\">// Check for missing alt text\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (altText === \u003Cspan class=\"hljs-literal\">undefined\u003C/span> || altText === \u003Cspan class=\"hljs-literal\">null\u003C/span>) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">violations\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                        \u003Cspan class=\"hljs-attr\">rule\u003C/span>: \u003Cspan class=\"hljs-string\">'image-alt-text'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">severity\u003C/span>: \u003Cspan class=\"hljs-string\">'error'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">line\u003C/span>: i + \u003Cspan class=\"hljs-number\">1\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">'Image is missing alt text.'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">wcagReference\u003C/span>: \u003Cspan class=\"hljs-string\">'SC 1.1.1'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">suggestion\u003C/span>: \u003Cspan class=\"hljs-string\">'Add descriptive alt text: ![Description of image](path)'\u003C/span>\n                    });\n                    \u003Cspan class=\"hljs-keyword\">continue\u003C/span>;\n                }\n                \n                \u003Cspan class=\"hljs-comment\">// Check for decorative images\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (altText === \u003Cspan class=\"hljs-string\">''\u003C/span> && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">isDecorativeImage\u003C/span>(imagePath, altText)) {\n                    \u003Cspan class=\"hljs-comment\">// This is correct for decorative images\u003C/span>\n                    \u003Cspan class=\"hljs-keyword\">continue\u003C/span>;\n                }\n                \n                \u003Cspan class=\"hljs-comment\">// Check for non-descriptive alt text\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> nonDescriptivePatterns = [\n                    \u003Cspan class=\"hljs-regexp\">/^(image|picture|photo|screenshot|figure|diagram)$/i\u003C/span>,\n                    \u003Cspan class=\"hljs-regexp\">/^(img|pic)\\d*$/i\u003C/span>,\n                    \u003Cspan class=\"hljs-regexp\">/\\.(jpg|jpeg|png|gif|svg|webp)$/i\u003C/span>,\n                    \u003Cspan class=\"hljs-regexp\">/^(click here|see image|view|look)$/i\u003C/span>\n                ];\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (nonDescriptivePatterns.\u003Cspan class=\"hljs-title function_\">some\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">pattern\u003C/span> =>\u003C/span> pattern.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(altText))) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">violations\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                        \u003Cspan class=\"hljs-attr\">rule\u003C/span>: \u003Cspan class=\"hljs-string\">'image-alt-text-quality'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">severity\u003C/span>: \u003Cspan class=\"hljs-string\">'error'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">line\u003C/span>: i + \u003Cspan class=\"hljs-number\">1\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">'Image alt text is not descriptive enough.'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">wcagReference\u003C/span>: \u003Cspan class=\"hljs-string\">'SC 1.1.1'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">suggestion\u003C/span>: \u003Cspan class=\"hljs-string\">'Describe what the image shows, not what it is'\u003C/span>\n                    });\n                }\n                \n                \u003Cspan class=\"hljs-comment\">// Check alt text length\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (altText.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">250\u003C/span>) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">warnings\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                        \u003Cspan class=\"hljs-attr\">rule\u003C/span>: \u003Cspan class=\"hljs-string\">'image-alt-text-length'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">severity\u003C/span>: \u003Cspan class=\"hljs-string\">'warning'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">line\u003C/span>: i + \u003Cspan class=\"hljs-number\">1\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">'Alt text is very long. Consider using a caption or description.'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">suggestion\u003C/span>: \u003Cspan class=\"hljs-string\">'Keep alt text under 250 characters, use title attribute for longer descriptions'\u003C/span>\n                    });\n                }\n                \n                \u003Cspan class=\"hljs-comment\">// Check for redundant information\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> redundantPatterns = [\n                    \u003Cspan class=\"hljs-regexp\">/image of/i\u003C/span>,\n                    \u003Cspan class=\"hljs-regexp\">/picture of/i\u003C/span>,\n                    \u003Cspan class=\"hljs-regexp\">/screenshot of/i\u003C/span>,\n                    \u003Cspan class=\"hljs-regexp\">/photo of/i\u003C/span>\n                ];\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (redundantPatterns.\u003Cspan class=\"hljs-title function_\">some\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">pattern\u003C/span> =>\u003C/span> pattern.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(altText))) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">suggestions\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                        \u003Cspan class=\"hljs-attr\">rule\u003C/span>: \u003Cspan class=\"hljs-string\">'image-alt-text-conciseness'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">severity\u003C/span>: \u003Cspan class=\"hljs-string\">'suggestion'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">line\u003C/span>: i + \u003Cspan class=\"hljs-number\">1\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">'Alt text contains redundant phrases.'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">suggestion\u003C/span>: \u003Cspan class=\"hljs-string\">'Remove "image of", "picture of", etc. Just describe the content directly'\u003C/span>\n                    });\n                }\n            }\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">validateLinkAccessibility\u003C/span>(\u003Cspan class=\"hljs-params\">lines\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 < lines.\u003Cspan class=\"hljs-property\">length\u003C/span>; i++) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> line = lines[i];\n            \n            \u003Cspan class=\"hljs-comment\">// Match markdown link syntax\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> linkMatches = line.\u003Cspan class=\"hljs-title function_\">matchAll\u003C/span>(\u003Cspan class=\"hljs-regexp\">/\\[([^\\]]+)\\]\\(([^)]+)\\)/g\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> match \u003Cspan class=\"hljs-keyword\">of\u003C/span> linkMatches) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> linkText = match[\u003Cspan class=\"hljs-number\">1\u003C/span>];\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> linkUrl = match[\u003Cspan class=\"hljs-number\">2\u003C/span>];\n                \n                \u003Cspan class=\"hljs-comment\">// Check for empty link text\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!linkText.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>()) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">violations\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                        \u003Cspan class=\"hljs-attr\">rule\u003C/span>: \u003Cspan class=\"hljs-string\">'link-text'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">severity\u003C/span>: \u003Cspan class=\"hljs-string\">'error'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">line\u003C/span>: i + \u003Cspan class=\"hljs-number\">1\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">'Link has empty text.'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">wcagReference\u003C/span>: \u003Cspan class=\"hljs-string\">'SC 2.4.4'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">suggestion\u003C/span>: \u003Cspan class=\"hljs-string\">'Provide descriptive link text'\u003C/span>\n                    });\n                    \u003Cspan class=\"hljs-keyword\">continue\u003C/span>;\n                }\n                \n                \u003Cspan class=\"hljs-comment\">// Check for non-descriptive link text\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> nonDescriptiveLinkText = [\n                    \u003Cspan class=\"hljs-string\">'click here'\u003C/span>, \u003Cspan class=\"hljs-string\">'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>,\n                    \u003Cspan class=\"hljs-string\">'this link'\u003C/span>, \u003Cspan class=\"hljs-string\">'continue'\u003C/span>, \u003Cspan class=\"hljs-string\">'go'\u003C/span>, \u003Cspan class=\"hljs-string\">'see more'\u003C/span>\n                ];\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (nonDescriptiveLinkText.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(linkText.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>().\u003Cspan class=\"hljs-title function_\">trim\u003C/span>())) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">violations\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                        \u003Cspan class=\"hljs-attr\">rule\u003C/span>: \u003Cspan class=\"hljs-string\">'link-text-descriptive'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">severity\u003C/span>: \u003Cspan class=\"hljs-string\">'error'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">line\u003C/span>: i + \u003Cspan class=\"hljs-number\">1\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">`Link text "\u003Cspan class=\"hljs-subst\">${linkText}\u003C/span>" is not descriptive.`\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">wcagReference\u003C/span>: \u003Cspan class=\"hljs-string\">'SC 2.4.4'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">suggestion\u003C/span>: \u003Cspan class=\"hljs-string\">'Describe the link destination or purpose'\u003C/span>\n                    });\n                }\n                \n                \u003Cspan class=\"hljs-comment\">// Check URL accessibility\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">isFileLink\u003C/span>(linkUrl)) {\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> fileExtension = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getFileType\u003C/span>(linkUrl);\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (fileExtension && !linkText.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(fileExtension.\u003Cspan class=\"hljs-title function_\">toUpperCase\u003C/span>())) {\n                        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">suggestions\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                            \u003Cspan class=\"hljs-attr\">rule\u003C/span>: \u003Cspan class=\"hljs-string\">'file-link-context'\u003C/span>,\n                            \u003Cspan class=\"hljs-attr\">severity\u003C/span>: \u003Cspan class=\"hljs-string\">'suggestion'\u003C/span>,\n                            \u003Cspan class=\"hljs-attr\">line\u003C/span>: i + \u003Cspan class=\"hljs-number\">1\u003C/span>,\n                            \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">'File download links should indicate file type.'\u003C/span>,\n                            \u003Cspan class=\"hljs-attr\">suggestion\u003C/span>: \u003Cspan class=\"hljs-string\">`Consider: "\u003Cspan class=\"hljs-subst\">${linkText}\u003C/span> (\u003Cspan class=\"hljs-subst\">${fileExtension.toUpperCase()}\u003C/span>)"`\u003C/span>\n                        });\n                    }\n                }\n                \n                \u003Cspan class=\"hljs-comment\">// Check for long link text\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (linkText.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">100\u003C/span>) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">warnings\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                        \u003Cspan class=\"hljs-attr\">rule\u003C/span>: \u003Cspan class=\"hljs-string\">'link-text-length'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">severity\u003C/span>: \u003Cspan class=\"hljs-string\">'warning'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">line\u003C/span>: i + \u003Cspan class=\"hljs-number\">1\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">'Link text is very long.'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">suggestion\u003C/span>: \u003Cspan class=\"hljs-string\">'Keep link text concise while remaining descriptive'\u003C/span>\n                    });\n                }\n            }\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">validateListStructure\u003C/span>(\u003Cspan class=\"hljs-params\">lines\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> inOrderedList = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> inUnorderedList = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> listLevel = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">0\u003C/span>; i < lines.\u003Cspan class=\"hljs-property\">length\u003C/span>; i++) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> line = lines[i];\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> trimmedLine = line.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n            \n            \u003Cspan class=\"hljs-comment\">// Check for list items\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> orderedMatch = trimmedLine.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/^(\\s*)(\\d+)\\.\\s+(.+)/\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> unorderedMatch = trimmedLine.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/^(\\s*)[-*+]\\s+(.+)/\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (orderedMatch) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> indentation = orderedMatch[\u003Cspan class=\"hljs-number\">1\u003C/span>].\u003Cspan class=\"hljs-property\">length\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> number = \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(orderedMatch[\u003Cspan class=\"hljs-number\">2\u003C/span>]);\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> content = orderedMatch[\u003Cspan class=\"hljs-number\">3\u003C/span>];\n                \n                \u003Cspan class=\"hljs-comment\">// Check list item content\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!content.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>()) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">violations\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                        \u003Cspan class=\"hljs-attr\">rule\u003C/span>: \u003Cspan class=\"hljs-string\">'list-item-content'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">severity\u003C/span>: \u003Cspan class=\"hljs-string\">'error'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">line\u003C/span>: i + \u003Cspan class=\"hljs-number\">1\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">'List item is empty.'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">wcagReference\u003C/span>: \u003Cspan class=\"hljs-string\">'SC 1.3.1'\u003C/span>\n                    });\n                }\n                \n                \u003Cspan class=\"hljs-comment\">// Check numbering sequence (basic check)\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (number === \u003Cspan class=\"hljs-number\">1\u003C/span>) {\n                    inOrderedList = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n                }\n                \n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (unorderedMatch) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> indentation = unorderedMatch[\u003Cspan class=\"hljs-number\">1\u003C/span>].\u003Cspan class=\"hljs-property\">length\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> content = unorderedMatch[\u003Cspan class=\"hljs-number\">2\u003C/span>];\n                \n                \u003Cspan class=\"hljs-comment\">// Check list item content\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!content.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>()) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">violations\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                        \u003Cspan class=\"hljs-attr\">rule\u003C/span>: \u003Cspan class=\"hljs-string\">'list-item-content'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">severity\u003C/span>: \u003Cspan class=\"hljs-string\">'error'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">line\u003C/span>: i + \u003Cspan class=\"hljs-number\">1\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">'List item is empty.'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">wcagReference\u003C/span>: \u003Cspan class=\"hljs-string\">'SC 1.3.1'\u003C/span>\n                    });\n                }\n                \n                inUnorderedList = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (trimmedLine === \u003Cspan class=\"hljs-string\">''\u003C/span>) {\n                \u003Cspan class=\"hljs-comment\">// Empty line might end list\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">continue\u003C/span>;\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                \u003Cspan class=\"hljs-comment\">// Non-list content\u003C/span>\n                inOrderedList = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n                inUnorderedList = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n            }\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">validateLanguageSpecification\u003C/span>(\u003Cspan class=\"hljs-params\">markdownContent\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Check for language specification in frontmatter\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> frontmatterMatch = markdownContent.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/^---\\n([\\s\\S]*?)\\n---/\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (frontmatterMatch) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> frontmatter = frontmatterMatch[\u003Cspan class=\"hljs-number\">1\u003C/span>];\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!frontmatter.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'lang:'\u003C/span>) && !frontmatter.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'language:'\u003C/span>)) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">suggestions\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                    \u003Cspan class=\"hljs-attr\">rule\u003C/span>: \u003Cspan class=\"hljs-string\">'document-language'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">severity\u003C/span>: \u003Cspan class=\"hljs-string\">'suggestion'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">'Consider specifying document language in frontmatter.'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">wcagReference\u003C/span>: \u003Cspan class=\"hljs-string\">'SC 3.1.1'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">suggestion\u003C/span>: \u003Cspan class=\"hljs-string\">'Add "lang: en" (or appropriate language code) to frontmatter'\u003C/span>\n                });\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Check for code block language specification\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> codeBlockMatches = markdownContent.\u003Cspan class=\"hljs-title function_\">matchAll\u003C/span>(\u003Cspan class=\"hljs-regexp\">/```(\\w*)\\n/g\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> codeBlocksWithoutLang = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> match \u003Cspan class=\"hljs-keyword\">of\u003C/span> codeBlockMatches) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!match[\u003Cspan class=\"hljs-number\">1\u003C/span>]) {\n                codeBlocksWithoutLang++;\n            }\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (codeBlocksWithoutLang > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">suggestions\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">rule\u003C/span>: \u003Cspan class=\"hljs-string\">'code-block-language'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">severity\u003C/span>: \u003Cspan class=\"hljs-string\">'suggestion'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${codeBlocksWithoutLang}\u003C/span> code block(s) without language specification.`\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">suggestion\u003C/span>: \u003Cspan class=\"hljs-string\">'Specify language for syntax highlighting: ```javascript'\u003C/span>\n            });\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">convertToHTML\u003C/span>(\u003Cspan class=\"hljs-params\">markdownContent\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-comment\">// Add accessibility enhancements to HTML\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">let\u003C/span> html = \u003Cspan class=\"hljs-title function_\">marked\u003C/span>(markdownContent);\n            \n            \u003Cspan class=\"hljs-comment\">// Add skip navigation\u003C/span>\n            html = \u003Cspan class=\"hljs-string\">`<div id="skip-nav"><a href="#main-content" class="skip-link">Skip to main content</a></div>\\n\u003Cspan class=\"hljs-subst\">${html}\u003C/span>`\u003C/span>;\n            \n            \u003Cspan class=\"hljs-comment\">// Wrap main content\u003C/span>\n            html = \u003Cspan class=\"hljs-string\">`<main id="main-content" role="main">\\n\u003Cspan class=\"hljs-subst\">${html}\u003C/span>\\n</main>`\u003C/span>;\n            \n            \u003Cspan class=\"hljs-comment\">// Add external link warning\u003C/span>\n            html += \u003Cspan class=\"hljs-string\">`\n<div id="external-link-warning" style="display: none;">\n    Opens in a new window or tab\n</div>\n<div id="file-link-info" style="display: none;">\n    File download\n</div>`\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> html;\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 converting Markdown to HTML:'\u003C/span>, error);\n            \u003Cspan class=\"hljs-keyword\">throw\u003C/span> error;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">validateHTML\u003C/span>(\u003Cspan class=\"hljs-params\">html\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> dom = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title function_\">JSDOM\u003C/span>(html);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-variable language_\">document\u003C/span> = dom.\u003Cspan class=\"hljs-property\">window\u003C/span>.\u003Cspan class=\"hljs-property\">document\u003C/span>;\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> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">runAxeTests\u003C/span>(html);\n            \n            \u003Cspan class=\"hljs-comment\">// Process axe results\u003C/span>\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">processAxeResults\u003C/span>(results);\n            \n            \u003Cspan class=\"hljs-comment\">// Additional custom validations\u003C/span>\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateCustomAccessibility\u003C/span>(\u003Cspan class=\"hljs-variable language_\">document\u003C/span>);\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 HTML:'\u003C/span>, error);\n            \u003Cspan class=\"hljs-keyword\">throw\u003C/span> error;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">runAxeTests\u003C/span>(\u003Cspan class=\"hljs-params\">html\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// This would integrate with axe-core for comprehensive testing\u003C/span>\n        \u003Cspan class=\"hljs-comment\">// For this example, we'll simulate results\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">violations\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">incomplete\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">passes\u003C/span>: []\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">processAxeResults\u003C/span>(\u003Cspan class=\"hljs-params\">results\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Process axe-core results and convert to our format\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> violation \u003Cspan class=\"hljs-keyword\">of\u003C/span> results.\u003Cspan class=\"hljs-property\">violations\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">violations\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">rule\u003C/span>: violation.\u003Cspan class=\"hljs-property\">id\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">severity\u003C/span>: violation.\u003Cspan class=\"hljs-property\">impact\u003C/span> === \u003Cspan class=\"hljs-string\">'critical'\u003C/span> ? \u003Cspan class=\"hljs-string\">'error'\u003C/span> : \u003Cspan class=\"hljs-string\">'warning'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">message\u003C/span>: violation.\u003Cspan class=\"hljs-property\">description\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">wcagReference\u003C/span>: violation.\u003Cspan class=\"hljs-property\">tags\u003C/span>.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">tag\u003C/span> =>\u003C/span> tag.\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'wcag'\u003C/span>)).\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">', '\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            });\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">validateCustomAccessibility\u003C/span>(\u003Cspan class=\"hljs-params\">\u003Cspan class=\"hljs-variable language_\">document\u003C/span>\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Custom validation rules specific to our needs\u003C/span>\n        \n        \u003Cspan class=\"hljs-comment\">// Check for proper table headers\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tables = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'table'\u003C/span>);\n        tables.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">table, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> hasProperHeaders = table.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'th'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!hasProperHeaders) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">violations\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                    \u003Cspan class=\"hljs-attr\">rule\u003C/span>: \u003Cspan class=\"hljs-string\">'table-headers'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">severity\u003C/span>: \u003Cspan class=\"hljs-string\">'error'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">`Table \u003Cspan class=\"hljs-subst\">${index + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span> lacks proper headers.`\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">wcagReference\u003C/span>: \u003Cspan class=\"hljs-string\">'SC 1.3.1'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">suggestion\u003C/span>: \u003Cspan class=\"hljs-string\">'Ensure first row contains header cells'\u003C/span>\n                });\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Check for proper form labels (if any forms exist)\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> inputs = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'input, textarea, select'\u003C/span>);\n        inputs.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">input, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> hasLabel = input.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-label'\u003C/span>) || \n                           input.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-labelledby'\u003C/span>) ||\n                           \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`label[for="\u003Cspan class=\"hljs-subst\">${input.id}\u003C/span>"]`\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!hasLabel) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">violations\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                    \u003Cspan class=\"hljs-attr\">rule\u003C/span>: \u003Cspan class=\"hljs-string\">'form-labels'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">severity\u003C/span>: \u003Cspan class=\"hljs-string\">'error'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">`Form input \u003Cspan class=\"hljs-subst\">${index + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span> lacks proper labeling.`\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">wcagReference\u003C/span>: \u003Cspan class=\"hljs-string\">'SC 1.3.1'\u003C/span>\n                });\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">generateAccessibilityReport\u003C/span>(\u003Cspan class=\"hljs-params\">markdownContent, html\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> report = {\n            \u003Cspan class=\"hljs-attr\">summary\u003C/span>: {\n                \u003Cspan class=\"hljs-attr\">violations\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">violations\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">warnings\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">warnings\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">suggestions\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">suggestions\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">wcagLevel\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">wcagLevel\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">timestamp\u003C/span>: \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Date\u003C/span>().\u003Cspan class=\"hljs-title function_\">toISOString\u003C/span>()\n            },\n            \u003Cspan class=\"hljs-attr\">violations\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">violations\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">warnings\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">warnings\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">suggestions\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">suggestions\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">metrics\u003C/span>: {\n                \u003Cspan class=\"hljs-attr\">wordCount\u003C/span>: markdownContent.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-regexp\">/\\s+/\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">headingCount\u003C/span>: (markdownContent.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/^#+\\s/gm\u003C/span>) || []).\u003Cspan class=\"hljs-property\">length\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">linkCount\u003C/span>: (markdownContent.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/\\[([^\\]]+)\\]\\([^)]+\\)/g\u003C/span>) || []).\u003Cspan class=\"hljs-property\">length\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">imageCount\u003C/span>: (markdownContent.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/!\\[([^\\]]*)\\]\\([^)]+\\)/g\u003C/span>) || []).\u003Cspan class=\"hljs-property\">length\u003C/span>\n            },\n            \u003Cspan class=\"hljs-attr\">recommendations\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateRecommendations\u003C/span>()\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> report;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateRecommendations\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> recommendations = [];\n        \n        \u003Cspan class=\"hljs-comment\">// Analyze violation patterns\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> violationTypes = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">violations\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">v\u003C/span> =>\u003C/span> {\n            violationTypes.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(v.\u003Cspan class=\"hljs-property\">rule\u003C/span>, (violationTypes.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(v.\u003Cspan class=\"hljs-property\">rule\u003C/span>) || \u003Cspan class=\"hljs-number\">0\u003C/span>) + \u003Cspan class=\"hljs-number\">1\u003C/span>);\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Generate targeted recommendations\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (violationTypes.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(\u003Cspan class=\"hljs-string\">'heading-hierarchy'\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\">category\u003C/span>: \u003Cspan class=\"hljs-string\">'structure'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">title\u003C/span>: \u003Cspan class=\"hljs-string\">'Fix Heading Hierarchy'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">description\u003C/span>: \u003Cspan class=\"hljs-string\">'Proper heading structure is crucial for screen readers and document navigation.'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">action\u003C/span>: \u003Cspan class=\"hljs-string\">'Review and reorganize headings to follow logical order (H1 > H2 > H3, etc.)'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">resources\u003C/span>: [\n                    \u003Cspan class=\"hljs-string\">'https://www.w3.org/WAI/tutorials/page-structure/headings/'\u003C/span>,\n                    \u003Cspan class=\"hljs-string\">'https://webaim.org/techniques/semanticstructure/'\u003C/span>\n                ]\n            });\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (violationTypes.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(\u003Cspan class=\"hljs-string\">'image-alt-text'\u003C/span>) || violationTypes.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(\u003Cspan class=\"hljs-string\">'image-alt-text-quality'\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\">category\u003C/span>: \u003Cspan class=\"hljs-string\">'images'\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\">'Alt text is essential for users who cannot see images.'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">action\u003C/span>: \u003Cspan class=\"hljs-string\">'Add descriptive alt text to all informative images, use empty alt="" for decorative images'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">resources\u003C/span>: [\n                    \u003Cspan class=\"hljs-string\">'https://www.w3.org/WAI/tutorials/images/'\u003C/span>,\n                    \u003Cspan class=\"hljs-string\">'https://webaim.org/techniques/alttext/'\u003C/span>\n                ]\n            });\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (violationTypes.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(\u003Cspan class=\"hljs-string\">'link-text'\u003C/span>) || violationTypes.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(\u003Cspan class=\"hljs-string\">'link-text-descriptive'\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\">category\u003C/span>: \u003Cspan class=\"hljs-string\">'navigation'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">title\u003C/span>: \u003Cspan class=\"hljs-string\">'Enhance Link Accessibility'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">description\u003C/span>: \u003Cspan class=\"hljs-string\">'Descriptive link text helps users understand link destinations.'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">action\u003C/span>: \u003Cspan class=\"hljs-string\">'Replace generic link text ("click here", "read more") with descriptive text'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">resources\u003C/span>: [\n                    \u003Cspan class=\"hljs-string\">'https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html'\u003C/span>\n                ]\n            });\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> recommendations;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Helper methods\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">isDecorativeImage\u003C/span>(\u003Cspan class=\"hljs-params\">href, alt\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> decorativePatterns = [\n            \u003Cspan class=\"hljs-regexp\">/decoration/i\u003C/span>,\n            \u003Cspan class=\"hljs-regexp\">/ornament/i\u003C/span>,\n            \u003Cspan class=\"hljs-regexp\">/divider/i\u003C/span>,\n            \u003Cspan class=\"hljs-regexp\">/spacer/i\u003C/span>,\n            \u003Cspan class=\"hljs-regexp\">/border/i\u003C/span>\n        ];\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> decorativePatterns.\u003Cspan class=\"hljs-title function_\">some\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">pattern\u003C/span> =>\u003C/span> \n            pattern.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(href) || pattern.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(alt)\n        ) || alt === \u003Cspan class=\"hljs-string\">''\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">isExternalLink\u003C/span>(\u003Cspan class=\"hljs-params\">href\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> href.\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'http'\u003C/span>) || href.\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'//'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">isFileLink\u003C/span>(\u003Cspan class=\"hljs-params\">href\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-regexp\">/\\.(pdf|doc|docx|xls|xlsx|ppt|pptx|zip|tar|gz)$/i\u003C/span>.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(href);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getFileType\u003C/span>(\u003Cspan class=\"hljs-params\">href\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> match = href.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/\\.([^.]+)$/\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> match ? match[\u003Cspan class=\"hljs-number\">1\u003C/span>] : \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getFileSizeInfo\u003C/span>(\u003Cspan class=\"hljs-params\">href\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// In a real implementation, this would check file size\u003C/span>\n        \u003Cspan class=\"hljs-comment\">// For this example, we'll return null\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\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\u003C/code>\u003C/pre>\u003Ch3 id=\"assistive-technology-optimization\">Assistive Technology Optimization\u003C/h3>\n\u003Cp>Optimizing Markdown content for screen readers, voice control, and other assistive technologies:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Screen Reader Optimization Techniques\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Descriptive Link Context\u003C/span>\n\n\u003Cspan class=\"hljs-section\">### Example: Poor Link Context\u003C/span>\n\u003Cspan class=\"hljs-code\">```markdown\nOur software has many features. [Learn more](features.html).\nFor pricing information, [click here](pricing.html).\n```\u003C/span>\n\n\u003Cspan class=\"hljs-section\">### Example: Excellent Link Context\u003C/span>\n\u003Cspan class=\"hljs-code\">```markdown\nOur software includes advanced project management capabilities. \n[Explore our comprehensive feature list](features.html) to see \nhow these tools can improve your workflow.\n\nChoose from flexible subscription plans. \n[View detailed pricing and feature comparisons](pricing.html) \nto find the best option for your needs.\n```\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Table Accessibility\u003C/span>\n\n\u003Cspan class=\"hljs-section\">### Basic Accessible Table\u003C/span>\n\u003Cspan class=\"hljs-code\">```markdown\n| Role | Permissions | Access Level |\n|------|-------------|--------------|\n| **Admin** | Full access | All features |\n| **Editor** | Content management | Create, edit, delete |\n| **Viewer** | Read-only | View content only |\n\n**Table Caption**: User role permissions and access levels\n```\u003C/span>\n\n\u003Cspan class=\"hljs-section\">### Complex Table with Enhanced Accessibility\u003C/span>\n\u003Cspan class=\"hljs-code\">```html\n<!-- When converted to HTML, ensure proper table structure -->\n<table role="table" aria-describedby="user-roles-caption">\n    <caption id="user-roles-caption">\n        User role permissions showing access levels for Admin, Editor, and Viewer roles\n    </caption>\n    <thead>\n        <tr>\n            <th scope="col">Role</th>\n            <th scope="col">Permissions</th>\n            <th scope="col">Access Level</th>\n        </tr>\n    </thead>\n    <tbody>\n        <tr>\n            <th scope="row">Admin</th>\n            <td>Full access</td>\n            <td>All features</td>\n        </tr>\n        <tr>\n            <th scope="row">Editor</th>\n            <td>Content management</td>\n            <td>Create, edit, delete</td>\n        </tr>\n        <tr>\n            <th scope="row">Viewer</th>\n            <td>Read-only</td>\n            <td>View content only</td>\n        </tr>\n    </tbody>\n</table>\n```\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Form Accessibility\u003C/span>\n\n\u003Cspan class=\"hljs-section\">### Accessible Form Structure\u003C/span>\n\u003Cspan class=\"hljs-code\">```html\n<!-- Accessible form elements that can be generated from Markdown -->\n<form>\n    <fieldset>\n        <legend>Contact Information</legend>\n        \n        <div class="form-group">\n            <label for="full-name">Full Name *</label>\n            <input type="text" id="full-name" name="fullName" \n                   required aria-describedby="name-help">\n            <div id="name-help" class="form-help">\n                Enter your first and last name\n            </div>\n        </div>\n        \n        <div class="form-group">\n            <label for="email">Email Address *</label>\n            <input type="email" id="email" name="email" \n                   required aria-describedby="email-help email-error">\n            <div id="email-help" class="form-help">\n                We'll use this to send you updates\n            </div>\n            <div id="email-error" class="form-error" aria-live="polite"></div>\n        </div>\n    </fieldset>\n    \n    <button type="submit" aria-describedby="submit-help">\n        Send Message\n    </button>\n    <div id="submit-help" class="form-help">\n        All required fields must be completed before submission\n    </div>\n</form>\n```\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Navigation and Focus Management\u003C/span>\n\n\u003Cspan class=\"hljs-section\">### Skip Navigation Implementation\u003C/span>\n\u003Cspan class=\"hljs-code\">```html\n<!-- Essential for keyboard users -->\n<div class="skip-navigation">\n    <a href="#main-content" class="skip-link">Skip to main content</a>\n    <a href="#navigation" class="skip-link">Skip to navigation</a>\n    <a href="#sidebar" class="skip-link">Skip to sidebar</a>\n</div>\n\n<style>\n.skip-link {\n    position: absolute;\n    top: -40px;\n    left: 6px;\n    background: #000;\n    color: #fff;\n    padding: 8px;\n    text-decoration: none;\n    z-index: 1000;\n    border-radius: 0 0 4px 4px;\n}\n\n.skip-link:focus {\n    top: 0;\n}\n</style>\n```\u003C/span>\n\n\u003Cspan class=\"hljs-section\">### Focus Indicators\u003C/span>\n\u003Cspan class=\"hljs-code\">```css\n/* Ensure all interactive elements have visible focus indicators */\na:focus,\nbutton:focus,\ninput:focus,\ntextarea:focus,\nselect:focus {\n    outline: 2px solid #005fcc;\n    outline-offset: 2px;\n    background-color: rgba(255, 251, 240, 0.8);\n}\n\n/* Enhanced focus for better visibility */\n.enhanced-focus:focus {\n    outline: 3px solid #ff6b35;\n    outline-offset: 3px;\n    box-shadow: 0 0 0 5px rgba(255, 107, 53, 0.3);\n}\n```\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"color-contrast-and-visual-design\">Color Contrast and Visual Design\u003C/h3>\n\u003Cp>Ensuring adequate color contrast and visual accessibility:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// color-contrast-checker.js - WCAG contrast validation\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">ColorContrastChecker\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\">wcagLevels\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">AA\u003C/span>: {\n                \u003Cspan class=\"hljs-attr\">normalText\u003C/span>: \u003Cspan class=\"hljs-number\">4.5\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">largeText\u003C/span>: \u003Cspan class=\"hljs-number\">3.0\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">nonText\u003C/span>: \u003Cspan class=\"hljs-number\">3.0\u003C/span>\n            },\n            \u003Cspan class=\"hljs-attr\">AAA\u003C/span>: {\n                \u003Cspan class=\"hljs-attr\">normalText\u003C/span>: \u003Cspan class=\"hljs-number\">7.0\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">largeText\u003C/span>: \u003Cspan class=\"hljs-number\">4.5\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">nonText\u003C/span>: \u003Cspan class=\"hljs-number\">3.0\u003C/span>\n            }\n        };\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Calculate relative luminance\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">getRelativeLuminance\u003C/span>(\u003Cspan class=\"hljs-params\">rgb\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> [r, g, b] = rgb.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">channel\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> c = channel / \u003Cspan class=\"hljs-number\">255\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> c <= \u003Cspan class=\"hljs-number\">0.03928\u003C/span> ? c / \u003Cspan class=\"hljs-number\">12.92\u003C/span> : \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">pow\u003C/span>((c + \u003Cspan class=\"hljs-number\">0.055\u003C/span>) / \u003Cspan class=\"hljs-number\">1.055\u003C/span>, \u003Cspan class=\"hljs-number\">2.4\u003C/span>);\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-number\">0.2126\u003C/span> * r + \u003Cspan class=\"hljs-number\">0.7152\u003C/span> * g + \u003Cspan class=\"hljs-number\">0.0722\u003C/span> * b;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Calculate contrast ratio\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">getContrastRatio\u003C/span>(\u003Cspan class=\"hljs-params\">color1, color2\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> l1 = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getRelativeLuminance\u003C/span>(color1);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> l2 = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getRelativeLuminance\u003C/span>(color2);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lighter = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(l1, l2);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> darker = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(l1, l2);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> (lighter + \u003Cspan class=\"hljs-number\">0.05\u003C/span>) / (darker + \u003Cspan class=\"hljs-number\">0.05\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Check if contrast meets WCAG requirements\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">checkContrast\u003C/span>(\u003Cspan class=\"hljs-params\">foreground, background, level = \u003Cspan class=\"hljs-string\">'AA'\u003C/span>, isLargeText = \u003Cspan class=\"hljs-literal\">false\u003C/span>\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> ratio = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getContrastRatio\u003C/span>(foreground, background);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> textType = isLargeText ? \u003Cspan class=\"hljs-string\">'largeText'\u003C/span> : \u003Cspan class=\"hljs-string\">'normalText'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> required = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">wcagLevels\u003C/span>[level][textType];\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">ratio\u003C/span>: ratio,\n            \u003Cspan class=\"hljs-attr\">required\u003C/span>: required,\n            \u003Cspan class=\"hljs-attr\">passes\u003C/span>: ratio >= required,\n            \u003Cspan class=\"hljs-attr\">level\u003C/span>: level,\n            \u003Cspan class=\"hljs-attr\">isLargeText\u003C/span>: isLargeText\n        };\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Parse CSS color values\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">parseColor\u003C/span>(\u003Cspan class=\"hljs-params\">colorString\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Handle hex colors\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (colorString.\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'#'\u003C/span>)) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> hex = colorString.\u003Cspan class=\"hljs-title function_\">substring\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> r = \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(hex.\u003Cspan class=\"hljs-title function_\">substr\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">2\u003C/span>), \u003Cspan class=\"hljs-number\">16\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> g = \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(hex.\u003Cspan class=\"hljs-title function_\">substr\u003C/span>(\u003Cspan class=\"hljs-number\">2\u003C/span>, \u003Cspan class=\"hljs-number\">2\u003C/span>), \u003Cspan class=\"hljs-number\">16\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> b = \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(hex.\u003Cspan class=\"hljs-title function_\">substr\u003C/span>(\u003Cspan class=\"hljs-number\">4\u003C/span>, \u003Cspan class=\"hljs-number\">2\u003C/span>), \u003Cspan class=\"hljs-number\">16\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> [r, g, b];\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Handle rgb colors\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rgbMatch = colorString.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/rgb\\((\\d+),\\s*(\\d+),\\s*(\\d+)\\)/\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (rgbMatch) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> [\n                \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(rgbMatch[\u003Cspan class=\"hljs-number\">1\u003C/span>]),\n                \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(rgbMatch[\u003Cspan class=\"hljs-number\">2\u003C/span>]),\n                \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(rgbMatch[\u003Cspan class=\"hljs-number\">3\u003C/span>])\n            ];\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">throw\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Error\u003C/span>(\u003Cspan class=\"hljs-string\">`Unsupported color format: \u003Cspan class=\"hljs-subst\">${colorString}\u003C/span>`\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Suggest accessible color alternatives\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">suggestAccessibleColors\u003C/span>(\u003Cspan class=\"hljs-params\">foreground, background, level = \u003Cspan class=\"hljs-string\">'AA'\u003C/span>, isLargeText = \u003Cspan class=\"hljs-literal\">false\u003C/span>\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentResult = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">checkContrast\u003C/span>(foreground, background, level, isLargeText);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentResult.\u003Cspan class=\"hljs-property\">passes\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> { \u003Cspan class=\"hljs-attr\">current\u003C/span>: currentResult, \u003Cspan class=\"hljs-attr\">suggestions\u003C/span>: [] };\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> suggestions = [];\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetRatio = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">wcagLevels\u003C/span>[level][isLargeText ? \u003Cspan class=\"hljs-string\">'largeText'\u003C/span> : \u003Cspan class=\"hljs-string\">'normalText'\u003C/span>];\n        \n        \u003Cspan class=\"hljs-comment\">// Try darkening foreground\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> factor = \u003Cspan class=\"hljs-number\">0.1\u003C/span>; factor <= \u003Cspan class=\"hljs-number\">1\u003C/span>; factor += \u003Cspan class=\"hljs-number\">0.1\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> darkerForeground = foreground.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">c\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">floor\u003C/span>(c * (\u003Cspan class=\"hljs-number\">1\u003C/span> - factor))));\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> result = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">checkContrast\u003C/span>(darkerForeground, background, level, isLargeText);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (result.\u003Cspan class=\"hljs-property\">passes\u003C/span> && result.\u003Cspan class=\"hljs-property\">ratio\u003C/span> >= targetRatio) {\n                suggestions.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                    \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'darken-foreground'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">color\u003C/span>: darkerForeground,\n                    \u003Cspan class=\"hljs-attr\">hex\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">rgbToHex\u003C/span>(darkerForeground),\n                    \u003Cspan class=\"hljs-attr\">ratio\u003C/span>: result.\u003Cspan class=\"hljs-property\">ratio\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">factor\u003C/span>: factor\n                });\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Try lightening background\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> factor = \u003Cspan class=\"hljs-number\">0.1\u003C/span>; factor <= \u003Cspan class=\"hljs-number\">1\u003C/span>; factor += \u003Cspan class=\"hljs-number\">0.1\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> lighterBackground = background.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">c\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(\u003Cspan class=\"hljs-number\">255\u003C/span>, \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">floor\u003C/span>(c + (\u003Cspan class=\"hljs-number\">255\u003C/span> - c) * factor)));\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> result = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">checkContrast\u003C/span>(foreground, lighterBackground, level, isLargeText);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (result.\u003Cspan class=\"hljs-property\">passes\u003C/span> && result.\u003Cspan class=\"hljs-property\">ratio\u003C/span> >= targetRatio) {\n                suggestions.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                    \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'lighten-background'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">color\u003C/span>: lighterBackground,\n                    \u003Cspan class=\"hljs-attr\">hex\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">rgbToHex\u003C/span>(lighterBackground),\n                    \u003Cspan class=\"hljs-attr\">ratio\u003C/span>: result.\u003Cspan class=\"hljs-property\">ratio\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">factor\u003C/span>: factor\n                });\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            }\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> { \u003Cspan class=\"hljs-attr\">current\u003C/span>: currentResult, \u003Cspan class=\"hljs-attr\">suggestions\u003C/span>: suggestions };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">rgbToHex\u003C/span>(\u003Cspan class=\"hljs-params\">rgb\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'#'\u003C/span> + rgb.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">c\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">round\u003C/span>(c).\u003Cspan class=\"hljs-title function_\">toString\u003C/span>(\u003Cspan class=\"hljs-number\">16\u003C/span>).\u003Cspan class=\"hljs-title function_\">padStart\u003C/span>(\u003Cspan class=\"hljs-number\">2\u003C/span>, \u003Cspan class=\"hljs-string\">'0'\u003C/span>)).\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">''\u003C/span>);\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Usage example for documentation themes\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> contrastChecker = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">ColorContrastChecker\u003C/span>();\n\n\u003Cspan class=\"hljs-comment\">// Common documentation color schemes\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> colorSchemes = {\n    \u003Cspan class=\"hljs-attr\">light\u003C/span>: {\n        \u003Cspan class=\"hljs-attr\">background\u003C/span>: [\u003Cspan class=\"hljs-number\">255\u003C/span>, \u003Cspan class=\"hljs-number\">255\u003C/span>, \u003Cspan class=\"hljs-number\">255\u003C/span>], \u003Cspan class=\"hljs-comment\">// white\u003C/span>\n        \u003Cspan class=\"hljs-attr\">text\u003C/span>: [\u003Cspan class=\"hljs-number\">51\u003C/span>, \u003Cspan class=\"hljs-number\">51\u003C/span>, \u003Cspan class=\"hljs-number\">51\u003C/span>],           \u003Cspan class=\"hljs-comment\">// dark gray\u003C/span>\n        \u003Cspan class=\"hljs-attr\">link\u003C/span>: [\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">95\u003C/span>, \u003Cspan class=\"hljs-number\">204\u003C/span>],           \u003Cspan class=\"hljs-comment\">// blue\u003C/span>\n        \u003Cspan class=\"hljs-attr\">linkHover\u003C/span>: [\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">63\u003C/span>, \u003Cspan class=\"hljs-number\">135\u003C/span>],      \u003Cspan class=\"hljs-comment\">// darker blue\u003C/span>\n        \u003Cspan class=\"hljs-attr\">accent\u003C/span>: [\u003Cspan class=\"hljs-number\">255\u003C/span>, \u003Cspan class=\"hljs-number\">107\u003C/span>, \u003Cspan class=\"hljs-number\">53\u003C/span>]        \u003Cspan class=\"hljs-comment\">// orange\u003C/span>\n    },\n    \u003Cspan class=\"hljs-attr\">dark\u003C/span>: {\n        \u003Cspan class=\"hljs-attr\">background\u003C/span>: [\u003Cspan class=\"hljs-number\">33\u003C/span>, \u003Cspan class=\"hljs-number\">37\u003C/span>, \u003Cspan class=\"hljs-number\">41\u003C/span>],     \u003Cspan class=\"hljs-comment\">// dark gray\u003C/span>\n        \u003Cspan class=\"hljs-attr\">text\u003C/span>: [\u003Cspan class=\"hljs-number\">248\u003C/span>, \u003Cspan class=\"hljs-number\">249\u003C/span>, \u003Cspan class=\"hljs-number\">250\u003C/span>],        \u003Cspan class=\"hljs-comment\">// light gray\u003C/span>\n        \u003Cspan class=\"hljs-attr\">link\u003C/span>: [\u003Cspan class=\"hljs-number\">108\u003C/span>, \u003Cspan class=\"hljs-number\">186\u003C/span>, \u003Cspan class=\"hljs-number\">255\u003C/span>],        \u003Cspan class=\"hljs-comment\">// light blue\u003C/span>\n        \u003Cspan class=\"hljs-attr\">linkHover\u003C/span>: [\u003Cspan class=\"hljs-number\">69\u003C/span>, \u003Cspan class=\"hljs-number\">162\u003C/span>, \u003Cspan class=\"hljs-number\">255\u003C/span>],    \u003Cspan class=\"hljs-comment\">// brighter blue\u003C/span>\n        \u003Cspan class=\"hljs-attr\">accent\u003C/span>: [\u003Cspan class=\"hljs-number\">255\u003C/span>, \u003Cspan class=\"hljs-number\">193\u003C/span>, \u003Cspan class=\"hljs-number\">7\u003C/span>]         \u003Cspan class=\"hljs-comment\">// yellow\u003C/span>\n    }\n};\n\n\u003Cspan class=\"hljs-comment\">// Validate color schemes\u003C/span>\n\u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>(colorSchemes).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">[theme, colors]\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\">`\\nValidating \u003Cspan class=\"hljs-subst\">${theme}\u003C/span> theme:`\u003C/span>);\n    \n    \u003Cspan class=\"hljs-comment\">// Check text contrast\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> textResult = contrastChecker.\u003Cspan class=\"hljs-title function_\">checkContrast\u003C/span>(colors.\u003Cspan class=\"hljs-property\">text\u003C/span>, colors.\u003Cspan class=\"hljs-property\">background\u003C/span>);\n    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`Text contrast: \u003Cspan class=\"hljs-subst\">${textResult.ratio.toFixed(\u003Cspan class=\"hljs-number\">2\u003C/span>)}\u003C/span> (\u003Cspan class=\"hljs-subst\">${textResult.passes ? \u003Cspan class=\"hljs-string\">'PASS'\u003C/span> : \u003Cspan class=\"hljs-string\">'FAIL'\u003C/span>}\u003C/span>)`\u003C/span>);\n    \n    \u003Cspan class=\"hljs-comment\">// Check link contrast\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> linkResult = contrastChecker.\u003Cspan class=\"hljs-title function_\">checkContrast\u003C/span>(colors.\u003Cspan class=\"hljs-property\">link\u003C/span>, colors.\u003Cspan class=\"hljs-property\">background\u003C/span>);\n    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`Link contrast: \u003Cspan class=\"hljs-subst\">${linkResult.ratio.toFixed(\u003Cspan class=\"hljs-number\">2\u003C/span>)}\u003C/span> (\u003Cspan class=\"hljs-subst\">${linkResult.passes ? \u003Cspan class=\"hljs-string\">'PASS'\u003C/span> : \u003Cspan class=\"hljs-string\">'FAIL'\u003C/span>}\u003C/span>)`\u003C/span>);\n    \n    \u003Cspan class=\"hljs-comment\">// Check accent contrast\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> accentResult = contrastChecker.\u003Cspan class=\"hljs-title function_\">checkContrast\u003C/span>(colors.\u003Cspan class=\"hljs-property\">accent\u003C/span>, colors.\u003Cspan class=\"hljs-property\">background\u003C/span>);\n    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`Accent contrast: \u003Cspan class=\"hljs-subst\">${accentResult.ratio.toFixed(\u003Cspan class=\"hljs-number\">2\u003C/span>)}\u003C/span> (\u003Cspan class=\"hljs-subst\">${accentResult.passes ? \u003Cspan class=\"hljs-string\">'PASS'\u003C/span> : \u003Cspan class=\"hljs-string\">'FAIL'\u003C/span>}\u003C/span>)`\u003C/span>);\n});\n\u003C/code>\u003C/pre>\u003Ch2 id=\"testing-and-validation-workflows\">Testing and Validation Workflows\u003C/h2>\n\u003Ch3 id=\"automated-accessibility-testing\">Automated Accessibility Testing\u003C/h3>\n\u003Cp>Comprehensive testing strategies for accessible Markdown content:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// accessibility-testing-suite.js - Comprehensive accessibility testing\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> { chromium } = \u003Cspan class=\"hljs-built_in\">require\u003C/span>(\u003Cspan class=\"hljs-string\">'playwright'\u003C/span>);\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title class_\">AxeBuilder\u003C/span> = \u003Cspan class=\"hljs-built_in\">require\u003C/span>(\u003Cspan class=\"hljs-string\">'@axe-core/playwright'\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\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">AccessibilityTestingSuite\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\">viewport\u003C/span>: { \u003Cspan class=\"hljs-attr\">width\u003C/span>: \u003Cspan class=\"hljs-number\">1280\u003C/span>, \u003Cspan class=\"hljs-attr\">height\u003C/span>: \u003Cspan class=\"hljs-number\">720\u003C/span> },\n            \u003Cspan class=\"hljs-attr\">headless\u003C/span>: options.\u003Cspan class=\"hljs-property\">headless\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">testMobile\u003C/span>: options.\u003Cspan class=\"hljs-property\">testMobile\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">testKeyboard\u003C/span>: options.\u003Cspan class=\"hljs-property\">testKeyboard\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">testScreenReader\u003C/span>: options.\u003Cspan class=\"hljs-property\">testScreenReader\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">saveScreenshots\u003C/span>: options.\u003Cspan class=\"hljs-property\">saveScreenshots\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">outputDir\u003C/span>: options.\u003Cspan class=\"hljs-property\">outputDir\u003C/span> || \u003Cspan class=\"hljs-string\">'./accessibility-reports'\u003C/span>,\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\">context\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">page\u003C/span> = \u003Cspan class=\"hljs-literal\">null\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_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">browser\u003C/span> = \u003Cspan class=\"hljs-keyword\">await\u003C/span> chromium.\u003Cspan class=\"hljs-title function_\">launch\u003C/span>({ \u003Cspan class=\"hljs-attr\">headless\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">headless\u003C/span> });\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">context\u003C/span> = \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_\">newContext\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">viewport\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">page\u003C/span> = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">context\u003C/span>.\u003Cspan class=\"hljs-title function_\">newPage\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Enable accessibility features\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">page\u003C/span>.\u003Cspan class=\"hljs-title function_\">emulateMedia\u003C/span>({ \u003Cspan class=\"hljs-attr\">reducedMotion\u003C/span>: \u003Cspan class=\"hljs-string\">'reduce'\u003C/span> });\n        \n        \u003Cspan class=\"hljs-comment\">// Set up console logging\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">page\u003C/span>.\u003Cspan class=\"hljs-title function_\">on\u003C/span>(\u003Cspan class=\"hljs-string\">'console'\u003C/span>, \u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">msg\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (msg.\u003Cspan class=\"hljs-title function_\">type\u003C/span>() === \u003Cspan class=\"hljs-string\">'error'\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">error\u003C/span>(\u003Cspan class=\"hljs-string\">`Page error: \u003Cspan class=\"hljs-subst\">${msg.text()}\u003C/span>`\u003C/span>);\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">testMarkdownPage\u003C/span>(\u003Cspan class=\"hljs-params\">htmlContent, options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">page\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-keyword\">const\u003C/span> testResults = {\n            \u003Cspan class=\"hljs-attr\">timestamp\u003C/span>: \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Date\u003C/span>().\u003Cspan class=\"hljs-title function_\">toISOString\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">options\u003C/span>: options,\n            \u003Cspan class=\"hljs-attr\">tests\u003C/span>: {\n                \u003Cspan class=\"hljs-attr\">axeCore\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">keyboard\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">mobile\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">screenReader\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">performance\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span>\n            },\n            \u003Cspan class=\"hljs-attr\">summary\u003C/span>: {\n                \u003Cspan class=\"hljs-attr\">violations\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">warnings\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">passes\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>\n            }\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-comment\">// Load content\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">page\u003C/span>.\u003Cspan class=\"hljs-title function_\">setContent\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">wrapHTMLContent\u003C/span>(htmlContent), {\n                \u003Cspan class=\"hljs-attr\">waitUntil\u003C/span>: \u003Cspan class=\"hljs-string\">'domcontentloaded'\u003C/span>\n            });\n            \n            \u003Cspan class=\"hljs-comment\">// Run axe-core tests\u003C/span>\n            testResults.\u003Cspan class=\"hljs-property\">tests\u003C/span>.\u003Cspan class=\"hljs-property\">axeCore\u003C/span> = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">runAxeTests\u003C/span>();\n            \n            \u003Cspan class=\"hljs-comment\">// Test keyboard navigation\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">testKeyboard\u003C/span>) {\n                testResults.\u003Cspan class=\"hljs-property\">tests\u003C/span>.\u003Cspan class=\"hljs-property\">keyboard\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>();\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Test mobile accessibility\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">testMobile\u003C/span>) {\n                testResults.\u003Cspan class=\"hljs-property\">tests\u003C/span>.\u003Cspan class=\"hljs-property\">mobile\u003C/span> = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">testMobileAccessibility\u003C/span>();\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Test screen reader support\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">testScreenReader\u003C/span>) {\n                testResults.\u003Cspan class=\"hljs-property\">tests\u003C/span>.\u003Cspan class=\"hljs-property\">screenReader\u003C/span> = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">testScreenReaderSupport\u003C/span>();\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Performance accessibility tests\u003C/span>\n            testResults.\u003Cspan class=\"hljs-property\">tests\u003C/span>.\u003Cspan class=\"hljs-property\">performance\u003C/span> = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">testPerformanceAccessibility\u003C/span>();\n            \n            \u003Cspan class=\"hljs-comment\">// Calculate summary\u003C/span>\n            testResults.\u003Cspan class=\"hljs-property\">summary\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">calculateTestSummary\u003C/span>(testResults.\u003Cspan class=\"hljs-property\">tests\u003C/span>);\n            \n            \u003Cspan class=\"hljs-comment\">// Save screenshots if requested\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">saveScreenshots\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">saveAccessibilityScreenshots\u003C/span>(options.\u003Cspan class=\"hljs-property\">testName\u003C/span> || \u003Cspan class=\"hljs-string\">'test'\u003C/span>);\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 during accessibility testing:'\u003C/span>, error);\n            testResults.\u003Cspan class=\"hljs-property\">error\u003C/span> = error.\u003Cspan class=\"hljs-property\">message\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> testResults;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">wrapHTMLContent\u003C/span>(\u003Cspan class=\"hljs-params\">htmlContent\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 Page</title>\n    <style>\n        /* Basic accessible styles */\n        body {\n            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;\n            line-height: 1.6;\n            color: #333;\n            max-width: 800px;\n            margin: 0 auto;\n            padding: 20px;\n        }\n        \n        .skip-link {\n            position: absolute;\n            top: -40px;\n            left: 6px;\n            background: #000;\n            color: #fff;\n            padding: 8px;\n            text-decoration: none;\n            z-index: 1000;\n        }\n        \n        .skip-link:focus {\n            top: 6px;\n        }\n        \n        a:focus, button:focus, input:focus, textarea:focus, select:focus {\n            outline: 2px solid #005fcc;\n            outline-offset: 2px;\n        }\n        \n        table {\n            border-collapse: collapse;\n            width: 100%;\n        }\n        \n        th, td {\n            border: 1px solid #ddd;\n            padding: 8px;\n            text-align: left;\n        }\n        \n        th {\n            background-color: #f2f2f2;\n            font-weight: bold;\n        }\n        \n        .sr-only {\n            position: absolute;\n            width: 1px;\n            height: 1px;\n            padding: 0;\n            margin: -1px;\n            overflow: hidden;\n            clip: rect(0, 0, 0, 0);\n            white-space: nowrap;\n            border: 0;\n        }\n    </style>\n</head>\n<body>\n    <a href="#main-content" class="skip-link">Skip to main content</a>\n    <main id="main-content" role="main">\n        \u003Cspan class=\"hljs-subst\">${htmlContent}\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_\">runAxeTests\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> accessibilityScanResults = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">AxeBuilder\u003C/span>({ \u003Cspan class=\"hljs-attr\">page\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">page\u003C/span> })\n                .\u003Cspan class=\"hljs-title function_\">withTags\u003C/span>([\u003Cspan class=\"hljs-string\">'wcag2a'\u003C/span>, \u003Cspan class=\"hljs-string\">'wcag2aa'\u003C/span>, \u003Cspan class=\"hljs-string\">'wcag21aa'\u003C/span>])\n                .\u003Cspan class=\"hljs-title function_\">analyze\u003C/span>();\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                \u003Cspan class=\"hljs-attr\">violations\u003C/span>: accessibilityScanResults.\u003Cspan class=\"hljs-property\">violations\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">passes\u003C/span>: accessibilityScanResults.\u003Cspan class=\"hljs-property\">passes\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">incomplete\u003C/span>: accessibilityScanResults.\u003Cspan class=\"hljs-property\">incomplete\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">summary\u003C/span>: {\n                    \u003Cspan class=\"hljs-attr\">violationCount\u003C/span>: accessibilityScanResults.\u003Cspan class=\"hljs-property\">violations\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">passCount\u003C/span>: accessibilityScanResults.\u003Cspan class=\"hljs-property\">passes\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">incompleteCount\u003C/span>: accessibilityScanResults.\u003Cspan class=\"hljs-property\">incomplete\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>\n                }\n            };\n            \n        } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> { \u003Cspan class=\"hljs-attr\">error\u003C/span>: error.\u003Cspan class=\"hljs-property\">message\u003C/span> };\n        }\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">testKeyboardNavigation\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> results = {\n            \u003Cspan class=\"hljs-attr\">focusableElements\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">navigationFlow\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">trapFocus\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">skipLinks\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-comment\">// Find all focusable elements\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> focusableElements = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">page\u003C/span>.evaluate(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> selector = \u003Cspan class=\"hljs-string\">'a[href], button, input, textarea, select, [tabindex="0"], [tabindex="-1"]'\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> elements = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(selector);\n                \n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(elements).\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">el, index\u003C/span>) =>\u003C/span> ({\n                    index,\n                    \u003Cspan class=\"hljs-attr\">tagName\u003C/span>: el.\u003Cspan class=\"hljs-property\">tagName\u003C/span>.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>(),\n                    \u003Cspan class=\"hljs-attr\">type\u003C/span>: el.\u003Cspan class=\"hljs-property\">type\u003C/span> || \u003Cspan class=\"hljs-string\">''\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">id\u003C/span>: el.\u003Cspan class=\"hljs-property\">id\u003C/span> || \u003Cspan class=\"hljs-string\">''\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">className\u003C/span>: el.\u003Cspan class=\"hljs-property\">className\u003C/span> || \u003Cspan class=\"hljs-string\">''\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">textContent\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\">100\u003C/span>) || \u003Cspan class=\"hljs-string\">''\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">tabIndex\u003C/span>: el.\u003Cspan class=\"hljs-property\">tabIndex\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">visible\u003C/span>: el.\u003Cspan class=\"hljs-property\">offsetParent\u003C/span> !== \u003Cspan class=\"hljs-literal\">null\u003C/span>\n                }));\n            });\n            \n            results.\u003Cspan class=\"hljs-property\">focusableElements\u003C/span> = focusableElements.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">el\u003C/span> =>\u003C/span> el.\u003Cspan class=\"hljs-property\">visible\u003C/span>);\n            \n            \u003Cspan class=\"hljs-comment\">// Test tab navigation\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (results.\u003Cspan class=\"hljs-property\">focusableElements\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">page\u003C/span>.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>(\u003Cspan class=\"hljs-string\">'body'\u003C/span>);\n                \n                \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">0\u003C/span>; i < \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(results.\u003Cspan class=\"hljs-property\">focusableElements\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>, \u003Cspan class=\"hljs-number\">10\u003C/span>); i++) {\n                    \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">page\u003C/span>.\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> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">page\u003C/span>.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>.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>(),\n                            \u003Cspan class=\"hljs-attr\">id\u003C/span>: focused.\u003Cspan class=\"hljs-property\">id\u003C/span> || \u003Cspan class=\"hljs-string\">''\u003C/span>,\n                            \u003Cspan class=\"hljs-attr\">className\u003C/span>: focused.\u003Cspan class=\"hljs-property\">className\u003C/span> || \u003Cspan class=\"hljs-string\">''\u003C/span>,\n                            \u003Cspan class=\"hljs-attr\">textContent\u003C/span>: focused.\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>) || \u003Cspan class=\"hljs-string\">''\u003C/span>\n                        };\n                    });\n                    \n                    results.\u003Cspan class=\"hljs-property\">navigationFlow\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(focusedElement);\n                }\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Check for skip links\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> skipLinkExists = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">page\u003C/span>.evaluate(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> !!\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.skip-link, a[href="#main-content"]'\u003C/span>);\n            });\n            \n            results.\u003Cspan class=\"hljs-property\">skipLinks\u003C/span> = skipLinkExists;\n            \n        } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n            results.\u003Cspan class=\"hljs-property\">error\u003C/span> = error.\u003Cspan class=\"hljs-property\">message\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> results;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">testMobileAccessibility\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> results = {\n            \u003Cspan class=\"hljs-attr\">viewportTested\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">touchTargets\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">textSize\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">horizontalScroll\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-comment\">// Switch to mobile viewport\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">page\u003C/span>.\u003Cspan class=\"hljs-title function_\">setViewportSize\u003C/span>({ \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> });\n            results.\u003Cspan class=\"hljs-property\">viewportTested\u003C/span> = { \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> };\n            \n            \u003Cspan class=\"hljs-comment\">// Check touch target sizes\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> touchTargets = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">page\u003C/span>.evaluate(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> interactiveElements = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'a, button, input, textarea, select'\u003C/span>);\n                \n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(interactiveElements).\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-keyword\">const\u003C/span> rect = el.\u003Cspan class=\"hljs-title function_\">getBoundingClientRect\u003C/span>();\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                        \u003Cspan class=\"hljs-attr\">tagName\u003C/span>: el.\u003Cspan class=\"hljs-property\">tagName\u003C/span>.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>(),\n                        \u003Cspan class=\"hljs-attr\">width\u003C/span>: rect.\u003Cspan class=\"hljs-property\">width\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">height\u003C/span>: rect.\u003Cspan class=\"hljs-property\">height\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">area\u003C/span>: rect.\u003Cspan class=\"hljs-property\">width\u003C/span> * rect.\u003Cspan class=\"hljs-property\">height\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">meetsMinimum\u003C/span>: rect.\u003Cspan class=\"hljs-property\">width\u003C/span> >= \u003Cspan class=\"hljs-number\">44\u003C/span> && rect.\u003Cspan class=\"hljs-property\">height\u003C/span> >= \u003Cspan class=\"hljs-number\">44\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">textContent\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>) || \u003Cspan class=\"hljs-string\">''\u003C/span>\n                    };\n                });\n            });\n            \n            results.\u003Cspan class=\"hljs-property\">touchTargets\u003C/span> = touchTargets;\n            \n            \u003Cspan class=\"hljs-comment\">// Check text size\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> textSize = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">page\u003C/span>.evaluate(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> bodyStyle = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">getComputedStyle\u003C/span>(\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                    \u003Cspan class=\"hljs-attr\">fontSize\u003C/span>: bodyStyle.\u003Cspan class=\"hljs-property\">fontSize\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">lineHeight\u003C/span>: bodyStyle.\u003Cspan class=\"hljs-property\">lineHeight\u003C/span>\n                };\n            });\n            \n            results.\u003Cspan class=\"hljs-property\">textSize\u003C/span> = textSize;\n            \n            \u003Cspan class=\"hljs-comment\">// Check for horizontal scroll\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> hasHorizontalScroll = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">page\u003C/span>.evaluate(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">documentElement\u003C/span>.\u003Cspan class=\"hljs-property\">scrollWidth\u003C/span> > \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">documentElement\u003C/span>.\u003Cspan class=\"hljs-property\">clientWidth\u003C/span>;\n            });\n            \n            results.\u003Cspan class=\"hljs-property\">horizontalScroll\u003C/span> = hasHorizontalScroll;\n            \n            \u003Cspan class=\"hljs-comment\">// Reset viewport\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">page\u003C/span>.\u003Cspan class=\"hljs-title function_\">setViewportSize\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">viewport\u003C/span>);\n            \n        } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n            results.\u003Cspan class=\"hljs-property\">error\u003C/span> = error.\u003Cspan class=\"hljs-property\">message\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> results;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">testScreenReaderSupport\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> results = {\n            \u003Cspan class=\"hljs-attr\">ariaLabels\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">headingStructure\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">landmarkRoles\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">altTexts\u003C/span>: []\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-comment\">// Check ARIA labels\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> ariaElements = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">page\u003C/span>.evaluate(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> elements = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'[aria-label], [aria-labelledby], [aria-describedby]'\u003C/span>);\n                \n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\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>.\u003Cspan class=\"hljs-title function_\">toLowerCase\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\">ariaLabelledby\u003C/span>: el.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-labelledby'\u003C/span>),\n                    \u003Cspan class=\"hljs-attr\">ariaDescribedby\u003C/span>: el.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-describedby'\u003C/span>),\n                    \u003Cspan class=\"hljs-attr\">textContent\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>) || \u003Cspan class=\"hljs-string\">''\u003C/span>\n                }));\n            });\n            \n            results.\u003Cspan class=\"hljs-property\">ariaLabels\u003C/span> = ariaElements;\n            \n            \u003Cspan class=\"hljs-comment\">// Check heading structure\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> headings = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">page\u003C/span>.evaluate(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> headingElements = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'h1, h2, h3, h4, h5, h6'\u003C/span>);\n                \n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(headingElements).\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\">level\u003C/span>: \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(el.\u003Cspan class=\"hljs-property\">tagName\u003C/span>.\u003Cspan class=\"hljs-title function_\">charAt\u003C/span>(\u003Cspan class=\"hljs-number\">1\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-string\">''\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">id\u003C/span>: el.\u003Cspan class=\"hljs-property\">id\u003C/span> || \u003Cspan class=\"hljs-string\">''\u003C/span>\n                }));\n            });\n            \n            results.\u003Cspan class=\"hljs-property\">headingStructure\u003C/span> = headings;\n            \n            \u003Cspan class=\"hljs-comment\">// Check landmark roles\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> landmarks = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">page\u003C/span>.evaluate(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> landmarkElements = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'[role="main"], [role="navigation"], [role="banner"], [role="contentinfo"], [role="complementary"], main, nav, header, footer, aside'\u003C/span>);\n                \n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(landmarkElements).\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>.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>(),\n                    \u003Cspan class=\"hljs-attr\">role\u003C/span>: el.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'role'\u003C/span>) || el.\u003Cspan class=\"hljs-property\">tagName\u003C/span>.\u003Cspan class=\"hljs-title function_\">toLowerCase\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>) || \u003Cspan class=\"hljs-string\">''\u003C/span>\n                }));\n            });\n            \n            results.\u003Cspan class=\"hljs-property\">landmarkRoles\u003C/span> = landmarks;\n            \n            \u003Cspan class=\"hljs-comment\">// Check alt texts\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> images = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">page\u003C/span>.evaluate(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> imageElements = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'img'\u003C/span>);\n                \n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(imageElements).\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\">src\u003C/span>: el.\u003Cspan class=\"hljs-property\">src\u003C/span> || \u003Cspan class=\"hljs-string\">''\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">alt\u003C/span>: el.\u003Cspan class=\"hljs-property\">alt\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">hasAlt\u003C/span>: el.\u003Cspan class=\"hljs-title function_\">hasAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'alt'\u003C/span>),\n                    \u003Cspan class=\"hljs-attr\">isEmpty\u003C/span>: el.\u003Cspan class=\"hljs-property\">alt\u003C/span> === \u003Cspan class=\"hljs-string\">''\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">isDecorative\u003C/span>: el.\u003Cspan class=\"hljs-property\">alt\u003C/span> === \u003Cspan class=\"hljs-string\">''\u003C/span> || el.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'role'\u003C/span>) === \u003Cspan class=\"hljs-string\">'presentation'\u003C/span>\n                }));\n            });\n            \n            results.\u003Cspan class=\"hljs-property\">altTexts\u003C/span> = images;\n            \n        } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n            results.\u003Cspan class=\"hljs-property\">error\u003C/span> = error.\u003Cspan class=\"hljs-property\">message\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> results;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">testPerformanceAccessibility\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> results = {\n            \u003Cspan class=\"hljs-attr\">loadTime\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">resourceCount\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">cumulativeLayoutShift\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">largestContentfulPaint\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> performanceEntries = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">page\u003C/span>.evaluate(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> navigation = performance.\u003Cspan class=\"hljs-title function_\">getEntriesByType\u003C/span>(\u003Cspan class=\"hljs-string\">'navigation'\u003C/span>)[\u003Cspan class=\"hljs-number\">0\u003C/span>];\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> resources = performance.\u003Cspan class=\"hljs-title function_\">getEntriesByType\u003C/span>(\u003Cspan class=\"hljs-string\">'resource'\u003C/span>);\n                \n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                    \u003Cspan class=\"hljs-attr\">loadTime\u003C/span>: navigation ? navigation.\u003Cspan class=\"hljs-property\">loadEventEnd\u003C/span> - navigation.\u003Cspan class=\"hljs-property\">loadEventStart\u003C/span> : \u003Cspan class=\"hljs-literal\">null\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">resourceCount\u003C/span>: resources.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">domContentLoaded\u003C/span>: navigation ? navigation.\u003Cspan class=\"hljs-property\">domContentLoadedEventEnd\u003C/span> - navigation.\u003Cspan class=\"hljs-property\">domContentLoadedEventStart\u003C/span> : \u003Cspan class=\"hljs-literal\">null\u003C/span>\n                };\n            });\n            \n            results.\u003Cspan class=\"hljs-property\">loadTime\u003C/span> = performanceEntries.\u003Cspan class=\"hljs-property\">loadTime\u003C/span>;\n            results.\u003Cspan class=\"hljs-property\">resourceCount\u003C/span> = performanceEntries.\u003Cspan class=\"hljs-property\">resourceCount\u003C/span>;\n            \n            \u003Cspan class=\"hljs-comment\">// Get Web Vitals if available\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> webVitals = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">page\u003C/span>.evaluate(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                    \u003Cspan class=\"hljs-attr\">cls\u003C/span>: \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">CLS\u003C/span> || \u003Cspan class=\"hljs-literal\">null\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">lcp\u003C/span>: \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">LCP\u003C/span> || \u003Cspan class=\"hljs-literal\">null\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">fid\u003C/span>: \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">FID\u003C/span> || \u003Cspan class=\"hljs-literal\">null\u003C/span>\n                };\n            });\n            \n            results.\u003Cspan class=\"hljs-property\">cumulativeLayoutShift\u003C/span> = webVitals.\u003Cspan class=\"hljs-property\">cls\u003C/span>;\n            results.\u003Cspan class=\"hljs-property\">largestContentfulPaint\u003C/span> = webVitals.\u003Cspan class=\"hljs-property\">lcp\u003C/span>;\n            \n        } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n            results.\u003Cspan class=\"hljs-property\">error\u003C/span> = error.\u003Cspan class=\"hljs-property\">message\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> results;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">calculateTestSummary\u003C/span>(\u003Cspan class=\"hljs-params\">tests\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> violations = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> warnings = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> passes = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Count axe results\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (tests.\u003Cspan class=\"hljs-property\">axeCore\u003C/span> && !tests.\u003Cspan class=\"hljs-property\">axeCore\u003C/span>.\u003Cspan class=\"hljs-property\">error\u003C/span>) {\n            violations += tests.\u003Cspan class=\"hljs-property\">axeCore\u003C/span>.\u003Cspan class=\"hljs-property\">summary\u003C/span>.\u003Cspan class=\"hljs-property\">violationCount\u003C/span>;\n            passes += tests.\u003Cspan class=\"hljs-property\">axeCore\u003C/span>.\u003Cspan class=\"hljs-property\">summary\u003C/span>.\u003Cspan class=\"hljs-property\">passCount\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Count keyboard navigation issues\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (tests.\u003Cspan class=\"hljs-property\">keyboard\u003C/span> && !tests.\u003Cspan class=\"hljs-property\">keyboard\u003C/span>.\u003Cspan class=\"hljs-property\">error\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!tests.\u003Cspan class=\"hljs-property\">keyboard\u003C/span>.\u003Cspan class=\"hljs-property\">skipLinks\u003C/span>) warnings++;\n            warnings += tests.\u003Cspan class=\"hljs-property\">keyboard\u003C/span>.\u003Cspan class=\"hljs-property\">focusableElements\u003C/span>.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">el\u003C/span> =>\u003C/span> el.\u003Cspan class=\"hljs-property\">tabIndex\u003C/span> < \u003Cspan class=\"hljs-number\">0\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Count mobile accessibility issues\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (tests.\u003Cspan class=\"hljs-property\">mobile\u003C/span> && !tests.\u003Cspan class=\"hljs-property\">mobile\u003C/span>.\u003Cspan class=\"hljs-property\">error\u003C/span>) {\n            violations += tests.\u003Cspan class=\"hljs-property\">mobile\u003C/span>.\u003Cspan class=\"hljs-property\">touchTargets\u003C/span>.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">target\u003C/span> =>\u003C/span> !target.\u003Cspan class=\"hljs-property\">meetsMinimum\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (tests.\u003Cspan class=\"hljs-property\">mobile\u003C/span>.\u003Cspan class=\"hljs-property\">horizontalScroll\u003C/span>) warnings++;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> { violations, warnings, passes };\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">saveAccessibilityScreenshots\u003C/span>(\u003Cspan class=\"hljs-params\">testName\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">try\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\">outputDir\u003C/span>, { \u003Cspan class=\"hljs-attr\">recursive\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> });\n            \n            \u003Cspan class=\"hljs-comment\">// Desktop screenshot\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">page\u003C/span>.\u003Cspan class=\"hljs-title function_\">screenshot\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">path\u003C/span>: \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.outputDir}\u003C/span>/\u003Cspan class=\"hljs-subst\">${testName}\u003C/span>-desktop.png`\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">fullPage\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n            });\n            \n            \u003Cspan class=\"hljs-comment\">// Mobile screenshot\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">page\u003C/span>.\u003Cspan class=\"hljs-title function_\">setViewportSize\u003C/span>({ \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> });\n            \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">page\u003C/span>.\u003Cspan class=\"hljs-title function_\">screenshot\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">path\u003C/span>: \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.outputDir}\u003C/span>/\u003Cspan class=\"hljs-subst\">${testName}\u003C/span>-mobile.png`\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">fullPage\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n            });\n            \n            \u003Cspan class=\"hljs-comment\">// Reset viewport\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">page\u003C/span>.\u003Cspan class=\"hljs-title function_\">setViewportSize\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">viewport\u003C/span>);\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 saving screenshots:'\u003C/span>, error);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">generateAccessibilityReport\u003C/span>(\u003Cspan class=\"hljs-params\">testResults, outputPath\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> report = {\n            ...testResults,\n            \u003Cspan class=\"hljs-attr\">recommendations\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateAccessibilityRecommendations\u003C/span>(testResults),\n            \u003Cspan class=\"hljs-attr\">resources\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getAccessibilityResources\u003C/span>()\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> fs.\u003Cspan class=\"hljs-title function_\">writeFile\u003C/span>(outputPath, \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">stringify\u003C/span>(report, \u003Cspan class=\"hljs-literal\">null\u003C/span>, \u003Cspan class=\"hljs-number\">2\u003C/span>));\n        \n        \u003Cspan class=\"hljs-comment\">// Also generate 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>(report);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> htmlPath = outputPath.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-string\">'.json'\u003C/span>, \u003Cspan class=\"hljs-string\">'.html'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> fs.\u003Cspan class=\"hljs-title function_\">writeFile\u003C/span>(htmlPath, htmlReport);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> report;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateAccessibilityRecommendations\u003C/span>(\u003Cspan class=\"hljs-params\">testResults\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> recommendations = [];\n        \n        \u003Cspan class=\"hljs-comment\">// Analyze axe results\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (testResults.\u003Cspan class=\"hljs-property\">tests\u003C/span>.\u003Cspan class=\"hljs-property\">axeCore\u003C/span> && !testResults.\u003Cspan class=\"hljs-property\">tests\u003C/span>.\u003Cspan class=\"hljs-property\">axeCore\u003C/span>.\u003Cspan class=\"hljs-property\">error\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> violations = testResults.\u003Cspan class=\"hljs-property\">tests\u003C/span>.\u003Cspan class=\"hljs-property\">axeCore\u003C/span>.\u003Cspan class=\"hljs-property\">violations\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (violations.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n                recommendations.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                    \u003Cspan class=\"hljs-attr\">priority\u003C/span>: \u003Cspan class=\"hljs-string\">'high'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">category\u003C/span>: \u003Cspan class=\"hljs-string\">'WCAG Compliance'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">title\u003C/span>: \u003Cspan class=\"hljs-string\">`Fix \u003Cspan class=\"hljs-subst\">${violations.length}\u003C/span> accessibility violations`\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">description\u003C/span>: \u003Cspan class=\"hljs-string\">'These issues prevent users with disabilities from accessing content'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">action\u003C/span>: \u003Cspan class=\"hljs-string\">'Review and fix each violation according to WCAG guidelines'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">resources\u003C/span>: [\u003Cspan class=\"hljs-string\">'https://www.w3.org/WAI/WCAG21/quickref/'\u003C/span>]\n                });\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Analyze keyboard navigation\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (testResults.\u003Cspan class=\"hljs-property\">tests\u003C/span>.\u003Cspan class=\"hljs-property\">keyboard\u003C/span> && !testResults.\u003Cspan class=\"hljs-property\">tests\u003C/span>.\u003Cspan class=\"hljs-property\">keyboard\u003C/span>.\u003Cspan class=\"hljs-property\">error\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!testResults.\u003Cspan class=\"hljs-property\">tests\u003C/span>.\u003Cspan class=\"hljs-property\">keyboard\u003C/span>.\u003Cspan class=\"hljs-property\">skipLinks\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\">category\u003C/span>: \u003Cspan class=\"hljs-string\">'Keyboard Navigation'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">title\u003C/span>: \u003Cspan class=\"hljs-string\">'Add skip navigation links'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">description\u003C/span>: \u003Cspan class=\"hljs-string\">'Skip links help keyboard users navigate more efficiently'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">action\u003C/span>: \u003Cspan class=\"hljs-string\">'Add "Skip to main content" link at the beginning of the page'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">resources\u003C/span>: [\u003Cspan class=\"hljs-string\">'https://webaim.org/techniques/skipnav/'\u003C/span>]\n                });\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Analyze mobile accessibility\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (testResults.\u003Cspan class=\"hljs-property\">tests\u003C/span>.\u003Cspan class=\"hljs-property\">mobile\u003C/span> && !testResults.\u003Cspan class=\"hljs-property\">tests\u003C/span>.\u003Cspan class=\"hljs-property\">mobile\u003C/span>.\u003Cspan class=\"hljs-property\">error\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> smallTouchTargets = testResults.\u003Cspan class=\"hljs-property\">tests\u003C/span>.\u003Cspan class=\"hljs-property\">mobile\u003C/span>.\u003Cspan class=\"hljs-property\">touchTargets\u003C/span>.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">target\u003C/span> =>\u003C/span> !target.\u003Cspan class=\"hljs-property\">meetsMinimum\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (smallTouchTargets.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n                recommendations.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                    \u003Cspan class=\"hljs-attr\">priority\u003C/span>: \u003Cspan class=\"hljs-string\">'medium'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">category\u003C/span>: \u003Cspan class=\"hljs-string\">'Mobile Accessibility'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">title\u003C/span>: \u003Cspan class=\"hljs-string\">`Increase size of \u003Cspan class=\"hljs-subst\">${smallTouchTargets.length}\u003C/span> touch targets`\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">description\u003C/span>: \u003Cspan class=\"hljs-string\">'Touch targets should be at least 44x44 pixels for mobile accessibility'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">action\u003C/span>: \u003Cspan class=\"hljs-string\">'Increase padding and minimum size for interactive elements'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">resources\u003C/span>: [\u003Cspan class=\"hljs-string\">'https://www.w3.org/WAI/WCAG21/Understanding/target-size.html'\u003C/span>]\n                });\n            }\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> recommendations;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getAccessibilityResources\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> [\n            {\n                \u003Cspan class=\"hljs-attr\">title\u003C/span>: \u003Cspan class=\"hljs-string\">'WCAG 2.1 Guidelines'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">url\u003C/span>: \u003Cspan class=\"hljs-string\">'https://www.w3.org/WAI/WCAG21/Understanding/'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">description\u003C/span>: \u003Cspan class=\"hljs-string\">'Official W3C accessibility guidelines'\u003C/span>\n            },\n            {\n                \u003Cspan class=\"hljs-attr\">title\u003C/span>: \u003Cspan class=\"hljs-string\">'WebAIM'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">url\u003C/span>: \u003Cspan class=\"hljs-string\">'https://webaim.org/'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">description\u003C/span>: \u003Cspan class=\"hljs-string\">'Practical accessibility guidance and tools'\u003C/span>\n            },\n            {\n                \u003Cspan class=\"hljs-attr\">title\u003C/span>: \u003Cspan class=\"hljs-string\">'A11y Project'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">url\u003C/span>: \u003Cspan class=\"hljs-string\">'https://www.a11yproject.com/'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">description\u003C/span>: \u003Cspan class=\"hljs-string\">'Community-driven accessibility checklist'\u003C/span>\n            },\n            {\n                \u003Cspan class=\"hljs-attr\">title\u003C/span>: \u003Cspan class=\"hljs-string\">'Inclusive Design Principles'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">url\u003C/span>: \u003Cspan class=\"hljs-string\">'https://inclusivedesignprinciples.org/'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">description\u003C/span>: \u003Cspan class=\"hljs-string\">'Principles for inclusive design'\u003C/span>\n            }\n        ];\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateHTMLReport\u003C/span>(\u003Cspan class=\"hljs-params\">report\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>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        .violation { background: #fee; border-left: 4px solid #dc3545; padding: 15px; margin: 10px 0; }\n        .warning { background: #fff3cd; border-left: 4px solid #ffc107; padding: 15px; margin: 10px 0; }\n        .pass { background: #d4edda; border-left: 4px solid #28a745; padding: 15px; margin: 10px 0; }\n        .recommendation { background: #e7f3ff; border-left: 4px solid #007bff; padding: 15px; margin: 10px 0; }\n        table { width: 100%; border-collapse: collapse; margin: 20px 0; }\n        th, td { text-align: left; padding: 12px; border-bottom: 1px solid #ddd; }\n        th { background: #f8f9fa; }\n        .priority-high { color: #dc3545; font-weight: bold; }\n        .priority-medium { color: #ffc107; font-weight: bold; }\n        .priority-low { color: #28a745; }\n    </style>\n</head>\n<body>\n    <h1>Accessibility Report</h1>\n    <div class="summary">\n        <h2>Summary</h2>\n        <p><strong>Violations:</strong> \u003Cspan class=\"hljs-subst\">${report.summary.violations}\u003C/span></p>\n        <p><strong>Warnings:</strong> \u003Cspan class=\"hljs-subst\">${report.summary.warnings}\u003C/span></p>\n        <p><strong>Passes:</strong> \u003Cspan class=\"hljs-subst\">${report.summary.passes}\u003C/span></p>\n        <p><strong>Generated:</strong> \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-built_in\">Date\u003C/span>(report.timestamp).toLocaleString()}\u003C/span></p>\n    </div>\n    \n    <h2>Recommendations</h2>\n    \u003Cspan class=\"hljs-subst\">${report.recommendations.map(rec => \u003Cspan class=\"hljs-string\">`\n        <div class="recommendation">\n            <h3 class="priority-\u003Cspan class=\"hljs-subst\">${rec.priority}\u003C/span>">\u003Cspan class=\"hljs-subst\">${rec.title}\u003C/span></h3>\n            <p><strong>Category:</strong> \u003Cspan class=\"hljs-subst\">${rec.category}\u003C/span></p>\n            <p>\u003Cspan class=\"hljs-subst\">${rec.description}\u003C/span></p>\n            <p><strong>Action:</strong> \u003Cspan class=\"hljs-subst\">${rec.action}\u003C/span></p>\n        </div>\n    `\u003C/span>).join(\u003Cspan class=\"hljs-string\">''\u003C/span>)}\u003C/span>\n    \n    <h2>Test Results</h2>\n    <details>\n        <summary>View Detailed Results</summary>\n        <pre>\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-built_in\">JSON\u003C/span>.stringify(report.tests, \u003Cspan class=\"hljs-literal\">null\u003C/span>, \u003Cspan class=\"hljs-number\">2\u003C/span>)}\u003C/span></pre>\n    </details>\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-variable language_\">module\u003C/span>.\u003Cspan class=\"hljs-property\">exports\u003C/span> = \u003Cspan class=\"hljs-title class_\">AccessibilityTestingSuite\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 modern documentation workflows. When combined with \u003Ca href=\"/blog/markdown-automation-workflows-complete-guide\">automation systems and CI/CD pipelines\u003C/a>, accessibility validation becomes part of the continuous integration process, ensuring WCAG compliance is maintained automatically as content is updated and published across different environments.\u003C/p>\n\u003Cp>For comprehensive content management, accessibility techniques work effectively with \u003Ca href=\"/blog/markdown-link-management-cross-referencing-complete-guide\">link management and cross-referencing systems\u003C/a> to create navigation structures that are discoverable through screen readers and assistive technologies, providing multiple pathways for users to find and access related information based on their preferred interaction methods.\u003C/p>\n\u003Cp>When building sophisticated documentation platforms, accessibility complements \u003Ca href=\"/blog/markdown-form-creation-input-validation-complete-guide\">form systems and interactive features\u003C/a> by ensuring that dynamic content interactions maintain accessibility standards, providing appropriate keyboard navigation, screen reader support, and alternative interaction methods for users with diverse abilities and technology requirements.\u003C/p>\n\u003Ch2 id=\"wcag-21-implementation-checklist\">WCAG 2.1 Implementation Checklist\u003C/h2>\n\u003Ch3 id=\"level-a-compliance-requirements\">Level A Compliance Requirements\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># WCAG 2.1 Level A Compliance Checklist\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Perceivable\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**1.1.1 Non-text Content**\u003C/span>: All images have appropriate alt text\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**1.2.1 Audio-only and Video-only**\u003C/span>: Provide alternatives for audio/video content\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**1.3.1 Info and Relationships**\u003C/span>: Semantic markup conveys structure\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**1.3.2 Meaningful Sequence**\u003C/span>: Content has logical reading order\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**1.3.3 Sensory Characteristics**\u003C/span>: Instructions don't rely on sensory characteristics alone\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**1.4.1 Use of Color**\u003C/span>: Information isn't conveyed by color alone\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**1.4.2 Audio Control**\u003C/span>: Auto-playing audio can be controlled\n\n\u003Cspan class=\"hljs-section\">## Operable  \u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**2.1.1 Keyboard**\u003C/span>: All functionality available via keyboard\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**2.1.2 No Keyboard Trap**\u003C/span>: Keyboard focus can move away from all elements\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**2.1.4 Character Key Shortcuts**\u003C/span>: Character shortcuts can be disabled or remapped\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**2.2.1 Timing Adjustable**\u003C/span>: Users can extend time limits\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**2.2.2 Pause, Stop, Hide**\u003C/span>: Moving content can be controlled\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**2.3.1 Three Flashes**\u003C/span>: No content flashes more than 3 times per second\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**2.4.1 Bypass Blocks**\u003C/span>: Skip navigation mechanism provided\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**2.4.2 Page Titled**\u003C/span>: Pages have descriptive titles\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**2.4.3 Focus Order**\u003C/span>: Focus order is logical and intuitive\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**2.4.4 Link Purpose**\u003C/span>: Link purpose is clear from text or context\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**2.5.1 Pointer Gestures**\u003C/span>: All functionality available without complex gestures\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**2.5.2 Pointer Cancellation**\u003C/span>: Accidental activation can be prevented\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**2.5.3 Label in Name**\u003C/span>: Visible labels match accessible names\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**2.5.4 Motion Actuation**\u003C/span>: Motion-based input has alternatives\n\n\u003Cspan class=\"hljs-section\">## Understandable\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**3.1.1 Language of Page**\u003C/span>: Document language is specified\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**3.2.1 On Focus**\u003C/span>: Focus doesn't trigger unexpected changes\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**3.2.2 On Input**\u003C/span>: Input doesn't trigger unexpected changes\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**3.3.1 Error Identification**\u003C/span>: Errors are clearly identified\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**3.3.2 Labels or Instructions**\u003C/span>: Form elements have clear labels\n\n\u003Cspan class=\"hljs-section\">## Robust\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**4.1.1 Parsing**\u003C/span>: Markup is valid and parseable\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**4.1.2 Name, Role, Value**\u003C/span>: UI components have appropriate names and roles\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**4.1.3 Status Messages**\u003C/span>: Status messages are announced by assistive technology\n\u003C/code>\u003C/pre>\u003Ch3 id=\"level-aa-additional-requirements\">Level AA Additional Requirements\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># WCAG 2.1 Level AA Additional Requirements\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Perceivable\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**1.2.4 Captions (Live)**\u003C/span>: Live video has captions\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**1.2.5 Audio Description**\u003C/span>: Video content has audio descriptions\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**1.3.4 Orientation**\u003C/span>: Content doesn't restrict orientation\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**1.3.5 Identify Input Purpose**\u003C/span>: Form inputs have defined purposes\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**1.4.3 Contrast (Minimum)**\u003C/span>: Text has 4.5:1 contrast ratio (3:1 for large text)\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**1.4.4 Resize Text**\u003C/span>: Text can be resized 200% without loss of functionality\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**1.4.5 Images of Text**\u003C/span>: Use actual text instead of images of text\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**1.4.10 Reflow**\u003C/span>: Content reflows at 320px width without horizontal scrolling\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**1.4.11 Non-text Contrast**\u003C/span>: UI components have 3:1 contrast ratio\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**1.4.12 Text Spacing**\u003C/span>: Text can be adjusted without loss of functionality\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**1.4.13 Content on Hover or Focus**\u003C/span>: Hover/focus content is controllable\n\n\u003Cspan class=\"hljs-section\">## Operable\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**2.4.5 Multiple Ways**\u003C/span>: Multiple navigation methods provided\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**2.4.6 Headings and Labels**\u003C/span>: Headings and labels are descriptive\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**2.4.7 Focus Visible**\u003C/span>: Keyboard focus is clearly visible\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**2.4.11 Focus Not Obscured**\u003C/span>: Focused elements aren't obscured by other content\n\n\u003Cspan class=\"hljs-section\">## Understandable\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**3.1.2 Language of Parts**\u003C/span>: Language changes are marked\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**3.2.3 Consistent Navigation**\u003C/span>: Navigation is consistent across pages\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**3.2.4 Consistent Identification**\u003C/span>: Components with same function are identified consistently\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**3.3.3 Error Suggestion**\u003C/span>: Error corrections are suggested\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] \u003Cspan class=\"hljs-strong\">**3.3.4 Error Prevention**\u003C/span>: Important actions can be reviewed before submission\n\u003C/code>\u003C/pre>\u003Ch3 id=\"testing-and-validation-tools\">Testing and Validation Tools\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Accessibility Testing Tools and Techniques\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Automated Testing Tools\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-strong\">**axe-core**\u003C/span>: Comprehensive WCAG testing library\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-strong\">**WAVE**\u003C/span>: Web accessibility evaluation tool\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-strong\">**Lighthouse**\u003C/span>: Google's accessibility auditing tool\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-strong\">**Pa11y**\u003C/span>: Command line accessibility tester\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-strong\">**jest-axe**\u003C/span>: Jest integration for accessibility testing\n\n\u003Cspan class=\"hljs-section\">## Manual Testing Techniques\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-strong\">**Keyboard Navigation**\u003C/span>: Test with keyboard only (Tab, Shift+Tab, Enter, Space, Arrow keys)\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-strong\">**Screen Reader Testing**\u003C/span>: Use NVDA, JAWS, or VoiceOver to test content\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-strong\">**Color Contrast**\u003C/span>: Use contrast analyzers to verify ratios\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-strong\">**Zoom Testing**\u003C/span>: Test at 200% zoom and mobile viewports\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-strong\">**Focus Management**\u003C/span>: Verify focus indicators and tab order\n\n\u003Cspan class=\"hljs-section\">## Browser Testing\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-strong\">**Multiple Browsers**\u003C/span>: Test in Chrome, Firefox, Safari, Edge\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-strong\">**Mobile Browsers**\u003C/span>: Test mobile Safari and Chrome\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-strong\">**Older Versions**\u003C/span>: Test in older browser versions when relevant\n\n\u003Cspan class=\"hljs-section\">## User Testing\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-strong\">**Assistive Technology Users**\u003C/span>: Include users of screen readers, voice control\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-strong\">**Cognitive Disabilities**\u003C/span>: Test with users who have cognitive disabilities\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-strong\">**Motor Disabilities**\u003C/span>: Test with users who have limited motor function\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-strong\">**Various Devices**\u003C/span>: Test on different devices and input methods\n\u003C/code>\u003C/pre>\u003Ch2 id=\"accessibility-patterns-and-best-practices\">Accessibility Patterns and Best Practices\u003C/h2>\n\u003Ch3 id=\"common-accessibility-patterns\">Common Accessibility Patterns\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Common Accessibility Patterns for Documentation\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Progressive Disclosure\u003C/span>\n\u003Cspan class=\"hljs-code\">```html\n<details>\n    <summary>Advanced Configuration Options</summary>\n    <div class="details-content">\n        <p>These options are for advanced users who need to customize...</p>\n        <!-- Detailed content here -->\n    </div>\n</details>\n```\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Accessible Data Tables\u003C/span>\n\u003Cspan class=\"hljs-code\">```html\n<table role="table" aria-describedby="table-caption">\n    <caption id="table-caption">\n        Monthly sales figures showing revenue by product category\n    </caption>\n    <thead>\n        <tr>\n            <th scope="col">Month</th>\n            <th scope="col">Product A</th>\n            <th scope="col">Product B</th>\n            <th scope="col">Total</th>\n        </tr>\n    </thead>\n    <tbody>\n        <tr>\n            <th scope="row">January</th>\n            <td>$1,200</td>\n            <td>$800</td>\n            <td>$2,000</td>\n        </tr>\n    </tbody>\n</table>\n```\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Accessible Error Messages\u003C/span>\n\u003Cspan class=\"hljs-code\">```html\n<div role="alert" aria-live="polite" id="form-errors">\n    <h3>Please correct the following errors:</h3>\n    <ul>\n        <li><a href="#email-field">Email address is required</a></li>\n        <li><a href="#password-field">Password must be at least 8 characters</a></li>\n    </ul>\n</div>\n```\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Status and Progress Indicators\u003C/span>\n\u003Cspan class=\"hljs-code\">```html\n<div role="status" aria-live="polite" aria-describedby="progress-desc">\n    <div class="progress-bar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" role="progressbar">\n        <div class="progress-fill" style="width: 75%"></div>\n    </div>\n    <div id="progress-desc">Upload progress: 75% complete</div>\n</div>\n```\u003C/span>\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>: Screen readers not announcing content changes\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Use aria-live regions for dynamic content -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">aria-live\u003C/span>=\u003Cspan class=\"hljs-string\">"polite"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"status-messages"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-comment\"><!-- Dynamic status messages appear here -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">aria-live\u003C/span>=\u003Cspan class=\"hljs-string\">"assertive"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"error-messages"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-comment\"><!-- Critical error messages appear here -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Announce content updates -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\u003Cspan class=\"language-javascript\">\n\u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">announceUpdate\u003C/span>(\u003Cspan class=\"hljs-params\">message\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> statusRegion = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'status-messages'\u003C/span>);\n    statusRegion.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = message;\n    \n    \u003Cspan class=\"hljs-comment\">// Clear after announcement to allow repeat announcements\u003C/span>\n    \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n        statusRegion.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n    }, \u003Cspan class=\"hljs-number\">1000\u003C/span>);\n}\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"keyboard-navigation-issues\">Keyboard Navigation Issues\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Custom interactive elements not keyboard accessible\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Make custom elements focusable and operable -->\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\">"custom-button"\u003C/span> \n     \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"button"\u003C/span> \n     \u003Cspan class=\"hljs-attr\">tabindex\u003C/span>=\u003Cspan class=\"hljs-string\">"0"\u003C/span>\n     \u003Cspan class=\"hljs-attr\">aria-pressed\u003C/span>=\u003Cspan class=\"hljs-string\">"false"\u003C/span>\n     \u003Cspan class=\"hljs-attr\">onclick\u003C/span>=\u003Cspan class=\"hljs-string\">"toggleState(this)"\u003C/span>\n     \u003Cspan class=\"hljs-attr\">onkeydown\u003C/span>=\u003Cspan class=\"hljs-string\">"handleKeydown(event, this)"\u003C/span>>\u003C/span>\n    Toggle Setting\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\u003Cspan class=\"language-javascript\">\n\u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">handleKeydown\u003C/span>(\u003Cspan class=\"hljs-params\">event, element\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (event.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'Enter'\u003C/span> || event.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">' '\u003C/span>) {\n        event.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n        \u003Cspan class=\"hljs-title function_\">toggleState\u003C/span>(element);\n    }\n}\n\n\u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">toggleState\u003C/span>(\u003Cspan class=\"hljs-params\">element\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> isPressed = element.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-pressed'\u003C/span>) === \u003Cspan class=\"hljs-string\">'true'\u003C/span>;\n    element.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-pressed'\u003C/span>, !isPressed);\n}\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"focus-management-issues\">Focus Management Issues\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Focus lost during navigation or content updates\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// Focus management for single-page applications\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">FocusManager\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\">focusHistory\u003C/span> = [];\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Save current focus before navigation\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">saveFocus\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">focusHistory\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">activeElement\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Restore previous focus\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">restoreFocus\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> previousFocus = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">focusHistory\u003C/span>.\u003Cspan class=\"hljs-title function_\">pop\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (previousFocus && previousFocus.\u003Cspan class=\"hljs-property\">focus\u003C/span>) {\n            previousFocus.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Set focus to specific element\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">setFocus\u003C/span>(\u003Cspan class=\"hljs-params\">selector\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> element = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(selector);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (element) {\n            element.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Move focus to main content\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">focusMainContent\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setFocus\u003C/span>(\u003Cspan class=\"hljs-string\">'#main-content, main, [role="main"]'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Create focus trap for modals\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">trapFocus\u003C/span>(\u003Cspan class=\"hljs-params\">containerElement\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> focusableElements = containerElement.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\n            \u003Cspan class=\"hljs-string\">'a[href], button, textarea, input, select, [tabindex]:not([tabindex="-1"])'\u003C/span>\n        );\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> firstElement = focusableElements[\u003Cspan class=\"hljs-number\">0\u003C/span>];\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lastElement = focusableElements[focusableElements.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>];\n        \n        containerElement.\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\">'Tab'\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">shiftKey\u003C/span>) {\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">activeElement\u003C/span> === firstElement) {\n                        e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                        lastElement.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n                    }\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">activeElement\u003C/span> === lastElement) {\n                        e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                        firstElement.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n                    }\n                }\n            }\n        });\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Advanced Markdown accessibility and WCAG compliance represent essential skills for creating inclusive documentation that serves users with diverse abilities and technology requirements. By implementing comprehensive accessibility strategies, semantic markup patterns, and systematic testing approaches, content creators can build documentation ecosystems that provide equal access to information while maintaining the efficiency and simplicity that makes Markdown an effective content creation format.\u003C/p>\n\u003Cp>The key to successful accessibility implementation lies in understanding that accessibility improvements benefit all users, not just those with disabilities. Whether you're building technical documentation, educational content, or user guides, the techniques covered in this guide provide the foundation for creating universally usable content that meets legal requirements while delivering exceptional user experiences across all interaction methods and assistive technologies.\u003C/p>\n\u003Cp>Remember to implement accessibility from the beginning of your content creation process, test thoroughly with real users and assistive technologies, and continuously monitor and improve your accessibility practices based on user feedback and evolving standards. With proper implementation of accessibility principles, your Markdown-based content can achieve WCAG compliance while remaining maintainable, readable, and effective for all users regardless of their abilities or technology choices.\u003C/p>\n",[15,19,22,25,28,31,34,37],{"id":16,"text":17,"level":18},"why-master-markdown-accessibility-and-wcag-compliance","Why Master Markdown Accessibility and WCAG Compliance?",2,{"id":20,"text":21,"level":18},"foundation-accessibility-principles","Foundation Accessibility Principles",{"id":23,"text":24,"level":18},"testing-and-validation-workflows","Testing and Validation Workflows",{"id":26,"text":27,"level":18},"integration-with-documentation-systems","Integration with Documentation Systems",{"id":29,"text":30,"level":18},"wcag-21-implementation-checklist","WCAG 2.1 Implementation Checklist",{"id":32,"text":33,"level":18},"accessibility-patterns-and-best-practices","Accessibility Patterns and Best Practices",{"id":35,"text":36,"level":18},"troubleshooting-common-accessibility-issues","Troubleshooting Common Accessibility Issues",{"id":38,"text":39,"level":18},"conclusion","Conclusion",[],[42,50,58],{"slug":43,"title":44,"description":45,"excerpt":46,"date":47,"category":9,"author":10,"keywords":48,"readingMinutes":49},"markdown-accessibility-screen-readers-complete-guide","Markdown Accessibility and Screen Reader Support: Complete Guide for Inclusive Documentation and Content Creation","Master Markdown accessibility techniques for screen readers, assistive technologies, and inclusive content design. Learn semantic markup, alternative text strategies, and accessibility validation for comprehensive documentation accessibility.","Advanced Markdown accessibility and screen reader support techniques enable inclusive documentation that serves users with diverse abilities and assistive technology requirements. By implementing…","2025-11-22","markdown accessibility, screen reader markdown, accessible documentation, markdown ARIA, inclusive content markdown, markdown alt text, accessibility testing markdown, WCAG markdown compliance",28,{"slug":51,"title":52,"description":53,"excerpt":54,"date":55,"category":9,"author":10,"keywords":56,"readingMinutes":57},"markdown-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":59,"title":60,"description":61,"excerpt":62,"date":63,"category":9,"author":10,"keywords":64,"readingMinutes":65},"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,1792184945954]