tip calculator app

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop looks really great, it is responsive and the mobile state looks really great though there is just horizontal scroll in mobile layout.

  Also, it's nice that you were able to tackle and finished this one, that is really nice!

  Some suggestions would be:

  • Do not use width: 100vw since this creates a horizontal scrollbar. 100vw doesn't account the extra size of the scrollbar on the right side, that is why there is an extra scroll space.
  • Website-logo should be using alt="splitter" , the image already has the text so better start using it.
  • Always have an h1 element on a page. Since there are no visible text-content that could be h1 on this, you would make the h1 screen-reader only text, search for sr-only look it up and see how it is used. The h1 would have that selector and the h1 would be placed as the first text-content of the main describing what the main content is all about.
  • Each text like bill number of people should be a label for the input that is next to them.
  • Each input icon on its left side could use aria-hidden="true" to totally hide it.
  • Maybe a more visible visual-indicator on the button elements because tabbing on it doesn't show an visual-indicator that much.
  • An extra idea, since you are using button to make it more informative for users, you could use aria-live attribute on an element. This element will announce that a certain button is used, this way it is more accessible, you may want to look up on net on how it used though:>
  • custom input needs to have an associated label to it, the label would be an screen-reader only element so you would need to use like sr-only , you can look that as well on the net.
  • When using heading tag, make sure that you aren't skipping a level. If you use h4 make sure that h1, h2, h3 are all present before it, not skipping any level.
  • The bold-white-text on the right side, you could have used only 1 heading tag per each text and each heading tag would include the small-text below it. This way, you wouldn't use 2 heading tag for every section heading.
  • Also, adding cursor: pointer for every button on desktop layout would be really great.
  • An idea as well, creating an aria-live element that announces the form has been reset when the reset button is pressed.

  Aside from those, really great job on this one.

  2

  ---

  

  adeline•170

  @adelinejunePosted about 3 years ago

  @pikamart thank you for taking you time to write this all ☺️ I have already fixed my mobile view so there won't be any more horizontal scroll and I'm not really familiar with a lot of concepts that you've just proposed but I will definitely do some research about it to make it more accessible especially for sr-only once again Thanks for your help, greatly appreciate it!

  1
• 

  seekinfox•560

  @seekinfoxPosted about 3 years ago

  lol i know.. but isn't this how it works? we only learn to swim when we get into water.

  I'll be trying this challenge soon !, i hope i don't take decades to finish this. XD

  0

  ---

  

  adeline•170

  @adelinejunePosted about 3 years ago

  @seekinfox haha yess! goodluck 😆

  0