3-column-preview-card-component

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello @RuanEsterhuyse ,

  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).

  • For any decorative images, each img tag should have empty alt=""(as you did )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).

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

  • I recommend not to use px for font-size

  • You should use em and rem units .Both em and rem are flexible, scalable units, Using px won't allow the user to control the font size based on their needs.

  Overall , your solution is good . Hopefully this feedback helps

  0