@PhoenixDev22
Posted
Hello Akash,
Congratulation on completing this challenge. Your solution looks great. I have some suggestions regarding your solution if you don’t mind:
-
Use the
<main>landmark to wrap the card. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology. -
Page should contain
<h1>. In this challenge , as it’s supposed to be a part of a whole page, you may use<h1>withsr-onlyclass hidden visually and present for assistive tech users. And then use<h2>instead of<h1> -
The alternate text should not be hyphenated (human readable). It should indicate where the Qr code navigate the user : like
Qr code to frontend mentor. -
width: 332px;an explicit width is not a good way. consider usingmax-widthto the card inreminstead.
Overall, well done! Hopefully this feedback helps.
Marked as helpful
@Akash20x
Posted
@PhoenixDev22 Thanks for the feedback!
I applied your suggestions but according to the 2nd point if I add extra h1, it will take extra space, so how can I include it without creating extra space.
Also I didn't understand why we add h1 for assistive technologies in the page.
@PhoenixDev22
Posted
@Akash20x
Well , page should contain <h1>. And this is a part of a page, you may use h1 with sr-only class <h1 class="sr-only"> .....</h1> and use<h2>instead of <h1>.
.sr-only {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important; /* 2 */
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
white-space: nowrap !important; /* 3 */
}
You can find it here. Hopefully this makes it clear.
@Akash20x
Posted
@PhoenixDev22 Thank you so much for sharing this code!
