From 07f756e63870e6ebd77daab98603f754b6163908 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Johan=20Skarpsv=C3=A4rd?= Date: Thu, 27 Mar 2025 15:41:12 +0100 Subject: [PATCH 001/107] upload code --- css/accordion.js | 13 ++++ css/styles.css | 24 ++++++ index.html | 197 ++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 233 insertions(+), 1 deletion(-) create mode 100644 css/accordion.js diff --git a/css/accordion.js b/css/accordion.js new file mode 100644 index 0000000..1a32318 --- /dev/null +++ b/css/accordion.js @@ -0,0 +1,13 @@ +function init Accordion(\{ + const accordion = document.querySelector('accordion') + if (!accordion) return; + const buttons = accordion.querySelectorAll('accordion-button'); + + buttons.forEach(button, index) =>{ + button. addEventListener('hegdown' , (event =>{ + const target ID = button.getAttribute('aria-controls') + const target Panel = document.getElementById(targetId) + + switch (event) + })) + }}) \ No newline at end of file diff --git a/css/styles.css b/css/styles.css index e69de29..38ff5d1 100644 --- a/css/styles.css +++ b/css/styles.css @@ -0,0 +1,24 @@ +/* Skip link with enhaced visibility*/ +.skip-link{ + position: absolute; + top:}-40px; + left:0 + background: var{--accent-color); + color:white; +padding: 8px: +z-index:100; +transition: top 0.3s + } + .skip-link:focus{ + top:0: + outline: var(--focus-outline): + outline-offset: 2px: + } + /'Enhaced focus styles */ + :focus-visible{ + outline var(--focus-outline); + outline-offset: 2px: + border-radus: 2px: + } + } +} \ No newline at end of file diff --git a/index.html b/index.html index a9a33db..c475d9b 100644 --- a/index.html +++ b/index.html @@ -3,11 +3,206 @@ - Title + Leave feedback + + Skip to main content +
+
+

Website feedback

+ +
+
+

This is the starting point.

+
+ + +<--Use semantic HTML--> +
+ +
+ content here__> +
+
+
+ + +
"Web Accessibility Quiz"
+Main Navigation + #Home SVT, Skatteverket, Technigo, local + #about easter global +

+ Web Accessibility Quiz + Web Accessibility Quiz + +
+ + When is easter 2025? + + April 20th + April 21th + April 22th + what is pascha?> + + type of bread + type of cheese + type of dessert + What is grilled asparugus? + + type of fruit + type of vegetable + type of meet + < + + + + + + + + + + + + + + Submit + + + Menu + + Menu> +
+ Menu> + Menu +

+ + +
+
+ + +
+
+
+

+

+

+

+

+
+ + + + +
+ + + +
+
+ + +
+
+ + + + + + + diff --git a/css/style b/css/style index e69de29..54fab95 100644 --- a/css/style +++ b/css/style @@ -0,0 +1,3 @@ +--primary-color:#2c3e50; +--background-color: #ffffff; +--accent-color:# \ No newline at end of file diff --git a/css/style.accessibility2.css b/css/style.accessibility2.css new file mode 100644 index 0000000..52cff31 --- /dev/null +++ b/css/style.accessibility2.css @@ -0,0 +1,31 @@ +h1 { + font-size: 5rem; + } + + p, + li { + line-height: 1.5; + font-size: 1.6rem; + } + strong, +em { + color: #a60000; +} +abbr { + color: #a60000; + } + a { + color: #ff0000; + } + + a:hover, + a:visited, + a:focus { + color: #a60000; + text-decoration: none; + } + + a:active { + color: #000000; + background-color: #a60000; + } \ No newline at end of file diff --git a/index.html b/index.html index a13dfc8..81696c1 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,59 @@ Leave feedback - + + + < href="main-content" class="skip-link">Skip to main content +
+
+

Website Feedback

+ +
+
+ +
+> +
+

Introduction

+

We value your feedback! Help us improve our wibsite by sharing your experience. +

+
+ +
+
+
+ + + + + Skip to main content
@@ -145,7 +196,7 @@

Website feedback

-<--Use semantic HTML--> +<--Use semantic HTML-->-->
"Web Accessibility Quiz"
Main Navigation - #Home SVT, Skatteverket, Technigo, local + #Home index.html #about easter global

Web Accessibility Quiz @@ -225,90 +276,7 @@

Menu

- - -
-
- - -
-
-
-

-

-

-

-

-
- - - - -
- - - -
-
- - -
-
-
+
+

Your information

+ forms id ="user-info-form"> +
+ + + /> + +
\ No newline at end of file diff --git a/forms/index2.html b/forms/index2.html new file mode 100644 index 0000000..238f43d --- /dev/null +++ b/forms/index2.html @@ -0,0 +1,9 @@ +
+ + +
+ Contact Preferences + + label for="email">Email +
+
\ No newline at end of file diff --git a/forms/index3.html b/forms/index3.html new file mode 100644 index 0000000..2dbed88 --- /dev/null +++ b/forms/index3.html @@ -0,0 +1,14 @@ +
+

Personal Information

+
+ + +
+
+ \ No newline at end of file diff --git a/index.html b/index.html index 81696c1..a48a97b 100644 --- a/index.html +++ b/index.html @@ -39,6 +39,31 @@

Introduction

Continue
+
+

Your information

+
+
+
+
+ div id = "email-hint" class = "hint"> Example : name@example.com
+ + +< +