Tip Calculator App built with HTML, CSS, JavaScript

Community feedback

• 

  Anubliss•460

  @Anubliss-0Posted 2 months ago

  Fantastic job finishing the project, it looks great! I took a look at your code and its very well organized and clear to read.

  There really isn't much for me to say in terms of suggested improvements, but if I may offer some feedback I would look into the use of aria-labels and further semantics for a11y friendly design.

  The aria-label you have is a great touch, however good practice for labels is to try and make them as concise as possible seeing as screen readers will read every single label. A good example that could help here is to describe the what the input is and whats its purpose is, rather than what the user does with it. For example...

  aria-label="Custom tip percentage"
  

  As for adding further a11y friendly touches to your project you could consider...

  • Adding "roles" to your buttons to ensure the semantic meaning is clear

  <button class="tip-btn" data-percent="0.10" aria-label="10 percent tip">10%</button>
  

  • Using <fieldset> to group related inputs together.

  • The invalid input warnings are currently set to aria-hidden These should be visible to screen readers and with the use of aria-live can actually provide important information to users who rely on a11y tools to access the web.

  Instead of hiding them, consider using aria-live, the message is empty by default and updated with JS, so when that change happens aria-live will inform the user that the error has occurred.

  <span
    class="bill-error-msg"
    id="bill-error-msg"
    aria-live="assertive"
  ></span>
  

  Please feel free to reach out if you have any questions regarding a11y! Otherwise congratulations on completing the challenge.

  Marked as helpful

  1

  ---

  

  P

  Christina•240

  @codercreativePosted 2 months ago

  Thank you so much @Anubliss-0 for your very helpful feedback!! I have added all your suggestions to my code and resubmitted the project.

  0