Design comparison
Solution retrospective
I am abit confused with the accessibility issues I have regarding "landmarks". Im not entirely sure what they are, and even after some googling I have no idea how to solve this. Granted I have made use of divs instead of the semantic names like article (I never really got around to grasping the semantic names and have been using divs everywhere), etc, so im inclined to think the issue lies there, but im not sure what to do to solve this. Any help regarding the solution as well as the importance of this would mean a lot!
Otherwise, this is my first frontend mentor challenge. This took longer than I was anticipating. Im sure there are simpler ways to achieve what I did and probably with less code and more elegence, however I am surprised at how much of a learning experience this has been and look forward to more challenges.
I realised that the order in which you tackle the challenge can go a long way in maintaining your sanity - too much jumping back and forth made it confusing for me to fix some css issues, so in the end I started again and tried do things in a logical order as opposed to randomly targeting elements on the design.
Looking forward to some feedback from the community as well as seeing how everyone else has come up with their solutions!
Community feedback
- @soransh-singhPosted about 3 years ago
It looks great ... You have done great job ... Kudos to you for completing your first challenge
1 - @H0bG0blin9gPosted about 3 years ago
I had a couple landmark issues, one being <html lang='en'> and then one against one of my divs (but not against it's other sibling div??), but when I added the 'role="main"' against one of the card divs, it cleared all the landmark accessibility issues except that which is against the div with the class "attribution" which is there when you download the file.
Not sure why that is the case - both for clearing the landmark issues against the other divs and for not clearing the landmark issue agains the last div.What would I add to this to clear the accessibility issue on the last div? Just give it any role name?
0
Please log in to post a comment
Log in with GitHub
Join 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