Technigo · tildetilde · Mar 26, 2025 · Mar 27, 2025 · Mar 27, 2025 · Mar 27, 2025
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/README.md b/README.md
@@ -1,9 +1,4 @@
 # Web Accessibility Project
 
-A basic web server template focused on web accessibility practices.
-
-### Installation
-
-1. Fork this repository by clicking the "Fork" button at the top right of the GitHub repository page.
-
-2. Clone your forked repository
+Checkout our site
+https://js-project-accessibility-on.netlify.app/
diff --git a/about.html b/about.html
@@ -1,10 +1,62 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>About</title>
-    <link rel="stylesheet" href="css/styles.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
+      rel="stylesheet"
+    />
+    <title>Web Accessibility</title>
+    <link rel="stylesheet" href="styles.css" />
   </head>
-  <body></body>
+  <body>
+    <a href="#mainContent" class="skip-link">Skip to main content</a>
+    <header id="header">
+      <div class="headerInner">
+        <h1>Web Accessibility Quiz</h1>
+        <div class="headerContent">
+          <nav aria-label="Main menu">
+
+            <a href="index.html">Home</a> <a href="about.html">About</a>
+          </nav>
+        </div>
+      </div>
+    </header>
+
+    <main id="mainContent">
+      <section class="about-section" aria-labelledby="about-heading">
+        <div class="formControls introSection">
+          <div class="about-container">
+            <h2 id="about-heading">Our mission</h2>
+              <p>
+                This website is built by Ida, Oskar and Tilde as part of a course on web accessibility. It’s designed to be as accessible as possible for all users and to serve as a learning tool. We’ve included semantic HTML, keyboard navigation, ARIA roles, and good color contrast to support screen readers and other assistive tech. <span class="accessibility-quote">Because accessibility isn’t extra — it’s essential.</span>
+              </p>
+            <img
+              src="img/about.png"
+              role="presentation"
+              class="about-img"
+            />
+          </div>
+      </section>
+    </main>
+
+    <hr/>
+
+    <footer role="contentInfo">
+      <div class="footerContent">
+        <p class="footer-text">For everyone. Built by Ida, Oskar and Tilde.</p>
+        <img
+          src="img/idaoskartilde.svg"
+          role="presentation"
+          class="footer-logo"
+        />
+      </div>
+    </footer>
+
+    <script src="quizdata.js"></script>
+    <script src="js/main.js"></script>
+  </body>
 </html>
diff --git a/accordionScript.js b/accordionScript.js
@@ -0,0 +1,78 @@
+function initAccordion() {
+  const accordion = document.querySelector(".accordion");
+
+  if (!accordion) return;
+
+  const buttons = accordion.querySelectorAll(".accordionButton");
+
+  buttons.forEach((button, index) => {
+    button.addEventListener("keydown", (event) => {
+      const targetId = button.getAttribute("aria-controls");
+      const targetPanel = document.getElementById(targetId);
+
+      switch (event.key) {
+        case "ArrowDown":
+        case "ArrowRight":
+          event.preventDefault();
+          const nextButton = buttons[(index + 1) % buttons.length];
+          nextButton.focus();
+          break;
+
+        case "ArrowUp":
+        case "ArrowLeft":
+          event.preventDefault();
+          const prevButton =
+            buttons[(index - 1 + buttons.length) % buttons.length];
+          prevButton.focus();
+          break;
+
+        case "Home":
+          event.preventDefault();
+          buttons[0].focus();
+          break;
+
+        case "End":
+          event.preventDefault();
+          buttons[buttons.length - 1].focus();
+          break;
+
+        case " ":
+        case "Enter":
+          event.preventDefault();
+          togglePanel(button, targetPanel);
+          break;
+      }
+    });
+
+    button.addEventListener("click", () => {
+      const targetId = button.getAttribute("aria-controls");
+      const targetPanel = document.getElementById(targetId);
+      togglePanel(button, targetPanel);
+    });
+  });
+}
+
+function togglePanel(button, panel) {
+  const isExpanded = button.getAttribute("aria-expanded") === "true";
+  const newExpandedState = !isExpanded;
+
+  button.setAttribute("aria-expanded", newExpandedState);
+
+  if (newExpandedState) {
+    panel.hidden = false;
+    requestAnimationFrame(() => {
+      panel.style.maxHeight = panel.scrollHeight + "px";
+    });
+  } else {
+    panel.style.maxHeight = "0";
+    panel.addEventListener(
+      "transitionend",
+      () => {
+        panel.hidden = true;
+      },
+      { once: true }
+    );
+  }
+}
+
+document.addEventListener("DOMContentLoaded", initAccordion);
diff --git a/css/styles.css b/css/styles.css
diff --git a/img/HQbanner.png b/img/HQbanner.png
diff --git a/img/HQprinciple1.png b/img/HQprinciple1.png
diff --git a/img/HQprinciple2.png b/img/HQprinciple2.png
diff --git a/img/HQprinciple3.png b/img/HQprinciple3.png
diff --git a/img/HQprinciple4.png b/img/HQprinciple4.png
diff --git a/img/about.png b/img/about.png
diff --git a/img/banner.png b/img/banner.png
diff --git a/img/idaoskartilde.svg b/img/idaoskartilde.svg
diff --git a/img/principle1.png b/img/principle1.png
diff --git a/img/principle2.png b/img/principle2.png
diff --git a/img/principle3.png b/img/principle3.png
diff --git a/img/principle4.png b/img/principle4.png
diff --git a/img/results.png b/img/results.png
diff --git a/index.html b/index.html
@@ -1,13 +1,171 @@
 <!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" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
