Technigo · sofia-grunditz · Apr 8, 2025 · Apr 8, 2025 · Apr 9, 2025 · Apr 9, 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
@@ -7,3 +7,5 @@ A basic web server template focused on web accessibility practices.
 1. Fork this repository by clicking the "Fork" button at the top right of the GitHub repository page.
 
 2. Clone your forked repository
+
+Link to deployed Netlify: https://accessibilitysofiag.netlify.app/
diff --git a/about.html b/about.html
@@ -1,10 +1,111 @@
 <!DOCTYPE html>
-<html>
-  <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" />
-  </head>
-  <body></body>
-</html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1.0"
+  />
+  <title>About - Website Feedback</title>
+  <link
+    rel="stylesheet"
+    href="style.css"
+  />
+</head>
+
+<body>
+  <a
+    href="#main-content"
+    class="skip-link"
+  >Skip to main content</a>
+  <header id="site-header">
+    <div class="header-content">
+      <h1>About Us</h1>
+      <nav>
+        <ul>
+          <li><a href="index.html">Home</a></li>
+          <li><a href="about.html">About</a></li>
+        </ul>
+      </nav>
+    </div>
+  </header>
+
+  <main id="main-content">
+
+    <section id="about">
+      <h2>Ensuring an Inclusive Web: The Importance of Accessibility</h2>
+      <p>
+        We are a team focused on exploring web accessibility and its crucial role in creating an inclusive digital
+        environment. Our project aims to raise awareness about the significance of designing websites that are usable by
+        everyone, including people with various disabilities. Through this project, we are learning how to implement
+        best practices that ensure web content is accessible to all users, regardless of their abilities or limitations.
+      </p>
+      <div class="hero-images">
+        <img
+          src="assets/accessibility.jpg"
+          alt="Accessibility illustration"
+        />
+      </div>
+
+      <div class="accordion-item">
+        <h3>Accessibility Features</h3>
+        <div class="accordion">
+          <div class="accordion-item">
+            <h4>
+              <button
+                class="accordion-button"
+                aria-expanded="false"
+                aria-controls="content-1"
+              >
+                Screen Reader Compatibility
+                <span
+                  class="accordion-icon"
+                  aria-hidden="true"
+                ></span>
+              </button>
+            </h4>
+            <div
+              id="content-1"
+              class="accordion-content"
+              hidden
+            >
+              <p>Our website is fully compatible with screen readers.</p>
+            </div>
+          </div>
+
+          <div class="accordion-item">
+            <h4>
+              <!-- This button toggles the visibility of information about keyboard navigation accessibility features. -->
+              <button
+                class="accordion-button"
+                aria-expanded="false"
+                aria-controls="content-2"
+              >
+                Keyboard navigation
+                <span
+                  class="accordion-icon"
+                  aria-hidden="true"
+                ></span>
+              </button>
+            </h4>
+            <div
+              id="content-2"
+              class="accordion-content"
+              hidden
+            >
+              <p>
+                All interactive elements are accessible via keyboard
+                navigation.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <script src="accordion.js"></script>
+</body>
+
+</html>
diff --git a/accordion.js b/accordion.js
@@ -0,0 +1,73 @@
+function initAccordion() {
+  const accordion = document.querySelector('.accordion');
+  if (!accordion) return;
+
+  const buttons = accordion.querySelectorAll('.accordion-button');
+
+  buttons.forEach((button, index) => {
+    const targetId = button.getAttribute('aria-controls');
+    const targetPanel = document.getElementById(targetId);
+
+    // Säkerställ att panelens höjd är noll från början
+    if (targetPanel) {
+      targetPanel.style.maxHeight = '0';
+    }
+
+    // Hantera klick
+    button.addEventListener('click', () => {
+      togglePanel(button, targetPanel);
+    });
+
+    // Hantera tangentbord
+    button.addEventListener('keydown', (event) => {
+      switch (event.key) {
+        case 'ArrowDown':
+        case 'ArrowRight':
+          event.preventDefault();
+          buttons[(index + 1) % buttons.length].focus();
+          break;
+        case 'ArrowUp':
+        case 'ArrowLeft':
+          event.preventDefault();
+          buttons[(index - 1 + buttons.length) % buttons.length].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;
+      }
+    });
+  });
+
+  function togglePanel(button, panel) {
+    const isExpanded = button.getAttribute('aria-expanded') === 'true';
+
+    // Stäng alla andra först
+    buttons.forEach((btn) => {
+      btn.setAttribute('aria-expanded', 'false');
+      const otherPanel = document.getElementById(btn.getAttribute('aria-controls'));
+      if (otherPanel) {
+        otherPanel.style.maxHeight = '0';
+        otherPanel.hidden = true;
+      }
+    });
+
+    // Öppna om den var stängd
+    if (!isExpanded && panel) {
+      button.setAttribute('aria-expanded', 'true');
+      panel.hidden = false;
+      panel.style.maxHeight = panel.scrollHeight + 'px';
+    }
+  }
+}
+
+document.addEventListener('DOMContentLoaded', initAccordion);
diff --git a/assets/accessibility-image.png b/assets/accessibility-image.png
diff --git a/assets/accessibility.jpg b/assets/accessibility.jpg
diff --git a/assets/banner 2.jpg b/assets/banner 2.jpg
diff --git a/assets/banner.jpg b/assets/banner.jpg
diff --git a/css/styles.css b/css/styles.css
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,3 +7,5 @@ A basic web server template focused on web accessibility practices.
		1. Fork this repository by clicking the "Fork" button at the top right of the GitHub repository page.

		2. Clone your forked repository

		Link to deployed Netlify: https://accessibilitysofiag.netlify.app/