Articles

Our services

About Useit

Danne Borell

Why do we make games? Because we want people to play them.

That’s the basic reason, isn’t it? Sure, it’s a job that we get paid for because we need money to live (and buy games), but the basic reason is that we really like games, and we want to make games that people can enjoy.

So why then are we making games that many can’t play?

A low estimate gives that 16% of our planet’s population has some form of disability. Here in Sweden where I live that would be around 1.6 million people, though the real figure is likely higher. This covers all forms of disability, and in many cases, it affects the ability to play games.

Disability and health fact sheet from WHO

It could be limited movement in the hands, limited sight or hearing, colour blindness, attention difficulties just to name a few. Whatever it is, it stops many from being able to play the games that they want to play. Only, it doesn’t have to…

During the past decade or so game accessibility has moved forward, first with uncertain steps, but now with leaps and bounds. Both triple-A titles and indie games have pioneered, redefined and reused ways of making games work well for more people. Some have added a few of the more common features, such as captions or controller remapping, while others have gone all in, raising the bar for game accessibility for everyone. But still, there’s a lot left to be done.

For me accessibility is a very simple thing, it’s designing for human beings. Whatever we make, a game, a house, or a website, we make it for people to use. But if we make design decisions that make it harder for some to use what we made, or prevents them outright, then we’ve failed with the basic premise, to make something that works for human beings.

What accessibility adds is a broader understanding of how humans work, and how to meet those needs. It can be very easy to focus on making something that works for yourself when you’re making a game, but stopping there will mean that it’s not going to work for people differently abled than you.

Gamers come in all shapes and sizes, and with all levels of ability. To not exclude people takes knowledge and effort, but it’s worth doing.

So, you need to learn about game accessibility to make games for human beings. The good news is, that’s a lot easier than it used to be!

There are several guidelines on game accessibility, there are excellent articles, videos and talks on the subject just a click away. And if you need a bit more support there are accessibility experts like me who love nothing more than talking about how to make games work for everyone.

And to provide some inspiration, here’s a link to a video that shows how much difference being able to play games in spite of a disability can make:

Everyone deserves to be able to play video games! Danne Borell makes the case for better game accessibility.  

Games for human beings – Why game accessibility is important

Tommy Feldt

This article is based on a lightning talk I held at a 

If you prefer to watch, you can find it on Youtube with English subtitles:

Personalization means that the users themselves can change the look and behavior of the interface according to their own preferences and needs. 

For many users, a personalized website will be much more pleasant and enjoyable. But for some users with disabilities, personalization can be vital for them to be able to use the website!

In this article, we will take a look at a couple of different ways that a user can personalize a website – such as changing the font size or turning on dark mode – and why it is so important for accesibility!

In dark mode, the interface is displayed with muted colors and a dark background, instead of the usual bright background. Many users feel that a dark palette is more pleasant for the eyes, especially during the night. But dark mode also has an important accessibility function. Many visually impaired users are sensitive to light and can experience discomfort reading text against a bright white background. For them, dark mode can be very helpful!

Dark mode has existed in mobile apps for quite some time, but it is also becoming more and more common on the Web. In the picture below, you can see how this website (Useit.se) looks in dark and light mode:

For it to work, designers and developers need to create a separate design for dark mode. This can be done with the CSS media query 

It is also a good idea to offer a manual toggle somewhere on the site, as Facebook does in the image below. A user's preference might vary. For instance, they might want Youtube in dark mode, but still prefer Facebook to be light.

Excessive animations in the interface can cause serious problems for users with disabilities.

"Accessibility according to actual people with disabilities"

 , unwanted animations are ranked as one of the top accessibility problems by several of the responding users.

Because of this, all designers and developers really should be listening for the system preference to reduce motion, and adapt their animations accordingly.

This can be done quite easily for CSS animations with the CSS media query 

You can also use it for JavaScript-based animations like this:

There is however som room for nuance. Well-executed and non-interfering animations 

 since they help the user understand what is happening and decrease the cognitive load.

