Design comparison
SolutionDesign
Community feedback
- @grace-snowPosted 23 days ago
Hi, I notice this needs some work to make it accessible. There are some essential aspects of form structure missing.
- the meaningful text above the inputs must be labels (not headings) that are programmatically linked to their inputs. The values are not the labels.
- the tip fields need to be grouped in a fieldset and labelled with a legend element.
- this doesn't work with a keyboard because the radios are display none. You need to accessibly hide form inputs (eg sr-only). Always test any project you do with a keyboard as a minimum check.
- when the calculation runs make sure screen readers are notified that the results have updated. You may like to do this with an sr-only alert with a denounce and timeout so "results updated" gets announced then removed. Or you may like to wrap some results content in an aria-live or alert role so it's announced when it changes.
Marked as helpful0@ZainabeyyPosted 22 days agoThank you, @grace-snow. Is there any other problem besides accessibility issues?
0@grace-snowPosted 20 days ago@Zainabeyy the other thing I notice straight away on mobile is it looks strange the tips are all narrow and in one column when there is room for 2 columns.
Marked as helpful0 - @kaoutar-ouadihPosted 7 months ago
Amazing work! just a little remark maybe you need to add a
cursor : pointer
and a hover effect to your tip's buttons.But aside from that Great job.
Marked as helpful0@ZainabeyyPosted 7 months ago@kaoutar-ouadih Thank You...I will definitely do this.
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