top of page

Assessing the accessibility

of LinkedIn

TOOLS

Figma, Miro, Google Suite

TIMELINE

October 2023 - December 2023

MacBook Air.png

INTERFACE

LinkedIn

TEAM

Bhavna, Xueying, Sanjana

Overview

The aim of the project is to assess the accessibility of LinkedIn, a professional networking platform already working towards making accessibility their core principle, through a comprehensive audit to identify areas of improvement.

 

This was achieved by performing a WCAG evaluation, cognitive walkthrough and design annotations.

LinkedIn-Icon.png

WCAG Evaluation

GOAL

To identify opportunities for improvement in the experience.

1.2.1

Audio-only and Video-only (Prerecorded)(A)

For prerecorded audio and video-only media, alternatives are provided in separate text or audio formats.

PROBLEM:

Some audio-only or video-only content lacks a transcript.

RECOMMENDATION:

LinkedIn can license closed-caption services.

V1.png

2.2.2

Pause, Stop, Hide (A)

For moving, blinking, scrolling, or auto-updating information, the user is able to pause, stop, or hide the content.

PROBLEM:

The GIFs have no stop button. Posts like celebration have no pause for the animations.

RECOMMENDATION:

Have the option to pause the GIF or have it automatically stop after 1st play.

V2.png

2.4.3

Focus Order

If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.

PROBLEM:

On a Job listing page, the order is unexpected, going top to bottom then goes back to the top back button and resumes from the bottom. Additionally, while browsing through the options, it skips the other job listings and goes directly to the page numbers. However, the user is able to back-tab their way to the previous job listings from the page number.

V3.png

2.4.7

Focus Visible

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

PROBLEM:

Box outline is also not visible when covered by the permanent chat box on the screen. Additionally, sometime the indicator is not visible or disappears upon pressing tab.

RECOMMENDATION:

Having a consistent focus visible (color and order).

V4.png

2.4.8

Location

Information about the user's location within a set of Web pages is available.

PROBLEM:

Shows you where you are while on navigation pages but does not when you start exploring further. For example, exploring a job from the results on jobs page.

RECOMMENDATION:

Providing the user with breadcrumbs to be able to track back to their selections or pages.

V5.png
V5.png

2.5.3

Label in Name (A)

For user interface components with labels that include text or images of text, the name contains the text that is presented visually.

PROBLEM:

The Voice Control does not elaborate on the time of the post (2h, 4d, etc.) and fails to recognize buttons in the ads section.

RECOMMENDATION:

It would be helpful if the Voice Over mentioned the time posted as ‘2 hours ago’, ‘4 days ago’.

V6A.png

Skipped

V6B.png

2.5.5

Target Size

The size of the target for pointer inputs is at least 44 by 44 CSS pixels (with exceptions)

PROBLEM:

Most of the interactive elements are 44x44px or greater with the exception of outlined and filled buttons being 34px in height.

RECOMMENDATION:

Although the size of buttons are clickable, it is essential to follow standard guidelines so the button sizes will have to be a minimum of 44 px in height.

V7.png

3.1.4

Abbreviations

A mechanism for identifying the expanded form or meaning of abbreviations is available.

PROBLEM:

All posts have an abbreviation for the time they were published, for example, 1d, 2w, etc. but there is no information on what it signifies. Additionally, users have tags like "1st" or "2nd" attached to their name and designation without any explanation even upon hover and click.

RECOMMENDATION:

An overlay explaining the jargon would be helpful for users to understand the function.

V8.png
V8B.png

Design Annotations

GOAL

To help design how interactive items should be accessed by assistive technology.

For this evaluation, we looked at three screens - Home page, Jobs Page, Profile Page.

The header and footer regions and the tab order were defined that would be most appropriate for users allowing access to all functions and images and non-text content.

OBSERVATION 01

Dynamic footer

As the user navigates through various pages of the website, the placement of footer changes. In the case of pages with infinite scroll, the footer is placed in the side bar and in the case of pages with finite scroll, the footer is positioned at the bottom of the page.

D1.png
D1b.png

OBSERVATION 02

Inaccessible sidebar and chatbox

From the exercise of using the keyboard to navigate, we found that on the Job page, it is almost impossible to reach the right side and the chat box because of the endless content of job roles offered unless long pressing the tab.

SUGGESTION:
To allow better access of the content on the right, we suggest keeping a button allowing them to skip main content and navigate to the right side.

D2.png

OBSERVATION 03

Lack of supporting text

The functional images, like the edit button, were not accompanied by explanatory text, despite being a crucial feature on the profile page.

D3.png

Cognitive Walkthrough

GOAL

To evaluate how accessible the website is for people with specific disabilities.

A persona was used to evaluate the cognitive accessibility of the interface by walking through a series of tasks and asking a set of questions from the user’s point of view. Some questions considered while performing the tasks were:

  • Will the user understand what things are and how to use them?

  • Will the user be able to find what they need?

  • Will the user be able to clearly understand the content?

  • Will the user be able to avoid or correct mistakes?

USER PERSONA

Pawel, 24 years old

A recent graduate in chemistry who lives in Birmingham, England. 

Conditions: Asperger’s syndrome, anxiety

Pawel is good with technology, his dad recently gifted him a laptop which would help him with his job search and be great for playing games.

Goals:

  • Wants to find what he needs on websites more easily

  • Wants to be able to talk to people using web chat

Frustrations:

  • Gets easily distracted and wants to read everything and click every link

  • Thinks websites often assume you know more than you do

TASK 01

Create a post announcing the completion of studies and express interest in looking for jobs as a pharmacologist.

OBSERVATION 01

When the user navigates back to the homepage, they are directed to where they had previously left off on that page. This causes a problem since the only way a user can create a new post is at the top of the page. This may require user’s previous knowledge of the page layout.

OBSERVATION 02

The homepage/feed has an overload of information like an infinite list of connections’ posts, job recommendations and new connection suggestions. This could overwhelm the user and may also distract them from performing the task at hand.

OBSERVATION 03

In the ‘Start a new post’ section, the user does not receive a consistent feedback upon hover. Additionally, there is no typographical emphasis while the user is creating a new post.

TASK 02

Look for a job through the job portal to find something that suits his requirements.

OBSERVATION 01

The homepage has a lot of content and clickable items that may distract the user as they have an inclination to clicking on all possible links as mentioned in the persona.

OBSERVATION 02

The suggestive text as the user is typing their entry into the search bar may be distracting as there are so many options to choose from.

OBSERVATION 03

In the task of submitting or filling out the details to apply for the job, the website has a dark overlay on top of which the pop-up rests, helping the user to block out other information on the screen.

Takeaways

Based on the experience of this case study, there are several key takeaways to consider for future studies. Firstly, strong organization and collaborative effort allowed for ease in completing the deliverables Secondly, inconsistency with the website was a hindrance in decision making as we had to go back and forth to analyze and re-analyze our findings. Lastly, this project helped us in understanding the role we play as designers and the importance in designing the solutions with accessibility in mind.

bottom of page