Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

FAQ | HTML, CSS, JS

@DarKaRor

Desktop design screenshot for the FAQ accordion card coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Feedback is appreciated

Community feedback

Aakash Verma 6,690

@skyv26

Posted

Hi! Johandry

To solve accessibility issues:

  1. wrap everything in your body in <main> OR give role="" to the direct children of your <body> ... Click here to read more here

  2. start your headings with <h1> and move up by one level each time, use heading only once for main heading, don't repeat your headings in one page.

  3. Don't let alt attribute empty, always add some meaning text in it, so that user able to understand.

<img src="./images/illustration-woman-online-desktop.svg" alt="">

use below:

<img src="./images/illustration-woman-online-desktop.svg" alt="woman illustration image" />

and check that I add / at the end of img tag as self closed tag.

Good Luck ;)

1

@DarKaRor

Posted

@skyv26 I don't fully understand the problem, I don't repeat the h1 heading, but I repeat the h2 for each one of the questions, is that the problem?

1
Aakash Verma 6,690

@skyv26

Posted

@DarKaRor Yes. It is a accessibility issue.

0
imad 3,330

@imadvv

Posted

desktop version is good but you need to focus more in the mobile screen and Accessibility, Good job :

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord