- labels missing for each input field
- use semantic html instead of div for (main, section)
- alt attribute missing on the iamge
- aria attribute missing on button Done - aria-label="Submit contact form"
- rename button done to Ask - ambigous naming
- have more specific placeholders
- placeholder text is hard to read - poor text contrast
- Font-sizes are defined in pixels rather than rem
- headings dont start from h1
- updated type="email" for the email input field
- changed button type from "button" to "submit" to enable form validation
What accessibility enhancements were the most challenging to implement and why ? I struggled with enabling form validation on the form without looking for help. But I just added required attribute and changed button type from "button" to "submit" which solved the problem. I could have added styling to the validation message to display right below the input field. I found this activity challenging to do it myself.
How do ARIA attributes improve the experience for users relying on assistive technologies? By giving the ability to use assistive technologies like screen readers for people who are blind.
What tools did you use to check color contrast, and how did they help? I used WebAIM Contrast Checker to calcuate the score for text to make sure it met atleast AA or AAA criteria.