Semantic HTML5 markup CSS custom properties Flexbox Mobile-first workf

Community feedback

• 

  T

  Grace•31,230

  @grace-snowPosted 8 months ago

  This looks good when I preview except that the component is hitting my mobile screen edges on all sides.

  Looking at code though I see some problems, some serious.

  1. There is no main landmark but every page should have one.
  2. The article has an aria-labelledby with no referenced element, meaning the label is broken.
  3. Don't add unnecessary roles. Anchors already have a link role.
  4. The list of links really should be in a list. That has an added benefit to assistive tech users as they can hear how many list items there are.
  5. Css imports are bad for site performance. It is much better to link fonts in the html head and to include the actual reset code at the start of the styles.
  6. I strongly recommend against changing the root font size. I've written a whole post about why the 62.5% hack is a bad thing: https://fedmentor.dev/posts/rem-html-font-size-hack/
  7. The card must not have a min width or width. This is causing it to overflow my phone screen and breaks a WCAG accessibility requirement for there to be no unnecessary horizontal scroll at 320px wide.
  8. The card should only have a max width in rem. This will ensure it can shrink narrower when necessary and it will scale correctly for others who change their text size.
  9. The links don't need a max width. They should be width 100% (or display block which would also be full width).
  10. It looks like the body is missing a min-height which means this component won't be centered on some screens.

  0