QR Code Component using Flexbox

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Greeting @luissitoe ,

  I have few suggestions regarding your solution:

  • To tackle the accessibility issues, 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;            
  }
  
  

  And use <h2> instead of <h3>.

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

  • Never use px for font size.

  You can generate another report for your solution.

  Overall , your solution is good. Hopefully this feedback helps.

  Marked as helpful

  0
• 

  Dev Rathore•2,600

  @GitHub-dev12345Posted over 2 years ago

  If you want to reduce your accessibility change this code: Give Alternative image name : like - <img src="./images/image-qr-code.png" class="card__img" alt="Code">

  and

  <div class="attribution"> to <footer> ( Used footer tag for footer design )

  Marked as helpful

  0
• 

  optimusprime202•1,200

  @optimusprime202Posted over 2 years ago

  Hey @luissitoe, Excellent work!

  Marked as helpful

  0

  ---

  

  Luis Sitoe•60

  @luissitoePosted over 2 years ago

  @optimusprime202 Thank you!👍

  1
• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted over 2 years ago

  Hay ! Luis Good Job on challenge

  These below mentioned tricks will help you remove any Accessibility Issues

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

  -> Always use the "alt attribute" and write what img is , and if the img is for decorative then leave it empty but always add it with img tag.

  -> Learn more on accessibility issues

  If this comment helps you then pls mark it as helpful!

  Have a good day and keep coding 👍!

  Marked as helpful

  0

  ---

  

  Luis Sitoe•60

  @luissitoePosted over 2 years ago

  @Crazimonk This was really helpful. Thank you👍!

  1
• 

  Samarth Mali•760

  @SamarthMaliPosted over 2 years ago

  To solve HTML use alt attribute in img tag overall Good job 🤗🤗

  Marked as helpful

  0

  ---

  

  Luis Sitoe•60

  @luissitoePosted over 2 years ago

  @SamarthMali Thank you!😊

  0