Product Landing Page - Flower Shop

Code Feedback
1

Your feedback is appreciated.
https://gloria-webdev.github.io/flower-shop/

2 Likes
2

Super good looking! Can’t give any usefull feedback since you look like you know what you are doing, however I think the headers and text should center to the screen on mobile, since you are using a column on small devices.

Great job!

1 Like
3

This looks fantastic - really well done.

I only noticed one thing that could be improved: In my browser the hamburger menu has a grey background. This is from the user agent stylesheet, so it probably doesn’t look like that for you, but you might want to override that just in case.

Unbenannt

1 Like
4

Thank you for your feedback. I really appreciate it.

5

You are right about that grey background. Thank you for your feedback.

7

Overall, this is very nicely done. Responsiveness is good, even at larger text sizes. The only thing I noticed is that you might want to put a little more spacing between the pricing plans. As I narrow the browser they get real close together and it makes it look like they have combined (especially at larger text sizes).

The main issues I found have to do with keyboard accessibility. As I’m tabbing my way through the page, after I get to the “shop the collection” link, the next Tab takes me to the first image below but there is no focus indicator to tell me that that is where my keyboard focus is. When I open up one of those images I get the slideshow but again I can’t see my keyboard focus. I seem to be able to Tab onto the prev/next buttons but I can’t exit out (I can’t get to the ‘X’ because it is not a button). Also, I should be able to use ‘Esc’ to close it. Additionally, multiple prev/next buttons show up as I go through the images.

In general, I think the keyboard focus indicators could be stronger. I can barely see them on the “Shop now” or “Find out more” buttons.

For the hamburger menu, I am still able to Tab through the menu links even though I have not expanded the menu. If the hamburger icon is showing and it has not been clicked to expand the menu then the nav should be display:none. When I expand the menu I have to shift-Tab and go backwards to get to the links in the menu. I think most people assume you should be able to Tab forward into the menu. Also, the button needs to have some text associated with it for screen readers. You can either put text inside the button tag and visually hide it or you can use aria-label on the button. And since it is a toggle button it should probably have the aria-expanded and aria-controls attributes on it as well.

A few minor nit-picks. Don’t skip heading levels (you go from an h2 to an h4 under ‘Our Services’). And the LadybugFlorist image in the upper left should probably not be a link. It is merely linking to itself and thus is unnecessary. Also, it doesn’t have any text associated with it so screen readers aren’t going to know how to announce it.

1 Like
8

Thank you for your feedback, it’s very helpful. In general Keyboard Accessibility is an issue for me. I should probably put some focus on it.
I don’t understand this part - “Additionally, multiple prev/next buttons show up as I go through the images.” If you have time, take a screenshot and post it.

9

I’ve got: GitHub Pages is temporarily down for maintenance.

10

multiple_buttons