Accessibility is for Everyone

2023-02-20

When you design for accessibility, you design for everyone.

A few months back I set myself the challenge of redesigning this site to be as small and performant as possible. Both in terms of generating the site and presenting the finished product. How could I give the best user experience in as few bytes as possible? While this project is still ongoing (and likely always will be), an interesting trend has started to emerge: typically, the best options for performance are also the best options for accessibility.

There’s a phenomena called the ‘curb-cut effect’. The idea goes that features initially intended for those with accessibility needs actual find use-cases far wider than their intended audience. The namesake of the phenomenan is a great example. Adding small ramps from the pavement to the road were initially intended to make crossing points easier for those in wheelchairs. In practice however, curb-cutting didn’t just benefit one group; those wheeling suitcases, push chairs, delivery trolleys, bikes, skateboards, etc. also benefited from this small addition.

The more I’ve been tweaking and refining this site, it’s hard to not notice a similar pattern.

A previous design for this site featured a small circle with an animated gradient at the top of the page. The idea had been that this circle would act as a link back to the sites homepage in a way that didn’t distract from the rest of the page like a large navigation bar might. Keen to get on with other things, I threw together the following and called it a day:

<svg width="48px" height="48px">
<svg id="link">
<a href="/">
...
<circle cx="50%" cy="50%" r="24" fill="url(#grad)" />
</a>
</svg>
<use x="0" xlink:href="#link">
</use>
</svg>

In practice this looked fine, the link worked and so fufilled its intended purpose. It created a circle, filled it with a gradient, and made it a clickable link back to the homepage. But accessibility hadn’t been at the front of my thinking at the time and it showed. A reader was kind enough to email to let me know that this approach was unusable with a screen reader. The circle would be mistaken as literally just a circle and skipped over; the screen reader thinking it was just an uncaptioned image. Or, the screen reader wouldn’t know what to do and begin reading out the name of each element that made up the circle making getting back to the homepage an arduous chore.

Swapping out this previous approach with a simple traditional navigation bar didn’t just fix the aforementioned accessibility issues, it also made navigating the site easier. This process continued. Cutting out excessive styling, bloated images, unneccesary elements and tags. Each small change helping simplify navigation, improve accessibility, and gradually improve speed.

Accessibility shouldn’t ever fall by the wayside during the design process. However, we can make a good start by simply utilising platforms as they were intended without too much extra work. Rather than reinventing an inferior wheel, we can lean into what platforms do best. Web pages work best at showing text and links so why obscure that behind fancy styling and confusing structure.

The takeaway is simple: cut curbs, not corners.