The first two things I always test when evaluating a page:
- Responsiveness to both changes in view port width AND changes to text size.
- Keyboard only accessibility
For 1, overall this site handles both changes very nicely. Bravo on using em
units for break points. I usually crank the text size up to 200% and narrow the browser in all the way to get an extreme example and for the most part the hoodies section handles it well. There are a few minor adjustments that could be made to alleviate the horizontal scroll bar if you are striving for perfection. I also noticed the following on the hoodies page:
- start with the font size at 100%
- increase font size to 200%
- most of the inputs are cut-off at the bottom of the page
- reload the page at 200% font increase
- inputs are all back
- decrease font size back to 100%
- lots of white space at the bottom of the page
Granted, maybe not a lot of people are going to be manually changing the text size like this but if you are a perfectionist like me you might want to look into methods for dynamically resizing iframe
s (or maybe just don’t use an iframe
if feasible).
Also, on the home page, the review cards near the bottom don’t shift to a single column as the page narrows and instead produce a horizontal scroll bar. If this were a table I think that would be acceptable, but probably not for this situation.
For 2, you are using auto
for the focus outline which relies on the browser to provide the outline style. It’s not terrible, but in my browser (FF on Linux) I still feel like it could be more prominent, especially on the form inputs at the bottom of the hoodies page. I know focus outlines are the bane of our existence, but I would suggest you customize it so it stands out a little more. And if you don’t like the boxy outline look you could always use box-shadow instead.
Also, we need to talk about your hamburger icon First, you’ve got this for the focus state:
.gMVCsa:focus {
outline: currentcolor none medium;
}
Naughty Naughty. The hamburger icon definitely needs a focus indicator.
After the hamburger is clicked and the menu pops open, I can Tab through all of the menu items, but once I’m at the last menu item and I hit Tab again, the focus moves on to the next focusable element on the page, which happens to be covered up by the menu and thus I can’t see what I’m focusing on. My suggestion would be to hide the menu when focus leaves it. I suppose you could also trap the focus in the menu but then I think you’d need to make it a full on modal dialog (which would be a lot more work).
Also, when the hamburger menu isn’t expanded I can still Tab through all of the items in the menu (so basically I’m Tabbing through an invisible page). If an item is not visible on the screen then you should not be able to interact with it. So you’ll need to figure out a way to prevent keyboard focus on the menu items when the menu is not showing. The obvious method would be to set display: none
on the menu when it is hidden but if this messes up your slide in animation then you’ll have to find an alternative (probably using some JS magic in combination with tabindex
).
Hamburger menus are a lot more complicated than they let on to be
I don’t have time to go any deeper than this. Overall it looks very nice. Congratulations on your first site!