3 card column responsive component

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @diegotoba ,

  I have some suggestions regarding your solution:

  • There should be two landmark components as children of the body element - a main (which will be the component) and a footer (which will be the attribution).

  • Images must have alternate text.

  • For any decorative images, each img tag should have emptyalt=""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.

  • swap the buttons for anchor tags. Clicking those "learn more" buttons would trigger navigation not do an action so button elements would not be right. And for future, it is essential if you include a button in a form element without specifying it's just a regular button, it defaults to a submit button., though, so it's a good idea to make a habit of specifying the type.

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

  • width: 238px;an explicit width is not a good way . Remove the width from the card component and change it to max width instead. That will let it shrink a little when it needs to.

  • height: 375px; remove height, you almost never want to set height , let the content define the height .

  Overall , your solution is good . Hopefully this feedback helps

  Marked as helpful

  1