age-calculator-app with HTML, CSS, and JS

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted about 2 months ago

  I'm afraid you need to rewrite the html in this

  • it must use a form with a submit button
  • the date inputs must be wrapped in a fieldset with a legend (this can be sr-only if needed).
  • each input must have a label.
  • each input must have an appropriate autocomplete attribute.
  • each input should have a programmatically linked error. container. You do that with a unique ID on each error element and aria-desciribedby on each input pointing to its error id.
  • the errors should have aria-live attributes.
  • the submit button must have an accessible name. You can do that with img alt, sr-only text inside the button, or aria-label on the button.
  • the results content should be wrapped in an element that has an aria-live attribute.
  • the results content should ideally have a visually-hidden (sr-only) heading.
  • the results content is definitely not appropriate for heading content. At best it is a paragraph, or can be 3 paragraphs if you really want.
  • all of this should be inside a main landmark.

  I recommend you trigger errors on blur not on input. It's a horrible user experience for errors to pop up constantly.

  0