I don’t believe in perfection. Perfection is the opiate of the design community.
Designers sometimes like to say that design is about problem-solving. But defining design as problem-solving is of course itself problematic, which is perhaps nowhere more evident than in the realm of accessibility. After all, problems don’t come in neat black-and-white boxes—they’re inextricably tangled up with other problems and needs. That’s what makes design so fascinating: experimentation, compromise, and the thrill of chasing an elusive sweet spot.
Having said that, deep down I’m a closet idealist. I want everything to work well for everyone, and that’s what drives my obsession with accessibility.
Whose accessibility, though?#section2
Accessibility doesn’t just involve improving access for people with visual, auditory, physical, speech, cognitive, language, learning, and neurological difficulties—it impacts us all. Remember that in addition to those permanently affected, many more people experience temporary difficulties because of injury or environmental effects. Accessibility isn’t a niche issue; it’s an everyone issue.
There are lots of helpful accessibility guidelines in Web Content Accessibility Guidelines (WCAG) 2.0, but although the W3C is working to better meet the complex needs of neurodiverse users, there are no easy solutions. How do we deal with accessibility needs for which there are no definitive answers? And what if a fix for one group of people breaks things for another group?
That’s a big question, and it’s close to my heart. I’m dyslexic, and one of the recommendations for reducing visual stress that I’ve found tremendously helpful is low contrast between text and background color. This, though, often means failing to meet accessibility requirements for people who are visually impaired. Once you start really looking, you notice accessibility conflicts large and small cropping up everywhere. Consider:
- Designing for one-handed mobile use raises problems because right-handedness is the default—but 10 percent of the population is left handed.
- Giving users a magnified detailed view on hover can create a mobile hover trap that obscures other content.
- Links must use something other than color to denote their “linkyness.” Underlines are used most often and are easily understood, but they can interfere with descenders and make it harder for people to recognize word shapes.
You might assume that people experiencing temporary or long-term impairment would avail themselves of the same browser accessibility features—but you’d be wrong. Users with minor or infrequent difficulties may not have even discovered those workarounds.
With every change we make, we need to continually check that it doesn’t impair someone else’s experience. To drive this point home, let me tell you a story about fonts.
A new font for a new brand#section3
At Wellcome, we were simultaneously developing a new brand and redesigning our website. The new brand needed to reflect the amazing stuff we do at Wellcome, a large charitable organization that supports scientists and researchers. We wanted to paint a picture of an energetic organization that seeks new talent and represents broad contemporary research. And, of course, we had to do all of this without compromising accessibility. How could we best approach a rebrand through the lens of inclusivity?
To that end, we decided to make our design process as transparent as possible. Design is not a dark art; it’s a series of decisions. Sharing early and often brings the benefit of feedback and allows us to see work from different perspectives. It also offers the opportunity to document and communicate design decisions.
When we started showing people the new website, some of them had very specific feedback about the typeface we had chosen. That’s when we learned that our new headline font, Progress Two, might be less than ideal for readers with dyslexia. My heart sank. As a fellow dyslexic, I felt like I was letting my side down.
My entire career had been geared toward fostering accessibility, legibility, and readability. I’d been working on the site redevelopment for over a year. With clarity and simplicity as our guiding principles, we were binning jargon, tiny unreadable text, and decorative molecules.
And now this. Were we really going to choose a typeface that undid all of our hard work and made it difficult for some people to read? After a brief panic, I got down to some research.
So what makes type legible?#section4
The short answer is: there is no right answer. A baffling and often contradictory range of research papers exists, as do, I discovered, companies trying to sell “reasonably priced” (read: extortionate) solutions that don’t necessarily solve anything.
Thomas Bohm offers a helpful overview of characters that are easily misrecognized, and the British Dyslexia Association (BDA) has published a list of guidelines for dyslexia-friendly type. The BDA guidelines on letterforms pretty much ruled out all of the fonts on our short list. Even popular faces like Arial and Helvetica fail to tick all the boxes on the BDA list, although familiar sans serifs do tend to test well, according to some studies (PDF).
And it’s not just dyslexia that is sensitive to typography; we recently had a usability testing participant who explained that some people on the autism spectrum struggle with certain fonts, too. And therein lies the problem: there’s a great deal of diversity within neurodiversity. What works for me doesn’t work for everyone with dyslexia; not everyone on the autism spectrum gives a flip about fonts, but some really do.
At first my research discouraged and overwhelmed me. The nice thing about guidelines, though, is that they give you a place to start.
Some people find fonts specifically designed for dyslexia helpful, but there is no one-size-fits-all solution. Personally, I find a font like Open Dyslexic tricky to read; since our goal was to be as inclusive as possible, we ultimately decided that Open Dyslexic wasn’t the right choice for Wellcome. The most practical (and universal) approach would be to build a standards-compliant site that would allow users to override styles with their own preferred fonts and/or colors. And indeed, users should always be able to override styles. But although customization is great if you know what works for you, in my experience (as someone who was diagnosed with dyslexia quite late), I didn’t always know why something was hard, let alone what might help. I wanted to see if there was more we could do for our users.
Mariane Dear, our senior graphic designer, was already negotiating with the type designer (Gareth Hague of Alias) about modifying some aspects of Progress Two. What if we could incorporate some of the BDA’s recommendations? What if we could create something that felt unique and memorable, but was also more dyslexia friendly? That would be cool. So that’s what we set out to do.
Welcome, Wellcome Bold#section6
When I first saw Progress Two, I wasn’t particularly keen on it—but I had to admit it met the confident, energetic aspirations of our rebranding project. And even though I didn’t initially love it, I think our new customized version, Wellcome Bold, has “grown up” without losing its unique personality. I’ve come to love what it has evolved into.
We used the BDA’s checklist as a starting point to analyze and address the legibility of the letterforms and how they might be improved.
Illusion number 1#section7
If uppercase I, lowercase l, and numeral 1 look too similar, some readers might get confused. We found that the capital I and lowercase l of Progress Two weren’t distinct enough, so Hague added a little hook to the bottom of the l.
In some typefaces, particularly if not set well, r and n can run together to appear to form an m—modern may be read as modem, for example. Breaking the flow between the two shapes differentiates them better.
Counters are the openings in the middle of letterforms. Generally speaking, the bigger the counters, the more distinct the letters.
Because some people with dyslexia perceive letters as flipped or mirrored, the BDA recommends that b and d, and p and q, be easily distinguishable.
Most readers don’t read letter by letter, but by organizing letterforms into familiar word shapes. We modified Progress Two not just to make things easier for readers who are dyslexic; we did it as part of a wider inclusive design process. We wanted to make accessibility a central part of our design principles so that we could create an easier experience for everyone.
Test, test, and test again#section12
In the course of our usability testing, we had the good fortune to be able to work with participants with accessibility needs in each round, including individuals with dyslexia, those on the autism spectrum, and users of screen readers.
Once we started introducing changes, we were anxious to make sure we were heading in the right direction. Nancy Willacy, our lead user experience practitioner, suggested that a good way to uncover any urgent issues would be to ask a large number of respondents to participate in a survey. The media team helped us out by tweeting our survey to a number of charities focused on dyslexia, dyspraxia, autism, and ADHD, and the charities were kind enough to retweet us to their followers.
Although we realize that our test was of the quick-and-dirty variety, we got no feedback indicating any critical issues, which reassured us that we were probably on the right track. Respondents to the survey had a slight preference for the adjusted version of Progress Two over Helvetica (we chose a familiar sans serif as a baseline); the unadjusted version came in last.
Anyone can do it#section13
Even if you don’t have a friendly type designer you can collaborate with to tailor your chosen fonts, you can still do a lot to be typographically accessible.
When selecting a typeface, look for letterforms that are clear and distinct.
- Look closely and critically. Keeping the checklists we’ve mentioned in mind, watch for details that could potentially trip readers up, like shapes that aren’t well differentiated enough or counters that are too closed.
- To serif or not to serif? Some research has shown that sans serifs are easier to read on screen, since, especially at lower resolutions, serifs can get muddy, make shapes less distinct, or even disappear altogether. If your existing brand includes a typeface with fine serifs or ornamental details, use it sparingly and make sure you test it with a range of users and devices.
- Use bold for emphasis. Some research has shown that italics and all-caps text reduce reading speed. Try using bold for emphasis instead.
- Underline with care. Underlines are great for links, but a standard text-decoration underline obscures descenders. In the future, the text-decoration-skip property may be able to help with that; in the meantime, consider alternatives to the default.
Think carefully about spaces between, around, and within letterforms and clusters of words.
- Choose comfortable line lengths. Advice on an ideal line length (or measure) varies, but consider between 60 and 70 characters per line safe.
- Be generous with line height. Ideal line height (or leading) will depend on the typeface you choose, but a good rule of thumb is to start with one and a half times the font size and refine from there.
- Practice sensible letter-spacing. Too tight or loose can present difficulties, a bit like jeans.
The words you use are just as important as what you do with them.
- Keep it short. Avoid long sentences. Keep headings clear and concise.
- Avoid jargon. Write for your audience and cut the jargon unless it’s absolutely necessary. Acronyms and academic terms that might be appropriate for a team of specialists would be totally out of place in a more general article, for example.
So everything’s fixed, right?#section17
There is no perfect typeface. Although we worked hard to improve the experience of the Wellcome site, some people will still struggle with our customized headline font, and with the Helvetica, Arial, sans-serif font stack we’re using for body text. However hard we try, some people may need to override defaults and choose the fonts and colors that work best for them. We can respect that by building sites that allow modification without breaking.
- Build with web standards. Ensure that whatever adaptive technologies or techniques people use will work with your site.
- Think twice about icon fonts. All of your icons will disappear if someone overrides your site’s fonts.
- Show people how to override font styles. Would your users benefit from a how-to like the BBC’s?
The trouble with expecting perfection in one go is that it can be tempting to take the safe route, to go with the tried and tested. But giving ourselves room to test and refine also gives us the freedom to take risks and try original approaches.
Putting ourselves out there can feel uncomfortable, but Wellcome wants to fund researchers that have the big ideas and the chutzpah to take big risks. So shouldn’t those of us building the site be willing to do the same? Yes, maybe we’ll make mistakes, but we’ll learn from them. If we had chosen a safe typeface for our headline font, we wouldn’t be having these conversations; we wouldn’t have done the research that led us to make changes; we wouldn’t discover new issues that failed to come up in any of our research.
The process sparked much debate at Wellcome, which opened doors to some intriguing opportunities. In the future, I won’t be so reticent about daring to try new things.
17 Reader Comments
I would like to add that justified text is also problematic for many, not just those with dyslexia. This would slot under the ‘Space’ heading in the ‘Anyone can do it’ section.
FWIW, I collected some research into typefaces designed specifically for users with dyslexia and overall found that they offer little to no benefit.
As such, the approach outlined here (tweak an existing typeface, test) feels like a better approach that can benefit more users.
I’m curious as to which mediums would most benefit from tackling these types of accessibility challenges? Obviously readership based sites, news, media, blogs ,etc. But what about photo and video heavily content? For example, I built a design gallery for a pool company and while there are many things I need to do to make it more mobile friendly, I wonder how big of a priority font accessible is in comparison to improving the visual experience.
@richardwilson, for video-heavy sites it matters in how you present closed captions and/or transcripts. For photo-heavy sites it matters for photo captions. Arguably typeface accessibility is not an either/or with improving the visual experience, it is integral to improving the visual experience.
That’s a good tip Adrian, justified text can really disrupt the rythm and flow of words, and it underlines how small design decisions can make a big difference.
Makes sense Adrian, thank you.
This whole topic infuriates me. I build websites for businesses where artistic design is very important. In fact it is how I get business. If I have to “dumb down” my designs so that a screen reader or whatever is used for the impaired, it can drastically change the way something looks and/or the amount of time it takes to create. I understand it is a design challenge, but most small businesses cant afford to pay for this. I can appreciate the fact that certain measures need to be in place to accommodate those who unfortunately have deal with their injury/disability.
But where do we draw the line?
There are a lot of scum bag lawyers taking advantage of these laws and are actively going after small businesses that are “not in compliance” I can understand requiring a business to put in a ramp for wheelchairs, but the rest of these laws are B.S. Something like a website is TOO SUBJECTIVE. Who should be sued? the person building the website, or the technology/devices that help the impaired? In my opinion, the tech needs to be improved. Either way, nobody should be sued over it. I feel like its like suing a museum because a blind person cant understand a painting or suing a newspaper company because its not in braille.
Lawyers are taking advantage of this and it is complete B.S.
I feel for those who have a disability, but a line has to be drawn somewhere.
@theshae, you are equating two things that are different. This article talks about users who can see and therefore would benefit from a typeface that is clearer. While some may use a screen reader for additional help, that is not the point of this piece. The follow-on benefits are better overall typography and layout, which makes for a more readable site for all users. I also get the sense nobody mandated the author do this work.
The other thing you are citing is a CBS report that is outside the scope of this article. Regardless, I encourage you to read these two responses, one of them by someone who was interviewed for the piece but was cut: “60 Minutes Slams ADA, Boosts Trump Agenda” and “Anderson Cooper: What Were You Thinking?”
If you would like to learn more or discuss your frustration, ping me on Twitter. I am happy to listen and maybe point you to some resources that can help. I understand how it can appear to be quite a task but you may be surprised how easily (and inexpensively) it can be done.
I hoped our story would give encouragement that bold design and accessibility needn’t be mutually exclusive.
Very interesting i just want to say thank you ! emily from http://fr.viadeo.com/fr/company/piscine-cop
For anyone thinking they don’t have time for accessibility, or wonder how to make the case for accessibility to clients or stakeholders I wholeheartedly recommend you read Laura Kalbag’s article 24ways.org/2013/why-bother-with-accessibility.
Also Heydon Pickering’s great piece on inclusive design makes the argument to make inclusivity an intrinsic part of design practice rather than an accessibility add on 24ways.org/2016/what-the-heck-is-inclusive-design.
Loved this article, especially since choosing typefaces are definitely one of my weak points — and lately, so is reading past about 8pm. (Yay turning 40!)
I hadn’t realized that the ligatures (did I get that one right?) could be part of the problem.
I know the small-A-big-A pattern for changing text size has been around for a while. Has anyone experimented with providing a font menu for users to choose from? Is it better to provide override instructions? I’m thinking convincing my dad to use the override instructions would be harder than getting him to try a menu, and would remove some of the friction from the interaction. (Sorry Dad.)
Thanks for writing this post. In China most of developers always make equivalence between accessibility and the blind. However web accessibility means much more.
Could you please authorize Chinese translation to me? I do want to translate it into Chinese to let more developers know that. The translated post will be post on my blog and of course with the original link.
Hi Anne, thanks for your comment. I so often hear “our users don’t need have accessibility needs”, but you describe an experience many of us have, indeed the majority of us us websites under less than perfect circumstances every day.
Although the style sheet switching on websites (often represented as an ‘aA’ icon) helps some people, designers have to attempt to offer what’s most useful, but given a multitude of viewing preferences risks missing a lot off people. I think we’re gradually overcoming the fallacy that most people enjoy reading tiny text and the move towards larger clearer typography will benefit everyone.
If you need bigger text some sites are trickier to read than others so the benefit of altering your (or your dad’s) viewing experience on a browser level is that you can tailor it to personal preference and apply it to all websites. Mozilla has an easy to follow guide for firefox support.mozilla.org/en-US/kb/change-fonts-and-colors-websites-use.
I bumped up the accessibility settings on my mums phone the other day, sadly the phone settings turned out to be a bit of a blunt instrument simply setting fonts to 120% original size – so sites with already generous font size ended up looking a bit silly, so not always a perfect solution.
Thanks kmokidd, all the info you need for translations is here: alistapart.com/about/copyright.
Very enlightening article. Interesting how a dyslexic person perceives font shapes.
It looks like Safari are now displaying underlines with text-decoration-skip by default https://css-tricks.com/almanac/properties/t/text-decoration-skip/ perhaps there’s hope in the future for link underlines and descenders to peacefully co-exist.
Got something to say?
We have turned off comments, but you can see what folks had to say before we did so.
More from ALA
Personalization Pyramid: A Framework for Designing with User Data
Mobile-First CSS: Is It Time for a Rethink?
Designers, (Re)define Success First
Breaking Out of the Box
How to Sell UX Research with Two Simple Questions