CSUN: Improving accessibility without compromising user experience

A presentation from Mi-Yeon Kim (web developer) and Sarah Clatterbuck (web development lead) at Linked in. They reviewed a project called “Teamlink”, a ‘warm introduction’ feature where you ask a shared contact for an introduction to someone you aren’t connected to.

About Linkedin & accessibility

Sarah asked the audience about their use of Linkedin; almost everyone in the audience had a Linkedin account, although only a few kept it up to date.

They like to think of Linkedin as the largest professional network. Accessibility fits into that vision well, as people with disabilities are disproportionally affected by unemployment, and they can help with that. (This reminded me of the keynote from Tommy Edison, where many of his Radio listeners don’t know that he’s blind.)

Linkedin have an accessibility task force with 12 cross-functional team members from design, web dev & iOS engineering across all product areas. They have weekly meetings and review designs and code in progress. Anyone can come and talk to them about challenges and solutions for things they are working on.

Teamlink project

Mi-Yeon hadn’t had much exposure to accessibility before, and didn’t think it would be a problem.

The first version was was quite narrow, and the call-to-action ended up being hidden beneath a hover-state. Sarah suggested some keyboard improvements.

The screenshot shows a vertical graph from you to the connection with three contacts in common. Each person was a circular portrait and top-line details.

The hover-state showed the call to action (i.e. ask for an introduction), and that was being re-built on pagination and reload. If you had 5 connections you wouldn’t be able to see them all. Making it keyboard accessible broke the interaction paradigm.

They tried to make it “less bad” (laughter), but it was difficult. Key information would be missing so they went back to the drawing board.

Second version

They added a small “interactor” (an arrow icon) that could be selected to bring up the call-to-action, with descriptive text and ARIA attributes.

The screenshot showed a small arrow under each connection, which could receive focus.
(Looked like an accordion type widget to me.)

Interestingly, in the demo they use the example of Jeff Weiner, Linkedin CEO!

For keyboard interaction you press enter to open the contact, esc to close.
Selecting the contact brings up a lightbox style pop-over where you send a message to the shared contact.

Conclusions

They realised that so much time could have been saved if accessibly had been considered earlier. However, it was a useful process, going through the iterations did improve the design overall.

Sarah: One thing that was missing for me was a truly universal solution.

Later they could re-visit it because the search & analytics team wanted to add some information to pack in the tiny space. E.g. info about the shared connections, and how you’re connected.

For example, you’ll connect at an event like CSUN, and later you might forget where you met, so it should add context.

The new module is now branded as “how you’re connected”. At the top of the tree is your account, with some information, then a row of contacts in a carousel, then the target account.
You select a contact and the context of the connections is shown.

For example, where you connected, where you’ve worked together etc.

NB: There is also a jump menu, triggered by an idea from CSUN last year, that allows people to jump to major headings on the page. It looks like skip-links on steroids.