This article, while not fully about typography, shouldn’t be dismissed by anyone working with type whether directly or indirectly; it does a pretty good job at outlining the major pain points regarding accessibility in the web, including of course, typography.
This is not to say that all frustrating experiences are inaccessible, but there are definitely overlaps between bad UX and inaccessibility. An easy way to think of this is that a bad experience for the general public is usually much worse for a disabled or impaired individual.
Having worked in accessibility concerns non-stop for the past 2 months at Shopify, I have never understood so well how easy it is to accidentally dismiss accessible design. We’re often trained to, by design, craft interfaces and experiences that impact negatively users with poor vision, poor hearing, with movement and mobility issues, and others. First, let’s take a moment to introduce the Web Content Accessibility Guidelines (WCAG). Your design must (not should) be:
Perceivable: Can I consume content on my site in different ways? (Having closed captions for a video, for example)
Operable: Can the site function without confusion and without the use of a mouse or complex interactions?
Understandable: Can a user understand how the user interface of the site functions and the information on the site?
Robust: Can different assistive devices (screen readers, for example) understand the website?
For the sake of the newsletter’s topic, I’ll cover only the typography related guidelines. The first one relates to hierarchy:
Type hierarchy for your site is very important — it allows people the opportunity to parse through information fast. Accessible sites are no different. When designing a page, you should start with an <h1> and each subsequent type style should nest below the <h1>. Also, each nested section of your site should start with a consistent type style (typically an <h2>)
Users with screen-readers will often first get an overview of the page using software that grabs all the heading elements; not only is a clear title hierarchy important from a visual standpoint, it’s also your duty to ensure they’re being implemented with the right HTML tags.
Visual presentation of text is not just for visual candy purposes; large blocks of text, for example, can be a big pain for reading disabilities:
Text blocks with narrow widths are easier to read for all people, especially those with reading or vision impairments. Because of this, the WCAG recommends keeping a line of text’s character count below 80 characters. (For reference, Medium has approximately an 80 character count line width on desktop size.)
And of course, the big one, that typically beginner designers tend to do more often: contrast, as in, not enough of it (the good old shades of light grey problem). The contrast between a text’s background and foreground colours has a tremendously high impact on the legibility of a design:
The WCAG states that your text should have at least a 4:5:1 contrast ratio to achieve an AA rating and a 7:1 contrast ratio to achieve an AAA rating.
You can even use Sketch Plugins
to help you assess the contrast of your colours. There are, of course, a lot more guidelines in the article, mostly concerning other visual aspects other than typography, so I’ll leave it up to you to revisit them.