Flex/Grid, Vanilla JS, Mobile first

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, great work on this one. Layout both desktop and mobile is really good. Also, awesome that mobile first worked for you nicely!!

  Some suggestions would be:

  • Wrapping the whole content in a main tag so that it will have a landmark. Also it would be great if you add a h1 but it will be only for screen reader, so it would have a sr-only class. It could be like <h1>Tip Calculator</h1>. For screen reader
  • The alt of the img could be the text inside that image. "splittle" since it's name is already defined in the logo.
  • Wrapping the all the radio buttons inside of a fieldset element along with its legend will be really great and make it more accessible for assistive tech. With using this, when a screen reader navigates to the radio buttons, it will announce the legend's text, thus creating a guide for screen reader users. Example would be like:

    <fieldset>
      <legend class="sr-only">Select percentage for tippings</legend>
      {all the radio buttons with their labels}
   </fieldset>
  

  Remember to add a screen reader class to the legend.

  • For the "Tip amount" and "Total amount" text, instead of using label on it, use a div or p. label are for input elements.
  • Also an addition, this will be really great if you want to support accessibility more. Adding a aria-live on a element so that when a user finalizes their tippings, a screen reader would read out the result of their interaction.

  Other than those, well done. Choosing radio buttons on those is really great.

  Marked as helpful

  0