From 76900a3016697e5599c0e13f2b490c4d98e8c17b Mon Sep 17 00:00:00 2001 From: HolaCarmensita Date: Mon, 31 Mar 2025 12:32:08 +0200 Subject: [PATCH 01/14] HTML och CSS-grund --- css/styles.css | 45 ++++++++++++ images/accessible-form-example.svg | 1 + images/decorative.svg | 1 + index.html | 112 ++++++++++++++++++++++++++++- quiz.txt | 49 +++++++++++++ 5 files changed, 206 insertions(+), 2 deletions(-) create mode 100644 images/accessible-form-example.svg create mode 100644 images/decorative.svg create mode 100644 quiz.txt diff --git a/css/styles.css b/css/styles.css index e69de29..e4dd4ac 100644 --- a/css/styles.css +++ b/css/styles.css @@ -0,0 +1,45 @@ +: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 #007acc; + outline-offset: 2px; + border-radius: 4px; +} + +body { + font-family: 'Montserrat', sans-serif; + + background-color: var(--light-yellow); +} + +.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; +} + +#quiz:focus { + outline: 3px solid #007acc; + background-color: #f0f8ff; +} + +img { + width: 200px; +} 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 @@ + \ No newline at end of file diff --git a/images/decorative.svg b/images/decorative.svg new file mode 100644 index 0000000..9a0d087 --- /dev/null +++ b/images/decorative.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html index a9a33db..628ebe1 100644 --- a/index.html +++ b/index.html @@ -3,11 +3,119 @@ - Title + Strength in Diversity + + + -

This is the starting point.

+ + +
+

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. +

+ + Example of an accessible form with properly labeled inputs +
+ +
+

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. +

+
+ +
+

Accessibility Quiz

+ +
+
+ What is the purpose of alt text on images? + + + +
+
+ What is the purpose of alt text on images? + + + +
+ + +
+ You got 2 out of 3 correct! + +
+
+
+
+ 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)
-
-

Accessibility Quiz

- -
+
+ +

Accessibility Quiz

+

+ This is a quiz with 2 questions about Accessibility. Use Tab to + start and Arrow keys to navigate. +

- What is the purpose of alt text on images? - -
- What is the purpose of alt text on images? - -
- -
- You got 2 out of 3 correct! - -
+ +
+ You got 2 out of 3 correct! + +
diff --git a/js/main.js b/js/main.js index e69de29..4570ce5 100644 --- a/js/main.js +++ b/js/main.js @@ -0,0 +1,2 @@ +//DOM ELEMENT +const form = document.getElementById('quiz-form'); From 9e37b5828cc7f870b4cf4a84edb4bd934cb59aa8 Mon Sep 17 00:00:00 2001 From: HolaCarmensita Date: Mon, 31 Mar 2025 15:51:56 +0200 Subject: [PATCH 03/14] =?UTF-8?q?Var=20tvungen=20att=20fixa=20en=20funktio?= =?UTF-8?q?n=20f=C3=B6r=20att=20ge=20form=20en=20klass=20f=C3=B6r=20att=20?= =?UTF-8?q?visa=20en=20markering=20som=20vid=20interaktiva=20element,=20me?= =?UTF-8?q?n=20endast=20via=20skip-l=C3=A4nken?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/main.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/js/main.js b/js/main.js index 4570ce5..6aae9a2 100644 --- a/js/main.js +++ b/js/main.js @@ -1,2 +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 +}); From 0d3e0afc51e1efdf3bd675bb9f66ca3d33830053 Mon Sep 17 00:00:00 2001 From: HolaCarmensita Date: Thu, 3 Apr 2025 08:31:54 +0200 Subject: [PATCH 04/14] =?UTF-8?q?r=C3=B6rig=20dag=20ig=C3=A5r,=20gjorde=20?= =?UTF-8?q?inget=20vettigt,=20bara=20css=20och=20lite=20m=C3=B6blering=20i?= =?UTF-8?q?=20index=20och=20about.=20Ska=20committa=20mer=20idag?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/settings.json | 3 + about.html | 46 +++++++- css/styles.css | 197 +++++++++++++++++++++++++++++++--- images/decoTransparent.svg | 1 + index.html | 209 ++++++++++++++++++++----------------- js/main.js | 18 +++- 6 files changed, 356 insertions(+), 118 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 images/decoTransparent.svg diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6b665aa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/about.html b/about.html index 5adbad6..5d4fb7d 100644 --- a/about.html +++ b/about.html @@ -6,5 +6,49 @@ About - + +
+

