Skip to content
OverviewSolutions
5
Comments
3
EthanAmato
@EthanAmato

All comments

  • EthanAmato•130
    @EthanAmatoPosted over 1 year ago

    Hey there! First of all I want to say fantastic job! It looks absolutely great! If you want to address some of the warnings that the accessibility report gave you, check out the following:

    "Document should have one main landmark" + "All page content should be contained by landmarks" Essentially, it's telling you to make use of semantic HTML (documentation here) to make the site easier to read for screen readers. Essentially, replace the <div class="container"> with a <main/> tag and you should be all set!

    2 "Page should contain a level-one heading"

    I believe this error is coming from a lack of an H1 tag in your code. Try replacing the H3 tag with an H1 (and swap the associated styling)

    Overall, fantastic job and I hope you enjoy your journey making websites :)

    0
  • Isaias Lopez•50
    @lpzisaiasSubmitted over 1 year ago

    The common issue is to center the elements and set the margins to make it responsive and faithful to the design.

    QR code component

    1
    EthanAmato•130
    @EthanAmatoPosted over 1 year ago

    Hey there! First of all I want to say fantastic job! It looks beautiful. If you want to address some of the warnings that the accessibility report gave you, check out the following:

    "Document should have one main landmark" + "3 All page content should be contained by landmarks"

    Essentially, it's telling you to make use of semantic HTML (which you clearly understand due to the usage of the article tag) to make the site easier to read for screen readers. Essentially, I believe just wrapping all elements in your <body> tag with a <main> tag will solve your errors.

    Hope this was helpful and, once again, great job!

    Marked as helpful
    2
  • EthanAmato•130
    @EthanAmatoPosted over 1 year ago

    Hey there! First of all I want to say fantastic job! It looks beautiful and I love the incorporation of React and ChakraUI. If you want to address some of the warnings that the accessibility report gave you, check out the following:

    1. "Document should have one main landmark"
    • Essentially, it's telling you to make use of semantic HTML (documentation here) to make the site easier to read for screen readers. Essentially, replace the <div className="container"> with a <main/> tag.

    2 "Page should contain a level-one heading"

    • I believe this error is coming from a lack of an H1 tag in your code. According to the ChakraUI documentation, this can be accomplished with the <Heading as='h1'/> component

    3 All page content should be contained by landmarks

    • I think this is coming from how react renders jsx and isn't too much cause for concern. Here is a stack overflow post regarding it: link

    Overall, fantastic job and I hope you continue your journey :)

    Marked as helpful
    1