Fylo Data Storage Solution

Community feedback

• 

  Agustin•340

  @agusc01Posted over 2 years ago

  Hi !

  All your images are empty in alt="" attribute. It's very important for 2 reasons .

  1. search engines need it to understand what is in the photo
  2. when a person is blind, he/she can't see your image but he/she can hear the content (with a particular configuration to blind people's devices)

  Then, you wrap the image into a div.img-box, the search engines migth not understand the context of your web site I recomend you change this

  <div class="icons">
    <div class="img-box">
      <img src="./images/icon-document.svg" alt="">
    </div>
    <div class="img-box">
      <img src="./images/icon-folder.svg" alt="">
    </div>
    <div class="img-box">
      <img src="./images/icon-upload.svg" alt="">
    </div>
  </div>
  

  for this

  <div class="icons">
    <button class="icon__button"><img class="icon__image" src="./images/icon-document.svg" alt="document icon"></button>
    <button class="icon__button"><img class="icon__image" src="./images/icon-folder.svg" alt="folder icon"></button>
    <button class="icon__button"><img class="icon__image" src="./images/icon-upload.svg" alt="icon upload"></button>
  </div>
  

  then change your css with this

  .icon__button {
    width: 45px;
    height: 45px;
    border-radius: 8px;
    display: grid;
    background-color: var(--Very_Dark_Blue);
    border: none;
  }
  .icon__image {
    margin: auto;
  }
  .icon__button:hover {
    cursor: pointer;
  }
  

  If you do this , you will see that nothing changes BUT now you will have more specific content for search engines and blind people , also you have a nice effect in your buttons with the property "cursor:pointer"

  Anyway your challenges looks great . Keep coding

  Marked as helpful

  0

  ---

  

  hariprasad9899•1,170

  @hariprasad9899Posted over 2 years ago

  @agusc01 Hey Augustin! Thank you so much for your feedback and insights! will definitely correct those next time and will implement your ideas!

  1