We’re making Tumblr more accessible!
If you’re an avid user of Tumblr on mobile web, then you might’ve noticed some improvements we made. Bigger font sizes and higher contrast text? Your screen reader actually reads what you hope it would? You’ve guessed it, we’re making Tumblr ✨accessible✨.
Since we’re rewriting the web, we wanted to make sure we did so with accessibility in mind. I could give you a long description why, but plenty of articles explain better than I can. Put simply: the web should be made useable for everyone.
We began with using the accessibility auditing tool in Google Lighthouse to check the improvements that could be made. Initially, our score wasn’t that great: 62. If you factored in areas that need to be manually checked then our score would have been abysmal. However, we’ve made great strides since then and are on our way to achieving that coveted 💯
We had inaccessible menus and poorly described elements, among other things. Using a tool like VoiceOver or TalkBalk you can see what experiencing Tumblr on mobile web with a screen reader was like. Here’s a gif showing what the mobile web experience on Tumblr was like prior to the changes.
Some of the more noticeable improvements we made were introducing design changes to increase readability and making improvements following WAI-ARIA guidelines. We’ll walk through a few other changes we made using React.
Visual order on the page follows DOM order
One of the larger changes we made was to revamp modals and popovers (e.g., the post activity screen). Originally we used React Portals but it isn’t always the most friendly for accessibility. Ideally you want to have elements appear in logical DOM order and Portals provides a way to circumvent that. So, no more Portals!
The user’s focus is directed to new content added to the page
Next step was to provide a way to manage focus. We want to a) direct focus to the modal when it’s opened and b) return focus to the element that opened the fullscreen modal. Using React’s lifecycle methods and refs, this is simple enough to implement. In your modal component:
public targetEl: HTMLElement; // The element used to open the modal
public buttonEl: HTMLElement;
public componentDidMount() {
// We add an event listener to get the element that opened the modal
document.addEventListener(‘focus’, this.setOriginalTargetEl, true);
// We set focus to some element inside your modal
this.buttonEl.focus();
}
public componentWillUnmount() {
// Return focus to the element that opened the modal
if (this.targetEl) {
this.targetEl.focus();
}
}
public setOriginalTargetEl = event => {
// Only set it once to get the initial target
if (!this.targetEl) {
this.targetEl = event.relatedTarget;
document.removeEventListener('focus’, this.setOriginalTargetEl, true);
}
};
public render() {
return (
<div>
<button ref={(el) => this.buttonEl = el}>
Back
</button>
<div>Your content</div>
</div>
);
}
This can make navigation a lot easier.
Of course, we’re still fine-tuning different elements of the site since accessibility is more than just a number. A lot of these changes will be even more noticeable when the new Tumblr dashboard comes to your desktop. There’s still more to come, so keep your eyes open!
Think there’s a way to make Tumblr more accessible? Hit us up at tumblr.com/jobs and come work with us!
gracieabrams
ellievsbear
discoholicmusic
pixelskylines