Because of this, I recommend that you go through all your animations and identify the ones that might be problematic. And that you remove the worst ones altogether - regardless if the user has enabled the reduced motion setting or not!

is an accessibility setting in Windows that lets the user change the color theme for the entire operating system, including all apps, programs and websites.

For websites, the high contrast mode makes it possible for (primarily) low-vision users to adapt the display and overwrite the original website design.

Apart from changing colors, the high contrast mode also removes background images, shadows, effects and other potentially distracting design elements. In the image below, you can see how this website (Useit.se) looks with two of the default high contrast themes selected: "Night sky" and "Desert":

The user can also create their own theme and choose their own colors for common interface elements, such as background, body text, link text, buttons, focus styles and disabled elements.

The nice thing about high contrast mode is that you often do not have to 

 anything for it to work – you just have to build your website with semantic HTML.

However, you sometimes might want to fine-tune a few details. For instance, if an icon has the wrong color, if you want a better focus outline, or if you want to keep some of the original colors. For this, you can use the CSS media query  

Activate one of the default themes or create your own

This type of high contrast mode is currently a Windows-only feature. However, there is a way to emulate it in the Chrome browser on MacOS:

Open the "More tools" menu (three dots in the top-right)

Enable "Emulate CSS media query forced-colors"

(Optional) Combine with "Emulate CSS media query prefers-color-scheme" to toggle between light and dark contrast themes.

Text size is very important for good accessibility and usability.  Many users with and without disabilities will have difficulties reading and understanding the content if the text is too small.

Because of this, it is important that users can adapt and scale the text according to their own needs, for instance by setting a preference in their browser settings:

The best way for you as developers and designers to support this is to make sure that you always define your font sizes with relative values (

Relative font sizes use the page base size as a reference point. When the user changes their base size preference, all other texts will scale accordingly. 

A good example of scaling text can be found at 

. This departure card component from the time table works very well both at 100% and 200% text scale:

The biggest challenge with scalable text is to accept that you as designer or developer actually 

You can no longer count on a certain text to occupy a certain width in pixels, since some users' text will be bigger. And you also cannot set fixed pixel heights and widths on containers without risking cutting off overflowing text.

But there are many good techniques you can use to overcome these challenges! You might, for instance:

Reflow the content onto another row when you run out of space, using 

 to allow your containers to grow with the text

or simply pick a better and less restricted layout.

This will of course require a change of mindset if you have not worked this way before. But once you stop thinking in pixels, your designs will improve and you will never want to go back!

Personalization is a fantastic tool for creating websites that are usable, accessible and flexible.

However, there are still some caveats. This particular type of personalization will only reach the minority of users who are aware that the settings exist, and have chosen to enable them. And personalization also does not exempt you from living up to any legal accessibility requirements that apply to you, such as EN 301 549, Section 508 or WCAG.

In other words, personalization does not replace traditional accessibility efforts and "design for all" – but it can be a great complement and an important part of this work!

In this article, our accessibility expert Tommy Feldt will take a look at a couple of different ways that a user can personalize a website – such as changing the font size, turning off animations, turning on dark mode or a high contrast theme– and why it is so important for accesibility!

In this article, our accessibility expert Tommy Feldt will take a look at a couple of different ways that a user can personalize a website – such as changing the font size or turning on dark mode – and why it is so important for accesibility!

Make your website more accessible with personalization

Are you interested in our services or do you have any questions? Contact Marcos and he will tell you more!

Marcos Flores

Are you interested in our digital accessibility services or do you have any questions? Contact Marcos and he will tell you more!

Contact us

We are now launching the new and improved Useit website! Here you can read more about Useit, our accessibility services and our amazing team of experts in Sweden and Norway.

We will also post our upcoming events and blog about interesting subjects within accessibility, inclusive design and UX.

Here you can read about Useit, our services and our amazing accessibility team.

Our new website is launched!

More articles

Games for human beings – Why game accessibility is important

Make your website more accessible with personalization

Contact us

Marcos Flores