QR code component

Community feedback

• 

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  Some recommendations regarding your code that could be of interest to you.

  HTML

  In order to fix the accessibility issues:

  • You need to replace <div class="attribution"> with the <main> tag. You'd better use Semantic HTML, and you can also reach more information about it from Using Semantic HTML Tags Correctly.

  • Another issue is that your <img> tag should include alt ="" attribute. You can apply like this:

  <img src="./image-qr-code.png" alt="qr-code">
  

  • Each main content needs to start with an h1 element. Your accessibility report states page should contain a level-one heading. So, you need to use a <h1> element in the <main> tag instead of using <h3>. You can replace your <h3>Improve your front-end Skills by building projects</h3> element with the <h1>Improve your front-end skills by building projects</h1> element.

  CSS

  • You can apply this style below if you want to apply background-color for body

  body {
    background: #d6e2f0;
  }
  

  • and if you want, you can update h1 (but now h3 in your code, if you change it, please pay attention to it) and p in this way:

  h1 {                 // when you change h3 as h1, you update like this please :)
      font-size: 1.3rem;
      text-align: center;
      font-weight: 700;
      color: #1f3251;
      padding: 0 2rem;
      margin-bottom: 5px;
  }
  
     p {
      font-size: 1rem; 
      font-weight: 400;
      text-align: center;
      color: #7b879d;
      padding: 0 3rem;
      margin-bottom: 3rem;
  }
  

  Hope I am helpful. :)

  0