Accessibility

+ +
+
+

Contribute to a more inclusive web

+ Hands that creating a symbol of a heart +

+ This project gave me the opportunity to apply key accessibility principles + and contribute to a more inclusive web. It’s been a valuable learning + experience that really highlighted the importance of designing for all + users. Here are some helpful links to documentation that can support you + as a developer on your journey to prioritizing accessibility on the web + and helping ensure equal opportunities for everyone. +

+ link1 + link2 + + link3 + + link4 + +

About this site

+ +

+ This website was created as part of a course focused on web accessibility + – the practice of building websites that are usable for everyone, + including those who use screen readers, keyboard navigation, or other + assistive technologies. As part of the course, the task was to build a + multiple-choice quiz with accessibility in mind. This project has been all + about applying accessibility principles in practice, ensuring that the + interface is not only functional, but also inclusive. Whether you're + navigating with a mouse, a keyboard, or assistive tools, this site is + designed to offer a smooth and user-friendly experience for all. +

+ diff --git a/css/styles.css b/css/styles.css index 2ca081f..4d7cfe0 100644 --- a/css/styles.css +++ b/css/styles.css @@ -4,40 +4,110 @@ --text-black: #000000; --dark-spring-green: #2c6e49ff; --sea-green: #4c956cff; + --light-yellow: #fefee3ff; --melon: #ffc9b9ff; --persian-orange: #d68c45ff; } +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +body { + font-family: 'Montserrat', sans-serif; + background-color: white; + color: #18253b; + font-size: 1rem; +} + +.wrapper { + margin: 1rem 1.5rem 1rem 1.5rem; + max-width: 1200px; + margin: 0 auto; + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +.banner { + background-image: url(/images/decoTransparent.svg); + height: 200px; + background-position: center; /* Center the image */ + background-repeat: no-repeat; /* Do not repeat the image */ + background-size: contain; /* Resize the background image to cover the entire container */ +} + +h1 { + font-size: 1.5rem; +} + +header { + padding: 0; + margin: 0; + margin-left: auto; + margin-right: auto; + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1200px; + height: 100px; +} +nav { + height: 100%; + font-size: 1.2rem; +} + +nav ul { + list-style: none; + padding: 0; + margin: 0; + display: flex; + height: 100%; +} + +nav a { + outline: 3px solid transparent; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + height: 100%; + text-decoration: none; + font-weight: bold; + padding: 0 2rem 0 2rem; + color: var(--text-black); +} + +nav a:hover { + background-color: var(--melon); +} + button:focus-visible, a:focus-visible, input:focus-visible { - outline: 3px solid var(--melon); - background-color: var(--dark-spring-green); - color: var(--light-yellow); + outline: 3px solid var(--sea-green); + background-color: var(--melon); + color: var(--text-black); } #quiz-form:focus-visible, #quiz-form.show-focus { outline: 3px solid var(--melon); - background-color: var(--dark-spring-green); + background-color: var(--melon); color: var(--light-yellow); } input[type='radio'] { - accent-color: var(--sea-green); -} - -body { - font-family: 'Montserrat', sans-serif; - background-color: var(--light-yellow); + color: var(--melon); } .skip-link { position: absolute; top: -40px; left: 0; - background-color: #007acc; + background-color: var(--melon); color: white; padding: 0.5rem 1rem; z-index: 1000; @@ -61,10 +131,107 @@ body { border: 0; } -img { - width: 200px; +.quiz-introduction { + border: 2px solid var(--melon); + background-color: var(--melon); + display: flex; + flex-direction: column; + align-items: center; + gap: 3em; + padding-top: 5rem; + padding-bottom: 5rem; +} + +.quiz-introduction-container { + display: flex; + flex-direction: column; + gap: 1rem; + max-width: 65ch; + line-height: 1.6; +} + +.quiz-introduction-container h2 { + text-align: center; + margin-bottom: 1rem; +} + +fieldset { + border: 1px solid var(--primary-color); + margin: 1em 0; + padding: 1em; + border-radius: 4px; +} + +legend { + font-weight: bold; + padding: 0.5em 1em; + color: var(--primary-color); + background-color: #f8fafc; + border: 1px solid var(--primary-color); + border-radius: 4px; +} + +.radio-group { + margin: 1em 0; +} + +/* Enhanced radio button styling */ +.radio-option { + position: relative; + padding: 0.75em; + margin: 0.5em 0; + border-radius: 4px; + transition: background-color 0.2s; + display: flex; + align-items: center; +} + +.radio-option:hover { + background-color: rgba(44, 62, 80, 0.1); +} + +/* Custom radio button styling */ +input[type='radio'] { + margin-right: 0.75em; + width: 20px; + height: 20px; +} + +input[type='radio']:focus-visible + label { + outline: var(--focus-outline); + outline-offset: 2px; + border-radius: 2px; +} + +input[type='radio'] + label { + cursor: pointer; + padding: 4px 8px; + border-radius: 4px; + transition: background-color 0.2s; + flex: 1; +} + +button { + background-color: var(--dark-spring-green); + color: white; + font-weight: bold; + font-size: 1rem; + border: none; + padding: 1rem 2rem; + cursor: pointer; + border-radius: 32px; + transition: background-color 0.2s, transform 0.1s; } -#quiz-form { - border: 3px solid transparent; +@media (min-width: 768px) { + body { + font-size: 1.125rem; /* 18px */ + } + .banner { + background-image: url(/images/decoTransparent.svg); + height: 500px; + background-position: center; /* Center the image */ + background-repeat: no-repeat; /* Do not repeat the image */ + background-size: contain; /* Resize the background image to cover the entire container */ + } } diff --git a/images/decoTransparent.svg b/images/decoTransparent.svg new file mode 100644 index 0000000..015af16 --- /dev/null +++ b/images/decoTransparent.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html index fc9c9ef..e944739 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - Strength in Diversity + Home @@ -14,122 +14,135 @@ -
-

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. -

