Illustration by

Accessibility Whack-A-Mole

I don’t believe in perfection. Perfection is the opiate of the design community.

Article Continues Below

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?#section1

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#section2

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?#section3

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.

Progress#section4

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#section5

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#section6

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.

Illustration showing examples of capital ‘I’, lowercase ‘l’, and numeral ‘1’
Capital I, lowercase l, and numeral 1 show how Progress Two metamorphosed into Wellcome Bold. (All glyph illustrations by Eleanor Ratliff.)

Modern modem#section7

In some typefaces, particularly if not set well, r and n can run together to appear to form an mmodern may be read as modem, for example. Breaking the flow between the two shapes differentiates them better.

Illustration showing how lowercase ‘r’ and ‘n’ were modified to prevent the two glyphs from running together when set next to each other
From Progress Two to Wellcome Bold: lowercase r and n were tweaked to prevent the two glyphs from running together when set next to each other.

Openings#section8

Counters are the openings in the middle of letterforms. Generally speaking, the bigger the counters, the more distinct the letters.

Illustration showing counters in ‘b’, ‘a’, ‘e’, ‘o’, and ‘q’ in Wellcome Bold
Highlighted counters in Wellcome Bold’s lowercase b, a, e, o, and q.

Mirroring#section9

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.

Illustration showing how lowercase ‘d’ and ‘b’ were modified to make them more easily distinguishable in Wellcome Bold
Lowercase d and b were modified to make them more easily distinguishable in Wellcome Bold.

Word shapes#section10

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#section11

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#section12

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.

Type#section13

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.

Space#section14

Think carefully about spaces between, around, and within letterforms and clusters of words.

Words#section15

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?#section16

Nope.

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.

Pragmatic perfection#section17

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.

Additional resources#section18

About the Author

Eleanor Ratliff

Eleanor Ratliff is a designer from London who is passionate about accessibility, pubcats, and the tactile qualities of knobs, handles, and levers. Happiest when getting her hands dirty, she thinks with a pen and communicates with words, sketches, and sound effects. Sometimes she talks on Twitter, but mostly she photos on Instagram.

17 Reader Comments

  1. 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.

  2. 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.

  3. @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.

  4. 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.

  5. 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.
    http://www.cbsnews.com/news/60-minutes-americans-with-disabilities-act-lawsuits-anderson-cooper/

    I feel for those who have a disability, but a line has to be drawn somewhere.

  6. @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.

  7. I hoped our story would give encouragement that bold design and accessibility needn’t be mutually exclusive.

  8. 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.

  9. 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.)

  10. 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.

  11. 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.

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