Frontend Development Workflow of Age Calculator App

Hello @tloxiu!

I can't keep up with your pace! Good job on this challenge. Some things I'd change:

• Don’t combine landmarks like main with the role attribute. It is redundant. Semantic elements each have an implicit role. A landmark is an abstract role for a section of content that allow assistive technologies to navigate and to find content quickly.
• Wrap your divs that contain inputs and labels with <fieldset> element, which is used to group several controls as well as labels within a form.
• Instead of hiding your label with .sr-only class, remove your .input-title paragraph and show label instead. That's what they are for in cases like this where you have visible label in design.
• Remove aria-labelledby in your inputs. This is what label is for. To represent a caption for an item in a user interface which in your case is input element. for attribute in label should always point to id of proper input.
• Remove aria-labelledby from .result-section section. First of all it doesn't point to anything since you don't have Results-heading id on any of this headings. Adding labels to sections that already have headings creates a load of annoying unnecessary noise. Most screen reader users rely on headings for navigation.
• h1 is reserved for title of the page only, you shouldn't have multiple h1's on page. I'd wrap these results with one <p> tag instead.
• You can additionally add h1 element for your app and hide it with .sr-only since your app doesn't have title.
• Move your styles from form to fieldset and remove max-width. Instead, add that max-width on your .wrapper element like width: 100%; max-width: 720px. Remember to hide default border on fieldset. Remember to remove min-width and max-width from .card since we set that to .wrapper container.
• Add some class name for input and label div wrappers and style them with max-width: 160px; width: 100%; so they don't grow more than expected in design.
• Instead of having section for divider and button, move that section within your form (outside of fieldset) and change tag to div. Replace <hr> element with div and add height: 2px; background: your-color.

Have fun!

no js? lol its an incomplete project blud