Accessibility Course - Dignity Network Canada<\/title>\n <style>\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n line-height: 1.6;\n margin: 0;\n padding: 20px;\n background-color: #f8f9fa;\n }\n .course-container {\n max-width: 1200px;\n margin: 0 auto;\n background: white;\n border-radius: 8px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n overflow: hidden;\n }\n .course-header {\n background: #22227c;\n color: white;\n padding: 40px 20px;\n text-align: center;\n }\n .course-header h1 {\n margin: 0 0 10px 0;\n font-size: 2.5em;\n font-weight: 500;\n }\n .course-header p {\n margin: 0;\n font-size: 1.2em;\n opacity: 0.9;\n }\n .hidden {\n display: none !important;\n }\n .loading {\n text-align: center;\n padding: 40px;\n }\n .loading h2 {\n color: #22227c;\n margin-bottom: 10px;\n }\n .loading p {\n color: #666;\n }\n .aa-course-btn {\n background: #22227c !important;\n color: white !important;\n border: none !important;\n padding: 15px 30px !important;\n border-radius: 8px !important;\n font-size: 18px !important;\n cursor: pointer !important;\n display: inline-block !important;\n margin: 20px 0 !important;\n text-decoration: none !important;\n box-shadow: 10px 10px 10px #d4d3d3 !important;\n font-weight: bold !important;\n }\n .aa-course-btn:hover {\n background: #1a1a60 !important;\n color: white !important;\n }\n .aa-course-btn-secondary {\n background: #22227c !important;\n color: white !important;\n border: none !important;\n box-shadow: 10px 10px 10px #d4d3d3 !important;\n margin: 0 10px 0 0 !important;\n }\n .aa-course-btn-secondary:hover {\n background: #22227c !important;\n color: white !important;\n box-shadow: 10px 10px 10px #d4d3d3 !important;\n }\n .aa-quiz-question {\n margin: 20px 0;\n padding: 15px;\n border: 1px solid #ddd;\n border-radius: 5px;\n }\n .aa-quiz-options label {\n display: block;\n margin: 10px 0;\n cursor: pointer;\n }\n .aa-quiz-results {\n background: #f8f9fa;\n padding: 20px;\n border-radius: 5px;\n margin: 20px 0;\n }\n .aa-quiz-pass {\n color: #28a745;\n font-weight: bold;\n }\n .aa-quiz-fail {\n color: #dc3545;\n font-weight: bold;\n }\n .module-content {\n padding: 40px;\n line-height: 1.8;\n }\n .module-content h1 {\n color: #000;\n margin-bottom: 30px;\n padding-bottom: 15px;\n border-bottom: 2px solid #22227c;\n }\n .module-content h2 {\n color: #000;\n margin: 30px 0 15px 0;\n font-size: 1.4em;\n }\n .module-content h3 {\n color: #000;\n margin: 20px 0 10px 0;\n font-size: 1.2em;\n }\n .module-content p {\n margin: 15px 0;\n color: #000;\n }\n .module-content ul {\n margin: 15px 0;\n padding-left: 25px;\n }\n .module-content li {\n margin: 8px 0;\n color: #000;\n }\n .quiz-content {\n padding: 40px;\n max-width: 800px;\n margin: 0 auto;\n }\n .quiz-content h1 {\n color: #000;\n margin-bottom: 30px;\n text-align: center;\n padding-bottom: 15px;\n border-bottom: 2px solid #22227c;\n }\n .quiz-question {\n background: #f8f9fa;\n border: 1px solid #e9ecef;\n border-radius: 8px;\n padding: 25px;\n margin: 25px 0;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n }\n .quiz-question h3 {\n color: #000;\n margin-bottom: 20px;\n font-size: 1.1em;\n font-weight: 600;\n line-height: 1.5;\n }\n .quiz-option {\n display: block;\n margin: 12px 0;\n padding: 10px 15px;\n background: white;\n border: 1px solid #ddd;\n border-radius: 5px;\n cursor: pointer;\n transition: all 0.3s ease;\n color: #000;\n }\n .quiz-option:hover {\n background: #f0f8ff;\n border-color: #22227c;\n }\n .quiz-option input[type=\"radio\"] {\n margin-right: 10px;\n }\n .quiz-option label {\n cursor: pointer;\n margin: 0;\n display: block;\n }\n .quiz-submit {\n text-align: center;\n margin: 40px 0;\n }\n .quiz-results {\n background: #f8f9fa;\n border: 1px solid #e9ecef;\n border-radius: 8px;\n padding: 30px;\n margin: 30px 0;\n text-align: center;\n }\n .quiz-results h3 {\n color: #000;\n margin-bottom: 20px;\n }\n .quiz-score {\n font-size: 1.2em;\n margin: 15px 0;\n }\n .congratulations-content {\n padding: 40px;\n max-width: 900px;\n margin: 0 auto;\n }\n .congratulations-header {\n text-align: center;\n margin-bottom: 50px;\n padding: 40px 20px;\n background: #22227c;\n color: white;\n border-radius: 15px;\n }\n .congratulations-icon {\n font-size: 4em;\n margin-bottom: 20px;\n }\n .congratulations-header h1 {\n font-size: 2.5em;\n margin: 0 0 15px 0;\n color: white;\n }\n .congratulations-header h2 {\n font-size: 1.5em;\n margin: 0 0 15px 0;\n color: white;\n opacity: 0.9;\n }\n .congratulations-subtitle {\n font-size: 1.1em;\n margin: 0;\n opacity: 0.8;\n }\n .upgrade-section {\n background: #f8f9fa;\n padding: 40px;\n border-radius: 15px;\n text-align: center;\n }\n .upgrade-section h3 {\n color: #000;\n font-size: 1.8em;\n margin-bottom: 15px;\n }\n .upgrade-section p {\n color: #000;\n font-size: 1.1em;\n margin-bottom: 30px;\n }\n .pro-benefits {\n margin: 40px 0;\n }\n .pro-benefits h4 {\n color: #000;\n font-size: 1.4em;\n margin-bottom: 25px;\n }\n .benefits-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 20px;\n margin: 30px 0;\n }\n .benefit-item {\n padding: 20px;\n background: white;\n border-radius: 10px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n transition: transform 0.3s ease;\n }\n .benefit-item:hover {\n transform: translateY(-5px);\n }\n .benefit-icon {\n font-size: 2em;\n margin-right: 15px;\n flex-shrink: 0;\n }\n .benefit-text {\n text-align: left;\n }\n .benefit-text strong {\n display: block;\n color: #000;\n font-size: 1.1em;\n margin-bottom: 5px;\n }\n .benefit-text span {\n color: #000;\n font-size: 0.9em;\n }\n .upgrade-cta {\n margin-top: 40px;\n }\n .upgrade-btn {\n display: inline-flex;\n align-items: center;\n background: #ff6b35;\n color: white;\n padding: 18px 35px;\n border-radius: 50px;\n text-decoration: none;\n font-size: 1.2em;\n font-weight: bold;\n transition: all 0.3s ease;\n box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);\n }\n .upgrade-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);\n color: white;\n text-decoration: none;\n }\n .btn-text {\n margin-right: 10px;\n }\n .btn-arrow {\n font-size: 1.2em;\n transition: transform 0.3s ease;\n }\n .upgrade-btn:hover .btn-arrow {\n transform: translateX(5px);\n }\n .upgrade-note {\n margin-top: 35px;\n color: #000;\n font-style: italic;\n }\n #course-content {\n padding: 40px;\n }\n .course-outline {\n background: #f8f9fa;\n border-radius: 8px;\n padding: 30px;\n }\n .course-outline h2 {\n color: #000;\n margin-top: 0;\n margin-bottom: 20px;\n }\n .course-modules {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 20px;\n margin-bottom: 30px;\n }\n .module-card {\n position: relative;\n background: white;\n border: 1px solid #e9ecef;\n border-radius: 8px;\n padding: 20px 50px 20px 20px;\n transition: transform 0.2s, box-shadow 0.2s;\n }\n .module-card:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 15px rgba(0,0,0,0.1);\n }\n .module-card h5 {\n color: #22227c;\n margin-top: 0;\n margin-bottom: 10px;\n }\n .module-card p {\n color: #000;\n margin: 0;\n }\n .aa-quiz-next-actions {\n text-align: center;\n }\n .quiz-question.quiz-correct {\n border-color: #28a745;\n box-shadow: 0 0 0 1px rgba(40,167,69,0.15);\n }\n .quiz-question.quiz-incorrect {\n border-color: #dc3545;\n box-shadow: 0 0 0 1px rgba(220,53,69,0.15);\n }\n .quiz-feedback {\n margin-top: 12px;\n padding-top: 10px;\n border-top: 1px solid #e9ecef;\n font-size: 0.95em;\n color: #000;\n }\n .quiz-feedback-correct {\n color: #28a745;\n font-weight: 600;\n margin-bottom: 4px;\n }\n .quiz-feedback-incorrect {\n color: #dc3545;\n font-weight: 600;\n margin-bottom: 4px;\n }\n .quiz-feedback-explanation {\n margin-top: 4px;\n }\n <\/style>\n <link rel=\"stylesheet\" href=\"https:\/\/dignitynetwork.leblancandco-staging.ca\/wp-content\/plugins\/tool-for-ada-section-508-and-seo\/courses\/courses.css\">\n<\/head>\n<body>\n <div class=\"course-container\">\n <div class=\"course-header\">\n <a href=\"https:\/\/508accessible.com\/contact-us\/\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/dignitynetwork.leblancandco-staging.ca\/wp-content\/plugins\/tool-for-ada-section-508-and-seo\/img\/cpwa-white-logo.png\" alt=\"Accessibility Course\" style=\"width: 100%; max-width: 300px; margin-bottom: 20px;\"><\/a>\n <h1><b>Accessibility Course<\/b><\/h1>\n <p>Learn about web accessibility and Section 508 compliance<\/p>\n <\/div>\n \n <div id=\"course-content\">\n <div id=\"course-outline\" class=\"course-outline\">\n <h2>Course Overview<\/h2>\n <p>This comprehensive course covers all aspects of web accessibility, from foundational principles to advanced implementation techniques. You'll learn how to create inclusive digital experiences that work for everyone.<\/p>\n \n <div class=\"course-modules\">\n <div class=\"module-card\">\n <span style=\"background: #28a745; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; position: absolute; right: 10px; top: 10px; box-shadow: 4px 4px 10px #d4d3d3;\">FREE<\/span>\n <h5>Module 1: Foundations<\/h5>\n <p>Learn the basics of digital accessibility, disability types, and legal requirements.<\/p>\n <\/div>\n <div class=\"module-card\">\n <span style=\"background: #3B82F6; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; position: absolute; right: 10px; top: 10px;\">PRO<\/span>\n <h5>Module 2: WCAG 2.2 Deep Dive<\/h5>\n <p>Master the Web Content Accessibility Guidelines and success criteria.<\/p>\n <\/div>\n <div class=\"module-card\">\n <span style=\"background: #3B82F6; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; position: absolute; right: 10px; top: 10px;\">PRO<\/span>\n <h5>Module 3: Design Principles<\/h5>\n <p>Apply accessibility principles to visual design, typography, and layout.<\/p>\n <\/div>\n <div class=\"module-card\">\n <span style=\"background: #3B82F6; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; position: absolute; right: 10px; top: 10px;\">PRO<\/span>\n <h5>Module 4: Development<\/h5>\n <p>Implement accessible code using semantic HTML and ARIA.<\/p>\n <\/div>\n <div class=\"module-card\">\n <span style=\"background: #3B82F6; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; position: absolute; right: 10px; top: 10px;\">PRO<\/span>\n <h5>Module 5: Testing & Remediation<\/h5>\n <p>Test for accessibility issues and create remediation plans.<\/p>\n <\/div>\n <div class=\"module-card\">\n <span style=\"background: #3B82F6; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; position: absolute; right: 10px; top: 10px;\">PRO<\/span>\n <h5>Module 6: Agency Implementation<\/h5>\n <p>Integrate accessibility into project workflows and client communication.<\/p>\n <\/div>\n <\/div>\n \n <div style=\"text-align: center; margin: 40px 0 0;\">\n <button id=\"start-course-btn\" class=\"button button-primary\" style=\"background: #22227c; color: white; border: none; padding: 15px 30px; font-weight: bold; border-radius: 8px; font-size: 18px; cursor: pointer; box-shadow: 10px 10px 10px #d4d3d3;\">\n Start Course\n <\/button>\n <a href=\"https:\/\/508accessible.com\/pricing\/\" target=\"_blank\" id=\"start-course-btn\" class=\"button button-primary\" style=\"background: #22227c; color: white; border: none; padding: 18px 30px; border-radius: 8px; font-size: 18px; font-weight: bold; cursor: pointer; box-shadow: 10px 10px 10px #d4d3d3; text-decoration: none;\">\n Upgrade To Pro Version\n <\/a>\n <p style=\"margin-top: 15px; color: #000;\">\n <strong>Free Version:<\/strong> Access to Module 1 and Quiz 1<br>\n <strong>Pro Version:<\/strong> Complete course with all 6 modules, user management, and certificates\n <\/p>\n <\/div>\n <\/div>\n\n\n \n <\/div>\n <\/div>\n\n <script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script>\n <script>\n \/\/ Set up WordPress AJAX variables for the frontend\n window.dvin508Courses = {\n ajaxUrl: 'https:\/\/dignitynetwork.leblancandco-staging.ca\/wp-admin\/admin-ajax.php',\n nonce: 'b42a8e7df4',\n moduleUrl: 'https:\/\/dignitynetwork.leblancandco-staging.ca\/module-1\/'\n };\n\n \/\/ Load course scripts but don't start automatically\n function loadCourseScripts() {\n if (!document.querySelector('script[src*=\"courses.js\"]')) {\n const script = document.createElement('script');\n script.src = 'https:\/\/dignitynetwork.leblancandco-staging.ca\/wp-content\/plugins\/tool-for-ada-section-508-and-seo\/courses\/courses.js';\n script.onload = function() {\n \/\/ Script loaded, ready for button click\n console.log('Course scripts loaded successfully');\n };\n document.head.appendChild(script);\n }\n }\n\n \/\/ Start course directly without login\/registration\n function scrollToCourseTop() {\n const target = document.getElementById('course-content');\n if (target) {\n $('html, body').animate({\n scrollTop: $(target).offset().top\n }, 400);\n } else {\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n }\n \n function startCourseDirectly() {\n \/\/ Show Module 1 content directly\n $('#course-content').html(`\n <div id=\"aa-module-view\">\n <div id=\"aa-module-1\" class=\"module-content\">\n <h1>Module 1: Foundations of Web Accessibility<\/h1>\n\n <section>\n <h2>What is digital accessibility and why it matters<\/h2>\n <p>Digital accessibility means designing and developing websites, apps, and digital content so that people with disabilities can perceive, navigate, and interact with them effectively. It's about removing barriers that prevent users from accessing information or completing tasks online.<\/p>\n <h3>Why it matters:<\/h3>\n <ul>\n <li>1 in 4 adults in the U.S. has a disability<\/li>\n <li>Inclusive design improves usability for everyone, yes even you! Think of closed captions in noisy spaces.<\/li>\n <li>It's not just ethical \u2013 it's often a legal requirement and a brand differentiator.<\/li>\n <\/ul>\n <\/section>\n\n <section>\n <h2>Overview of disabilities and assistive technologies<\/h2>\n <p>Types of Disabilities and Assistive Technologies: People experience disability across a wide spectrum. Accessible design considers permanent, temporary, and situational disabilities.<\/p>\n <h3>Common disability categories:<\/h3>\n <ul>\n <li>Visual (e.g. blindness, low vision, color blindness)<\/li>\n <li>Auditory (e.g. deafness, hearing loss)<\/li>\n <li>Motor\/Mobility (e.g. limited fine motor control, tremors)<\/li>\n <li>Cognitive (e.g. dyslexia, memory impairments, ADHD)<\/li>\n <\/ul>\n <h3>Assistive technologies include:<\/h3>\n <ul>\n <li>Screen readers (e.g. NVDA, JAWS, VoiceOver)<\/li>\n <li>Alternative input devices (e.g. switch controls, eye-tracking)<\/li>\n <li>Screen magnifiers<\/li>\n <li>Speech-to-text software<\/li>\n <li>Captions and transcripts<\/li>\n <\/ul>\n <\/section>\n\n <section>\n <h2>Legal and business drivers (ADA, Section 508, AODA, etc.)<\/h2>\n <p>Legal Drivers for Web Accessibility: These laws and regulations vary by region but share one goal: to protect the digital rights of people with disabilities.<\/p>\n <h3>ADA (Americans with Disabilities Act) \u2013 U.S.<\/h3>\n <p><strong>Purpose:<\/strong> Prohibits discrimination against individuals with disabilities in all areas of public life.<\/p>\n <p><strong>Driver:<\/strong> Courts increasingly interpret websites as \"places of public accommodation,\" making inaccessible digital content a legal risk.<\/p>\n <p><strong>Result:<\/strong> Businesses, schools, and even small agencies can face lawsuits over inaccessible websites.<\/p>\n <h3>Section 508 \u2013 U.S. Federal<\/h3>\n <p><strong>Purpose:<\/strong> Requires federal agencies and contractors to ensure all digital content and tools are accessible.<\/p>\n <p><strong>Driver:<\/strong> Mandates WCAG 2.0\/2.1 compliance for websites, software, PDFs, and hardware.<\/p>\n <p><strong>Result:<\/strong> Private companies working with government contracts must meet accessibility standards.<\/p>\n <h3>Business Drivers for Accessibility<\/h3>\n <p>Even when it's not mandated by law, accessibility is a competitive advantage and adds brand strength. Here's why:<\/p>\n <ul>\n <li><strong>Broader Market Reach:<\/strong> 1 billion+ people globally live with disabilities. Accessible websites reach more users, increase conversions, and build loyalty.<\/li>\n <li><strong>SEO & Technical Benefits:<\/strong> Accessibility improvements (semantic HTML, alt text, keyboard nav) often boost search rankings and usability for all users.<\/li>\n <li><strong>Brand Trust & Reputation:<\/strong> Demonstrating inclusivity through accessible design enhances public perception, especially in DEI-focused markets.<\/li>\n <li><strong>Risk Mitigation:<\/strong> Proactive accessibility work reduces legal exposure, PR backlash, and costly retroactive fixes.<\/li>\n <li><strong>Client Demand:<\/strong> As regulations increase, accessibility becomes a key selection factor in RFPs, contracts, and government partnerships.<\/li>\n <\/ul>\n <\/section>\n\n <section>\n <h2>Introduction to WCAG 2.2 principles (POUR)<\/h2>\n <p>Principles of WCAG 2.2: POUR: The WCAG guidelines are organized around four core principles known as POUR\u2014they're the foundation of accessible digital experiences:<\/p>\n <ul>\n <li><strong>Perceivable:<\/strong> Information must be presented in ways users can detect (e.g. text alternatives for images, captions for videos).<\/li>\n <li><strong>Operable:<\/strong> Users must be able to navigate and interact with content (e.g. keyboard access, sufficient time, visible focus indicators).<\/li>\n <li><strong>Understandable:<\/strong> The interface and content must be clear and predictable (e.g. consistent navigation, readable language, helpful error messages).<\/li>\n <li><strong>Robust:<\/strong> Content must be compatible with a wide range of technologies, including current and future assistive tools (e.g. proper HTML semantics).<\/li>\n <\/ul>\n <\/section>\n\n <div style=\"text-align: center; margin: 30px 0; padding: 20px;\">\n <button id=\"aa-next-btn\" class=\"aa-course-btn\" style=\"background: #22227c; color: white; border: none; padding: 15px 30px; border-radius: 8px; font-size: 18px; font-weight: bold; cursor: pointer; display: inline-block; margin: 20px 0; box-shadow: 10px 10px 10px #d4d3d3;\">Take Quiz 1<\/button>\n <a href=\"https:\/\/508accessible.com\/pricing\/\" target=\"_blank\" id=\"start-course-btn\" class=\"button button-primary\" style=\"background: #22227c; color: white; border: none; padding: 18px 30px; border-radius: 8px; font-size: 18px; font-weight: bold; cursor: pointer; box-shadow: 10px 10px 10px #d4d3d3; text-decoration: none;\">\n Upgrade To Pro Version\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n `);\n \n scrollToCourseTop();\n \n \/\/ Add event listener for the next button\n $(document).off('click', '#aa-next-btn').on('click', '#aa-next-btn', function() {\n console.log('Next button clicked - showing Quiz 1');\n showQuiz1();\n });\n \n \/\/ Debug: Check if button exists\n setTimeout(function() {\n if ($('#aa-next-btn').length > 0) {\n console.log('Next button found and ready');\n } else {\n console.log('Next button not found');\n }\n }, 100);\n \n \/\/ Initialize course functionality\n if (typeof window.initializeCourse === 'function') {\n window.initializeCourse();\n }\n }\n \n \/\/ All 20 questions from courses.js\n const ALL_QUESTIONS = [\n { q: 'What is the primary goal of digital accessibility?', opts: ['To improve website speed','To enhance visual design','To ensure people with disabilities can access and interact with digital content','To reduce development costs'], a: 'C', explain: 'Accessibility is about making sure everyone, including people with disabilities, can use and benefit from digital content.' },\n { q: 'According to the CDC, how many U.S. adults have a disability?', opts: ['1 in 10','1 in 4','1 in 5','1 in 3'], a: 'B', explain: 'The CDC reports that 1 in 4 adults in the U.S. has a disability, showing how important accessibility is.' },\n { q: 'Which of the following is NOT a reason digital accessibility matters?', opts: ['It improves usability for all users','It reduces website hosting fees','It is a legal and ethical responsibility','It can increase customer satisfaction and sales'], a: 'B', explain: 'Hosting fees are unrelated to accessibility. Accessibility improves usability, meets legal standards, and boosts business outcomes.' },\n { q: 'What was the result of a retail company implementing accessible design?', opts: ['Decreased mobile traffic','12% increase in online sales','Reduced product returns','5% drop in customer satisfaction'], a: 'B', explain: 'Making a site accessible improves usability for more people, which can lead to increased sales and customer engagement.' },\n { q: 'Which of the following is a situational limitation?', opts: ['Blindness','Broken arm','Carrying groceries while using a smartphone','Dyslexia'], a: 'C', explain: 'Situational limitations are temporary or environmental challenges, like having full hands while using a device. Accessibility helps in these moments too.' },\n { q: 'Which is an example of a cognitive disability?', opts: ['Color blindness','Hearing loss','ADHD','Paralysis'], a: 'C', explain: 'ADHD affects attention and processing, making it a cognitive disability. Others listed are sensory or physical.' },\n { q: 'What assistive technology is used to read screen content aloud?', opts: ['Screen magnifier','Eye-tracking hardware','Screen reader','Visual alert'], a: 'C', explain: 'Screen readers convert text and interface elements into speech or braille, helping blind or visually impaired users navigate digital content.' },\n { q: 'Which tool helps users with hearing loss access audio content?', opts: ['Screen reader','Closed captions','Eye-tracking device','Switch system'], a: 'B', explain: 'Closed captions provide a text version of spoken content, making videos and audio accessible to users who are deaf or hard of hearing.' },\n { q: 'What does the ADA primarily address in digital accessibility?', opts: ['SEO optimization','Discrimination in physical spaces only','Discrimination in digital environments','Mobile responsiveness'], a: 'C', explain: 'The Americans with Disabilities Act (ADA) protects against discrimination in both physical and digital spaces, including websites and apps.' },\n { q: 'Section 508 applies to which group?', opts: ['Private businesses only','Educational institutions','Federal agencies and contractors','Nonprofits'], a: 'C', explain: 'Section 508 requires federal agencies and contractors to make their digital content accessible to people with disabilities.' },\n { q: 'What is the international standard for digital accessibility?', opts: ['ADA','WCAG','ARIA','HTML5'], a: 'B', explain: 'The Web Content Accessibility Guidelines (WCAG) are the globally recognized standards for making web content accessible.' },\n { q: 'What does the \"P\" in POUR stand for?', opts: ['Practical','Predictable','Perceivable','Portable'], a: 'C', explain: '\"Perceivable\" means users must be able to see, hear, or otherwise sense the content, whether through sight, sound, or assistive technology.' },\n { q: 'Which is an example of the \"Operable\" principle in WCAG?', opts: ['Alt text','Skip links','Plain language','Valid code'], a: 'B', explain: 'Skip links allow keyboard users to bypass repetitive navigation, making the site easier to operate without a mouse.' },\n { q: 'What does the \"Understandable\" principle emphasize?', opts: ['Fast loading times','Consistent navigation and clear content','Use of animations','Mobile-first design'], a: 'B', explain: 'Content should be easy to read and navigate, especially for users with cognitive disabilities. Consistency helps users predict and understand interactions.' },\n { q: 'What does \"Robust\" mean in the context of WCAG?', opts: ['Works only on modern browsers','Compatible with a wide range of devices and assistive technologies','Uses minimal code','Avoids all JavaScript'], a: 'B', explain: 'Robust content works across different platforms and technologies, including screen readers and other assistive tools.' },\n { q: 'Which of the following is a business benefit of accessibility?', opts: ['Higher hosting costs','Reduced SEO','Competitive advantage in procurement','Limited audience reach'], a: 'C', explain: 'Accessible products can meet government and enterprise procurement standards, giving businesses a competitive edge.' },\n { q: 'What is alt text used for?', opts: ['Styling images','Describing images for users who can\\'t see them','Creating image galleries','Compressing images'], a: 'B', explain: 'Alt text provides descriptions of images for screen reader users and improves accessibility and SEO.' },\n { q: 'What does ARIA help with?', opts: ['Improving page load speed','Enhancing dynamic content accessibility','Creating responsive layouts','Reducing server load'], a: 'B', explain: 'ARIA (Accessible Rich Internet Applications) helps make interactive and dynamic content accessible to assistive technologies.' },\n { q: 'What is semantic HTML?', opts: ['HTML that uses inline styles','HTML used only for mobile devices','HTML elements used according to their intended meaning','HTML that avoids JavaScript'], a: 'C', explain: 'Semantic HTML uses tags like header, nav, and main to convey meaning, improving accessibility and SEO.' },\n { q: 'What is a keyboard trap?', opts: ['A tool for testing keyboard input','A feature that enhances keyboard navigation','A failure where users can\\'t navigate out of an element using the keyboard','A shortcut for screen readers'], a: 'C', explain: 'Keyboard traps prevent users from moving focus away from an element, breaking navigation for keyboard-only users.' }\n ];\n\n \/\/ Function to shuffle array and pick random 10 questions\n function shuffleArray(array) {\n const shuffled = [...array];\n for (let i = shuffled.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];\n }\n return shuffled;\n }\n\n function pickRandom10Questions() {\n return shuffleArray(ALL_QUESTIONS).slice(0, 10);\n }\n\n \/\/ Show Quiz 1\n function showQuiz1() {\n const selectedQuestions = pickRandom10Questions();\n \n let quizHTML = `\n <div id=\"aa-quiz-1\" class=\"quiz-content\">\n <h1>Quiz: Module 1 Foundations<\/h1>\n <div id=\"aa-quiz-questions-1\">\n <form id=\"aa-quiz-form-1\">\n `;\n \n \/\/ Generate questions dynamically\n selectedQuestions.forEach((question, index) => {\n const questionNum = index + 1;\n quizHTML += `\n <div class=\"quiz-question\">\n <h3>${questionNum}. ${question.q}<\/h3>\n <div class=\"quiz-option\">\n <label><input type=\"radio\" name=\"q${questionNum}\" value=\"A\"> A. ${question.opts[0]}<\/label>\n <\/div>\n <div class=\"quiz-option\">\n <label><input type=\"radio\" name=\"q${questionNum}\" value=\"B\"> B. ${question.opts[1]}<\/label>\n <\/div>\n <div class=\"quiz-option\">\n <label><input type=\"radio\" name=\"q${questionNum}\" value=\"C\"> C. ${question.opts[2]}<\/label>\n <\/div>\n <div class=\"quiz-option\">\n <label><input type=\"radio\" name=\"q${questionNum}\" value=\"D\"> D. ${question.opts[3]}<\/label>\n <\/div>\n <\/div>\n `;\n });\n \n quizHTML += `\n <div class=\"quiz-submit\">\n <button type=\"submit\" class=\"aa-course-btn\">Submit Quiz<\/button>\n <a href=\"https:\/\/508accessible.com\/pricing\/\" target=\"_blank\" id=\"start-course-btn\" class=\"button button-primary\" style=\"background: #22227c; color: white; border: none; padding: 18px 30px; border-radius: 8px; font-size: 18px; font-weight: bold; cursor: pointer; box-shadow: 10px 10px 10px #d4d3d3; text-decoration: none;\">\n Upgrade To Pro Version\n <\/a>\n <\/div>\n <\/form>\n <\/div>\n <div id=\"aa-quiz-result-1\" style=\"display: none;\"><\/div>\n <div class=\"aa-quiz-next-actions\" style=\"display: none;\">\n <button id=\"aa-quiz-retake-1\" class=\"aa-course-btn aa-course-btn-secondary\" style=\"display: none;\">Retake Quiz<\/button>\n <button id=\"aa-quiz-back-module-1\" class=\"aa-course-btn aa-course-btn-secondary\" style=\"display: none;\">Back to Module 1<\/button>\n <button id=\"aa-quiz-continue-1\" class=\"aa-course-btn\" disabled>Continue<\/button>\n <\/div>\n <\/div>\n `;\n \n $('#course-content').html(quizHTML);\n scrollToCourseTop();\n \n \/\/ Store selected questions for scoring\n window.selectedQuestions = selectedQuestions;\n \n \/\/ Add quiz form submission handler\n $(document).off('submit', '#aa-quiz-form-1').on('submit', '#aa-quiz-form-1', function(e) {\n e.preventDefault();\n \n let correct = 0;\n let total = window.selectedQuestions.length;\n \n \/\/ Reset previous feedback\n $('.quiz-question').removeClass('quiz-correct quiz-incorrect');\n $('.quiz-feedback').remove();\n \n \/\/ Check answers against selected questions and build per-question feedback\n window.selectedQuestions.forEach((question, index) => {\n const questionNum = index + 1;\n const selected = $(`input[name=\"q${questionNum}\"]:checked`).val();\n const $questionBlock = $('.quiz-question').eq(index);\n \n \/\/ Map answer letter to index to find text\n const answerIndexMap = { A: 0, B: 1, C: 2, D: 3 };\n const correctLetter = question.a;\n const correctText = question.opts[answerIndexMap[correctLetter]];\n \n let selectedText = '';\n if (selected) {\n const selectedIndex = answerIndexMap[selected];\n selectedText = typeof selectedIndex !== 'undefined' ? question.opts[selectedIndex] : '';\n }\n \n const isCorrect = selected === correctLetter;\n if (isCorrect) {\n correct++;\n $questionBlock.addClass('quiz-correct');\n } else {\n $questionBlock.addClass('quiz-incorrect');\n }\n \n \/\/ Build feedback HTML similar to Pro version behavior\n const feedbackHtml = `\n <div class=\"quiz-feedback\">\n <div class=\"${isCorrect ? 'quiz-feedback-correct' : 'quiz-feedback-incorrect'}\">\n ${isCorrect ? 'Correct answer selected.' : 'Incorrect answer.'}\n <\/div>\n ${selected ? `<div><strong>Your answer:<\/strong> ${selected}. ${selectedText}<\/div>` : '<div><strong>Your answer:<\/strong> Not answered<\/div>'}\n <div><strong>Correct answer:<\/strong> ${correctLetter}. ${correctText}<\/div>\n <\/div>\n `;\n \n $questionBlock.append(feedbackHtml);\n });\n \n const percentage = Math.round((correct \/ total) * 100);\n const passed = percentage >= 70;\n \n \/\/ Show results\n $('#aa-quiz-result-1').html(`\n <div class=\"quiz-results\">\n <h3>Quiz Results<\/h3>\n <div class=\"quiz-score\">\n <strong>Score:<\/strong> ${correct}\/${total} (${percentage}%)\n <\/div>\n <p class=\"${passed ? 'aa-quiz-pass' : 'aa-quiz-fail'}\">\n ${passed ? 'Congratulations! You passed the quiz!' : 'You need to score at least 70% to pass. Please review the material and try again.'}\n <\/p>\n <\/div>\n `).show();\n \n $('.aa-quiz-next-actions').show();\n $('#aa-quiz-continue-1').prop('disabled', !passed);\n $('#aa-quiz-retake-1, #aa-quiz-back-module-1').toggle(!passed);\n \n if (passed) {\n \/\/ After passing, show upgrade section\n $(document).off('click', '#aa-quiz-continue-1').on('click', '#aa-quiz-continue-1', function() {\n showUpgradeSection();\n });\n } else {\n $(document).off('click', '#aa-quiz-retake-1').on('click', '#aa-quiz-retake-1', function() {\n showQuiz1();\n });\n $(document).off('click', '#aa-quiz-back-module-1').on('click', '#aa-quiz-back-module-1', function() {\n startCourseDirectly();\n });\n }\n });\n }\n \n \/\/ Show upgrade section after quiz completion\n function showUpgradeSection() {\n $('#course-content').html(`\n <div id=\"aa-upgrade-section\" class=\"congratulations-content\">\n <div class=\"congratulations-header\">\n <h1>Congratulations!<\/h1>\n <h2>You've completed Module 1: Foundations of Web Accessibility<\/h2>\n <p class=\"congratulations-subtitle\">You now understand the fundamentals of digital accessibility and its importance.<\/p>\n <\/div>\n \n <div class=\"upgrade-section\">\n <h3>Ready to become an accessibility expert?<\/h3>\n <p>Continue your learning journey with our comprehensive Pro course covering all aspects of web accessibility.<\/p>\n \n <div class=\"pro-benefits\">\n <h4>What you'll get with Pro:<\/h4>\n <div class=\"benefits-grid\">\n <div class=\"benefit-item\">\n <div class=\"benefit-text\">\n <strong>5 Additional Modules<\/strong>\n <span>WCAG 2.2, Design, Development, Testing & Implementation<\/span>\n <\/div>\n <\/div>\n <div class=\"benefit-item\">\n <div class=\"benefit-text\">\n <strong>Advanced Tools<\/strong>\n <span>Testing techniques and remediation strategies<\/span>\n <\/div>\n <\/div>\n <div class=\"benefit-item\">\n <div class=\"benefit-text\">\n <strong>User Management<\/strong>\n <span>Track progress and manage team learning<\/span>\n <\/div>\n <\/div>\n <div class=\"benefit-item\">\n <div class=\"benefit-text\">\n <strong>Certificate<\/strong>\n <span>Professional completion certificate<\/span>\n <\/div>\n <\/div>\n <div class=\"benefit-item\">\n <div class=\"benefit-text\">\n <strong>Priority Support<\/strong>\n <span>Expert guidance and updates<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"upgrade-cta\">\n <a href=\"https:\/\/508accessible.com\/pricing\/\" target=\"_blank\" id=\"start-course-btn\" class=\"button button-primary\" style=\"background: #22227c; color: white; border: none; padding: 18px 30px; border-radius: 8px; font-size: 18px; font-weight: bold; cursor: pointer; box-shadow: 10px 10px 10px #d4d3d3; text-decoration: none;\">\n Upgrade To Pro Version\n <\/a>\n <p class=\"upgrade-note\">Join thousands of professionals learning accessibility best practices<\/p>\n <\/div>\n <\/div>\n <\/div>\n `);\n scrollToCourseTop();\n }\n\n \/\/ Handle start course button click\n function handleStartCourse() {\n $('#course-outline').hide();\n startCourseDirectly();\n }\n\n \/\/ Start loading when page is ready\n $(document).ready(function() {\n \/\/ Initialize course when the \"Start Course\" button is clicked\n $('#start-course-btn').on('click', function() {\n handleStartCourse();\n });\n\n \/\/ Load course scripts but don't start automatically\n loadCourseScripts();\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-3510","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/dignitynetwork.leblancandco-staging.ca\/index.php\/wp-json\/wp\/v2\/pages\/3510","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dignitynetwork.leblancandco-staging.ca\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dignitynetwork.leblancandco-staging.ca\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dignitynetwork.leblancandco-staging.ca\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dignitynetwork.leblancandco-staging.ca\/index.php\/wp-json\/wp\/v2\/comments?post=3510"}],"version-history":[{"count":1,"href":"https:\/\/dignitynetwork.leblancandco-staging.ca\/index.php\/wp-json\/wp\/v2\/pages\/3510\/revisions"}],"predecessor-version":[{"id":3512,"href":"https:\/\/dignitynetwork.leblancandco-staging.ca\/index.php\/wp-json\/wp\/v2\/pages\/3510\/revisions\/3512"}],"wp:attachment":[{"href":"https:\/\/dignitynetwork.leblancandco-staging.ca\/index.php\/wp-json\/wp\/v2\/media?parent=3510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":3510,"date":"2026-04-13T15:30:03","date_gmt":"2026-04-13T15:30:03","guid":{"rendered":"https:\/\/dignitynetwork.leblancandco-staging.ca\/index.php\/accessibility-course\/"},"modified":"2026-04-13T15:44:53","modified_gmt":"2026-04-13T15:44:53","slug":"accessibility-course","status":"publish","type":"page","link":"https:\/\/dignitynetwork.leblancandco-staging.ca\/index.php\/accessibility-course\/","title":{"rendered":"Accessibility Course"},"content":{"rendered":"\n\n\n\n \n \n Accessibility Course - Dignity Network Canada<\/title>\n <style>\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n line-height: 1.6;\n margin: 0;\n padding: 20px;\n background-color: #f8f9fa;\n }\n .course-container {\n max-width: 1200px;\n margin: 0 auto;\n background: white;\n border-radius: 8px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n overflow: hidden;\n }\n .course-header {\n background: #22227c;\n color: white;\n padding: 40px 20px;\n text-align: center;\n }\n .course-header h1 {\n margin: 0 0 10px 0;\n font-size: 2.5em;\n font-weight: 500;\n }\n .course-header p {\n margin: 0;\n font-size: 1.2em;\n opacity: 0.9;\n }\n .hidden {\n display: none !important;\n }\n .loading {\n text-align: center;\n padding: 40px;\n }\n .loading h2 {\n color: #22227c;\n margin-bottom: 10px;\n }\n .loading p {\n color: #666;\n }\n .aa-course-btn {\n background: #22227c !important;\n color: white !important;\n border: none !important;\n padding: 15px 30px !important;\n border-radius: 8px !important;\n font-size: 18px !important;\n cursor: pointer !important;\n display: inline-block !important;\n margin: 20px 0 !important;\n text-decoration: none !important;\n box-shadow: 10px 10px 10px #d4d3d3 !important;\n font-weight: bold !important;\n }\n .aa-course-btn:hover {\n background: #1a1a60 !important;\n color: white !important;\n }\n .aa-course-btn-secondary {\n background: #22227c !important;\n color: white !important;\n border: none !important;\n box-shadow: 10px 10px 10px #d4d3d3 !important;\n margin: 0 10px 0 0 !important;\n }\n .aa-course-btn-secondary:hover {\n background: #22227c !important;\n color: white !important;\n box-shadow: 10px 10px 10px #d4d3d3 !important;\n }\n .aa-quiz-question {\n margin: 20px 0;\n padding: 15px;\n border: 1px solid #ddd;\n border-radius: 5px;\n }\n .aa-quiz-options label {\n display: block;\n margin: 10px 0;\n cursor: pointer;\n }\n .aa-quiz-results {\n background: #f8f9fa;\n padding: 20px;\n border-radius: 5px;\n margin: 20px 0;\n }\n .aa-quiz-pass {\n color: #28a745;\n font-weight: bold;\n }\n .aa-quiz-fail {\n color: #dc3545;\n font-weight: bold;\n }\n .module-content {\n padding: 40px;\n line-height: 1.8;\n }\n .module-content h1 {\n color: #000;\n margin-bottom: 30px;\n padding-bottom: 15px;\n border-bottom: 2px solid #22227c;\n }\n .module-content h2 {\n color: #000;\n margin: 30px 0 15px 0;\n font-size: 1.4em;\n }\n .module-content h3 {\n color: #000;\n margin: 20px 0 10px 0;\n font-size: 1.2em;\n }\n .module-content p {\n margin: 15px 0;\n color: #000;\n }\n .module-content ul {\n margin: 15px 0;\n padding-left: 25px;\n }\n .module-content li {\n margin: 8px 0;\n color: #000;\n }\n .quiz-content {\n padding: 40px;\n max-width: 800px;\n margin: 0 auto;\n }\n .quiz-content h1 {\n color: #000;\n margin-bottom: 30px;\n text-align: center;\n padding-bottom: 15px;\n border-bottom: 2px solid #22227c;\n }\n .quiz-question {\n background: #f8f9fa;\n border: 1px solid #e9ecef;\n border-radius: 8px;\n padding: 25px;\n margin: 25px 0;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n }\n .quiz-question h3 {\n color: #000;\n margin-bottom: 20px;\n font-size: 1.1em;\n font-weight: 600;\n line-height: 1.5;\n }\n .quiz-option {\n display: block;\n margin: 12px 0;\n padding: 10px 15px;\n background: white;\n border: 1px solid #ddd;\n border-radius: 5px;\n cursor: pointer;\n transition: all 0.3s ease;\n color: #000;\n }\n .quiz-option:hover {\n background: #f0f8ff;\n border-color: #22227c;\n }\n .quiz-option input[type=\"radio\"] {\n margin-right: 10px;\n }\n .quiz-option label {\n cursor: pointer;\n margin: 0;\n display: block;\n }\n .quiz-submit {\n text-align: center;\n margin: 40px 0;\n }\n .quiz-results {\n background: #f8f9fa;\n border: 1px solid #e9ecef;\n border-radius: 8px;\n padding: 30px;\n margin: 30px 0;\n text-align: center;\n }\n .quiz-results h3 {\n color: #000;\n margin-bottom: 20px;\n }\n .quiz-score {\n font-size: 1.2em;\n margin: 15px 0;\n }\n .congratulations-content {\n padding: 40px;\n max-width: 900px;\n margin: 0 auto;\n }\n .congratulations-header {\n text-align: center;\n margin-bottom: 50px;\n padding: 40px 20px;\n background: #22227c;\n color: white;\n border-radius: 15px;\n }\n .congratulations-icon {\n font-size: 4em;\n margin-bottom: 20px;\n }\n .congratulations-header h1 {\n font-size: 2.5em;\n margin: 0 0 15px 0;\n color: white;\n }\n .congratulations-header h2 {\n font-size: 1.5em;\n margin: 0 0 15px 0;\n color: white;\n opacity: 0.9;\n }\n .congratulations-subtitle {\n font-size: 1.1em;\n margin: 0;\n opacity: 0.8;\n }\n .upgrade-section {\n background: #f8f9fa;\n padding: 40px;\n border-radius: 15px;\n text-align: center;\n }\n .upgrade-section h3 {\n color: #000;\n font-size: 1.8em;\n margin-bottom: 15px;\n }\n .upgrade-section p {\n color: #000;\n font-size: 1.1em;\n margin-bottom: 30px;\n }\n .pro-benefits {\n margin: 40px 0;\n }\n .pro-benefits h4 {\n color: #000;\n font-size: 1.4em;\n margin-bottom: 25px;\n }\n .benefits-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 20px;\n margin: 30px 0;\n }\n .benefit-item {\n padding: 20px;\n background: white;\n border-radius: 10px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n transition: transform 0.3s ease;\n }\n .benefit-item:hover {\n transform: translateY(-5px);\n }\n .benefit-icon {\n font-size: 2em;\n margin-right: 15px;\n flex-shrink: 0;\n }\n .benefit-text {\n text-align: left;\n }\n .benefit-text strong {\n display: block;\n color: #000;\n font-size: 1.1em;\n margin-bottom: 5px;\n }\n .benefit-text span {\n color: #000;\n font-size: 0.9em;\n }\n .upgrade-cta {\n margin-top: 40px;\n }\n .upgrade-btn {\n display: inline-flex;\n align-items: center;\n background: #ff6b35;\n color: white;\n padding: 18px 35px;\n border-radius: 50px;\n text-decoration: none;\n font-size: 1.2em;\n font-weight: bold;\n transition: all 0.3s ease;\n box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);\n }\n .upgrade-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);\n color: white;\n text-decoration: none;\n }\n .btn-text {\n margin-right: 10px;\n }\n .btn-arrow {\n font-size: 1.2em;\n transition: transform 0.3s ease;\n }\n .upgrade-btn:hover .btn-arrow {\n transform: translateX(5px);\n }\n .upgrade-note {\n margin-top: 35px;\n color: #000;\n font-style: italic;\n }\n #course-content {\n padding: 40px;\n }\n .course-outline {\n background: #f8f9fa;\n border-radius: 8px;\n padding: 30px;\n }\n .course-outline h2 {\n color: #000;\n margin-top: 0;\n margin-bottom: 20px;\n }\n .course-modules {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 20px;\n margin-bottom: 30px;\n }\n .module-card {\n position: relative;\n background: white;\n border: 1px solid #e9ecef;\n border-radius: 8px;\n padding: 20px 50px 20px 20px;\n transition: transform 0.2s, box-shadow 0.2s;\n }\n .module-card:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 15px rgba(0,0,0,0.1);\n }\n .module-card h5 {\n color: #22227c;\n margin-top: 0;\n margin-bottom: 10px;\n }\n .module-card p {\n color: #000;\n margin: 0;\n }\n .aa-quiz-next-actions {\n text-align: center;\n }\n .quiz-question.quiz-correct {\n border-color: #28a745;\n box-shadow: 0 0 0 1px rgba(40,167,69,0.15);\n }\n .quiz-question.quiz-incorrect {\n border-color: #dc3545;\n box-shadow: 0 0 0 1px rgba(220,53,69,0.15);\n }\n .quiz-feedback {\n margin-top: 12px;\n padding-top: 10px;\n border-top: 1px solid #e9ecef;\n font-size: 0.95em;\n color: #000;\n }\n .quiz-feedback-correct {\n color: #28a745;\n font-weight: 600;\n margin-bottom: 4px;\n }\n .quiz-feedback-incorrect {\n color: #dc3545;\n font-weight: 600;\n margin-bottom: 4px;\n }\n .quiz-feedback-explanation {\n margin-top: 4px;\n }\n <\/style>\n <link rel=\"stylesheet\" href=\"https:\/\/dignitynetwork.leblancandco-staging.ca\/wp-content\/plugins\/tool-for-ada-section-508-and-seo\/courses\/courses.css\">\n<\/head>\n<body>\n <div class=\"course-container\">\n <div class=\"course-header\">\n <a href=\"https:\/\/508accessible.com\/contact-us\/\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/dignitynetwork.leblancandco-staging.ca\/wp-content\/plugins\/tool-for-ada-section-508-and-seo\/img\/cpwa-white-logo.png\" alt=\"Accessibility Course\" style=\"width: 100%; max-width: 300px; margin-bottom: 20px;\"><\/a>\n <h1><b>Accessibility Course<\/b><\/h1>\n <p>Learn about web accessibility and Section 508 compliance<\/p>\n <\/div>\n \n <div id=\"course-content\">\n <div id=\"course-outline\" class=\"course-outline\">\n <h2>Course Overview<\/h2>\n <p>This comprehensive course covers all aspects of web accessibility, from foundational principles to advanced implementation techniques. You'll learn how to create inclusive digital experiences that work for everyone.<\/p>\n \n <div class=\"course-modules\">\n <div class=\"module-card\">\n <span style=\"background: #28a745; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; position: absolute; right: 10px; top: 10px; box-shadow: 4px 4px 10px #d4d3d3;\">FREE<\/span>\n <h5>Module 1: Foundations<\/h5>\n <p>Learn the basics of digital accessibility, disability types, and legal requirements.<\/p>\n <\/div>\n <div class=\"module-card\">\n <span style=\"background: #3B82F6; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; position: absolute; right: 10px; top: 10px;\">PRO<\/span>\n <h5>Module 2: WCAG 2.2 Deep Dive<\/h5>\n <p>Master the Web Content Accessibility Guidelines and success criteria.<\/p>\n <\/div>\n <div class=\"module-card\">\n <span style=\"background: #3B82F6; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; position: absolute; right: 10px; top: 10px;\">PRO<\/span>\n <h5>Module 3: Design Principles<\/h5>\n <p>Apply accessibility principles to visual design, typography, and layout.<\/p>\n <\/div>\n <div class=\"module-card\">\n <span style=\"background: #3B82F6; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; position: absolute; right: 10px; top: 10px;\">PRO<\/span>\n <h5>Module 4: Development<\/h5>\n <p>Implement accessible code using semantic HTML and ARIA.<\/p>\n <\/div>\n <div class=\"module-card\">\n <span style=\"background: #3B82F6; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; position: absolute; right: 10px; top: 10px;\">PRO<\/span>\n <h5>Module 5: Testing & Remediation<\/h5>\n <p>Test for accessibility issues and create remediation plans.<\/p>\n <\/div>\n <div class=\"module-card\">\n <span style=\"background: #3B82F6; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; position: absolute; right: 10px; top: 10px;\">PRO<\/span>\n <h5>Module 6: Agency Implementation<\/h5>\n <p>Integrate accessibility into project workflows and client communication.<\/p>\n <\/div>\n <\/div>\n \n <div style=\"text-align: center; margin: 40px 0 0;\">\n <button id=\"start-course-btn\" class=\"button button-primary\" style=\"background: #22227c; color: white; border: none; padding: 15px 30px; font-weight: bold; border-radius: 8px; font-size: 18px; cursor: pointer; box-shadow: 10px 10px 10px #d4d3d3;\">\n Start Course\n <\/button>\n <a href=\"https:\/\/508accessible.com\/pricing\/\" target=\"_blank\" id=\"start-course-btn\" class=\"button button-primary\" style=\"background: #22227c; color: white; border: none; padding: 18px 30px; border-radius: 8px; font-size: 18px; font-weight: bold; cursor: pointer; box-shadow: 10px 10px 10px #d4d3d3; text-decoration: none;\">\n Upgrade To Pro Version\n <\/a>\n <p style=\"margin-top: 15px; color: #000;\">\n <strong>Free Version:<\/strong> Access to Module 1 and Quiz 1<br>\n <strong>Pro Version:<\/strong> Complete course with all 6 modules, user management, and certificates\n <\/p>\n <\/div>\n <\/div>\n\n\n \n <\/div>\n <\/div>\n\n <script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script>\n <script>\n \/\/ Set up WordPress AJAX variables for the frontend\n window.dvin508Courses = {\n ajaxUrl: 'https:\/\/dignitynetwork.leblancandco-staging.ca\/wp-admin\/admin-ajax.php',\n nonce: 'b42a8e7df4',\n moduleUrl: 'https:\/\/dignitynetwork.leblancandco-staging.ca\/module-1\/'\n };\n\n \/\/ Load course scripts but don't start automatically\n function loadCourseScripts() {\n if (!document.querySelector('script[src*=\"courses.js\"]')) {\n const script = document.createElement('script');\n script.src = 'https:\/\/dignitynetwork.leblancandco-staging.ca\/wp-content\/plugins\/tool-for-ada-section-508-and-seo\/courses\/courses.js';\n script.onload = function() {\n \/\/ Script loaded, ready for button click\n console.log('Course scripts loaded successfully');\n };\n document.head.appendChild(script);\n }\n }\n\n \/\/ Start course directly without login\/registration\n function scrollToCourseTop() {\n const target = document.getElementById('course-content');\n if (target) {\n $('html, body').animate({\n scrollTop: $(target).offset().top\n }, 400);\n } else {\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n }\n \n function startCourseDirectly() {\n \/\/ Show Module 1 content directly\n $('#course-content').html(`\n <div id=\"aa-module-view\">\n <div id=\"aa-module-1\" class=\"module-content\">\n <h1>Module 1: Foundations of Web Accessibility<\/h1>\n\n <section>\n <h2>What is digital accessibility and why it matters<\/h2>\n <p>Digital accessibility means designing and developing websites, apps, and digital content so that people with disabilities can perceive, navigate, and interact with them effectively. It's about removing barriers that prevent users from accessing information or completing tasks online.<\/p>\n <h3>Why it matters:<\/h3>\n <ul>\n <li>1 in 4 adults in the U.S. has a disability<\/li>\n <li>Inclusive design improves usability for everyone, yes even you! Think of closed captions in noisy spaces.<\/li>\n <li>It's not just ethical \u2013 it's often a legal requirement and a brand differentiator.<\/li>\n <\/ul>\n <\/section>\n\n <section>\n <h2>Overview of disabilities and assistive technologies<\/h2>\n <p>Types of Disabilities and Assistive Technologies: People experience disability across a wide spectrum. Accessible design considers permanent, temporary, and situational disabilities.<\/p>\n <h3>Common disability categories:<\/h3>\n <ul>\n <li>Visual (e.g. blindness, low vision, color blindness)<\/li>\n <li>Auditory (e.g. deafness, hearing loss)<\/li>\n <li>Motor\/Mobility (e.g. limited fine motor control, tremors)<\/li>\n <li>Cognitive (e.g. dyslexia, memory impairments, ADHD)<\/li>\n <\/ul>\n <h3>Assistive technologies include:<\/h3>\n <ul>\n <li>Screen readers (e.g. NVDA, JAWS, VoiceOver)<\/li>\n <li>Alternative input devices (e.g. switch controls, eye-tracking)<\/li>\n <li>Screen magnifiers<\/li>\n <li>Speech-to-text software<\/li>\n <li>Captions and transcripts<\/li>\n <\/ul>\n <\/section>\n\n <section>\n <h2>Legal and business drivers (ADA, Section 508, AODA, etc.)<\/h2>\n <p>Legal Drivers for Web Accessibility: These laws and regulations vary by region but share one goal: to protect the digital rights of people with disabilities.<\/p>\n <h3>ADA (Americans with Disabilities Act) \u2013 U.S.<\/h3>\n <p><strong>Purpose:<\/strong> Prohibits discrimination against individuals with disabilities in all areas of public life.<\/p>\n <p><strong>Driver:<\/strong> Courts increasingly interpret websites as \"places of public accommodation,\" making inaccessible digital content a legal risk.<\/p>\n <p><strong>Result:<\/strong> Businesses, schools, and even small agencies can face lawsuits over inaccessible websites.<\/p>\n <h3>Section 508 \u2013 U.S. Federal<\/h3>\n <p><strong>Purpose:<\/strong> Requires federal agencies and contractors to ensure all digital content and tools are accessible.<\/p>\n <p><strong>Driver:<\/strong> Mandates WCAG 2.0\/2.1 compliance for websites, software, PDFs, and hardware.<\/p>\n <p><strong>Result:<\/strong> Private companies working with government contracts must meet accessibility standards.<\/p>\n <h3>Business Drivers for Accessibility<\/h3>\n <p>Even when it's not mandated by law, accessibility is a competitive advantage and adds brand strength. Here's why:<\/p>\n <ul>\n <li><strong>Broader Market Reach:<\/strong> 1 billion+ people globally live with disabilities. Accessible websites reach more users, increase conversions, and build loyalty.<\/li>\n <li><strong>SEO & Technical Benefits:<\/strong> Accessibility improvements (semantic HTML, alt text, keyboard nav) often boost search rankings and usability for all users.<\/li>\n <li><strong>Brand Trust & Reputation:<\/strong> Demonstrating inclusivity through accessible design enhances public perception, especially in DEI-focused markets.<\/li>\n <li><strong>Risk Mitigation:<\/strong> Proactive accessibility work reduces legal exposure, PR backlash, and costly retroactive fixes.<\/li>\n <li><strong>Client Demand:<\/strong> As regulations increase, accessibility becomes a key selection factor in RFPs, contracts, and government partnerships.<\/li>\n <\/ul>\n <\/section>\n\n <section>\n <h2>Introduction to WCAG 2.2 principles (POUR)<\/h2>\n <p>Principles of WCAG 2.2: POUR: The WCAG guidelines are organized around four core principles known as POUR\u2014they're the foundation of accessible digital experiences:<\/p>\n <ul>\n <li><strong>Perceivable:<\/strong> Information must be presented in ways users can detect (e.g. text alternatives for images, captions for videos).<\/li>\n <li><strong>Operable:<\/strong> Users must be able to navigate and interact with content (e.g. keyboard access, sufficient time, visible focus indicators).<\/li>\n <li><strong>Understandable:<\/strong> The interface and content must be clear and predictable (e.g. consistent navigation, readable language, helpful error messages).<\/li>\n <li><strong>Robust:<\/strong> Content must be compatible with a wide range of technologies, including current and future assistive tools (e.g. proper HTML semantics).<\/li>\n <\/ul>\n <\/section>\n\n <div style=\"text-align: center; margin: 30px 0; padding: 20px;\">\n <button id=\"aa-next-btn\" class=\"aa-course-btn\" style=\"background: #22227c; color: white; border: none; padding: 15px 30px; border-radius: 8px; font-size: 18px; font-weight: bold; cursor: pointer; display: inline-block; margin: 20px 0; box-shadow: 10px 10px 10px #d4d3d3;\">Take Quiz 1<\/button>\n <a href=\"https:\/\/508accessible.com\/pricing\/\" target=\"_blank\" id=\"start-course-btn\" class=\"button button-primary\" style=\"background: #22227c; color: white; border: none; padding: 18px 30px; border-radius: 8px; font-size: 18px; font-weight: bold; cursor: pointer; box-shadow: 10px 10px 10px #d4d3d3; text-decoration: none;\">\n Upgrade To Pro Version\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n `);\n \n scrollToCourseTop();\n \n \/\/ Add event listener for the next button\n $(document).off('click', '#aa-next-btn').on('click', '#aa-next-btn', function() {\n console.log('Next button clicked - showing Quiz 1');\n showQuiz1();\n });\n \n \/\/ Debug: Check if button exists\n setTimeout(function() {\n if ($('#aa-next-btn').length > 0) {\n console.log('Next button found and ready');\n } else {\n console.log('Next button not found');\n }\n }, 100);\n \n \/\/ Initialize course functionality\n if (typeof window.initializeCourse === 'function') {\n window.initializeCourse();\n }\n }\n \n \/\/ All 20 questions from courses.js\n const ALL_QUESTIONS = [\n { q: 'What is the primary goal of digital accessibility?', opts: ['To improve website speed','To enhance visual design','To ensure people with disabilities can access and interact with digital content','To reduce development costs'], a: 'C', explain: 'Accessibility is about making sure everyone, including people with disabilities, can use and benefit from digital content.' },\n { q: 'According to the CDC, how many U.S. adults have a disability?', opts: ['1 in 10','1 in 4','1 in 5','1 in 3'], a: 'B', explain: 'The CDC reports that 1 in 4 adults in the U.S. has a disability, showing how important accessibility is.' },\n { q: 'Which of the following is NOT a reason digital accessibility matters?', opts: ['It improves usability for all users','It reduces website hosting fees','It is a legal and ethical responsibility','It can increase customer satisfaction and sales'], a: 'B', explain: 'Hosting fees are unrelated to accessibility. Accessibility improves usability, meets legal standards, and boosts business outcomes.' },\n { q: 'What was the result of a retail company implementing accessible design?', opts: ['Decreased mobile traffic','12% increase in online sales','Reduced product returns','5% drop in customer satisfaction'], a: 'B', explain: 'Making a site accessible improves usability for more people, which can lead to increased sales and customer engagement.' },\n { q: 'Which of the following is a situational limitation?', opts: ['Blindness','Broken arm','Carrying groceries while using a smartphone','Dyslexia'], a: 'C', explain: 'Situational limitations are temporary or environmental challenges, like having full hands while using a device. Accessibility helps in these moments too.' },\n { q: 'Which is an example of a cognitive disability?', opts: ['Color blindness','Hearing loss','ADHD','Paralysis'], a: 'C', explain: 'ADHD affects attention and processing, making it a cognitive disability. Others listed are sensory or physical.' },\n { q: 'What assistive technology is used to read screen content aloud?', opts: ['Screen magnifier','Eye-tracking hardware','Screen reader','Visual alert'], a: 'C', explain: 'Screen readers convert text and interface elements into speech or braille, helping blind or visually impaired users navigate digital content.' },\n { q: 'Which tool helps users with hearing loss access audio content?', opts: ['Screen reader','Closed captions','Eye-tracking device','Switch system'], a: 'B', explain: 'Closed captions provide a text version of spoken content, making videos and audio accessible to users who are deaf or hard of hearing.' },\n { q: 'What does the ADA primarily address in digital accessibility?', opts: ['SEO optimization','Discrimination in physical spaces only','Discrimination in digital environments','Mobile responsiveness'], a: 'C', explain: 'The Americans with Disabilities Act (ADA) protects against discrimination in both physical and digital spaces, including websites and apps.' },\n { q: 'Section 508 applies to which group?', opts: ['Private businesses only','Educational institutions','Federal agencies and contractors','Nonprofits'], a: 'C', explain: 'Section 508 requires federal agencies and contractors to make their digital content accessible to people with disabilities.' },\n { q: 'What is the international standard for digital accessibility?', opts: ['ADA','WCAG','ARIA','HTML5'], a: 'B', explain: 'The Web Content Accessibility Guidelines (WCAG) are the globally recognized standards for making web content accessible.' },\n { q: 'What does the \"P\" in POUR stand for?', opts: ['Practical','Predictable','Perceivable','Portable'], a: 'C', explain: '\"Perceivable\" means users must be able to see, hear, or otherwise sense the content, whether through sight, sound, or assistive technology.' },\n { q: 'Which is an example of the \"Operable\" principle in WCAG?', opts: ['Alt text','Skip links','Plain language','Valid code'], a: 'B', explain: 'Skip links allow keyboard users to bypass repetitive navigation, making the site easier to operate without a mouse.' },\n { q: 'What does the \"Understandable\" principle emphasize?', opts: ['Fast loading times','Consistent navigation and clear content','Use of animations','Mobile-first design'], a: 'B', explain: 'Content should be easy to read and navigate, especially for users with cognitive disabilities. Consistency helps users predict and understand interactions.' },\n { q: 'What does \"Robust\" mean in the context of WCAG?', opts: ['Works only on modern browsers','Compatible with a wide range of devices and assistive technologies','Uses minimal code','Avoids all JavaScript'], a: 'B', explain: 'Robust content works across different platforms and technologies, including screen readers and other assistive tools.' },\n { q: 'Which of the following is a business benefit of accessibility?', opts: ['Higher hosting costs','Reduced SEO','Competitive advantage in procurement','Limited audience reach'], a: 'C', explain: 'Accessible products can meet government and enterprise procurement standards, giving businesses a competitive edge.' },\n { q: 'What is alt text used for?', opts: ['Styling images','Describing images for users who can\\'t see them','Creating image galleries','Compressing images'], a: 'B', explain: 'Alt text provides descriptions of images for screen reader users and improves accessibility and SEO.' },\n { q: 'What does ARIA help with?', opts: ['Improving page load speed','Enhancing dynamic content accessibility','Creating responsive layouts','Reducing server load'], a: 'B', explain: 'ARIA (Accessible Rich Internet Applications) helps make interactive and dynamic content accessible to assistive technologies.' },\n { q: 'What is semantic HTML?', opts: ['HTML that uses inline styles','HTML used only for mobile devices','HTML elements used according to their intended meaning','HTML that avoids JavaScript'], a: 'C', explain: 'Semantic HTML uses tags like header, nav, and main to convey meaning, improving accessibility and SEO.' },\n { q: 'What is a keyboard trap?', opts: ['A tool for testing keyboard input','A feature that enhances keyboard navigation','A failure where users can\\'t navigate out of an element using the keyboard','A shortcut for screen readers'], a: 'C', explain: 'Keyboard traps prevent users from moving focus away from an element, breaking navigation for keyboard-only users.' }\n ];\n\n \/\/ Function to shuffle array and pick random 10 questions\n function shuffleArray(array) {\n const shuffled = [...array];\n for (let i = shuffled.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];\n }\n return shuffled;\n }\n\n function pickRandom10Questions() {\n return shuffleArray(ALL_QUESTIONS).slice(0, 10);\n }\n\n \/\/ Show Quiz 1\n function showQuiz1() {\n const selectedQuestions = pickRandom10Questions();\n \n let quizHTML = `\n <div id=\"aa-quiz-1\" class=\"quiz-content\">\n <h1>Quiz: Module 1 Foundations<\/h1>\n <div id=\"aa-quiz-questions-1\">\n <form id=\"aa-quiz-form-1\">\n `;\n \n \/\/ Generate questions dynamically\n selectedQuestions.forEach((question, index) => {\n const questionNum = index + 1;\n quizHTML += `\n <div class=\"quiz-question\">\n <h3>${questionNum}. ${question.q}<\/h3>\n <div class=\"quiz-option\">\n <label><input type=\"radio\" name=\"q${questionNum}\" value=\"A\"> A. ${question.opts[0]}<\/label>\n <\/div>\n <div class=\"quiz-option\">\n <label><input type=\"radio\" name=\"q${questionNum}\" value=\"B\"> B. ${question.opts[1]}<\/label>\n <\/div>\n <div class=\"quiz-option\">\n <label><input type=\"radio\" name=\"q${questionNum}\" value=\"C\"> C. ${question.opts[2]}<\/label>\n <\/div>\n <div class=\"quiz-option\">\n <label><input type=\"radio\" name=\"q${questionNum}\" value=\"D\"> D. ${question.opts[3]}<\/label>\n <\/div>\n <\/div>\n `;\n });\n \n quizHTML += `\n <div class=\"quiz-submit\">\n <button type=\"submit\" class=\"aa-course-btn\">Submit Quiz<\/button>\n <a href=\"https:\/\/508accessible.com\/pricing\/\" target=\"_blank\" id=\"start-course-btn\" class=\"button button-primary\" style=\"background: #22227c; color: white; border: none; padding: 18px 30px; border-radius: 8px; font-size: 18px; font-weight: bold; cursor: pointer; box-shadow: 10px 10px 10px #d4d3d3; text-decoration: none;\">\n Upgrade To Pro Version\n <\/a>\n <\/div>\n <\/form>\n <\/div>\n <div id=\"aa-quiz-result-1\" style=\"display: none;\"><\/div>\n <div class=\"aa-quiz-next-actions\" style=\"display: none;\">\n <button id=\"aa-quiz-retake-1\" class=\"aa-course-btn aa-course-btn-secondary\" style=\"display: none;\">Retake Quiz<\/button>\n <button id=\"aa-quiz-back-module-1\" class=\"aa-course-btn aa-course-btn-secondary\" style=\"display: none;\">Back to Module 1<\/button>\n <button id=\"aa-quiz-continue-1\" class=\"aa-course-btn\" disabled>Continue<\/button>\n <\/div>\n <\/div>\n `;\n \n $('#course-content').html(quizHTML);\n scrollToCourseTop();\n \n \/\/ Store selected questions for scoring\n window.selectedQuestions = selectedQuestions;\n \n \/\/ Add quiz form submission handler\n $(document).off('submit', '#aa-quiz-form-1').on('submit', '#aa-quiz-form-1', function(e) {\n e.preventDefault();\n \n let correct = 0;\n let total = window.selectedQuestions.length;\n \n \/\/ Reset previous feedback\n $('.quiz-question').removeClass('quiz-correct quiz-incorrect');\n $('.quiz-feedback').remove();\n \n \/\/ Check answers against selected questions and build per-question feedback\n window.selectedQuestions.forEach((question, index) => {\n const questionNum = index + 1;\n const selected = $(`input[name=\"q${questionNum}\"]:checked`).val();\n const $questionBlock = $('.quiz-question').eq(index);\n \n \/\/ Map answer letter to index to find text\n const answerIndexMap = { A: 0, B: 1, C: 2, D: 3 };\n const correctLetter = question.a;\n const correctText = question.opts[answerIndexMap[correctLetter]];\n \n let selectedText = '';\n if (selected) {\n const selectedIndex = answerIndexMap[selected];\n selectedText = typeof selectedIndex !== 'undefined' ? question.opts[selectedIndex] : '';\n }\n \n const isCorrect = selected === correctLetter;\n if (isCorrect) {\n correct++;\n $questionBlock.addClass('quiz-correct');\n } else {\n $questionBlock.addClass('quiz-incorrect');\n }\n \n \/\/ Build feedback HTML similar to Pro version behavior\n const feedbackHtml = `\n <div class=\"quiz-feedback\">\n <div class=\"${isCorrect ? 'quiz-feedback-correct' : 'quiz-feedback-incorrect'}\">\n ${isCorrect ? 'Correct answer selected.' : 'Incorrect answer.'}\n <\/div>\n ${selected ? `<div><strong>Your answer:<\/strong> ${selected}. ${selectedText}<\/div>` : '<div><strong>Your answer:<\/strong> Not answered<\/div>'}\n <div><strong>Correct answer:<\/strong> ${correctLetter}. ${correctText}<\/div>\n <\/div>\n `;\n \n $questionBlock.append(feedbackHtml);\n });\n \n const percentage = Math.round((correct \/ total) * 100);\n const passed = percentage >= 70;\n \n \/\/ Show results\n $('#aa-quiz-result-1').html(`\n <div class=\"quiz-results\">\n <h3>Quiz Results<\/h3>\n <div class=\"quiz-score\">\n <strong>Score:<\/strong> ${correct}\/${total} (${percentage}%)\n <\/div>\n <p class=\"${passed ? 'aa-quiz-pass' : 'aa-quiz-fail'}\">\n ${passed ? 'Congratulations! You passed the quiz!' : 'You need to score at least 70% to pass. Please review the material and try again.'}\n <\/p>\n <\/div>\n `).show();\n \n $('.aa-quiz-next-actions').show();\n $('#aa-quiz-continue-1').prop('disabled', !passed);\n $('#aa-quiz-retake-1, #aa-quiz-back-module-1').toggle(!passed);\n \n if (passed) {\n \/\/ After passing, show upgrade section\n $(document).off('click', '#aa-quiz-continue-1').on('click', '#aa-quiz-continue-1', function() {\n showUpgradeSection();\n });\n } else {\n $(document).off('click', '#aa-quiz-retake-1').on('click', '#aa-quiz-retake-1', function() {\n showQuiz1();\n });\n $(document).off('click', '#aa-quiz-back-module-1').on('click', '#aa-quiz-back-module-1', function() {\n startCourseDirectly();\n });\n }\n });\n }\n \n \/\/ Show upgrade section after quiz completion\n function showUpgradeSection() {\n $('#course-content').html(`\n <div id=\"aa-upgrade-section\" class=\"congratulations-content\">\n <div class=\"congratulations-header\">\n <h1>Congratulations!<\/h1>\n <h2>You've completed Module 1: Foundations of Web Accessibility<\/h2>\n <p class=\"congratulations-subtitle\">You now understand the fundamentals of digital accessibility and its importance.<\/p>\n <\/div>\n \n <div class=\"upgrade-section\">\n <h3>Ready to become an accessibility expert?<\/h3>\n <p>Continue your learning journey with our comprehensive Pro course covering all aspects of web accessibility.<\/p>\n \n <div class=\"pro-benefits\">\n <h4>What you'll get with Pro:<\/h4>\n <div class=\"benefits-grid\">\n <div class=\"benefit-item\">\n <div class=\"benefit-text\">\n <strong>5 Additional Modules<\/strong>\n <span>WCAG 2.2, Design, Development, Testing & Implementation<\/span>\n <\/div>\n <\/div>\n <div class=\"benefit-item\">\n <div class=\"benefit-text\">\n <strong>Advanced Tools<\/strong>\n <span>Testing techniques and remediation strategies<\/span>\n <\/div>\n <\/div>\n <div class=\"benefit-item\">\n <div class=\"benefit-text\">\n <strong>User Management<\/strong>\n <span>Track progress and manage team learning<\/span>\n <\/div>\n <\/div>\n <div class=\"benefit-item\">\n <div class=\"benefit-text\">\n <strong>Certificate<\/strong>\n <span>Professional completion certificate<\/span>\n <\/div>\n <\/div>\n <div class=\"benefit-item\">\n <div class=\"benefit-text\">\n <strong>Priority Support<\/strong>\n <span>Expert guidance and updates<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"upgrade-cta\">\n <a href=\"https:\/\/508accessible.com\/pricing\/\" target=\"_blank\" id=\"start-course-btn\" class=\"button button-primary\" style=\"background: #22227c; color: white; border: none; padding: 18px 30px; border-radius: 8px; font-size: 18px; font-weight: bold; cursor: pointer; box-shadow: 10px 10px 10px #d4d3d3; text-decoration: none;\">\n Upgrade To Pro Version\n <\/a>\n <p class=\"upgrade-note\">Join thousands of professionals learning accessibility best practices<\/p>\n <\/div>\n <\/div>\n <\/div>\n `);\n scrollToCourseTop();\n }\n\n \/\/ Handle start course button click\n function handleStartCourse() {\n $('#course-outline').hide();\n startCourseDirectly();\n }\n\n \/\/ Start loading when page is ready\n $(document).ready(function() {\n \/\/ Initialize course when the \"Start Course\" button is clicked\n $('#start-course-btn').on('click', function() {\n handleStartCourse();\n });\n\n \/\/ Load course scripts but don't start automatically\n loadCourseScripts();\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-3510","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/dignitynetwork.leblancandco-staging.ca\/index.php\/wp-json\/wp\/v2\/pages\/3510","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dignitynetwork.leblancandco-staging.ca\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dignitynetwork.leblancandco-staging.ca\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dignitynetwork.leblancandco-staging.ca\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dignitynetwork.leblancandco-staging.ca\/index.php\/wp-json\/wp\/v2\/comments?post=3510"}],"version-history":[{"count":1,"href":"https:\/\/dignitynetwork.leblancandco-staging.ca\/index.php\/wp-json\/wp\/v2\/pages\/3510\/revisions"}],"predecessor-version":[{"id":3512,"href":"https:\/\/dignitynetwork.leblancandco-staging.ca\/index.php\/wp-json\/wp\/v2\/pages\/3510\/revisions\/3512"}],"wp:attachment":[{"href":"https:\/\/dignitynetwork.leblancandco-staging.ca\/index.php\/wp-json\/wp\/v2\/media?parent=3510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}