3-column Preview Card Component

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Css :

  • You should use em and rem units .Both em and rem are flexible, scalable units which are translated by the browser into pixel values, depending on the font size settings in your design. Using px will not allow the users to control the size of the page based on their needs
  • text is black .

  I really hope this feedback helps. Keep coding

  Marked as helpful

  0
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Greeting sophrone,

  Your solution looks nice. I have some suggestions ,

  HTML:

  • Document should have one main landmark. Wrap the body content in< main>tag read more about main landmark.

  • whenever you include interactive elements, make sure you include clearly visible focus-visible styles as well as hover ones.

  • swap Buttonsfor anchor tags. Clicking those "learn more" would trigger navigation .

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

  • you can add a <h1> with class="sr-only"(Hidden visually, but present for assistive tech). AND use <h2> instead of <h1>.

  .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;            
  }
  

  To read more .

  This fairly modern technique will hide or clip content that does not fit into a 1-pixel visible area. Like off-screen content, it will be visually hidden but still readable by modern screen readers.

  • No need to wrap the <img > <p > <h1><button > in <div> Tags.

    • You can replace the <div class="attribution">by a <footer > tag and it would be out the < main>.

  I really hope this feedback helps ,

  Marked as helpful

  0