advice generator using flex

Community feedback

• 

  Nurcholis•420

  @cholis04Posted over 2 years ago

  Hi Samuel,

  The advice sentence is taken from the API and it takes a few seconds to load depending on the internet connection speed. You can provide a load state while the data is fetching.

  And if I may add, there are a few problems listed :

  1. Buttons must have discernible text

  To improve accessibility, each button should have visible text. However, if you are using an image in the button and there is no text listed, you can add the aria-label attribute to the button :

  <button id="buttonGerar" aria-label="Generate Advice"><img src="./assets/images/icon-dice.svg"></button>
  

  2. Images must have alternate text

  For images intended for decoration, add an alt attribute with an empty value.

  <img id="divider" src="./assets/images/pattern-divider-desktop.svg" alt="">
  <img src="./assets/images/icon-dice.svg" alt="">
  

  3. Document should have one main landmark

  Make sure you wrap the main content with the <main> tag.

  <main>
  	<div class="container">
  	...
  	</div>
  </main>
  

  4. Page should contain a level-one heading

  And lastly, each page must have one <h1> tag. In this case, you can replace the <p id="advice">Advice #117</p> tag with <h1 id="advice"> Advice #117</h1>

  Hope this helps you, and happy coding

  Marked as helpful

  1

  ---

  

  Samuel•200

  @samupapatiPosted over 2 years ago

  @cholis04 Thanks for the answers and teachings! I will put it into practice in my projects.

  1