Design comparison
Community feedback
- @grace-snowPosted 12 months ago
I'm afraid this is inaccessible at the moment. Youre misusing buttons and anchors in places, missing aria-expanded on buttons and misusing aria-live and aria-atomic. It's worth doing some reading on the difference between buttons and anchors so you can get that clear, and reading my post on accessible disclosures
You need to remove the article in this. This is definitely not an article.
Also remember that buttons (and links actually) must always have an accessible name. The text inside needs to make it clear what you're clicking so they can't be empty
I am concerned about the amount of px used in the css. One place you must change that is anywhere you've used px for font size. That's an immediate and critical accessibility problem.
Last thing - remember background images are worse for performance. Consider using the picture element of you need to load in different images at different screen sizes - more performant and results in clearer html rather than having empty divs lying around
1@Abrham007Posted 12 months agoWell first of all thanks a lot your right about literally every thing in my defence I was in a hurry and I obviously missed a lot. but I think I corrected everything but if you have a chance I would love it if you could take a look again and thanks again.
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