QR Code component using HTML and SASS

Community feedback

• 

  Boluwatife Bonaventure•550

  @BoyutifePosted over 1 year ago

  Hi roger-hope​ 👋. Congratulations on successfully completing the challenge! 🎉

  HTML:🔖🔖

  • Great job on using the h3 tag in your content! I wanted to offer a suggestion that could help improve the accessibility of your page. Currently, it looks like you have h3 tag in your content, but it might be more helpful to users if you use an h1 tag instead. This is because using an h1 tag as the main heading on your page can improve accessibility and make it easier for users to navigate your content.

  • In general, it's a good idea to use only one h1 tag on each page, followed by h2 and h3 tags to organize your content. This will not only help with accessibility, but also make it easier for search engines to understand the structure of your page.

  • So, my suggestion is to consider using an h1 tag as your main heading, followed by h2 and h3 tags as needed to organize your content. This will help improve the accessibility and usability of your page for all users.

  • Also, instead of using a div tag to wrap your content, you might consider using a main tag, which is more semantically appropriate for indicating the primary content of your webpage

   <main class="card">
        <img src="images/image-qr-code.png" alt="qr-code-image">
        <h1>Improve your front-end skills by building projects</h1>
         <p> Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
      </main>
  

  • In conclusion, to make your design more centralized and compact, you might consider setting a max-height and max-width property for your main container. This can help ensure that your content is displayed in a consistent and visually appealing manner, especially on smaller screens.

  I hope these suggestions are helpful and will lead to an even better final product. Let me know if you have any further questions or need additional assistance!

  HAPPY CODING

  0

  ---

  

  roger-hope•10

  @roger-hopePosted over 1 year ago

  Hi @Boyutife ,

  Thank you for the very detailed and valuable feedback. This is much appreciated. :-) Your comment regarding accessibility sparked an idea for the next version of this component. It is true that accessibility should be standard in any project, which is why I will adapt it to include:

  • Ensure Enough Colour Contrast | Even though this is a frontend project based off an existing design, which has all design clearly defined; it is still the responsibility of the frontend developer to ensure the final product passes the relevant frontend rules of usability, accessibility, and functionality. If a design needs to be improved, to satisfy this, then it would be my responsibility as the frontend developer to discuss this with the design team and improve where needed. In this case, colour contrast would need to be ensured.

  • Include Textual Alternatives for Images | The current design loads a static image for the QR-code. This would require textual descriptions. To take it further it would be good to include responsive alternatives for the image, using new file formats.

  • Organise Content Visually With Relevant Headings and Spacing | You commented that I should use an H1 header instead. I would agree with you if this component was part of a full-page website, but as it is this is a stand-alone component meant to be reused in various different contexts. The idea of this component is that it forms part of a component library. The component can then simply be copied and placed inside a webpage such as a blog post, a landing page, etc. Those pages would already have a structure starting with the H1 tag. It is therefore advisable to build components such as this QR-component, to not have a defined header tags, but rather styles such as "font-size: 14px; font-weight: bold;". I, as the frontend developer, would then be able to use this component in any webpage without breaking the semantic flow of that page.

  • Make Interactive Elements Stand Out | This component would benefit from having an interaction that on hover, the drop-shadow appears and the box lifts off the page visually. This is activated by using the keyboard Tab, or mouse cursor, or voice operated systems. The benefit here for accessibility is that it would be easy to identify, and a user would be able to understand at a glance which elements are in focus.

  Regarding the main-tag: I agree that in a modern webpage it is good practice to include that tag, but we are dealing with a stand-alone reusable component, which would break the semantic rule when used within a webpage alongside other elements.

  Thank you again for your valuable input. I am excited now, to start on the next version of this component. I hope you will provide such valuable input into that version too.

  All the best. Roger

  0