Random advice using fetch and json API's

Community feedback

• 

  Fazza Razaq Amiarso•2,340

  @fazzaamiarsoPosted over 2 years ago

  Hello Alejandro! You definitely nailed the API implementation. Great work!

  There are some accessibility issues that can be improved.

  • You should wrap the attribution div on a <footer> tag. So, it's wrapped in a landmark and accessible.
  • You must have an h1 element so screen reader users can be informed about the page's purpose. In your case, you can implement a visually hidden h1 by adding this CSS class.

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
  }
  

  • Your image button better replaced with this implementation for accessibility.

   <input type="image" src="./images/icon-dice.svg" alt="Generate advice" />
  

  Please refer to this docs.

  Hope it helps! Keep on learning!

  Marked as helpful

  0

  ---

  

  Alejandro Villaescusa•190

  @alexvillhenPosted over 2 years ago

  @fazzaamiarso wooow, thaks a lot! I've never used the input tag like that, this is really helpful, thksss

  0