Technigo · HolaCarmensita · Mar 31, 2025 · Mar 31, 2025 · Mar 31, 2025 · Apr 7, 2025
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.
+github.com/HolaCarmensita/js-project-accessibility.
 
-### Installation
-
-1. Fork this repository by clicking the "Fork" button at the top right of the GitHub repository page.
-
-2. Clone your forked repository
diff --git a/css/styles.css b/css/styles.css
@@ -0,0 +1,70 @@
+:root {
+  --text-light-yellow: #fefee3ff;
+  --text-white: #ffffff;
+  --text-black: #000000;
+  --dark-spring-green: #2c6e49ff;
+  --sea-green: #4c956cff;
+  --light-yellow: #fefee3ff;
+  --melon: #ffc9b9ff;
+  --persian-orange: #d68c45ff;
+}
+
+button:focus-visible,
+a:focus-visible,
+input:focus-visible {
+  outline: 3px solid var(--melon);
+  background-color: var(--dark-spring-green);
+  color: var(--light-yellow);
+}
+
+#quiz-form:focus-visible,
+#quiz-form.show-focus {
+  outline: 3px solid var(--melon);
+  background-color: var(--dark-spring-green);
+  color: var(--light-yellow);
+}
+
+input[type='radio'] {
+  accent-color: var(--sea-green);
+}
+
+body {
+  font-family: 'Montserrat', sans-serif;
+  background-color: var(--light-yellow);
+}
+
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  background-color: #007acc;
+  color: white;
+  padding: 0.5rem 1rem;
+  z-index: 1000;
+  text-decoration: none;
+  transition: top 0.3s ease;
+}
+
+.skip-link:focus {
+  top: 1px;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+img {
+  width: 200px;
+}
+
+#quiz-form {
+  border: 3px solid transparent;
+}
diff --git a/images/accessible-form-example.svg b/images/accessible-form-example.svg
diff --git a/images/decorative.svg b/images/decorative.svg
diff --git a/index.html b/index.html
@@ -1,13 +1,136 @@
 <!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>
+    <title>Strength in Diversity</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=Lexend:wght@100..900&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
-    <p>This is the starting point.</p>
+    <a href="#quiz-form" class="skip-link">Skip to Content</a>
+
+    <header>
+      <h1>Strength in Diversity</h1>
+      <nav>
+        <ul>
+          <li><a href="#home">Home</a></li>
+          <li><a href="#about">About</a></li>
+        </ul>
+      </nav>
+    </header>
+
+    <main role="main">
+      <section id="home">
+        <h2>How This UI is Accessible</h2>
+        <p>
+          This quiz follows accessibility principles by using semantic HTML,
+          keyboard-friendly interactions, and screen reader-friendly markup.
+        </p>
+        <img src="/images/decorative.svg" alt="" />
+        <img
+          src="/images/accessible-form-example.svg"
+          alt="Hands that creating a symbol of a heart"
+        />
+      </section>
+
+      <section id="about">
+        <h2>Empowering People with Disabilities</h2>
+        <p>
+          Our goal is to empower each of you to champion the prioritization of
+          Accessibilityon the web and help provide all people with equal
+          opportunities.
+        </p>
+      </section>
+
+      <section id="quiz">
+        <form id="quiz-form" tabindex="0">
+          <h2>Accessibility Quiz</h2>
+          <p id="form-intro" class="sr-only">
+            This is a quiz with 2 questions about Accessibility. Use Tab to
+            start and Arrow keys to navigate.
+          </p>
+          <fieldset>
+            <legend id="question1-legend">
+              What is the purpose of alt text on images?
+            </legend>
+            <input
+              type="radio"
+              name="question1"
+              value="a"
+              id="question1-a"
+              aria-describedby="question1-legend"
+            />
+            <label for="question1-a">Adds captions to videos</label>
+            <br />
+
+            <label for="question1-b">
+              <input
+                type="radio"
+                name="question1"
+                value="b"
+                id="question1-b"
+              />Describes images to screen readers</label
+            >
+            <br />
+
+            <label for="question1-c">
+              <input
+                type="radio"
+                name="question1"
+                value="c"
+                id="question1-c"
+              />Changes the image color</label
+            >
+          </fieldset>
+          <fieldset>
+            <legend id="question2-legend">
+              Which element is used to group related form controls?
+            </legend>
+            <input
+              type="radio"
+              name="question2"
+              value="a"
+              id="question2-a"
+              aria-describedby="question1-legend"
+            />
+            <label for="question2-a">Adds captions to videos</label>
+            <br />
+
+            <label for="question2-b">
+              <input
+                type="radio"
+                name="question2"
+                value="b"
+                id="question2-b"
+              />Describes images to screen readers</label
+            >
+            <br />
+
+            <label for="question2-c">
+              <input
+                type="radio"
+                name="question2"
+                value="c"
+                id="question1-c"
+              />Changes the image color</label
+            >
+          </fieldset>
+
+          <button type="submit">Submit Quiz</button>
+        </form>
+        <div id="feedback" aria-live="polite" class="sr-only">
+          You got 2 out of 3 correct!
+          <!--Kommer genereras av js sen men bara för att testa och automatiskt läsas av SR??-->
+        </div>
+      </section>
+    </main>
+
     <script src="js/main.js"></script>
   </body>
 </html>
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,9 @@
+//DOM ELEMENT
+const form = document.getElementById('quiz-form');
+
+// Listen to skip a link click
+document.querySelector('.skip-link').addEventListener('click', () => {
+  form.classList.add('show-focus');
+
+  target.scrollIntoView({ behavior: 'smooth', block: 'start' }); //Osäker på denna det var något för mobil
+});
diff --git a/quiz.txt b/quiz.txt
@@ -0,0 +1,49 @@
+What is the purpose of alt text on images?
+a) Adds captions to videos
+b) Describes images to screen readers
+c) Changes the image color
+
+Which element is used to group related form controls?
+a) <div>
+b) <fieldset>
+c) <section>
+
+What does aria-live="polite" do?
+a) Hides content from screen readers
+b) Politely reads dynamic changes to users
+c) Adds background music
+
+Why should you use semantic HTML?
+a) It makes code shorter
+b) It helps search engines and assistive tech understand content
+c) It increases page load speed
+
+Which HTML element creates a keyboard-focusable button?
+a) <div>
+b) <span>
+c) <button>
+
+How do users navigate radio buttons using a keyboard?
+a) Tab between all radios
+b) Arrow keys within a group
+c) Mouse only
+
+What does a "skip to content" link do?
+a) Scrolls to the bottom of the page
+b) Opens a menu
+c) Lets users jump past repeated content like navigation
+
+Which color contrast ratio is required by WCAG for normal text?
+a) 2:1
+b) 4.5:1
+c) 10:1
+
+What does tabindex="0" do?
+a) Removes focus
+b) Adds element to normal tab order
+c) Skips the element
+
+Who benefits from web accessibility?
+a) Only screen reader users
+b) Only people with disabilities
+c) Everyone