The accessibility needs improvement in this:
- a link wrapping the logo should not open in a new tab and must have an accessible name so you know where the link is going. Currently the name is "image, logo"
- the alt text on the logo must say the text of the logo
- the images should be served with the picture element not two Img tags (performance issue rather than accessibility)
- inputs must have a label
- the rest of the field is not exposed in the code as you're importing it so I don't know if it's OK or not. The error message container must have aria live and be programmatically linked to the input with aria-desciribedby. It wouldn't normally have a name attribute but I don't know if that's what that prop is doing (I'm away from my computer so can't inspect in browser)
- if sections don't have a heading (usually h2) they should be a div
- do not use br to force line breaks. That should be done with max width (often in ch units on text elements). The br element will be announced as "break" to some screenreader users so is best avoided when possible
Marked as helpful
0
Saktiā¢ 190
@saktiajadeh
Posted
Hi @grace-snow, thanks a bunch for your awesome advice! I really appreciate your input on making things better. Your suggestions were spot on, and I wanted to let you know that I've already started making some updates. Your help means a lot, and I'm super grateful for your support and tips. Cheers!
0
