| Tinalles |
Here's a screenshot:
https://www.dropbox.com/s/hmrjrtfue0uomjj/paizo-sc-001.png?dl=0
The text of the headings "Roleplaying Game" and "Adventure Card Game" under the Pathfinder menu are too wide to fit the available space. They get smooshed together at the edges.
Also, the headers occupy a different number of lines:
Roleplaying
Game
... vs ...
Adventure
Card
Game
... which throws the items underneath them out of kilter. For example, take a look at "Expansions" from the ACG menu; it's about half a line further down than "Sourcebooks" from the RPG menu. It comes out looking rather messy.
This screenshot was taken using Firefox Quantum 58.0.2. I have a bunch of extensions installed, but I don't think any of them are likely to be affecting this.
On a related note, I took a look at the code in the menu, and found this:
<input name="rpg" id="pathfinder-rpg" type="checkbox">
<label for="pathfinder-rpg">Roleplaying Game</label>
It makes me happy to see that you are labeling your form inputs! (Even if I have no idea why there's a form input mixed into a basic navigational structure.) However, there's an issue: you've got an associated CSS rule like this:
header #nav-main ul.tier-two .links-stem > ul > li > input {
display: none;
}
I'm guessing you're using that to hide the checkbox. Unfortunately, "display: none" causes the browser to treat that input in most cases as if it does not exist. That, in turn, causes screen readers for the blind to ignore both the input and its label. Screen readers skip labels for non-existent inputs, in order to avoid confusing blind people by giving them the impression that there's a form input they need to interact with when there actually isn't. So by hiding the form input with display:none, you've effectively disabled your heading for blind users.
You may not want the input to be read aloud, but I suspect you probably DO want the text of the label read aloud, because it's serving double-duty as a form input label and as a heading in the navigation. Consider taking a look at the ARIA properties for cases like this, specifically the aria-labelledby attribute.
| Chris Lambertz Web Production Manager |
That's the basic gist, more info can be found here if you're curious. The same effect is also possible via radio options.