Submitted over 1 year ago
Advice generator app using Vite.js/React/Tailwindcss/Axios
@Pipos645
Design comparison
SolutionDesign
Solution retrospective
Open to suggestions !
Community feedback
- @0xabdulkhaliqPosted over 1 year ago
Hello there π. Congratulations on successfully completing the challenge! π
- I have other recommendations regarding your code that I believe will be of great interest to you.
HTML π·οΈ:
- This solution generates accessibility error reports due to
non-semantic
markup, which lack landmark for a webpage
- So fix it by replacing the element
<div id="root">
the with semantic element<main>
in yourindex.html
file to improve accessibility and organization of your page.
- What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like
<div>
or<span>
- They convey the structure of your page. For example, the
<main>
element should include all content directly related to the page's main idea, so there should only be one per page
I hope you find this helpful π Above all, the solution you submitted is great !
Happy coding!
0 - @0xabdulPosted over 1 year ago
Hello there ! π Congratulations you finished the Advice generated App...π
- Some suggestions for you improve your codeπ€
Html π·οΈ:
- for Accessibility reports using the non-semantic elements (or) semantic elements..
- semantic elements :
<aside> , <artical> , <main>, <header> ,<section><footer>, <form> ect..
- non- semantic elements :
<div> , <span> ect ...
- in fact using the
h1 , h2 ,h3 ,h4 , h5 , ,h6
tags should be use β Ordering.. - for easy way to clear the Accessibility reports using non semantic elements Ex :
<div class="container" role="main"> //Whole html code wraping the div tag named "container"..π </div>
- Any way using the img tag should be put the alt Attributeβ
and mention the alt discription Ex :
<img src="logo.jpg" alt="logo"></img>
- I Hope it's useful for you and wating for your next project β€οΈ
- Happy Coding π
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord