Make your website more accessible with personalization
Author: Tommy Feldt
Accessibility specialist
tommy.feldt@useit.se
+46793138696
Reading time 8 minutes
ArticleThis article is based on a lightning talk I held at a T12T meetup in November 2021. 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!
1. Dark mode
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 prefers-color-scheme:
@media (prefers-color-scheme: dark) {
/* Your CSS code for dark mode here */
body {
background-color: #0e1220;
color: #fff;
}
}
@media (prefers-color-scheme: light) {
/* Your CSS code for light mode here */
body {
background-color: #fff;
color: #000;
}
}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.
2. Reduced motion
Excessive animations in the interface can cause serious problems for users with disabilities.
In Hampus Sethfors excellent article "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 prefers-reduced-motion:
/* Remove animations from buttons */
@media (prefers-reduced-motion: reduce) {
button {
animation: none;
}
}
/* Force remove ALL CSS animations. Use with caution! */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}You can also use it for JavaScript-based animations like this:
const shouldReduceAnimations = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
There is however some room for nuance. Well-executed and non-interfering animations can be a good thing for accessibility, 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!
3. High contrast mode
High contrast mode, also known as Windows High Contrast mode or Forced colors mode, 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 do 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 forced-colors: active:
/* Create a better focus styling when in High contrast mode */
@media (forced-colors: active) {
*:focus {
outline: 6px solid Highlight;
}
}
/* Add a thin border around buttons to make them stand out more */
@media (forced-colors: active) {
button {
border: 1px solid transparent;
}
}
/* Keep the yellow warning color in high contrast mode */
.warning-icon {
color: yellow;
}
@media (forced-colors: active) {
.warning-icon {
forced-color-adjust: none;
}
}Try it!
With Windows 11
- Open Settings
- Go to Accessibility -> Contrast themes
- Activate one of the default themes or create your own
With MacOS and Chrome
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 Chrome developer tools
- Open the "More tools" menu (three dots in the top-right)
- Choose "Renderer"
- 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.
4. Scalable text
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 (rem or em), instead of pixel values (px).
html {
font-size: 100%; /* Base size for the page. 100% is equivalent to 16px */
}
h1 {
font-size: 2.5rem; /* 2.5rem = 250% = 40px*/
}
p {
font-size: 1.125rem; /* 1.125rem = 112.5% = 18px*/
}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 SJ.se. This departure card component from the time table works very well both at 100% and 200% text scale:
A new mindset
The biggest challenge with scalable text is to accept that you as designer or developer actually lose some of your control over the layout.
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
flex-wrap - Use
paddingandmin-widthormin-heightto 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!
Final words
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!
