Wcag Typography

[Serafin Sonnier]

Firstneither Web Content Accessibility Guidelines (WCAG) nor Section 508 specifies typefaces nor even a minimum font size. However, government websites need to have clear and consistent headings and highly legible text. The bottom line is typography choices have a huge impact on accessibility.

An accessible font means using a typeface designed for easy reading by a diverse audience, including individuals with visual impairments such as low vision or reading disability such as dyslexia. Accessible typography ensures that textual information is accessible to all users, irrespective of their abilities or disabilities.

Most print publications use a serif font, one with the small flourishes at the tip of letters such as Times New Roman. With serif fonts being the norm in print, it might seem odd accessibility regulations require sans serif but there is good reason. For people with good vision, a typeface with serifs is slightly easier and faster to read than one without serifs. Typically, for people with low vision, the serifs significantly degrade legibility. The importance of using a sans serif typeface is especially important for digital content since it is typically read on-screen and not in hardcopy print.

1.4.1 Use of Color: Color must not be the only means of conveying information. If color signifies meaning, incorporate additional visual cues like a symbol or text to convey the information.

1.4.3 Contrast: Text and images of text must have a contrast ratio of at least 4.5:1. Large text, such as 16 pt bold, and icons need a 3:1 ratio between foreground and background colors. This contrast requirement applies to text over a gradient or background image. An author might put a dark rectangle behind light text, or use black text with a thin white outline effect.

1.4.4. Resize Text: The reader must be able to resize text to at least to 200 percent without loss of content or functionality. Web browsers and word processors include this feature by default, but document authors can interfere with this functionality.

1.4.5 Images of Text: Whenever possible, use actual text and not images or pictures of text. This gives the reader control over the presentation of text. Images of text also degrade and become jagged when high levels of screen magnification are used.

1.4.10 Reflow (WCAG 2.1 AA): Readers using assistive technology for magnification are essentially using a window half the typical size. Content should reflow and not require horizontal scrolling when read using a small, resized window.

Federal websites are required by the 21st Century Integrated Digital Experience Act (21st Century IDEA) to utilize the U.S. Web Design System (USWDS). This design system offers guidance, components, design tokens, and utilities for content creators, covering typography and typesetting for enhanced accessibility. The import role of the USWDS was reinforced OMB M-23-22.

Accessible fonts and typography are indispensable components of Section 508 compliance and digital inclusivity. By considering the guidelines and recommendations outlined here, content creators can ensure their digital content is accessible to all, fostering a more inclusive and equitable online environment.

Accessible typeface helps ensure those experiencing disabilities or impairments can easily and equally access online content. This guide explains why typography is such a critical component of universal design and provides best practices for you to utilize throughout the process.

Always consider the experiences of all potential users throughout every stage of the design process, including those with low vision, learning disabilities, aphasia, dyslexia, trouble concentrating, or low literacy. Actively involve users via focus groups, user testing, surveys, and other methods, and make improvements based on feedback.

As accessibility efforts improve, this helps ensure your product or service is available to everyone. The goal is to meet people where they are, minimize friction, and create a seamless user experience.

There is a lot to consider when it comes to accessible content writing, and we will not address this topic in detail in this blog. However, the following key considerations and linked resources may be a good starting point:

We are talking about the Web Content Accessibility Guidelines (WCAG). They are an internationally recognised benchmark for web content accessibility, with the overall goal of making the web more accessible to people with disabilities. WCAG is frequently revised and updated; the current version is WCAG is 2.1.

However, WCAG 2.1 doesn't have a lot to say about typography itself. For example, it doesn't include detailed advice about things like choosing accessible fonts, specifications for text styling like font sizes and weights or text layout.

Somewhat counterintuitively, typography can also impact people who are blind or use assistive technology like screen readers. For example, screen reading software reads aloud on-screen content like websites or documents, and typography can impact how text content is read. This blog series will cover a few key examples of this.

Colour blindness is a common term often used to describe 'colour vision deficiency. True colour blindness (the inability to see any colour, known as Monochromacy) is very rare. Colour vision deficiency (difficulty perceiving and distinguishing some colours, I.e. Red-green colour vision deficiency) is far more common.

Colour contrast is a critical aspect of design that considers all content, not just typography. This blog series will provide some tips and resources for determining accessible colour contrast for text content.

Firstly, it's important to acknowledge that this is an extremely diverse functional group encompassing many different disabilities and every person's experiences and needs are unique. At Digital Access, we work with and consider any individuals who identify as neurodiverse. This most commonly includes people with Dyslexia, people with Autism and people with Attention-deficit/hyperactivity disorder (ADHD).

The image below shows a number of the most popular fonts. They are actually different variations of the one' typeface' Helvetica, which comes in light, regular, bold, italicised and other font varieties. 'Typeface' is the name for this group of complementary fonts.

Generally, when you think 'font', you probably think of a typeface, and the terms are often used interchangeably. However, this is a useful distinction that will be explored later in this blog series. For clarity, I'll use the word typeface throughout the series.

As discussed above, there are additional barriers to legibility and readability for people with disability that should be considered. Legibility (the ability to distinguish individual letters) should be considered a baseline minimum as it doesn't guarantee people will have a good experience reading and consuming content. We want to aim for readability, where content is engaging, comfortable and easy to read.

The below image provides an example of two different typefaces (set at the same text size). The typeface shown on the right has a taller x-height and, therefore, larger lower-case letters in proportion to upper-case letters. This makes it more legible.

Apertures and counter spaces are closely related. If a typeface has a more open aperture, it is likely also to have larger counter spaces. As demonstrated in the image below, typefaces with larger counter spaces are generally more legible as larger white spaces help readers distinguish letter shapes easily.

The below image compares a Script typeface that has ligatures to a Cursive typeface that does not have ligatures. Both typefaces have a handwritten style, but the cursive typeface without ligature is more legible.

Screen reader software can also struggle to read some typefaces with ligatures depending on the code that sits behind the text. Sometimes these are not read as letters but unfamiliar symbols. Therefore, testing text content with a screen reader is always recommended.

The spaces between letters in a word can impact legibility. This is called ' tracking' when we adjust the horizontal spacing between all letters in a word or section of text. This is called ' kerning' when we only adjust the horizontal spacing between two adjacent letters.

WCAG 2.1 (1.4.12) requires that users are able to adjust tracking to at least 0.12 times the font size and adjust word spacing to at least 0.16 times the font size. The website does not require this built-in functionality but should not block programs that allow users to customise text content in this way. No specifications for default tracking are provided.

When selecting a typeface, look for typefaces with proportionate letters spacing (that varies according to the size of the character). We generally recommend avoiding monospaced typefaces (uniform letter size and spacing), as these can be more difficult to read for long passages. The below image compares an example of a monospaced typeface with a proportionate typeface.

When reading, we recognise letters and words based on their shape. Unfortunately, words in ALL CAPS are uniform and rectangular, making them more difficult to read, particularly for long sections of text.

Avoiding or limiting the use of images of text is highly recommended. When users with low vision zoom in to view content, images of text can become pixelated and often illegible. Images of text are also inaccessible to screen reader users unless the appropriate alternative text is applied to the image.

The typography scale gives service teams a standardised set of font sizes, which they can use to style headings, paragraphs and other pieces of text. The typography scale helps teams make sure text looks consistent within their own service and across all services on GOV.UK.

We believe working in the open makes things better. This blog is for people designing all aspects of public services, from local to central government, to share their projects, ideas and concepts, or just to think out loud.

3a8082e126