Product preview card component

Community feedback

• 

  T

  Grace•31,230

  @grace-snowPosted about 2 years ago

  Hi

  This needs a lot more work I'm afraid. I can see you've tagged it with #accessibility but it is not at all accessible at the moment.

  You really need to focus learning on html, making sure you are using appropriate elements that are semantically correct and functional for their purpose.

  1. Use landmark elements - this should at least have a main
  2. Use headings and paragraphs - this should only have 1 heading (the largest text) and other bits should be in paragraphs. No text should ever be in divs or spans alone, they are meaningless elements only to be used for block or inline layout respectively
  3. Use a button. Interactive elements must always be used when expecting interactive behaviour. This is unusable to loads of people because its a div atm
  4. The old price that's crossed out should be done by wrapping with the del element. This kind of strikethrough text is not announced in any way to screenreaders, so you should also have some sr-only text in there to say that is the old price
  5. The main product image is meaningful content so should not be a background image. It needs to be present in the html and have an alt description

  With the CSS:

  • The component should not have a width or height (especially important not to have height). Instead, it should only have a max-width. This will make it responsive to different screens without suffering overflow issues if users change text size.
  • Either the component needs a little margin, or the body a little padding, to prevent the component hitting screen edges on some screens
  • Once you are using the correct html, it's advisable to add a modern css reset to the very start of your stylesheet to baseline styles across different browsers
  • Font size must never be in px. Always convert to rem instead of using a px value
  • The html, body { height: 100%; } is known to cause lots of layout bugs because of the way browsers calculate heights. Instead use min-height: 100vh;` only on the body. It is rare you'll ever need to change styles on the html element

  0