age-calculator-app

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted about 1 year ago

  To improve the accessibility of this

  1. Change the h1 text to “Age Calculator”. It is unnecessarily verbose and too long at the moment
  2. The form elements must not be in a list
  3. Use a fieldset with a visually-hidden legend “date of birth” to wrap the 3 inputs (with their labels and error containers)
  4. The errors need programmatically linking to their inputs. You do this with a unique id on each error container and an aria-desciribedby on the inpuy pointing to the error ID
  5. Wrap the results in a div with aria-live on it
  6. Change the screen reader only results heading to be a heading element and it's text be "result" or similar. A heading should not be a partial sentence
  7. There is no semantic benefit having the results in a list. In fact it will make the results harder to read for some users. I recommend having the the results in spans in a paragraph

  Other feedback

  • it's marginally better for performance to link js in the head with the defer attribute instead of placing it at the end of the body
  • use a date library instead of trying to manually calculate dates. I am able to enter dates that do not exist in this
  • no errors are showing up for me. I can get the red borders but cannot see the errors
  • make sure the year field is always wide enough to have 4 gigits visible. The others can shrink a bit but not that one

  Marked as helpful

  1

  ---

  

  Amr mohamed•370

  @AmrAbdelgwaadPosted about 1 year ago

  @grace-snow Thank you so much I am really looking into your feedback I have a question about point number two why form element must not be in a list I see form elements in lists even p elements in a couple of MDN articles like this one

  can you tell me when you get the red borders without the errors?

  0