♿ access-ability

There's a feature of my Android phone that I love and use daily called One-handed mode. You see, my phone's screen is bigger than my hands, making the top of the screen hard to reach without straining my thumb when holding my phone in one hand. One-handed mode allows me to swipe down on the bottom edge of the screen, bringing the top contents of the screen closer to my thumb.

Considering the frequency with which important controls (close, menu etc.,) appear at the top of the screen in Android, this little convenience greatly increases my phone's ease-of-use, making those controls easy to access. In case you haven't guessed already, One-handed mode is a feature found in the Phone's "Accessibility" settings.

All of us use accessibility technology, every single day. In fact, it's not a stretch to say that all technology aids accessibility, when the word "accessibility" is taken in its strictest definition:

accessibility (noun); The quality of being able to be reached or entered.

Computers give us remarkable access to a wide range of activities, information, entertainment, and human connection. The handles on drawers permit us access to their contents, yet I'm sure all of us have experienced poor ergonomics or confusingly-designed handles. The infamous curb-cut---those little ramps that connect a pavement or sidewalk with a street in a gentle slope---help ease travel not only via wheelchairs, but also by bike or wheeling luggage across town.

Yet when we talk about designing for accessibility in tech, we fall victim to the common misconception that we're designing for disability; for a minority of users with special access needs. The reality is, designing for accessibility means designing for all your users, regardless of the ways in which they need to access your product.

Put another way, designing for accessibility really means designing your product in a way that makes it widely available, whether that means making your site load as quickly as possible for poor connections, adding alt tags to images for dropped connections, or adding subtitles to videos for people trying not to wake a sleeping child.

In her book, "Accessibility for Everyone", Laura Kalbag outlines four dimensions to consider for making products accessible:

Visual. Make it easy to see.
Auditory. Make it easy to hear.
Motor. Make it easy to interact with.
Cognitive. Make it easy to understand.

Separating these dimensions from the subject of accessibility, it's easy to see how these considerations are tenets of good design, period. And with just a little adjustment in one's approach to design, we can make our work widely available, and even enjoyable, to as many people as possible.

👀 make it easy to see

Designing digital products implicitly puts visual design at the forefront. While our access as designers to other senses---such as the sensation of touch through vibration, or sound through spoken interfaces---is increasing, the screen is where we spend most of our time. Advances in screen technology have also made it possible for us to create designs with high dynamic range, in extremely fine detail and at large scale.

But there's a difference between making designs that people look at versus designs that people truly see. There's overlap in this distinction with making designs easy to understand, as we'll see later, but there are some basic things to bear in mind when thinking about visual design.

Colour contrast is often one of the first things people think about in the subject of accessible design, and for a good reason:

In Britain, around 4.5% of the population have some form of colour blindness¹
Cataracts and other age-related vision loss affect over 90% of people over the age of 65²
Only 35% of adults have 20/20 vision without glasses or other optical aids³

Sufficient colour contrast can help with these issues, but there are other considerations in making something easy to see. Besides colour, sufficient contrast between text weights and sizes is important for establishing hierarchy and giving users clear landmarks to ease page navigation. Making your headings sufficiently differentiated from your main body content, by increasing their size or weight, can help people quickly find the content most relevant to them.

It's also easy to overlook essential typographic best practices, such as:

Breaking up long paragraphs into more digestible, smaller paragraphs or bullets
Using numbered lists for salient information to make backreferencing easier (i.e. saying "list item 3" is easier than saying "the bullet that mentions X")
Ensuring a good balance between text size, line spacing (leading), and line length (measure)

That said, there are a large number of users who won't see the design at all, but who still deserve (and often require) access to the service or product the design facilitates. How do we design the audible, narrated experience of our products?

🧏🏼 make it easy to hear

What does your design sound like? Many of us are familiar at least with the idea of screen readers---technology that narrates a screen's contents using text-to-voice synthesis---but few of us take the time to learn what the experience of using this technology is like. It's also hard to realistically emulate; people who live every day using a screen reader can listen to it at blistering narration speed and navigate a screen with ease. It can sometimes feel impractical to fumble your way through enabling and using a screen reader for more than a few minutes (though as an exercise in empathy, I strongly recommend doing so every once in a while!).

Instead, to answer "what does your work sound like?", I like to ask people to describe their design. A good practice here is to avoid drawing your design in a UI design tool before first writing down in plain language the contents and structure of the design. This transcript helps you think about the right hierarchy, relative importance, and most natural reading order for the elements of a design. It also punctuates the importance of things like skip links, so you can avoid reading through a dozen standard navigation items ("Home, About, Contact, Press, Join The Team; Your Profile [...]") before getting to meaningful information.

