Hi, I hope this helps
- Your theme toggle is inaccessible at the moment. If you are going.to use a button it must be a toggle button with aria-pressed and must have an accessible name so it's clear what the button does. At the moment this is just a "button" with no content in it at all and no feedback on its state
- Use a form!
- You're making the errors harder to make accessible by pre-filling them like this. Ideally, error messages and inputs should be programmatically linked but you cannot do that as easily when the errors are filled in by default. All you can do to make them slightly better is add role=alert so at least they get read out by screenreaders, but because they cannot be linked to the inputs it would be unclear which input has the error. It would be much much better to have errors empty by default, linked to their inputs with aria-desciribedby, and use javascript to fill in the words when relevant.
- I recommend using a fieldset with legend on this challenge. Optional, but it would make it more accessible. Some errors are valid to the date as a whole but you have no way of linking that to all fields without the fieldset
- The button must have an accessible name! Again, you have left this with no content at all
- The results should have a visually hidden heading and their wrapper have an aria-live attribute
- Normalise is a really really really old css reset! You don't need to use such a long one any more. Look up Andy Bells modern css reset
- It's bad for performance to be loading multiple css files like this. If you are going to split the media queries into their own file, at least add the width query in the html head when you load the script so mobiles don't bother fetching it. You definitely should not be mixing max width media queries in that file! There is no need to use max-width media queries at all in this if you build responsively
- This
font-size: 62.5%;
is a really terrible thing to do and I recommend you break the habit as soon as possible! Here's a post I wrote about this - There is never a need to add min width to the body
Marked as helpful
1
Josh• 1,070
@josh76543210
Posted
Hi @grace-snow,
Thank you for this helpful feedback!
0