To improve the accessibility of this
- Change the h1 text to “Age Calculator”. It is unnecessarily verbose and too long at the moment
- The form elements must not be in a list
- Use a fieldset with a visually-hidden legend “date of birth” to wrap the 3 inputs (with their labels and error containers)
- 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
- Wrap the results in a div with aria-live on it
- 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
- 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
@AmrAbdelgwaad
Posted
@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
