@vanzasetia
Posted
Hi, Markus! 👋
When completing challenges, avoid focusing on speed. Instead, focus on quality by testing with keyboards, zoom, and screen readers.
A couple of things I would like to suggest:
- Use CSS to uppercase the text. The uppercased word in the HTML might be spelled by the screen readers (spelled letter by letter).
- For the car icons, I recommend using
img
elements. The circle is already on the icon itself. So, there's no need to create it. - Replace all the
h3
withp
element. Those are not headings. - Always specify the
type
of thebutton
. In this case, set the type of them astype="button"
. It will prevent the button from behaving unexpectedly. Source: Checklist - The A11Y Project #use-the-button-element-for-buttons - Never limit the height of the
body
element. It will not allow the users to scroll the page if the page content needs more height. Try to look at the site on a mobile landscape view to see the issue. So, I recommend usingmin-height
instead.
For your information, it is possible to make the site responsive with no media queries. I recommend taking a look at my solution. I wrote the technique that I used on the README
.
I hope this helps. Happy coding!
Marked as helpful
@vanzasetia Thank you. This has been some of the best feedback I've gotten. I will take all your points into account moving forward. Thanks again.
@vanzasetia
Posted
@mhjarvis You are welcome!