top of page

PROJECT

Evaluating Accessibility at SL

SL Logo Dark Blue.png

Accessibility Evaluation

Testing

Prioritization

About SL

SL has the overall responsibility for ensuring that everyone who lives in, or visits, Stockholm County has access to well-developed, easily accessible and reliable public transport.

SL writes on their website :

Travel is a big part of our lives and in the Stockholm area the SL traffic is the natural choice for many. It goes without saying that public transport should also be a natural choice for residents with various types of disabilities. SL traffic is for everyone!

 

The long-term goal for Region Stockholm's accessibility work is that "SL's public transport should be experienced as the most attractive travel option for travelers with disabilities".

 

We believe SL is doing a great job and is actively working with accessibility to be inclusive in every possible way so that everyone can travel by public transport.

What is Accessibility?

Accessibility is a way of designing so that everyone can use a service or product, no matter what disabilities or conditions the user has that can make it difficult to use the service.

 

Accessible design doesn’t only benefit people with disabilities, but everyone who uses the service. Accessibility helps us become inclusive with our design.

Why is it important at SL?

A lot of people use SL every day and it plays a vital role in people’s lives. SL allows people to travel to work, meet friends & family, and create memories. It is important that all people can take part in this without getting stuck on the website or being excluded from it by the limits of its functionality. SL needs to be inclusive so that everyone can make these trips. 

An important way of becoming inclusive is to make it accessible on its digital services, because most of the time, that is where the journey starts.

Parts that are already accessible at SL

Contrasts

We ran color contrast tests using accessibility plugins and tools directly on the pages. We targeted the main color palette first and for the most part, they pass the minimum requirement of color contrast. 

 

The most used colors are above 4.5 in contrast, but the primary blue and white combination that is used quite a lot, is 4.54 which is very close.

Primary Colors

Primary 4.54 and 18.74 contrast

Secondary Colors

Secondary Blue White 5.09 and White Grey 7.99 and Light Grey Dark Blue 7.06

Icons + Texts + Click Areas

The webpage is mobile responsive, and most of the clickable areas are large enough and easily accessible. This is very important; some users need that area to be large enough to be able to click on it.

Image of SL Navigation bar

Icons are always accompanied by text, which makes it easy to understand without having to guess the meaning behind the icons.

TAB Markings and Structure

Almost all the focus markings are clear and visible. It uses a combination of underlined texts, outlines, animations, and color. 

The structure seems to follow in an accessible way ranging from h1 to h3 without skipping over heading levels. That makes it easier for people who use a screen reader to navigate by jumping to heading levels.

Parts that could be improved

There are areas on the website that could be improved and it is already mentioned in the Accessibility Statement that SL is aware of many of these problems and have the ambition to fix these issues

Based on our evaluation, the following needs improvement:

  • Contrast on Submenus, hover, and focus

  • Better color contrast for the color blind

  • Better screen reader optimization

  • Tabbing flow & structure

  • Overall consistency

Better screen reading optimization

The screen reader marks checked/unchecked radio buttons on Sök Resa and Sök Avgångar, this can cause confusion and make it difficult to navigate when using a screen reader and searching for a journey.

Sök Resa = Search Journey

Sök Avgångar = Search Departures

Alt texts have file names in them which causes the screen reader to read the filename, even though in some instances the image is just decorative. In that case, when an image is decorative, we would suggest leaving the alt-text field empty as it doesn’t really contribute to understanding the context.

Better color contrast for the colorblind

It is important that the colors have enough contrast that text and buttons are visible, and in that case; some areas on SL can become quite difficult to see due to colorchoice. We wanted to see how it is to use the website without any color and, that caused some trouble for us. We noticed that in many cases, SL is reliant on color to visualize what is happening on the screen – and that can cause trouble for color-blind. 

In this case, SL should've used something more than just a color to visualize that an object is being hovered; like a border or an animation.

TAB Flow and Structure

As mentioned, the tab flow & structure is good, though it could be improved by making it easier to shift between Sök Resa and Sök Avgångar, as of right now; you have to use your left and right key to switch between them. This could be fixed by letting the user choose which type of Search they want to perform in the alternatives on top, and then just letting the window unfold after pressing Enter.

Current navigation flow

At the top of the page, there is only one skip option which jumps to Search Journey, which is a good shortcut as many people use the website for just that. But in that case, I wish that “Skip to content” button would be more specific, renaming it to “Skip to Search Journey” would allow the user to know where the Skip is going to take them.

Current Skip to Content

Image of SL Skip to Content

This powerful shortcut could also be improved by having two options, named “Skip to Search Journey” and “Skip to Traffic Status”. These would also be specific options that would allow users to skip to the content that they are interested in, not only benefits users with screen readers but everyone.

Improved Skip to Content

An improved version of Skip to content

Consistency

Another area of the experience that could be improved, is the consistency of the design. When hovering boxes, it adds a bit of drop shadow and underlines the heading, but when focusing (using TAB) it has all that plus an extra border - which works much better when you have limited sight. 

Some boxes have different properties when focusing (using TAB) on them and hovering with the mouse. Most of the time, the focused visual (using TAB) works better than the hover visual as you can see below.

The TAB visualization works better for the colorblind as it not only uses color but also borders. When hovering, it relies only on color in many instances, which can cause trouble if that color can’t be distinguished from the rest.

Priorities

Based on these problem areas that need improvements, we have created a prioritized list according to how important the problem is and how much it would help SL become even more accessible. 

First: We strongly believe that improving screen reader optimization is the most important priority. SL has an issue with some areas as mentioned that can make it difficult to use if the user has a screen reader. 

Second: better contrasts for the colorblind need an improvement where SL cannot only rely on colors but needs to do visualization that works even if the user is colorblind to display what is happening.

Third: create more shortcuts, to optimize tab navigation for people who use the keyboard to navigate and offer the users to skip certain areas, especially large sections that require the user to tab through each element to get past that section.

Future of Accessibility at SL as we see it

  • The future looks bright at SL when it comes to accessibility. SL has stated that certain problem areas are going to be fixed by mid-2023 and that ambition is something we admire. 

  • It is important to test frequently with many different users 

  • Include accessibility as an essential subject during meetings

  • Always start with accessible design, which should be your foundation, and then proceed from there and make it beautiful!

This accessibility case was worked on together with Habee Shirzad.

This project was one of many - make sure to check out my other projects and contact me if you have any questions about UX or my case studies. 

bottom of page