Ping coming soon page with HTML, CSS

Community feedback

• 

  Yazdun•1,310

  @YazdunPosted about 3 years ago

  Thanks for the shoutout ! Glad I could help. This looks great, Keep up the good work 👏

  Marked as helpful

  1
• 

  T

  Alex•2,010

  @AlexKMarshallPosted about 3 years ago

  Visually this looks good, and I like the transitions on the button and the input border, nice touch.

  There are a few issues with the markup though.

  Your input has a label element, but it's empty. There needs to be some kind of text in there, something like 'Email address'.

  Your validation messages are always in the html. This means that someone using a screen-reader will always hear the message 'Please Provide a valid email address' and 'Form submission success' regardless of whether they have entered anything in the input, or submitted the form.

  You'll need to use javascript to insert these elements at the right point, so they only appear in the document when they are supposed to. And if the input is invalid, you should set the aria-invalid attribute on the input element too.

  Here's an example of how to do that https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute

  The other issues with the markup are highlighted in the submission report, mainly links without any text in them.

  Marked as helpful

  1

  ---

  

  Ctrl+FJ•810

  @FlorianJourdePosted about 3 years ago

  @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 !

  0

  

  T

  Alex•2,010

  @AlexKMarshallPosted about 3 years ago

  @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.

  Marked as helpful

  1

  

  Ctrl+FJ•810

  @FlorianJourdePosted about 3 years ago

  @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.

  0
• 

  Ctrl+FJ•810

  @FlorianJourdePosted about 3 years ago

  I can't generate any new report, do you know if it's normal ?

  0