Chat app css illustration

Hello @gauravgorane

Great job on this challenge.

I have the following comments on ways to improve the accessibility for your project

1. 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.

2. 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.

3. 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 and flex-direction: row-reverse; for desktop version

Let me know if these suggestions help improve your solution.