Beautiful accessibility: 5 practical tricks
Some improvements that you can implement on your website to make it accessible without sacrificing the aesthetics or user experience
The fictional universe of the “X-Men” is, perhaps, one of the brightest, most prominent, and early mainstream examples of disability representation in popular media. A school of mutants, founded and led by a wheelchair-bound Professor Xavier, is a safe haven for those who are rejected by society for being different. Mutants possess superpowers that at times transform their looks and make it exceptionally hard, if at all possible, for them to live among humans. Some of them require necessary adjustments that go beyond anything humans can supply: Cyclops shoots laser beams from his eyes, Rogue can kill a person with her touch, and having a place that accepts them for who they are, welcomes them, and makes them comfortable in their (super)bodies is their only hope for a happy life.
At the same time, the school doesn’t resemble a hospital or a research laboratory. X-team’s outfits are tailored to each individual, gadgets that allow them to function—from wheelchairs to protective glasses—are sleek and comfortable, and the school, residing in the old mansion, features spaces, designed to inspire and encourage.
X-Men’s mutations may not necessarily be a direct allegory for disabilities (we might need a lot more than one article to perform a decent discursive analysis of the mutant’s universe), and the obvious fictional elements make it less convincing. Nevertheless, Xavier’s school presents an inspiring example of necessary adjustments, reasonable accommodations, and inclusive design that create something both functional and beautiful.
In today’s issue of “The Accessibility Apprentice”, we are going to discuss how applying the principles of inclusive design and following the best practices creates gorgeous web interfaces. Buckle up.
This newsletter remains free thanks to the power of will and passion for accessibility. You can support the author by buying him a cup of coffee.
Gorgeous focus state
Focus states are as essential as they are neglected. For people, navigating the web using keyboards (or other input devices), focus states serve to signal which element on the page they are interacting with. Regular users will most likely recognise them from scrolling through titles on their Netflix TV app, playing video games, or, perhaps, navigating menus on their old Nokia phones.
By default, browsers provide focus states to interactive elements, such as buttons, but developers often make them invisible: some are simply not aware of their purpose, others guard the precious “visual consistency” and “clean aesthetics” and remove those ugly bright outlines completely. As a result, navigating web pages without a mouse is a painful challenge, at least in part due to bias and lack of awareness.
But what if focus states could contribute to making the UI feel clean instead of cluttering it? What if, by integrating them into your design language, you could create visually compelling and infinitely more accessible interfaces, not having to choose between usability and aesthetics?
Thomas Günther (@medienbaecker) composed a thorough guide for web developers and designers, outlining the best practices for building beautiful and functional focus states. In a nutshell, the formal AAA-requirements are fairly basic: focus outlines should be visible on any background, be at least 2px wide, and provide a contrast ratio of at least 3:1. Thomas provides several practical tips for developers, who wish to apply animations for additional visual feedback or make the outlines more flexible with variable colours.
Making focus states beautiful is barely harder than removing them completely, but their impact on both usability and aesthetics may be tremendous.
Breathtaking buttons
Buttons (and other elements that resemble buttons) are one of the most important elements of the web: we click buttons all the time, submitting forms, launching pages, and sending search queries. At the same time, crafting accessible buttons appears to be a challenging task for designers and developers alike. For instance, many do not seem to know the difference between buttons and links, and as a result, the web is riddled with links, masquerading as buttons, making the digital space infinitely less accessible.
Technicalities aside, accessible buttons are almost doomed to be beautiful. Large enough to fit nicely under both a cursor and a thumb, bright and clear, with gorgeous hover and focus states, they make every page shine. Buttons do not have to be boring either: fancy hover animations, for example, are welcome, as long as they come with a simple, accessible fallback. Consider users with low-end devices or a slow Internet connection, make sure they do not see an empty rectangle instead of a glorious CTA.
Fabulous colours
WCAG 2.0 success criterion 1.4.3 prescribes: “the visual presentation of text and images of text has a contrast ratio of at least 4.5:1”. To human, it translates roughly as:
Use colours with high contrast for your text
This requirement ensures that the copy on your web page is easy to comprehend. The colour contrast requirement benefits every user: from people with low vision and colour blindness to users, opening your website on their mobile phones on an especially sunny day.
That doesn’t mean, however, that your choice is restricted to several shades of white and black. With websites like RandomA11y and various colour contrast checkers, designers can create gorgeous colour combinations for their web pages without sacrificing text legibility.
Beautiful forms
We can talk ad nauseam about the importance of accessibility when it comes to forms. In fact, “The Accessibility Apprentice” has several issues dedicated to the topic, where we discuss how meeting the accessibility criteria helps create pleasant experiences, benefitting your product, users, and business.
The aesthetics may seem like the most critical element of forms design, but just like with buttons and colours, accessible requirements leave enough room for creative endeavours.
Accessible forms are minimal, easy to scan and navigate, and do not leave the user confused with their layout, copy, or suggested interactions. They communicate requirements and errors timely and clearly, leaving no room for ambiguity or doubt. They are kind and forgiving, and do everything in their power to guide the user with their always visible labels, helper text, and native components.
Fantastic typography
Finally, choosing the right font for the website is one of the toughest challenges for a designer, whose font library includes anything other than Inter and SF Pro. Luckily, the world is full of legible (or should I say, Hyperlegible?) font families that look ridiculously good while ensuring great readability.
Don’t stick with one font family, though: Andrée Lange wrote a great breakdown of what makes a font accessible with plenty of practical recommendations.
Accessibility standards may seem limiting at first: they are somewhat rigid, often confusing, and at times quite restrictive, but within their boundaries, creativity can truly thrive.