Intro Components with NEXTJS

Community feedback

• 

  T

  Grace•31,790

  @grace-snowPosted about 1 month ago

  I'm afraid there are some small but severe accessibility problems in this solution that need fixing.

  1. Every input must be labelled.
  2. You must not use the auto focus attribute. Let people have full control over where focus goes. Currently it's like screen reader and keyboard users will get hijacked.
  3. All of these inputs must have autocomplete attributes set to appropriate values.
  4. The submit button should be aria-desciribedby the unique ID of the terms and conditions paragraph.
  5. The errors need to be announced by screen readers when they appear and should be programmatically linked to their inputs. As you're already conditionally rendering them, the easiest way to address all this is to wrap each error in an extra element like a div that's got a unique ID and an aria-live attribute. Then add aria-desciribedby to the input referencing the id of the error wrapper. This will mean that the errors are announced when they first appear, and on focus of the input (read out after the input label).
  6. You need to remove the max-width 100vw and overflow-x hidden from the html and body. Firstly, these are unnecessary. The html doesn't need styling and should be left alone. The body is already full width by default. But adding the max width can make it impossible for people to read content if they have a large text size or use zoom and view on a smaller screen. People need to be allowed to scroll sideways if overflow ever happens.
  7. Font size needs to be in rem not px. For more info see https://fedmentor.dev/posts/font-size-px/

  And general observation/recommendation:

  • use the fonts and sizes as defined in the style guide (except with font size converted to rem before use)
  • try and get this much closer to the design in terms of these things. Yours is currently much smaller for example.
  • don't forget to adjust line height. Usually that will be unitless like 1. Etc.
  • you seem to be using percentages for various properties and setting widths unnecessarily in lots of places. To limit width, use max-width in rem. Remember padding — that's usually in px on the sides as that's not a property you'd want to scale with the users device width or font size. Using percentages will often end up with confusing or unpredictable results, especially for properties like margin. There is a post about padding vs margin and another about media queries and responsiveness on my site shared above and those articles may help you overall.
  • The other recommendation is to watch Andy Bell's talk "Be the browser's mentor not it's micromanager" as this may help you with overall layout approach.

  0