Journal

You have a “card” component which includes a heading, some text, an image, and a link to the full article, and it’s working great. Then along comes a UX requirement that the full card (not just the button or link) should be clickable. This is where things get complicated.

TL;DR

I was recently faced with this challenge while building a component at work and opted to implement a tailored version of Heydon Pickering’s Redundant Click Trick. This felt like the best approach, or perhaps more accurately “the lesser of three evils”. I’ll be monitoring how that performs, but in light of the knowledge and experience gained carrying out this task I’m also starting to think that – like Chris Coyier recently suggested – maybe full-card clickable regions are a bad idea.

Setting the Scene

Let’s say our starting HTML is this:

<div class="card">
  <h2>Card Title</h2>
  <img src="/path/to/img.jpg" />
  <p>This is the body copy for the card. It it is comprised of a few sentences.</p>
  <a href="/">Read more</a>
</div>

And the requirement we’ve been given is to make the whole card clickable rather than just the “Read more” link.

Option 1: Stuff everything inside an anchor

Here’s the thing – since the dawn of HTML5 we’ve been able to wrap the inline anchor (<a>) element around block-level content such as headings, paragraphs, and <div>s… so isn’t the answer just to do that?

<a href="/">
  <div class="card">
    <h2>Card Title</h2>
    <img src="/path/to/img.jpg" />
    <p>This is the body copy for the card. It it is comprised of a few sentences.</p>
  </div>
</a>

Well, as with many HTML challenges, just because you can do something doesn’t mean you should. I always had a nagging doubt about stuffing all that disparate content inside a single anchor, and Adrian Roselli has recently confirmed that for screen reader users this approach is harmful.

Perhaps the worst thing you can do for a block link is to wrap everything in the <a href>… for a screen reader user the entire string is read when tabbing through controls… taking about 25 seconds to read before announcing it as a link.

Furthermore, images nested in this way are not clearly announced as they normally would be.

So if you care about the user experience for those people, this feels like a no-no.

Option 2: Stretch a standard anchor using pseudo-content

An alternate approach that’s gained traction over the last couple of years involves leaving the anchor or button in its initial position within the card (thereby avoiding the above mentioned accessibility problem) and using pseudo-content to stretch it to cover the entire card. This CSS-only trick involves setting the card to position:relative then giving the anchor (or button) :after pseudo-content and absolutely positioning that to the card’s four corners. This makes the whole card clickable like a button.

The problem with this approach is that any text in the card is no longer selectable.

Some might say that this is OK. Personally I feel that it is a fundamental usability requirement that text on a web page be selectable. Not being able to do so calls to mind the bad old days before web fonts where we used images for headings, and I like to think we’ve evolved from those kind of practices. Also, I feel any statement by us developers and designers that “losing the ability to select text is OK” lacks validity because we are biased; happy to justify taking away something fundamental from our users because we’re more concerned with getting a (frankly non-essential) feature over the line.

If we don’t like this compromise but are still determined to make the full card clickable, there’s one further option.

Option 3: The Redundant Click Trick

This technique, conceived by Heydon Pickering, uses JavaScript rather than CSS to make the card clickable.

Essentially we add an EventListener for a click on the Card and when one is detected, trigger a faux click on the inner anchor or button.

One challenge inherent in this approach is that a user attempting to select text would unintentionally trigger our faux link click. However we can again use JavaScript (using the onmousedown and onmouseup events) to detect the length of their press to infer whether they are selecting text or clicking, then take appropriate action.

The pros of this approach are that we avoid the screen reader problems and the inability to select text.

The cons are i) that it requires a more complicated, JavaScript-based approach; and ii) that the need for a “check how long the mouse has been pressed down” part isn’t ideal.

With this approach, if Analytics tracking is part of your mix I’d make sure to check that that works as expected across browsers and devices.

Summing up

So there we go – three ways to achieve a “block link” or button. But given the compromises they involve, perhaps the question should be – is it worth it? And given the tools we currently have available, I lean towards “no”.

References

Block Links, Cards, Clickable Regions etc by Adrian Roselli.

Cards by Heydon Pickering (in Inclusive Components).

Block Links are a pain and maybe just a bad idea by Chris Coyier on CSS-Tricks.

