Technigo · DevByRico · Mar 27, 2025 · Mar 31, 2025 · May 26, 2025 · May 26, 2025
diff --git a/README.md b/README.md
@@ -1,9 +1,40 @@
-# Web Accessibility Project
+# Accessibility Quiz
 
-A basic web server template focused on web accessibility practices.
+This is an accessible multiple-choice quiz designed to demonstrate the principles of web accessibility. The project is built using HTML, CSS, and JavaScript with a strong focus on creating a user-friendly experience for everyone, including users relying on screen readers, keyboards, and other assistive technologies.
 
-### Installation
+## Live Demo
 
-1. Fork this repository by clicking the "Fork" button at the top right of the GitHub repository page.
+Check out the live website at [Accessibility Quiz](https://webaccessibilityquiz.netlify.app/).
 
-2. Clone your forked repository
+## Features
+
+- **Semantic HTML Structure:** Proper use of `<fieldset>`, `<legend>`, and `<label>` for better accessibility.
+- **Keyboard Navigation:** Navigate between radio buttons using Arrow Keys and select options with the Spacebar.
+- **Dark Mode:** Toggle between Light and Dark Mode for improved readability and user experience.
+- **Instant Feedback System:** Feedback is provided without page reload using an `aria-live="polite"` region.
+- **Loading Indicator:** Displays a "Processing..." message before showing results to enhance user experience.
+- **High Contrast Mode:** Enhanced styling for better readability in dark mode.
+- **Footer with Links:** External links to social media and additional information.
+
+## Project Structure
+
+- **`index.html`:** The main page containing all the content and structure of the quiz.
+- **`style.css`:** The stylesheet providing styling for light and dark modes, as well as layout and accessibility improvements.
+- **`script.js`:** JavaScript handling interactivity, including keyboard navigation, dark mode toggle, and feedback processing.
+- **`README.md`:** Project documentation describing the purpose, features, and how to use the application.
+
+## How to Use
+
+1. Clone this repository.
+2. Open `index.html` in your web browser.
+3. Navigate through the quiz using your keyboard or mouse.
+4. Toggle Dark Mode using the "Switch to Dark Mode" button.
+5. Submit answers to receive feedback.
+
+## Future Improvements
+
+- Improved ARIA support for screen readers.
+- High Contrast Mode toggle button.
+- Enhanced styling for reduced motion support.
+
+© 2025 Accessibility Quiz. All Rights Reserved. | Developed & Designed by DevByRico
diff --git a/about.html b/about.html
diff --git a/css/styles.css b/css/styles.css
diff --git a/img/decorative.png b/img/decorative.png
diff --git a/img/informative.png b/img/informative.png
diff --git a/index.html b/index.html
@@ -1,13 +1,115 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title</title>
-    <link rel="stylesheet" href="css/styles.css" />
+    <title>Web Accessibility Quiz</title>
+    <link rel="stylesheet" href="style.css" />
+    <style>
+      html {
+        scroll-behavior: smooth;
+      }
+    </style>
   </head>
   <body>
-    <p>This is the starting point.</p>
-    <script src="js/main.js"></script>
+    <header>
+      <h1>Web Accessibility Quiz</h1>
+      <nav>
+        <a href="#home">Home</a>
+        <a href="#about">About</a>
+        <a href="#quiz">Skip to Quiz</a>
+      </nav>
+      <button id="darkModeToggle">Switch to Dark Mode</button>
+    </header>
+
+    <div class="content">
+      <section id="home">
+        <h2>Welcome to the Web Accessibility Quiz</h2>
+        <p>
+          Test your knowledge on web accessibility and best practices. Make sure to read the questions carefully and
+          select the most accurate answer.
+        </p>
+      </section>
+
+      <section id="about">
+        <h2>About This Quiz</h2>
+        <p>
+          This quiz is designed with accessibility in mind, following best practices for screen reader compatibility,
+          keyboard navigation, and more.
+        </p>
+        <!--  Decorative Image (Ignored by Screen Readers) 
+              This is just to demonstrate how to include an image without screen readers actually reading it. 
+              The image is marked as decorative using alt="" and aria-hidden="true". -->
+        <img src="img/decorative.png" alt="" aria-hidden="true" />
+
+        <!-- Informative image (Read by screen readers) -->
+        <img
+          src="img/informative.png"
+          alt="Infographic about web accessibility with examples of accessible elements such as navigation, forms, and alt text usage."
+        />
+      </section>
+
+      <section id="quiz" class="quiz-section">
+        <h2>Accessibility Quiz</h2>
+        <form id="quizForm" aria-live="polite">
+          <fieldset>
+            <legend>Question 1: What does ARIA stand for?</legend>
+            <input type="radio" id="q1a1" name="q1" value="correct" />
+            <label for="q1a1">Accessible Rich Internet Applications</label><br />
+
+            <input type="radio" id="q1a2" name="q1" value="incorrect" />
+            <label for="q1a2">Advanced Rich Internet Accessibility</label><br />
+
+            <input type="radio" id="q1a3" name="q1" value="incorrect" />
+            <label for="q1a3">Application Resource Interaction Accessibility</label>
+          </fieldset>
+
+          <fieldset>
+            <legend>Question 2: What is the main purpose of using ARIA attributes?</legend>
+            <input type="radio" id="q2a1" name="q2" value="incorrect" />
+            <label for="q2a1">To enhance visual design</label><br />
+
+            <input type="radio" id="q2a2" name="q2" value="correct" />
+            <label for="q2a2">To improve accessibility for assistive technologies</label><br />
+
+            <input type="radio" id="q2a3" name="q2" value="incorrect" />
+            <label for="q2a3">To reduce website loading time</label>
+          </fieldset>
+
+          <fieldset>
+            <legend>Question 3: What does WCAG stand for?</legend>
+            <input type="radio" id="q3a1" name="q3" value="correct" />
+            <label for="q3a1">Web Content Accessibility Guidelines</label><br />
+
+            <input type="radio" id="q3a2" name="q3" value="incorrect" />
+            <label for="q3a2">Web Creative Art Group</label><br />
+
+            <input type="radio" id="q3a3" name="q3" value="incorrect" />
+            <label for="q3a3">Website Compliance and Accessibility Guide</label>
+          </fieldset>
+
+          <button type="submit">Submit</button>
+        </form>
+        <div id="feedback"></div>
+      </section>
+    </div>
+
+    <footer>
+      <div class="footer">
+        <p>
+          Follow us on
+          <a href="https://facebook.com" target="_blank">Facebook</a>,
+          <a href="https://instagram.com" target="_blank">Instagram</a>
+          and <a href="https://twitter.com" target="_blank">Twitter</a> | <a href="#">Contact Us</a> |
+          <a href="#">Privacy Policy</a>
+        </p>
+        <p>
+          &copy; 2025 <strong>Web Accessibility Quiz</strong>. All Rights Reserved. | Developed & Designed by
+          <strong><a href="https://github.com/DevByRico" target="_blank">DevByRico</a></strong>
+        </p>
+      </div>
+    </footer>
+
+    <script src="script.js"></script>
   </body>
 </html>
diff --git a/js/main.js b/js/main.js
diff --git a/script.js b/script.js
@@ -0,0 +1,78 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const form = document.getElementById("quizForm");
+  const feedback = document.getElementById("feedback");
+  const darkModeToggle = document.getElementById("darkModeToggle");
+
+  // Dark Mode Toggle
+  darkModeToggle.addEventListener("click", () => {
+    document.body.classList.toggle("dark-mode");
+    if (document.body.classList.contains("dark-mode")) {
+      darkModeToggle.textContent = "Switch to Light Mode";
+    } else {
+      darkModeToggle.textContent = "Switch to Dark Mode";
+    }
+  });
+
+  // Enhanced Keyboard Navigation for Radio Buttons
+  const allFieldsets = document.querySelectorAll("fieldset");
+
+  allFieldsets.forEach((fieldset) => {
+    const radios = fieldset.querySelectorAll('input[type="radio"]');
+
+    radios.forEach((radio, index) => {
+      radio.addEventListener("keydown", (event) => {
+        if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+          event.preventDefault();
+          const nextIndex = (index + 1) % radios.length;
+          radios[nextIndex].focus();
+          radios[nextIndex].checked = true; // Markera som vald
+        }
+        if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+          event.preventDefault();
+          const prevIndex = (index - 1 + radios.length) % radios.length;
+          radios[prevIndex].focus();
+          radios[prevIndex].checked = true; // Markera som vald
+        }
+      });
+    });
+  });
+
+  // Form Submission Handler
+  form.addEventListener("submit", (event) => {
+    event.preventDefault();
+    feedback.innerHTML = "<strong>Processing...</strong>";
+    feedback.style.backgroundColor = "#fffbcc";
+    feedback.style.color = "#b38f00";
+
+    setTimeout(() => {
+      let correctAnswers = 0;
+      const questions = ["q1", "q2", "q3"];
+      let feedbackMessages = [];
+
+      questions.forEach((question) => {
+        const selectedOption = document.querySelector(`input[name="${question}"]:checked`);
+        if (selectedOption) {
+          if (selectedOption.value === "correct") {
+            correctAnswers++;
+            feedbackMessages.push(`✅ ${question.toUpperCase()} - Correct!`);
+          } else {
+            feedbackMessages.push(`❌ ${question.toUpperCase()} - Incorrect. Try again.`);
+          }
+        } else {
+          feedbackMessages.push(`⚠️ ${question.toUpperCase()} - No answer selected.`);
+        }
+      });
+
+      const totalQuestions = questions.length;
+      const resultMessage =
+        correctAnswers === totalQuestions
+          ? `🎉 Great job! You got all ${totalQuestions} correct!`
+          : `💡 You got ${correctAnswers} out of ${totalQuestions} correct. Try again to improve!`;
+      feedbackMessages.push("<hr>" + resultMessage);
+
+      feedback.innerHTML = feedbackMessages.join("<br>");
+      feedback.style.backgroundColor = correctAnswers === totalQuestions ? "#e0ffe0" : "#ffe0e0";
+      feedback.style.color = correctAnswers === totalQuestions ? "#00b300" : "#b30000";
+    }, 1000); // 1 second delay
+  });
+});