diff --git a/README.md b/README.md
index 57e6d16..96461a2 100644
--- 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
index e69de29..2ca081f 100644
--- 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
new file mode 100644
index 0000000..a1f6d13
--- /dev/null
+++ b/images/accessible-form-example.svg
@@ -0,0 +1 @@
+Title
+ Strength in Diversity
This is the starting point.
+ Skip to Content
+
+
+ Strength in Diversity
+
+
+
+
+
+
+
+ How This UI is Accessible
+
+ This quiz follows accessibility principles by using semantic HTML,
+ keyboard-friendly interactions, and screen reader-friendly markup.
+
+
+
+
+ Empowering People with Disabilities
+
+ Our goal is to empower each of you to champion the prioritization of
+ Accessibilityon the web and help provide all people with equal
+ opportunities.
+
+
+
+
+
+
+ You got 2 out of 3 correct!
+
+
+
+
+
diff --git a/js/main.js b/js/main.js
index e69de29..6aae9a2 100644
--- 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
new file mode 100644
index 0000000..67e422f
--- /dev/null
+++ 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)
+b)
+c)
+
+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)
+b)
+c)
+
+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
\ No newline at end of file
+ 
+