Responsive, accessible navigation 9: ???
17 Feb 2021
Visuals!
1em is 16px on most browsers. Taking a quick glance at Netlify.com, RealPython.com, Amazon.com, etc … I’m seeing menu font sizes range from about 14px to 18px.
So it doesn’t look like I need to mess w/ the font size too much to have things look “good.”
Just for fun, I made a 3rd “flexipage”, /wet
, that has water.css applied to it.
Here’s what we’re starting with:
First, I’ll set up a mixin called un_button_looking_buttons();
and include it into .topnav
:
@mixin un_button_looking_buttons() {
button {
border: none; @mixin un_button_looking_buttons() {
button {
// Make a button not button-like
border: none;
outline: none;
margin: 0;
padding: 0;
background-color: inherit;
color: inherit;
font-size: inherit;
line-height: inherit;
font-family: inherit;
font-weight: inherit;
text-align: inherit;
vertical-align: inherit;
}
}
Next, I’ll set up a mixin called un_link_looking_links();
and include it into .topnav
as well:
@mixin un_link_looking_links() {
a {
// Make a link not link-like
text-decoration: none;
color: inherit;
}
}
There’s a little bit of vertical misalignment between Page 1
and Dropdown A
in my ordinary pages that doesn’t show up in /wet/
. Looking into it, it seems that WaterCSS has managed to even out the line-height
property to 1.4
throughout body
.
In the navbar for Katie Kodes, I seem to have separately set .topnav.whole-bar button
and .topnav.whole-bar a
to line-height: 3rem
.
In hindsight, I can see the wisdom in simply having a baseline line-height for the whole page when coming up with a CSS theme.
One of the reasons I imported WaterCSS into a single page, actually, was to make sure I didn’t paint myself into corners styling the nav that would fight with (or be made redundant by) well-designed whole-page CSS themes. Water is a nice tiny “theme.”
I guess … I guess I’ll just leave the vertical misalignment in my nav for now. It feels silly to work in a special line-height
decision that, in the real world, would almost certainly be taken care of by a whole-page CSS baseline/reset.
TODO: Oh no, I forgot about voice input for controls. Is this all broken?
A11y dummy-check by Graham Armfield testing Summary and Details
Neither jason.af nor whitehouse.gov enable “Dark Mode” w/o JS. jason.af’s settings button simply doesn’t respond; Whitehouse.gov’s is a little annoying because the button is obvious but it just doesn’t do anything. Anyway, I guess I don’t have to worry about a pure-CSS color theme.
I should put a <a id="skip" class="sr-only" href="#main-anchor">Skip to main content</a>
before my nav. https://www.hassellinclusion.com/blog/accessible-accordions-part-2-using-details-summary/#main-anchor
’s looks really good when you keystroke through it, too.
I like the way his flyout is the same color scheme as its parent, with a thinner font face, and the way each flyout is separated from the one above it by a high-contrast line (looks like also there’s a line at the bottom of the flyout, though not at right or left).
(Real Python achieves flyout item visual separation effect w/ all its subtitling, icons, arrows, changes of color, focus bounding-boxes (omg they match the colors!), etc. Oh, wait – see Store – maybe not so much.)
I think I can beat both Hassell & RP for hover-highlighting in the flyout.
Playing w/ Stephanie Walter’s page … one thing I’m noticing is that the line-height
that the nav items have can really impact how much margin & padding they need to further separate from each other when they flow on top of each other. That said, Stephanie doesn’t have any special line-height’ing beyond her usual body
of 1.5
and div, ol, p, ul
of 1.55
. Still … moral of the story it it’s hard to design a navbar before you’ve come up w/ a comprehensive site look & feel that includes line-height
beyond the nav.
That said, I defintely could simply pull a Katie Kodes & muck w/ the nav line-height
. (But then what of an eventual switch to branding img’s?)
TODO: Now that everything’s big, I definitely want “escape” to work in a dropdown submenu, too, not just on the parent clicker. It does at Real Python. (Note: escape does not close the whole menu on RP mobile.)
I rather like the sans-serif font family from Water CSS, so for lack of a better idea, I grabbed it.
I also put a thin light gray border all the way along the bottom of the masthead (inspiration: Stackbit Exto theme).
@mixin visually_distinct_top_look() {
border-bottom: solid 1px #e9ebed;
font-family: $sans-fontfamily;
}
#masthead {
@include visually_distinct_top_look();
}