How to get Sizing in CSS right for Accessibility
Tags: css, a11y, browsers
Published: 2019-10-07 13:13:57

While developing the frontend for a website or web application, accessibility is an important topic in order not to lock out people with disabilities. In this article we highlight the importance of using relative units for values in your CSS. This is especially important for the value of the default font size set in the user's browser. It might be modified to make text larger and easier to read.

## How Browsers render relative CSS values

By default, all browsers calculate relative values based on one reference value which is set in the parent or root element. `16px` is the default font size in all current browsers. Each browser supports multiple units, while each unit has their own pro's and con's. However, they have in common, that the browser converts between the different units. Font sizes for example convert as follows:

```
100% = 1em = 1rem = 16px = 12pt
```

Let's give you you another example. We've set the font size of the <html> element to 18px.

* A child paragraph with font size `1.5rem` converts this to a visible font size of `27px`.
* A child paragraph with font size `25px`, however, simply overrides the default in the <html> element or browser setting and uses `25px`.

### Changing the reference font size in the browser

Users can always change the reference font size to any value other than 16px in the browser settings. If this setting is changed, the browser sets this value as the default reference-font size for all websites. This means, if the setting is changed browser-wide, all values which use proportional units will change too. This, in effect, leads to enlarged website views, if no values are set absolutely.


## The Test setup

In this experiment we created two test cases with a simple layout: a box, headline, paragraph and an image placeholder. While the first test case uses relative values for all properties (including font sizes, dimensions and spacing), the second uses absolute values. Here's the example:

```scss
// First test with relative units
p {
font-size: rem(18);
}

// Second test with absolute units
p {
font-size: 18px;
}
```

The test setup is available in [**this Codepen demo**](https://codepen.io/taikonauten/pen/bGbMgqE). Change your browser's default font size to something other than 16px to see the difference.

Furthermore, you may have noticed the `rem(18)` function.

```scss
@function rem($pixels) {
  @return ($pixels / 16) * 1rem;
}
```

This function is a helper function to convert pixel values to the correct rem values. Given the function of `rem(18)`, `18px` will be converted into `1.125rem`.


## Results

For this test, we changed the browser-wide reference font size to `20px`.
As expected, the first test case will be properly scaled while the second will still be displayed in its original size. In the first test the computed font size of the paragraph (normally 18 pixels) is now `22.5px`, which is actually `20px * 1.125`. The results can also be applied to dimensions and spacing. The first test case displays the image placeholder much larger and with more spacing to the text than the second one with absolute units.

This experiment shows that to meet basic accessibility standards, relative units for all values in your CSS should be used. If you have to use absolute values for layouts, make sure no text is "locked in", i.e. the box is too small for larger text to be properly rendered.

### Important notice about font-size on the `<html>` element

For the `<html>` element you must not use any absolute value for the font-size property. Either use a relative unit such as 100%, 1rem or 1em or remove the font-size property at all. If you use an absolute value you will override any value set by the users and still get absolute results.