Age calculator app

Community feedback

• 

  T

  Grace•31,090

  @grace-snowPosted about 1 year ago

  @MarioMinchevski make sure you're using a date library for this not doing manual calculations. I can enter in an invalid date of 29 Feb 2023 for example and no validation is being fired.

  Other improvements I suggest

  1. Use a main landmark
  2. Use an sr-only h1 at least even though a heading hasn't been included in the design
  3. Use a fieldset and sr-only legend to encapsulate the 3 date fields
  4. Use autocomplete attributes on the date fields (See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#sect44)
  5. The submit button should hae a label of "submit" and the img icon alt text should be left blank
  6. The results box should have an aria-live attribute on it
  7. I recommend making the body a flex column, NOT a grid with place content center. The place-content center is causing the component to overflow on left and right on small screens, i.e. no longer honouring the margin you've set. Alternatively, if you want to use grid to center it, you need to use justify and align ITEMS center, not place-content center.
  8. The results box should have an sr-only h2
  9. The years months and days in the results are not headings for any other content so must not use heading elements. They are paragraphs, or even just one paragraph with spans inside.
  10. This does not fit on a screen that is 320px wide at the moment. This is an [essential WCAG accessibility success criteria[(https://www.w3.org/TR/WCAG21/#reflow). To fix, I recommend you set the max-width or width of the inputs to be 4-5ch for day and month and 6-7ch for year on mobile screens. You shouldn't be setting any widths in px anyway.
  11. Just as font size must never be in px, nor should letter spacing
  12. Styling should always be done mobile first and media queries must be defined in rem or em, never in pixels. More information

  0