Ping coming soon page with HTML, CSS

@AlexKMarshall Thanks a lot for your feedback !

I tried to update this challenge taking consideration your suggestions, before beggining last newbie challenge ! Yeepee !

That's crazy, before coming into FEM, I almost never heard about aria properties... Have you got a nice documentation to test/learn them efficiently ? Can I do this with Chrome console ?

Then, here what I want to notice :

• Can't I leave labels empty ? Maybe with an aria property ? Or should I defin a label and hide it ? It seems to be depreciated to put input with no label, just don't know what to do ;
• I don't need text on my a elements. Could I just put aria-label, with an icon inside my link ?
• I emptied my validation messages, should I add aria-hidden property on them, now ?
• And after all, I usually generate new report in FEM after correcting my HTML/accessibility issues. The button is not shown anymore. Do you know if, like to generate new screenshots, I need to be a Pro Member ?

Thanks again to all of you, FEM masters, to share your knowledge ! So happy to learn good practices !

@FlorianJourde

Leaving a label empty is worse than not having one. If there's no label, then many screen readers will use the placeholder value (if present) to name the field. If we have an empty label, then that gets removed. In any case we shouldn't rely on placeholders. So we must add a label with some content. If we want to hide that label from the display then we can use a visuallyHidden class as described here https://gomakethings.com/revisting-aria-label-versus-a-visually-hidden-class/

You can explore what the browser will name elements by selecting an element in the devtools and looking at the accessibility tab there.

However, we should also consider whether we really do want to hide the label. Usually it is better that the label is visible too. I appreciate that in this design the label is hidden. On a real job this is something that as developers we should discuss with the designer to make sure they are taking accessibility into account in their designs.

You can use aria-label but it is inconsistently read by screen readers. Also, text content on the page will be translated, but some services will not translate text in an aria-label, so it's safest to use real content and a visuallyHidden class.

Same thing for the anchor tags. You can include some text inside them wrapped in a visually hidden span.

For the form validation and confirmation messages, I would personally create the whole element in javascript and append that element to the DOM at the correct time. But I don't think it matters much either way, so long as your validation containers are empty, they won't be read-out so should be fine.

As for learning more about accessibility and aria properties, it's a very big topic, and it's worth being careful with. Bad aria is usually worse than no aria at all. I would do some reading on it and gradually try and incorporate some of the principals. But don't worry too much at first. Semantic HTML will get you 90% of the way there without having to touch aria. Aria only really starts to get involved if you need to create more complex interactive components.

@AlexKMarshall Thank you so much for your time, investment, and the documentation you share to me. It's very helpful !

I think there's no other solution than practice and time, but FEM make me think you can go a way faster ! Because of you all, guys.