IP Address Tracker App

Community feedback

• 

  Eray•1,410

  @ErayBarslanPosted about 2 years ago

  Hello Thomas, excellent work this one! JS looks clean, page is responsive and design is close to the provided. Nothing much to add regarding these. Although you can improve your html regarding semantic markup for better SEO results and accessibility:

  • It would be better to use form for search section instead div. Same goes for <div class="inputButton"> You should always use <button> for buttons :) Also you can hide arrow image from screen readers so they won't bother with it. With a refactor you can use :

  <form class="searchContainer">
    <input required class="inputContainer" type="text" aria-label="search ip" placeholder="Search for any IP address or domain">
        <button class="inputButton" aria-label="submit search">
          <img src="/assets/images/icon-arrow.svg" alt="right arrow" aria-hidden="true" >
        </button>
  </form>
  
  /* An input field requires a label, if not the <label> element you can use aria-label*/
  /* If there is no text inside the button, it requires aria-label to assist screen readers*/
  /* img is there for just decor, so you can use aria-hidden */
  

  • A page requires <h1> but we should use only once. In your solution you've used h1 for everything and in result, your site won't ever show due to low SEO result. You can leave the top <h1> as it is but change rest of headings to <p>.
  • Lastly, you should contain your elements with landmarks. For this challenge you can wrap your entire content with a <main> inside your body. Aside these, excellent solution again and happy coding :)

  0