Mobile first + vanilla JS tooltip

Community feedback

• 

  Aakash Verma•6,710

  @skyv26Posted almost 3 years ago

  Hi! Eric, Really nice work. I tested your design responsiveness and it is good. I checked your report and I saw there is two error in your HTML

  You can see this

  <img src="images/avatar-michelle.jpg" alt="" class="c-article__avatar" width="40px" height="40px">

  you have used px along with size in width and height attribute.

  Keep in mind in html if you are using attribute like width and height then you just need to pass value without any unit. Like below:

  <img src="images/avatar-michelle.jpg" alt="" class="c-article__avatar" width="40" height="40">

  So by updating your code with above one, it will solve html issue.

  2. You can see one thing in above snippet that you didn't add alt text and that's why you get accessibility issue. So add alt text like below:

  <img src="images/avatar-michelle.jpg" alt="owner's photograph" class="c-article__avatar" width="40" height="40">

  3. Wrap yout c-article div inside the main tag like below:

  <main>
        <div class="c-article">
                       ....... 
                         ......... 
                               ..............
                                  ......
      </div>
  </main>
  

  It will solve your landmark accessibility issue.

  I hope you understand . Overall you did good work. My above suggestions might be helpful for you.

  Good Luck

  Marked as helpful

  1
• 

  Éric Férole•420

  @Eric-FerolePosted almost 3 years ago

  Thank you Aakash ! I'll fix these issues.

  0