Design comparison
Community feedback
- @rupali317Posted 4 months ago
Hello @gauravgorane
Great job on this challenge.
I have the following comments on ways to improve the accessibility for your project
-
I notice that you are using px for font-size, padding, margin, border-radius and in other places. Rule of thumb: Use rem instead of px. Rem scales whereas px is fixed. I modified the font settings to very large in my Chrome browser. Since you specified px, the font did not become bigger. Users who rely on bigger font size, will have a problem with it if the font does not scale when they modify their browser's font setting.
-
You can use different text color especially for "Available for walk", user left's texts, and also the "Stay in touch with our dog walkers....". The color contrast is failing according to the accessibility standards.
-
If you run your solution via a screen reader, the user's expectation would be to come across the main content i.e. Simple booking along with the long paragraph first and then the content of the phone. But since your HTML structure has the phone first and then the simple booking, your screen reader will follow the same order. To solve this, in my HTML, I would first have the simple booking and the paragraph first, followed by the phone section. Then in the flex property, I would have
flex-direction: column-reverse;
for mobile andflex-direction: row-reverse;
for desktop version
Let me know if these suggestions help improve your solution.
Marked as helpful0@gauravgoranePosted 4 months ago@rupali317 I appreciate your time in providing this feedback. I make sure to review each of these parameters when working on a project.
1 -
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