Newsletter Signup Page

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted almost 2 years ago

  This is a really nice solution, well done!

  A couple of small notes...

  1. If you remove list styling some assistive tech will remove the list semantics altogether. An easy way to restore them is to add role="list" to the ul/ol and role="listitem" to each li.
  2. To programmatically link the error message to the input, wrap it in an extra element that is always present in the DOM (not display none) and give it an ID. Then use aria-describedby on the input pointing to the ID. If you don't want to wrap it in an extra element, you can use the existing ID and remove the hidden/display none from the existing error element. But the text inside that error element must be empty by default so it doesn't get read out.
  3. Focus-visible styles need to be really obvious so that keyboard users know where they are on the page. In fact this autumn, the new WCAG requirements will add success criteria to make it clearer what is required. A pale dotted outline is fine for a focus style, but not for a focus**-visible** style. It doesn't need to look pretty, it needs to look bold/obvious/clear
  4. Consider adding an aria-live attribute to this whole component. That way any DOM changes will be announced to screenreaders immediately on change (e.g. the error messages and when the content changes between thank you / form)
  5. I recommend managing focus on this. Currently, if you submit the form or dismiss the confirmation, focus moves to the body instead of the new content. Instead, you could give the two headings a negative tabindex and move focus onto whichever of them is present on button click/form submit. This may negate the need for point 4 in this feedback (although you'd still need to ensure the error has aria-live so that gets read out)

  I hope all this makes sense and is helpful. This really is a very good solution.

  11

  Marked as helpful
• 

  Omprakash Rahangdale•900

  @OmprakashR

  Posted almost 2 years ago

  Hi, Congratulations!

  I have some suggestions for this task.

  • add bullet li images ul { list-style-image: url('sqpurple.gif'); } or li::before { background-image: url("image_URL"); } With this approach no need to add images again and again.

  • add an alt attribute in the image tag, and add the width and height for best accessibility

  I hope this is helpful for you!

  Thank You!!!

  16

  Marked as helpful
• 

  Ramazan Yamac•0

  @ramazanyamac

  Posted almost 2 years ago

  You can use grid for layout. Guide => https://css-tricks.com/snippets/css/complete-guide-grid/

  00
• 

  webdevcodi•0

  @desiredstate2021

  Posted almost 2 years ago

  Dope solution.

  00
• 

  

  Matt Studdert•13,611

  @mattstuddert

  Posted almost 2 years ago

  Nice to see you posting a new solution, @FluffyKas! 🥳 That's interesting you've been focusing more on back-end stuff lately. How have you found the switch to more full-stack development?

  02