Responsive landing page

Community feedback

• 

  Jacob•140

  @theschmockerPosted over 2 years ago

  Always happy to see folks focusing on accessibility 🙂

  Some notes for accessibility improvements:

  • A page should have a single h1 element. In this case, I think "Order Summary" (which is currently an h2), would be good as an h1.
  • Heading levels should not be skipped. Right now, the next heading level after h2 is h5. With the change to h1 above, I recommend changing the h5 to an h2. Some helpful notes here/Heading_Elements#accessibility_concerns
  • Only images need alt attributes; they should be removed from the div elements
  • Images only need alt text when they're important for understanding the content. In this case, I think all of the images are decorative. Decorative images do still need an alt attribute, but it can be left empty, ie. alt="". This signals to assistive technology that the image can be ignored. More information here

  In case you haven't heard about them: check out axe DevTools and WAVE. They're not perfect--can't catch everything and sometimes throw false positives (WAVE is worse about this, in my experience)--but they're really helpful for catching accessibility errors we all miss sometimes

  Style-wise, your solution looks great! If I'm being picky, here are a few things to maybe consider to get even closer to the design:

  • Set the width of the hero image to 100%; should help center it
  • Tinker with box shadow on the button and see what you can come up with... box-shadows can be tough to eyeball
  • Tweak padding, line-height, and font-size on various elements. These can be tough to eyeball without a Figma/Sketch/XD mockup too

  Good work, hope this helps!

  Marked as helpful

  1