QR code component using HTML & CSS

Community feedback

• 

  Ibrahim Mohammed•640

  @MohammedOnGitPosted 20 days ago

  Hello SriMidhinesh!!!

  Your HTML structure looks great! However here are few recommendations that you may need to add to enhance accessibility, SEO, and compliance with WCAG:

  • Accessibility

  Meaningful alt text: Instead of just "QR Code," provide a more descriptive alt text to clarify what the QR code does:

  <img src="images/image-qr-code.png" alt="QR code linking to Frontend Mentor for coding skill improvement" class="img-class">
  

  For your next project, consider using the SVG file over PNG because SVG files are more scalable, small in file size, and preferred for SEO due to their indexing ability by search engines.

  • again due to a VoiceOver bug, VoiceOver does not correctly announce SVG images as images. Include role="img" to all <img> elements with SVG source files to ensure assistive technologies correctly announce the SVG as image content. e.g

  <img src="images/image-qr-code.png" alt="QR code linking to Frontend Mentor for coding skill improvement"  role="img" class="img-class">
  

  Semantic HTML: Use semantic tags like <main>, <section>, or <article> to help screen readers understand the structure:

  <main class="wd-main">
    <section class="wd-img">
      <!-- QR code image here -->
    </section>
    <section class="wd-content">
      <!-- Content here -->
    </section>
  </main>
  

  • . SEO Optimization

  Meta Description: Adding a meta description can improve search visibility and help users understand the page content:

  <meta name="description" content="Scan the QR code to access Frontend Mentor and enhance your front-end coding skills with project-based learning.">
  

  4. Code Cleanup Consistent Attribute Quotes: Use either single or double quotes consistently throughout. Remove Extra Spaces: Ensure there are no unnecessary spaces around = in your tags for consistency:

  <link rel="stylesheet" href="index.css">
  

  These adjustments will enhance the user experience, improve SEO, and keep the code aligned with accessibility best practices. You did great! Keep it up

  0