February ‘20 proved to be a challenging month on a number of fronts. As if storms Ciara and Dennis weren’t enough to contend with, life chucked in some additional turbulence just for good measure.

So with nothing else for it than to batten down the hatches, I reached for some immersive ambience, restorative reggae and mood-enhancing electronics to help weather the storm.

As it turns out, records really are good for the soul and the forecast now looks much brighter.

So without further ado, let’s dig into last month’s haul.

Shida Shahabi – Shifts (LP)

Amidst the rocky parts, February also provided a couple of nice moments. On a visit to Edinburgh’s Timberyard (Clair’s birthday present – thanks pals!) we were treated not only to amazing food but also this memorable musical accompaniment; the perfect antidote to the arctic conditions outside. Swedish-Iranian pianist Shida’s melodies are hauntingly beautiful in their own right but interestingly she also overlays sounds from the inner mechanics of the piano. Modern classical isn’t normally my bag, but I love this (and the cover art, too).

Current Favourite Track: Futo

Grab a copy on Bandcamp

Bibio – Ribbons (LP)

Okay, I’m late with this one – it was released in April ‘19 – but who cares. Ribbons has been a Spotify staple of my morning commute for some time; its pastoral vibes setting the perfect laid-back mood before a day writing code. Eventually I had to own a physical copy. The vibe is pretty folky and in places you can imagine being at a live jam session in your favourite traditional pub. Stephen Wilkinson is a fantastic musician with a lovely voice but if all this is sounding too nice then rest assured that, being on Warp Records, it’s served with a generous side-helping of analogue synths and quirky electronics to steer things left of centre.

Current Favourite Track: Curls

Grab a copy on Bleep

Al Charles – Outstanding

Who knew there was a reggae version of The Gap Band’s early eighties classic, Outstanding? Not me, anyway. This has been lovingly reissued by Edinburgh’s Athens of the North and features a great squelchy bassline, shimmering synths, dub FX and that killer, hooky vocal. And now I’ll hand over to Discogs legend midnightrunner whose review puts it much better than I ever could:

Quite simply, "outstanding" reggae funk fusion! My mam's toyboy, Gavin, likes to play this one after I have gone to bed, when he smokes his special pipe full of jazzy cabbage.

Current Favourite Track: Outstanding

Grab a copy at Rubadub

Logic1000 – Logic1000

Sydney–born, Melbourne–based producer Samantha Poulter aka Logic1000 is a new name on me. Her sound is a spacey, percussive blend of hip-hop, Bass, Dancehall and House, with all sorts of other interesting samples and influences thrown into the pot. Lots of great stuff on here.

Current Favourite Track: Na feat. DJ Plead

Grab a copy at Juno

Perko – The City Rings

I loved Glaswegian Perko’s first release, NV Auto; its blend of dubbed out synth chords, deep sub-bass and tough broken-electro beats really hitting the spot. His latest release, also on Numbers, ploughs a similar furrow. It spans 8 tracks including moments when he ratchets up the BPMs into Drum ‘n’ Bass territory and others offering respite in the form of delicate ambient interludes.

Current Favourite Track: Stutter

Grab a copy at Rubadub

Khruangbin ‎– Hasta El Cielo (LP)

This is the dub remix version of the Texas band’s second LP, Con Todo El Mondo. Released in 2019, I don’t know why I didn’t pick it up sooner given that I love Khruangbin and I love dub, except perhaps that records ain’t cheap and I wasn’t sure a remix LP constituted an essential purchase. However, after a few months of blissful headphone listening I realised the error of my ways. The band’s sound lends itself perfectly to this treatment and the addition of two mixes by legendary engineer Scientist seals the deal. Also – check this band live if you ever get the chance. I did a couple of years back and they were amazing.

Current Favourite Track: Four of Five

Grab a copy on Bandcamp

Lo Kindre – Chlorophytum

This has been on my wants list for an age but every time I tried to get a copy last year, I couldn’t find one. I’m not sure if the original release was maybe delayed? Fortunately on a recent visit to Rubadub (all too infrequent these days which I mean to rectify) the guys hooked me up. This is on the slow, low and out-there electronic tip with little Kraftwerkian influences in amongst the haze of dub. Apparently it’s also from the south side of Glasgow so if I ever see this dude in the Allison Arms I should jolly well like to buy him a pint. Lovely sleeve art too.

