Tip calculator app

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted about 1 month ago

  Hi, I notice this needs some work to make it accessible. There are some essential aspects of form structure missing.

  • the meaningful text above the inputs must be labels (not headings) that are programmatically linked to their inputs. The values are not the labels.
  • the tip fields need to be grouped in a fieldset and labelled with a legend element.
  • this doesn't work with a keyboard because the radios are display none. You need to accessibly hide form inputs (eg sr-only). Always test any project you do with a keyboard as a minimum check.
  • when the calculation runs make sure screen readers are notified that the results have updated. You may like to do this with an sr-only alert with a denounce and timeout so "results updated" gets announced then removed. Or you may like to wrap some results content in an aria-live or alert role so it's announced when it changes.

  Marked as helpful

  0

  ---

  

  Zainab Azeem•340

  @ZainabeyyPosted about 1 month ago

  Thank you, @grace-snow. Is there any other problem besides accessibility issues?

  0

  

  T

  Grace•31,270

  @grace-snowPosted about 1 month ago

  @Zainabeyy the other thing I notice straight away on mobile is it looks strange the tips are all narrow and in one column when there is room for 2 columns.

  Marked as helpful

  0

  

  Zainab Azeem•340

  @ZainabeyyPosted about 1 month ago

  Thanks, @grace-snow, I have updated the solution.

  0
• 

  P

  kaoutar ouadih•800

  @kaoutar-ouadihPosted 7 months ago

  Amazing work! just a little remark maybe you need to add a cursor : pointer and a hover effect to your tip's buttons.

  But aside from that Great job.

  Marked as helpful

  0

  ---

  

  Zainab Azeem•340

  @ZainabeyyPosted 7 months ago

  @kaoutar-ouadih Thank You...I will definitely do this.

  0