PWA Mobile First Tip Calculator using React

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Layout in desktop is good, responds well I guess and the mobile layout is good as well.

  Some suggestions would be:

  • Avoid using height: 100vh on a large container. If you inspect your layout in dev tools at the bottom, you will notice that the top part is cut off because of the .app selector only uses the remaining viewport, instead you can just remove it or replace it with min-height: 100vh.
  • Always have a main element that will wrap the whole main content of the webpage. On this one, the .app could have used main instead of just div.
  • The alt value for the website logo should be alt="splitter", since the image already have the text needed. Also, avoid adding words that relates to "graphic" like "logo, image, picture.." as a alt value, img is already an image, no need to describe it.
  • Always have an h1 on a webpage. On this one, the h1 would be a screen-reader only text.
  • When using heading tag, make sure you aren't skipping a lower level heading, if you use h5 make sure h1, h2, h3, h4 are present before the h5.
  • Your error message of can't be negative is still visible for the screen-reader, opacity alone won't suffice, use visibility: hidden, this way the error will only be visible both to sighted users and screen-readers users, if and only if the input is wrong. Also, the error-message should have an id attribute, which will be reference by the input as the value for the aria-describedBy on it, if the input is wrong. This way, users will know what is the error that they had made.
  • Using div for those tip selections is not really good. Always use interactive html element for interactive component, like button or input type="radio" on this one.
  • The custom input needs to have label element, or an aria-label to defined what it does. Also make us of min attribute on the input.
  • The same goes for the number of people input, make use of aria-invalid and aria-describedBy to which points to the error element's id
  • The tip amount plus the word below it could have only used 1 heading tag.
  • The resulting number is not suited to be a heading tag, especially NOT h1 element. Just use p tag on it, making it heading tag does not add any meaning at all.
  • Reset button should be a button, not div. Also, it would be great to have an aria-live element on this one, so that when the user reset the form, the live element will say that the form has been reset. This way, it will be clearer for users what happened.

  Just those above, still great job on this one.

  Marked as helpful

  2

  ---

  

  Fidel Lim•2,775

  @fidellimPosted about 3 years ago

  @pikamart Wow, thank you so much Raymart for this detailed report! Will definitely learn more about accessibility. Have a great day!

  0

  

  Fidel Lim•2,775

  @fidellimPosted about 3 years ago

  @pikamart due to your suggestions, there are no more accessibility issues. Thanks again!

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  @fidellim awesome !!

  0