Current Favourite Track: I Don’t Really

Grab a copy at Rubadub

Here’s Dave Rupert, frustratedly rounding up the accessibility shortfalls in browser implementations of native HTML elements.

I’ve always abided in the idea that “HTML is accessible by default and then we come along and mess it up”. But that’s not always the case. There are some cases where even using plain ol’ HTML causes accessibility problems.

(via @jamesmockett)

Since November 2019 my day job has involved working on a “Majestic Monolith” coded in Ruby on Rails. I loved this conversation with Rails’ creator DHH in which he speaks with great passion and makes interesting points about finding a programming language that speaks to you; why single page apps and microservices are not for him; and how our working days have too many interruptions.

On at least two ocassions I’ve found myself scratching my head when an attempted push to a newly-created Github repo is met with authentication failures, despite me being sure I’m using the correct credentials.

Here’s the lowdown on the issue and how to resolve it.

Essentially the problem relates to Github expecting a personal access token rather than a password (although it provides no helpful hints that this is the case).

This might be because your Github account has 2FA enabled, and/or for security purposes because your account is part of an organisation that uses SAML single sign-on (SSO).

In my case, I had previously created a personal access token with the requisite privileges (in my Github account’s Developer Settings > Tokens section) for the purposes of API access, so I was able to just reuse that. However, if need be I could have created a new one.

Thanks to Ginny Fahs who had the same problem and documented her solution.

Github’s Help page Creating a personal access token for the command line is also useful.

In the same vein as Jeremy Keith’s recent blog post, Hydration, which calls out some of the performance and user experience problems associated with current Server Side Rendering approaches, I think Jake Archibald is absolutely bang on the money here.

Every time I watch nostalgic TV documentaries about Scottish films I see Just a Boys’ Game and Just Another Saturday – both written by Peter McDougall – come up. I just watched Just a Boys’ Game (available on Google Play) and loved it. Set in 1979 Glasgow, this is a gritty story with refreshingly good acting that really captures the finer points of the social and economic mood of the time.

Using <input type="text" inputmode="numeric" pattern="[0-9]*"> (instead of <input type="number") allows for a degree of separation between how the user enters data (“input mode”), what the browser expects the user input to contain (type equals number), and potentially how it tries to validate it.

An interesting post from the UK Government listing a host of usability and accessibility problems arising from using <input type="number">.

Now that browser support for the inputmode attribute is sufficient, they have moved to <input type="text" inputmode="numeric">.

I trust GOV.UK’s opinion and think I’ll follow suit.

Colour contrast and the use of colour is extremely important for certain groups of people with varying levels of visional impairment. Building upon the excellent Colorable, I wanted more context around the result. When you share the outcome with your colleagues, all the results, rules and what you’re aiming for, is easily understandable for when you have those awkward conversations with designers and marketers. Accessibility doesn’t have to be ugly.

An excellent, easy to use tool for checking text-against-background contrast for accessibility and sharing your results with others.

(via @paddyduke)

Removing underlines from links in HTML text presents an accessibility challenge. In order for a design to be considered accessible, there is now a three-sided design contraint - or what I call "The Contrast Triangle". Your text, links and background colors must now all have sufficient contrast from each other. Links must have a contrast ratio of 3:1 from their surrounding text. By not using underlines, a design has to rely on contrast alone to achieve this.

It’s interesting that Chip says that this level of contrast is needed “when we don’t use underlines on links”.

By not using underlines, a design has to rely on contrast alone to achieve this.

So this seems to be yet another good reason to include underlines in links, i.e. if you underline your links then you don’t need to worry quite as much about a third level of contrast.

Indeed, when you toggle on the “Show underlines” option on this tool, it then removes the requirement to ensure additional contrast between hyperlinks and standard body text.

However, even if your links in flowing prose are underlined, there’s always likely to be places (Navigation, Footer, CTAs etc) where you’ve probably disabled underlines on links for design effect, so I reckon this is useful for most websites.

(via https://twitter.com/jamesmockett)