Mobile/Desktop Newletter Sign Up Form w/ Next.js 13 & TailwindCSS

Community feedback

• 

  T

  Grace•31,230

  @grace-snowPosted over 1 year ago

  Hi, looks good! I hope these suggestions are helpful

  • use the picture element instead of two img elements for a performance boost
  • image alt needs to describe what the image looks like, not describe the topic/purpose of the overall content
  • list semantics are lost for some screen readers if you remove list styles. An easy way to restore them is by adding a role of "list" to the ul and "listitem" to each li
  • focus will be lost for keyboard and screenreader users as each panel of this changes. Consider using negative tab index on the headings and moving focus their on submit/dismiss
  • see if you can work out how to programmatically link errors to the input with aria describedby (note the linked element must be in the DOM at all times when the input is present)
  • because the font size is smaller than 1rem it causes horrible zoom on ios devices. Consider increasing the input font size, even if this would differ slightly from the design

  Marked as helpful

  1