When helper text doesn’t help

Posted on 9 August, 2019

Like most people in IT, I use Slack at work. It’s excellent. There’s GIFS, and integrations like Google Drive, Jira, BitBucket, and Outlook (if you’re that way inclined). But like most bits of software – its got its faults.

Never mind that you can’t reply to a thread with a GIF even though that would be amazing – today I stumbled across a bit of a clanger in terms of its accessibility.

Accessibility isn’t just for the blind

When we talk about accessibility – we tend to focus on things like colour contrasts, font sizes and weights, and alt tags for screen readers. But that isn’t because accessibility is just for people with visual impairments, accessibility is for everybody.

If you think about someone with cognitive issues, there are a number of issues they could face when using a website or application. Time-limited content might not give them enough time to process what is being asked of them, a lack of navigational features might mean they can’t work out where they are in your website/app, and confusing instructions on a form might leave them unable to fill it in.

The Slack profile

Users on Slack have profiles. Pretty standard nowadays, you can upload a picture and add links to your social media etc. And it is in those social media links where our problem lies.

The form on your slack profile asking for a github username but the form only accepts a full url.
Part of the form on your Slack profile

Now the problem might not be obvious when you first look. But look at what the different parts of the form are asking you. The placeholder text is asking for a URL starting with https:// but the helper text under the input is just asking for your username. This might seem like a minor issue but for someone with cognitive issues, this could mean they really struggle to fill out the form.

So I tried to fill this out this morning in my pre-coffee state. It took a while. Now, I don’t have cognitive issues (that I’m aware of…) but this really threw me. I knew one part of the form was wrong but not which bit. I made the assumption that since all Twitter and GitHub URLs follow a format that the form just needed my username.

Same form as before, this time with my twitter username filled in. The input has been marked as an error "This doesn't seem like a proper link. Sorry!"
I was wrong

Ok so it was the helper text that’s wrong. Ugh.

So I tried putting the link in quickly – all URLs start with https:// so surely I don’t really need to put that but in….

Same form as before. This time with twitter.com/janewilson90 filled in. Same error as before.
I was again, wrong

Ok nope. You need to put in the full URL. Even though the helper text is still asking you for your username.

Finally

So I got there eventually. This is a relatively minor issue with the form but it’s so easily avoided! Your placeholder text should not be used to convey vital information to the user. It disappears once a user starts typing (or the minute they click in the box) and then the user is left with your helper text. This is all part of helping users avoid making mistakes and is not only of use to those with cognitive issues but to all your users.

Not everyone is going to finish filling in the form in one sitting, they might go and make a cup of coffee and come back and get frustrated that they keep getting it wrong even though they’re following all visible instructions. This might just be a non-critical Slack profile but if the same mistake is made on a critical form, you’re seriously opening your website/app up to a lot of user frustration and potentially losing a user.

Response from Slack

So me being me, I already tweeted @SlackHQ about this issue and they replied!

Response from slack - they hope to improve the experience soon.

I would have preferred an “oh yes we’ll get right on this and fix it” but… baby steps.

Getting started with accessibility

Even the biggest and best companies make basic mistakes with accessibility (looks at Dominos) but its really easy to make the first steps. I’ve written another post on how to get started but W3C is a great resource to start learning!