When possible, I even like to think of what changes we can make to a design to make it enhanced in experiences where the UI is narrated. One workaday example of this is the HTML <meter> element.

The meter element is used to represent a value in a range, and is useful for showing, for example, disk capacity or password strength. By default, the meter element is relatively unassuming; it shows a coarse value represented as a coloured bar inside a track, with the default colours being red, yellow, and green depending on whether the value is optimal or sub-optimal.

Sighted users have to make an estimate for any exact values, unless the designer chooses to add labels to communicate the value. However, screen readers can enjoy a much richer level of detail, with the browser announcing detail like "Meter with a value of 80; suboptimal. Maximum 100, minimum 0, optimal value 90."

They say a picture says a thousand words, and part of your job as a designer---usually in collaboration with engineers and content strategists---is to reverse-engineer the picture and think about what those thousand words should be. Communicating effectively in writing is a valuable skill for any designer, and doubly so when the writing is an instrinsic part of the user experience.

👋🏼 make it easy to interact with

In 2015, Apple added a feature to macOS that allowed you to vigorously shake your mouse in order to locate the cursor. What was nice about this feature was that it piggy-backed on a behaviour people were already doing---shaking their mouse to find the cursor---and aiding the user by temporarily enlarging the cursor.

This is a good example of adapting to people's intuitions or habits to make interactions more seamless. But in a lot of digital design, we tend to neglect this kind of approach. Oftentimes, digital product teams (usually "growth" teams) try to coach users to adopt a feature through a barrage of tooltips, overlays, coachmarks, and guided tours. These tours usually interrupt the user's actual intent, and misattribute people's adoption of a feature as a desire to use it rather than what it is---a desperate attempt to dismiss the guidance.

Instead, making features easy to interact with often means making them available at the right time and place. The same goes for information; progressively disclosing information when it is most relevant can help make sure users can confidently make informed decisions.

Some questions you can ask about your design to test its usability include:

Does it work with both fine (e.g. mouse or stylus) and coarse (e.g. touch or gaze) cursor inputs?
Can it be navigated using only a keyboard?
Can it be navigated using voice control and relying on clear sections?
Does it work and/or make sense without JavaScript or when printed onto a page?
Does it work without access to hover states (such as when using a stylus or touch input) or animations (such as on an e-ink digital reading device)?
Does it work with temporary internet connectivity loss?

Additionally, you should consider building on top of existing paradigms, conventions, and common user behaviours before trying to introduce novel or newly-invented interaction types. Your users will thank you for meeting them where they are and matching their expectations for how the product or service should work.

🐣 make it easy to understand

We've likely all found ourselves at the receiving end of a seemingly-endless script of terms and conditions. It's easy to feel like such documents are almost designed to confuse, rather than soberly explain, what a user is signing up for. I'm sure I'm also not alone in having misintepreted how a faucet or bathroom door lock is supposed to work.

All these moments of friction, whether intentional or not, represent an outsized cognitive load; the design is asking for more of my brainpower than I was prepared to commit. Our responsibility as designers is to give the user as much help as possible in:

Properly understanding the commitment we're asking from them
Adjusting expectations when necessary
Leading them to where they need to be
Getting on with their lives after having accomplished what they needed to.

Cognitive assistance is the culmination of everything we've covered so far: intentionally designing how an interface looks, sounds, and behaves are important steps in designing something that makes sense. But there are more concrete things you can do to make strides in understanding.

Making your designs clear can mean making it obvious to users what their next step (or steps) should be. For example, using brand colours very selectively to only highlight the page's "opinion" on what a user should do next (i.e. everything on a social media "Profile" page could be in grayscale, with a "Create Post" button in the brand colour to differentiate it as a primary action).

Similarly, spelling out acronyms and abbreviations (at least on their first occurence) can help make the content widely accessible, rather than leaving people confused or missing context.

📌 conclusion

If you've made it this far, you'll notice that as we've gotten deeper into these concepts, we've thought less explicitly about people's different abilities, and focused ruthlessly on access. Access is (or should be) universal, regardless of ability.

Our environment is constantly changing our access to products, through power cuts, spotty WiFi connectivity, or the need to use a privacy screen. Likewise, throughout our lives, our physical needs will change dramatically: breaking a leg, carrying a child, experiencing age-induced vision or hearing loss, or suffering a migraine are all commonplace events that change what we need from our devices and products.