#114 - Designing accessible navigation
Hey everyone,
Welcome to issue #114, your weekly roundup of what’s happening in design, code and typography.
A few weeks back I shared a responsive navigation technique using CSS Grid, but after testing for accessibility, I completely redesign it.
Haydon Pickering’s Menus & Menu Buttons chapter in his excellent book Inclusive Components is worth reading if you’re ever dealing with a menu with submenus. The first time round I failed to appreciate the semantic importance of using nested lists for this pattern. Haydon writes “Navigation systems are really tables of content and this is how tables of content are structured.“ A good tip: try removing the CSS from your menu to check it still makes sense.
Similarly, this article from Lindsey Kopacz bought the :focus-within method to my attention, which will maintain focus whilst navigating the children of an element. This allows the user to keep the submenu expanded as they tab through each item using a keyboard. You may have used JavaScript to solve this problem in the past. I know I have!
Thought provoking #
“…everything we do that exists behind a screen is only valuable in so far as what it adds to the world outside the screen.” Tanner Christensen in We’re not designing for Screens.
Hera’s Milky Way & The Origins of the Multiverse, a short essay by John Boardley on the history of understanding the universe and our galaxy within it. Beautifully illustrated with drawings from Thomas Wright’s An Original Theory or New Hypothesis of the Universe, published in 1750.
Everything Leo Babauta writes is worth reading. Creating the Habit of Not Being Busy is no exception.
Design and Code #
Own Your Content on Social Media Using the IndieWeb. An entertaining talk from Zach Leat which teaches you how to host your own tweets..
Two-values for the display property. A quick demo from Rachel Andrew showing the two-value syntax for the display property, which ships in Firefox 70.
Why Are Accessible Websites so Hard to Build? Robin Rendle on the invisibility of accessibility and what can be done to help.
CSS-only horizontally-scrolling cards with snapping. Allan Whit explores how cards might be more effectively organized using a simple design pattern of a scrolling horizontal list. The technique uses CSS Grid and Scroll-snap.
Typography #
“We didn’t like to call it a typeface, as Transport was a letterform specifically designed to be read by the driver, whilst travelling at speed.”
In conversation with Margaret Calvert designer of Transport, the typeface used in the UK’s road signing system, which will look familiar to anyone who has driven on the UK’s roads.
How to choose a font for a project. Using his latest personal project as a case study, Matej Latin explains how to make the perfect font choice.
Something to watch #
Do This to Improve Image Loading on Your Website. Jen Simmons is back with a great demo of native aspect ratio containers, coming soon to Firefox.