+      rel="stylesheet"
+    />
+    <title>Web Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
-    <p>This is the starting point.</p>
+    <a href="#mainContent" class="skip-link">Skip to main content</a>
+
+    <header id="header">
+      <div class="headerInner">
+        <h1 id="site-title">Web Accessibility Quiz</h1>
+        <div class="headerContent">
+          <nav aria-label="Main menu">
+            <a href="index.html">Home</a>
+            <a href="about.html">About</a>
+          </nav>
+        </div>
+      </div>
+    </header>
+
+    <main id="mainContent">
+      <section id="quiz-container" class="quiz-container" hidden>
+        <div class="progress-container" id="progress-container">
+          <div class="progress-text" id="progress-text"></div>
+          <div class="progress-bar" id="progress-bar">
+            <div class="progress-fill" id="progress-fill"></div>
+          </div>
+        </div>
+        <h2 id="question-heading" class="question-heading"></h2>
+        <fieldset
+          class="question-fieldset"
+          id="question-fieldset"
+          aria-labelledby="question-heading"
+        ></fieldset>
+        <div
+          class="feedback-message"
+          id="feedback-message"
+          aria-live="polite"
+          role="alert"
+        ></div>
+        <button class="submit-btn" id="submit-btn">Submit</button>
+        <button class="next-btn" id="next-btn" hidden>Next question</button>
+      </section>
+
+      <div class="resultCard" id="resultCard" hidden>
+        <div class="container">
+          <h2 class="result-heading">Result</h2>
+          <div
+            class="result-message"
+            id="resultMessage"
+            aria-live="polite"
+            role="status"
+          ></div>
+          <img
+            src="img/results.png"
+            alt=""
+            role="presentation"
+            class="resultImg"
+            id="resultImg"
+          />
+          <button class="back-to-main-btn" id="back-to-main-btn">
+            Back to main
+          </button>
+        </div>
+      </div>
+
+      <section id="banner">
+        <button
+          class="startQuizButton"
+          id="start-quiz-btn"
+          aria-label="Start the web accessibility quiz"
+        >
+          Start Quiz
+        </button>
+        <img src="img/HQbanner.png" alt="" id="bannerImg" />
+      </section>
+
+      <section id="introduction" aria-labelledby="intro-heading">
+        <div class="formControls introSection">
+          <div class="container">
+            <h2 id="intro-heading">Four Principles of Accessibility</h2>
+            <div class="cardsContainer">
+              <div class="cards" role="listitem">
+                <img
+                  src="img/HQprinciple1.png"
+                  class="principlesImg"
+                  alt="A human head, symbolizing perception."
+                />
+                <h3>Perception</h3>
+                <p>
+                  Information and user interface components must be presentable
+                  to users in ways they can perceive.
+                </p>
+              </div>
+              <div class="cards" role="listitem">
+                <img
+                  src="img/HQprinciple2.png"
+                  class="principlesImg"
+                  alt="A car, symbolizing operable user interfaces."
+                />
+                <h3>Operable</h3>
+                <p>
+                  User interface components and navigation must be operable by
+                  all users.
+                </p>
+              </div>
+              <div class="cards" role="listitem">
+                <img
+                  src="img/HQprinciple3.png"
+                  class="principlesImg"
+                  alt="A brain-shaped cloud, symbolizing understandability."
+                />
+                <h3>Understandable</h3>
+                <p>
+                  Information and the operation of the user interface must be
+                  understandable.
+                </p>
+              </div>
+              <div class="cards" role="listitem">
+                <img
+                  src="img/HQprinciple4.png"
+                  class="principlesImg"
+                  alt="A keyboard, symbolizing robustness."
+                />
+                <h3>Robust</h3>
+                <p>
+                  Content must be robust enough to be interpreted reliably by a
+                  wide variety of user agents, including assistive technologies.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+    <div
+      id="spinner-container"
+      class="spinner-container"
+      role="status"
+      aria-live="polite"
+      hidden
+    >
+      <div class="spinner" aria-label="Loading content"></div>
+      <span class="sr-only">Loading content...</span>
+    </div>
+    <hr />
+    <footer role="contentInfo">
+      <div class="footerContent">
+        <p class="footer-text">For everyone. Built by Ida, Oskar and Tilde.</p>
+        <img
+          src="img/idaoskartilde.svg"
+          alt=""
+          role="presentation"
+          class="footer-logo"
+        />
+      </div>
+    </footer>
+
+    <script src="quizdata.js"></script>
     <script src="js/main.js"></script>
   </body>
 </html>