- - Hands that creating a symbol of a heart -
+
+
+

Start the Accessibility Quiz

+

+ It’s time to level up your skills and dive into the world of web + accessibility. -

-

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. -

-
+ +

+

+ This quiz is a chance to learn something new – and every step + toward better accessibility makes the internet a fairer place for + all + Ready? Let’s go! + +

+

+ ps. This quiz follows accessibility principles by using semantic + HTML, keyboard-friendly interactions, and screen reader-friendly + markup. +

+
-
-
-

Accessibility Quiz

-

- This is a quiz with 2 questions about Accessibility. Use Tab to - start and Arrow keys to navigate. -

-
- - What is the purpose of alt text on images? - - - -
+
+ +
+
-
- - -
- You got 2 out of 3 correct! - -
- - + + +
+ You got 2 out of 3 correct! + +
+ + +
diff --git a/js/main.js b/js/main.js index 6aae9a2..4f174cf 100644 --- a/js/main.js +++ b/js/main.js @@ -1,9 +1,19 @@ //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'); +document.addEventListener('DOMContentLoaded', () => { + // Listen to skip content 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 + target.scrollIntoView({ behavior: 'smooth', block: 'start' }); //Osäker på denna det var något för mobil + }); + + //Starta quizet + + //Hantera Error/icke besvarade frågor + + //Submita quizet + + //Feedback och resultat till användaren }); From 8fb25e4238a0cf8b50050e7046305935558cb0b0 Mon Sep 17 00:00:00 2001 From: HolaCarmensita Date: Thu, 3 Apr 2025 10:20:11 +0200 Subject: [PATCH 05/14] =?UTF-8?q?=C3=A4ntligen=20fungerar=20starta=20knapo?= =?UTF-8?q?en=20och=20f=C3=B6rsta=20fr=C3=A5gan=20syns?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/form.css | 119 +++++++++++++++++++++++++++++++++++++++++++++++++ css/styles.css | 86 +---------------------------------- index.html | 36 ++++++++++++--- js/main.js | 29 +++++++++++- 4 files changed, 177 insertions(+), 93 deletions(-) create mode 100644 css/form.css diff --git a/css/form.css b/css/form.css new file mode 100644 index 0000000..69430dd --- /dev/null +++ b/css/form.css @@ -0,0 +1,119 @@ +: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; +} + +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +.step { + height: 15px; + width: 15px; + margin: 0 2px; + background-color: #bbbbbb; + border: none; + border-radius: 50%; + display: inline-block; + opacity: 0.5; +} + +.step.active { + opacity: 1; +} + +/* Mark the steps that are finished and valid: */ +.step.finish { + background-color: #04aa6d; +} + +input[type='radio'] { + color: var(--melon); +} + +.quiz-introduction { + background-color: var(--light-yellow); + display: flex; + flex-direction: column; + align-items: center; + gap: 3em; + padding-top: 5rem; + padding-bottom: 5rem; +} + +.quiz-introduction-container { + display: flex; + flex-direction: column; + gap: 1rem; + max-width: 65ch; + line-height: 1.6; +} + +.quiz-introduction-container h2 { + text-align: center; + margin-bottom: 1rem; +} + +fieldset { + border: 1px solid var(--sea-green); + margin: 1em 0; + padding: 1em; + border-radius: 4px; +} + +legend { + font-weight: bold; + padding: 0.5em 1em; + color: var(--sea-green); + border: 1px solid var(--sea-green); + border-radius: 4px; +} + +/* .radio-group { + margin: 1em 0; +} */ + +/* Enhanced radio button styling */ +/* .radio-option { + position: relative; + padding: 0.75em; + margin: 0.5em 0; + border-radius: 4px; + transition: background-color 0.2s; + display: flex; + align-items: center; +} */ +/* +.radio-option:hover { + background-color: rgba(44, 62, 80, 0.1); +} */ + +/* Custom radio button styling */ +/* input[type='radio'] { + margin-right: 0.75em; + width: 20px; + height: 20px; +} */ + +/* input[type='radio']:focus-visible + label { + outline: var(--focus-outline); + outline-offset: 2px; + border-radius: 2px; +} + +input[type='radio'] + label { + cursor: pointer; + padding: 4px 8px; + border-radius: 4px; + transition: background-color 0.2s; + flex: 1; +} */ diff --git a/css/styles.css b/css/styles.css index 4d7cfe0..a57d94d 100644 --- a/css/styles.css +++ b/css/styles.css @@ -18,7 +18,7 @@ body { font-family: 'Montserrat', sans-serif; - background-color: white; + background-color: #fefee3ff; color: #18253b; font-size: 1rem; } @@ -99,10 +99,6 @@ input:focus-visible { color: var(--light-yellow); } -input[type='radio'] { - color: var(--melon); -} - .skip-link { position: absolute; top: -40px; @@ -131,86 +127,6 @@ input[type='radio'] { border: 0; } -.quiz-introduction { - border: 2px solid var(--melon); - background-color: var(--melon); - display: flex; - flex-direction: column; - align-items: center; - gap: 3em; - padding-top: 5rem; - padding-bottom: 5rem; -} - -.quiz-introduction-container { - display: flex; - flex-direction: column; - gap: 1rem; - max-width: 65ch; - line-height: 1.6; -} - -.quiz-introduction-container h2 { - text-align: center; - margin-bottom: 1rem; -} - -fieldset { - border: 1px solid var(--primary-color); - margin: 1em 0; - padding: 1em; - border-radius: 4px; -} - -legend { - font-weight: bold; - padding: 0.5em 1em; - color: var(--primary-color); - background-color: #f8fafc; - border: 1px solid var(--primary-color); - border-radius: 4px; -} - -.radio-group { - margin: 1em 0; -} - -/* Enhanced radio button styling */ -.radio-option { - position: relative; - padding: 0.75em; - margin: 0.5em 0; - border-radius: 4px; - transition: background-color 0.2s; - display: flex; - align-items: center; -} - -.radio-option:hover { - background-color: rgba(44, 62, 80, 0.1); -} - -/* Custom radio button styling */ -input[type='radio'] { - margin-right: 0.75em; - width: 20px; - height: 20px; -} - -input[type='radio']:focus-visible + label { - outline: var(--focus-outline); - outline-offset: 2px; - border-radius: 2px; -} - -input[type='radio'] + label { - cursor: pointer; - padding: 4px 8px; - border-radius: 4px; - transition: background-color 0.2s; - flex: 1; -} - button { background-color: var(--dark-spring-green); color: white; diff --git a/index.html b/index.html index e944739..c50459e 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,8 @@ Home + + Start the Accessibility Quiz
-
- @@ -87,14 +87,18 @@

Accessibility Quiz

What is the purpose of alt text on images? - - + + +