tip calculator

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great job on this one, and really glad that you focus on accessibility for this challenge. This is hard to make one accessible, since most solutions changes data for every input which can be confusing for users who might use it using assistive techs. The layout in desktop is good and the mobile layout is great as well.

  Some suggestions would be:

  • On the h1 that would be read wrong by screen-reader. Do not break a single word, if you did that, instead of reading "splitter" it will be read as "s" "p" "l"... letter by letter. But since you used aria-label it will be right, but the proper way on this one would be adding max-width on the h1 then use word-break: break-all. This way, letters that are beyond the max-width will get wrapped, and you won't need to add aria-label and those span could be removed.
  • No need to use aria-labelledby on the form.
  • For the tip selection section, using button plainly on those doesn't really add any accessibility at all. Since those are selections, you could use input type="radio" on those, that way, it will be more clearer that a user "selected" something, and if the user selects the custom tip input, then you could just:

  pseducode
  
  currentRadioButton.checked = false;
  

  So that you could disable the selection made on the input type="radio".

  • You could use aria-live element, to which be used when the form is submitted. Informing the user that it has been submitted, because plain button does not add many extra information.
  • On the dl element, avoid using any other html element inside it unless it is dt and dd element. You used div inside it which is wrong.
  • The tip amount and total could be using heading tag as well.
  • Same for the reset button, it would be great to have aria-live informing that the form is has been reset.

  For some js:

  • Use .map instead of .forEach if you are changing data inside of the array, since you are "mapping" and applying listeners.
  • Also, maybe add some validation on some inputs like preventing inputting negative values.

  Other than those, great job again on this one.

  Marked as helpful

  1

  ---

  

  Anwar•375

  @Anwar11234Posted about 3 years ago

  @pikamart Thank you very much, my friend. Your feedback is packed with great tips and positive energy.

  0