Skip to content
Submitted almost 3 years ago

FAQ | HTML, CSS, JS

Johandry López•220
@DarKaRor
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion card
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Feedback is appreciated

Community feedback

  • Aakash Verma•6,710
    @skyv26Posted almost 3 years ago

    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
    Johandry López•220
    @DarKaRorPosted almost 3 years ago

    @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,710
    @skyv26Posted almost 3 years ago

    @DarKaRor Yes. It is a accessibility issue.

    0
  • imad•3,330
    @imadvvPosted almost 3 years ago

    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

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