Accessibility in action: Josh Collinsworth's "reduce motion" button

2022-12-03

Manuel Matuzović praised Josh Collinsworth’s website, and I full-heartedly agree it’s a very pleasant design.

Josh Collinsworth joshcollinsworth.com

The thing that stood out the most (though merely a detail) is the “Move” button next to the “Dark mode” button in the header: since the design features some animations, users can disable these by simply clicking on that button.

Screenshot of a website navigation header featuring a button named — While the dark mode button is a common sight on websites these days, I haven’t seen a “reduce motion” button like this before.

This is inclusive design in action: while some users may have set a permanent preference to disable motion (and this is hopefully respected by website creators), enabling a simple switch for a motion-heavy website is a great feature.

Resources: Usability and accessibility » Motion

While moving elements may enrich UX for some, they can be a burden or even outright dangerous to others; careful consideration needs to be taken when animating parts of a design.

I'm Sebastian, Sociologist and Interaction Designer. This journal is mostly about bringing together social science and design for inclusive, privacy-focused, and sustainable "human-first" digital strategies. I also tend to a "digital garden" with carefully curated resources.

My occasionally sent email newsletter has all of the above, and there is of course also an RSS feed or my Mastodon/Fediverse profile.

Discussion:

Name

Comment *

Available formatting commands

Use Markdown commands or their HTML equivalents to add simple formatting to your comment:

Text markup

*italic*, **bold**, ~~strikethrough~~, `code` and <mark>marked text</mark>.

Lists

- Unordered item 1
- Unordered list item 2

1. Ordered list item 1
2. Ordered list item 2

Quotations

> Quoted text

Code blocks

```
// A simple code block
```

```php
// Some PHP code
phpinfo();
```

Links

[Link text](https://example.com)

Full URLs are automatically converted into links.