Submitted 3 months ago

responsive a11y js grid

Sam Hooker•680

@35degrees

Preview site View code

This is a solution for...Body Mass Index calculator

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

My fluency is layout and JS calculations is going up rapidly.

What challenges did you encounter, and how did you overcome them?

I tried to make all of the elements keyboard accessible but I am not sure how to make the radio button grouped. I added an 'aria-label' but I'm not sure that's enough.

Community feedback

Kamran Kiani•1,280
@kaamiikPosted about 2 months ago
Hello, Good job on your project! I have a few suggestions I’d like to share with you:

For groups of radio buttons, consider using the fieldset and legend elements. This is the most accessible approach in this and many other situations.

Place your logo inside a header section and use an appropriate aria-label for it.

Your code is not responsive when viewed on different screen sizes. Try to rebuild your HTML and CSS to improve responsiveness.

Use the img tag for your images and ensure you add appropriate alt text to them.

Additionally, there are some other issues with your CSS. For example, there is no proper CSS reset, and sizes are often defined using px instead of rem. I strongly suggest seeking more feedback. You can ask questions in the Discord community of the FED mentor.

There is some other problems in your css like there is no good css reset and also the sizes are more using px instead of rem. I strongly suggest take more feedbacks. You can ask questions in Discord community of the FED mentor.
0

Please log in to post a comment

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