There are plenty of plug-ins, libraries, and tutorials that will add an “estimated reading time” visual cue to your site. There are also browser extensions for users.
Most use JavaScript and CSS to calculate based on word count and viewport position. All require more work on the part of the browser, never mind additional bandwidth and potential security risks.
But I have a near-perfect solution. It works for most sighted users, using their familiarity with their own reading speed. It requires only a couple steps from authors.
As an Author
These two simple tricks can be a boon for your users without requiring you to bring in any third-party dependencies:
- Don’t disable scrollbars, and
- Don’t style scrollbars.
Probably also be consistent in your header and footer sizes so they don’t vary wildly in height between pages of your site.
Don’t Disable Scrollbars
If you have styles like overflow: hidden, you are disabling scrollbars. Maybe don’t do that on something that holds content. If you do it on the <body> or <html> elements with the notion of rolling your own, maybe don’t.
Don’t Style Scrollbars
While you may not hide the scrollbar, styling it can functionally hide it for some users in some contexts. While there are ways you can maybe do it without messing it up, experience tells me you / we, as an industry, can’t.
As a User
Scrollbars tell you how long a page is by screenfuls (number of viewports), while also telling you how many screenfuls remain from your current position. They persist as you move and are more consistent than the estimated reading time your browser’s reading mode provides.
Once you see the text size, the spacing, understand the header & maybe footer size, and consider how quickly you read, you will have a good sense if the page is something you can skip, skim, or tuck in to read. I bet you already do that without consciously thinking.
Make sure scrollbars are turned on in your operating system. I show how in two desktop OSes.
In Windows 11
- Go to system settings:
- Open the Start menu (the Windows logo) and go to Settings (the gear icon), or
- Press Win + I
- Either:
- Search for “scrollbar”, or
- Navigate to Accessibility (Tab from search box and then arrow down) then
- Under Vision choose Visual Effects
- Go to Always show scrollbars and toggle it to “On”.
In macOS 14
- Go to system settings:
- Open the Apple menu and choose System Settings, or
- Press Ctrl + Fn + F2 then ↓ to System Settings
- macOS remembers where you last were, so either:
- Choose Appearance, or
- Search for “scroll bar” and choose Appearance.
- In the Appearance pane, find Show scroll bars and choose “Always” (if using keyboard, you have to Tab through every individual setting since Shift + Tab puts you in the search box)
As an OS Developer
Please, leave scrollbars on by default. Don’t hide them under system accessibility settings. Don’t make them skinny and translucent and ephemeral. We get that you are an expert in GUIs and have a top-end computer. You are not your user.
Wrap-up
I am intentionally not linking to any third-party add-ons, extensions, or libraries. If you have one that works for you as a user, share it here. If you have one you like as a site author, then unless your users have also said they like it, maybe don’t share it here. If you are an OS developer, please leave scrollbars on by default.
If you are a blind screen reader user and you have a tip for what you use to guess reading time, please share.
It’s ok to feel those other options are ableist. It’s also ok to feel they are useless. It’s all the more reason to ignore them and lean on the features we already have.
The opening image is by Maggie Jones taken in Tower Hamlets cemetery. It is public domain.
Update, Elder Scrolls
The Elder Scrolls
