QR code component solution

@grace-snow Thanks for all the advice, I've been reading your blog and it has inspired some of the decisions I've made. I take on board all the above advices, they are all very much valid.

Do you also use rem units with padding, row gaps and margins or only for font sizes and min-width?

@AbdulHaseebHussainRI it depends. I use rem anywhere I would want the property to scale with the user’s default text size. (And I think you meant max-width)

@0xabdulkhalid I disagree. This is not a full web page. It is a single component challenge. This component would never act as the page title for a Web page, so h1 would be the wrong heading level. H2 is the correct heading level in this card.

@grace-snow, But according to Web Accessibility Guidelines every page must want to have an h1 heading regardless of their size whether they are fully fledged website or small components it doesn't matter.

For example on this Article about Accessible heading structure from A11y Project also states that h1 as a must.

I can't found any researched articles to validate your statement, I'm eager to know if it's acceptable. If there's any research papers/articles available for validation its highly appreciated!

@0xabdulkhalid Thanks for taking the time to provide feedback.

Having looked at your solution, I like your naming convention for classes, seems tidier and more meaningful e.g. .card__description, is it recommended or just a convention you follow?

@0xabdulkhalid this is not a web page. It is a component demo. When we build individual components like this card it needs to be able to be dropped into a web page.

If you want to include a h1 in this, it would be above the component eg a visually-hidden h1 that says "QR code component demo" or similar.

(ps i am a senior accessibility consultant and frontend engineer so can verify this)

@0xabdulkhalid @grace-snow

The accessibility report does give me the following warning Page should contain a level-one heading and links to. The link refers to pages rather than components so this might be a grey area.

@AbdulHaseebHussainRI it’s not! That is a warning from axe-core about full web pages. The api cannot make a distinction between a component example and a web page. Any automated scan will generate these warnings which is why accessibility is a specialism that requires human assessment. The component would actually cause a WCAG failure when used if it had a h1 because it would break meaningful heading order in the page content. There is no grey area here.

@grace-snow According to your suggestion all newbie challenges provided by FEM needs to have a separate sr-only headings right?

I never thought about this because this knowledge is something i want to gain in practical work experience, anyway thank you for pointing this out!

PS: I have viewed your FED MENTOR blog, it's awesome to see how much you're sharing your knowledge for new learners. It's highly appreciated please keep contributing to our community!

One thing that i would like to inform you is a minor typo on your website's mentoring page, That can be founded on "Frontend Mentor Profile" button.

@AbdulHaseebHussainRI, The naming conventions i used on my solution is BEM. It helps us to create modular, reusable, and maintainable code. We can easily identify which styles apply to which elements, making it easier to modify and update your CSS.

BEM naming conventions provide a clear structure and naming hierarchy for your CSS classes. This makes it easier to read and understand your code, even for other developers who are not familiar with your project. So that it's recommended when we're using vanilla css on our projects.

BEM allows for more granular control over styling. We can target specific elements within a block and modify their styles without affecting other elements or blocks on the page.

BEM helps to avoid naming collisions and specificity issues. By using a consistent naming convention, you can avoid accidentally overwriting styles or causing specificity issues that make it difficult to style your elements.

BEM makes it easier to collaborate with other developers on larger projects. By using a shared naming convention and structure, you can ensure that everyone on the team is using a consistent approach to styling, which reduces confusion and errors.

This article on CSS-Tricks provides a beginner-friendly introduction to BEM and explains the key concepts and benefits of using BEM.

@6xg0d I disagree I'm afraid. The section element is fine to use but it adds no benefit to the component semantics at all. A section is exactly like a div unless you are going to give it an aria-label or aria-labelledby. And that is unnecessary extra affordance for a small card component like this.

Additionally, the figure element should not be used to always wrap images. The only time you use the figure element is when you want/need to include a figcaption. So wrapping this image in a figure only adds unnecessary bloat to the html.

I see no extraneous css selectors in this, only a css reset which should always be included.

@6xg0d Thanks for taking the time to provide feedback.

I have a css reset which might be what you're referring, it's a new concept for me but seems to be recommended, it's something I read up on @grace-snow blog and could alleviate unexpected issues that crop up with css at times especially for a beginner such as myself.