Google Brand Studio
2-Column Masonry Layout
Belgonging.google is a collection of resources related to Google's diversity, equity, and inclusion initiatives. (Live Site)
Cards are arranged into two columns of equal height. Consistent spacing is maintained between the cards, but the cards themselves may grow in height to fit. Keyboard users traverse the cards using the tab key, progressing from left-to-right, top-to-bottom.
The challenge is maintaining equal height columns. CSS masonry layout support is still experimental and extremely limited. CSS multicolumn layout would place cards into columns and the focus order would be top-to-bottom, left-to-right instead of the intuitive order. With CSS flexbox, the focus order could get muddled if a card in one column is much bigger than one in the other column.
Accessible Responsive Content Reveal
Year in Search is Google's annual exploration of search trends from the year. (Live Site)
Cards are staggered down the page. When a card is clicked, its detailed view is revealed, with more information and shareable links. On small screens, the detailed view shows as a modal dialog. On wide screens, the detailed view opens to the left of the main content, and the main content remains interactive and independently scrollable while the detailed view is open.
The modal dialog is straightforward, but its relationship to the view that opens to the left side and the mechanism for transitioning between the two in a responsive manner are unclear.
The detailed view that opens on the left side should be considered a non-modal dialog, since it presents an additional interactive context without inhibiting interaction with the original context. As such, converting between the two requires flipping the aria-modal="true|false" state of the dialog and the inert="true|false" state of the main content.