3 Column Preview Card Component

Community feedback

• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted almost 3 years ago

  Hay ! Lara Good Job on challenge

  These below mentioned tricks will help you remove any Accessibility Issues

  -> Add Main tag after body <main class="container"></main>

  -> Learn more on accessibility issues

  Keep up the good work!

  Marked as helpful

  0

  ---

  

  Lara Fernanda•400

  @Lara123-pgPosted almost 3 years ago

  @Crazimonk Thank you for the tips.

  1
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @Lara123-pg,

  I have some suggestions regarding your solution:

  • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images . In this challenge , all the images are decorative.

  • Each page should have <h1>, you can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech).

  
  .sr-only {
  	border: 0 !important;
  	clip: rect(1px, 1px, 1px, 1px) !important;
  	-webkit-clip-path: inset(50%) !important;
  		clip-path: inset(50%) !important; 
  	height: 1px !important;
  	margin: -1px !important;
  	overflow: hidden !important;
  	padding: 0 !important;
  	position: absolute !important;
  	width: 1px !important;
  	white-space: nowrap !important;            
  }
  
  

  • wrap the FM attribution in a <footer >

  • Clicking those "learn more" would trigger navigation(to learn more about the car ) not do an action so button elements would not be right . Swap the buttons for anchor tags.

  • never have font size in px ever. Use rem.

  • border-radius and overflow hidden to the main container(that wraps the three cards.

  • don’t capitalise text in html, use css text transform for that. This is to help some screen readers read out the words correctly rather than spelling them, thinking they are an acronym because of the capitals

  • It's rarely ever a good practice to set height on the element Let the content dictate how tall something needs to be.Use max-widthto the container that wraps the three cards.

  Hopefully this feedback helps .

  Marked as helpful

  0

  ---

  

  Lara Fernanda•400

  @Lara123-pgPosted almost 3 years ago

  @PhoenixDev22 Thank you for the tips.

  0