Choosing the Right Font and Its Presentation: A Key to ADA Accessible Websites

The web is a place of public accommodation where everyone has an equal right to participate, to access, present, and retrieve information despite any disability. The Americans with Disability Act (ADA) was passed to ensure equal opportunities for individuals with disabilities. While the internet was still in its infancy at the time, the reality is now that it applies to all virtual places, including digital services and online content.

To fulfill their legal and moral obligations, all organizations and businesses are required to make their websites and online channels accessible to disabled people. One of the key pillars of designing an accessible website lies in the legibility and readability of its text content. This is only achievable using accessible fonts.

We have organized this guide to help our readers answer questions like What are accessible fonts and what is the best font to use for a website? Read on to find out about the details of ADA approved fonts and their characteristics. We will also cover some of the features needed to make a website accessible to people with visual impairments, dyslexia, and reading disorders.

An overview of font families

Fonts and different font families hold an important place in digital typography. A font family is made up of a set of different fonts that share similar characteristics and attributes pertaining to design styles. Understanding their properties can help web designers choose the most accessible fonts for their websites. While there are many font families, here we are listing four of them, which can also be configured by a user in a web browser:

• Serif: Serif fonts have decorations or adornments at the end of a stroke in a letter or symbol.
• Sans-Serif: Sans is the French word for “without”. Sans-serif fonts are simpler and do not have the extended lines or features at the end of each stroke in a letter or symbol.
• Monospace: Monospace fonts have the same width for each letter or symbol. They are also called fixed width or non-proportional fonts.
• Cursive: Cursive fonts are written in a flowing manner resembling handwritten words. The individual letters may be joined together to give an artistic impression.

Units of measurement

There are various units for defining font sizes:

• Ems (em): This unit defines a font size relative to the size of the parent element in an HTML page. For example, if the parent element in HTML is 14 px, then 2 em would make it 28 px.
• Rems (root ems): When using rem units, all fonts are defined relative to the font size of the root element in HTML. Hence, all text in the HTML is specified relative to one base font and won’t depend upon where the text is placed in the web pages’ HTML hierarchy.
• Pixels (px): This is an absolute unit of measurement and is not based on measurement against a base element.
• Points (pt): Points are also an absolute metric. WCAG use CSS3 values, where 1pt is 1.333 px. Hence, 14pt and 18pt translate to 18.5px and 24px respectively.

What makes a font inaccessible?

Inaccessible fonts excluded from the ADA compliant font list are the ones that:

• Make the text harder to read
• Make it difficult to distinguish between the shapes of different letters and characters
• Slow down the reading speed of the user
• Have overlapping letters or characters, which makes it difficult to distinguish one letter from another.

If a font is decorative with adornments, it becomes difficult to read. All fonts with decorations at the end of a stroke may be harder to read for some users. Cursive or handwriting style fonts also make the text inaccessible, and hence they are not the best fonts to use for a website.

What are accessible fonts?

When designing a website, one of the most important aspects is the selection of the right font and its presentation. The vast majority of websites require a lot of textual content, which should be perceivable and viewable. The key to an accessible website is therefore the readability of text within it, which is expressed using different font styles and colors.

Which standard fonts are accessible?

Unfortunately, the opinion of experts differs on the most readable font for the web, and which typeface should be used, as different users have different sets of requirements. For example, an audience with low vision would have a greater need for larger text. People with low field vision but a higher clarity of vision would need more characters to fit in their field of vision while keeping the text size small. People with dyslexia or reading disorders also have their own needs.

It is best that web designers offer flexibility so that users can choose their own fonts. If a web page uses the default web browser’s font, then a reader won’t have to switch to a different font every time the web page is loaded.

While there is no fixed ADA font size requirement, accessible ADA compliant fonts are clear, clean, and distinguishable as opposed to cursive or handwriting styles. It is generally agreed that sans-serif fonts are easier to read and more accessible than their serif counterparts. The ADA compliant font list includes, but is not limited to Arial, Calibri, Century Gothic, Helvetica, Tahoma, and Verdana.

The importance of accessible fonts

 

Most of the information on the web is conveyed and disseminated via textual content. One method of presenting text is via .png or .bmp images of text. However, this is not a viable option for many reasons. For example, when images are scaled, their readability deteriorates. Also, text within images cannot be read aloud by screen readers. Hence, all text on a website should be composed of accessible fonts, which are readable and viewable.

Designing an accessible website using accessible fonts is now no longer only a recommendation or an optional feature. It is mandatory; if a website violates accessibility principles, its host company or business runs the risk of facing heavy penalties, fines, or lawsuits. This fine can be as high as $75,000 for the first violation and more for subsequent non-compliance.

By making your website accessible you will not only protect your business against penalties and lawsuits but also improve your brand reputation. You should always keep in mind that if your website is not accessible it is more likely that people with visual impairments will not be able to get the information they need or understand your message.

There are an estimated 32.2 million adults with visual impairments, according to the National Health Interview Survey (NHIS) data. This includes not only blind people but also people who have low vision despite wearing glasses. The CDC predicts that this number is growing fast because of age-related or disease-related visual impairments.

When designing websites, companies, and businesses that cater to this large minority of the population will naturally enjoy a wider audience. It is a known fact that if the text is harder to read on a website, it will have a smaller readership and a limited number of page visits. Hence, adding ADA approved fonts to a website is an essential aspect of running a successful business.

Specialist fonts

The British Dyslexia Association (BDA) points out the following important aspects to be kept in mind when designing websites and selecting accessible fonts for individuals with dyslexia:

• The selected font should be designed so that users easily make out the difference between various letters and numbers. For example, l (small L), 1, and I (capital i), may all look the same.
• The letters b and d, and p and q, are mirror images of each other. Dyslexic individuals may find it hard to distinguish between them. The letters should be rendered so that they are no longer mirror images.
• Most individuals surveyed by the BDA preferred a rounded “g” and a rounded “a”. However, rounding these letters should not result in them being confused with an “o”.
• Letter spacing should be sufficient to distinguish between various characters, e.g., “rn” together can be mistaken for the letter “m”, so “learn” can be confused with “leam”.

Specialist fonts have been designed for people with dyslexia, e.g., Dyslexie and OpenDyslexic. Both these fonts are freely available and can be downloaded without cost. They are among the best fonts to use for a website when catering for dyslexic individuals. Similarly, Fs Me font is for people with learning disabilities and is supported by the UK’s learning disability charity Mencap.

Compliance with web content accessibility guidelines

Web Content Accessibility Guidelines (WCAG) were developed and published by the World Wide Web Consortium (W3C). They are intended primarily for web content developers, web authoring tool developers, and web accessibility audit tool developers. These recommendations form the widely accepted standard for the design of accessible websites and online content. In the U.S., Section 508 final rule directly requires WCAG to be followed with at least level AA compliance. For ADA related lawsuits, the Department of Justice and the U.S. courts have often referred to these guidelines to evaluate the accessibility of public websites.

WCAG has clear guidance on accessible fonts for visually impaired users, including attributes and design features such as color, contrast, size, and proportions of text. There are also recommendations for the layout and structure of textual content that makes a webpage more readable and accessible. It is essential to incorporate these features in a website to accommodate users with low vision, dyslexia, reading disorders, or other cognitive disabilities.

This guide discusses the various W3C recommendations choosing the best fonts for accessibility, maintaining ADA compliant fonts, and their important features.

Font size and proportions: let the user control them

When writing text, the shape varies, and this also depends on the language. Some alphabet shapes are complex while others are simpler and easier to read even at smaller sizes. This is the main reason why a minimum font size is not defined in the WCAG. The following are important aspects to consider when choosing the best fonts for accessibility and the best font for reading on screen:

• Font Sizes and Units: According to WCAG font size should be specified using ems and rems, i.e., the guideline favors relative font units rather than absolute units. Web designers should avoid setting a base font size in the root element. Instead, the browser’s default font size can be used, which can serve as a reference point to define all other font sizes. If the user changes the base font size then the entire page changes accordingly.
• Zoom feature: Users should have control over the font size, including zooming text up to 200%. The text should remain readable when enlarged without being overcrowded or having overlaps. This magnification should be possible without the use of assistive technology, for example, a simple controller such as a slider can be added to the website for increasing or decreasing the text size. This feature should be accessible on all devices, e.g., mobile, desktop, tablet, etc.

Text spacing: make it relative to the font size

WCAG 2.1 has the following recommendations for text spacing:

• Line spacing should be set to at least 1.5 times the font size.
• Space after a paragraph should be at least 2 times the font size.
• Letter spacing should be at least 0.2 times the font size.
• Word spacing should be at least 0.16 times the font size.

Line width: allow text wrap

Generally, the character count is used as a unit of measurement of line length. Despite any disability, it is harder for people to read longer lines than shorter lines, as line breaks allow the eyes to rest. Ultimately, the line length should not exceed 80 characters.

People who have a smaller field of vision require narrower text areas, where they can easily make out the end of a line and the beginning of the next. Hence, the line length should be controllable by the user. If they adjust the viewport, the lines of text should automatically wrap around and reflow, allowing the user to read the text without horizontal scrolling.

Paragraphs: align paragraphs left or right

All web content should be structured and organized into short paragraphs, and long sentences should be avoided. The paragraphs should be either left-aligned or right-aligned. Although justified text may look more visually appealing, it should be avoided as extra spaces within lines make it inaccessible. The same goes for centered paragraph styles, which may make it hard for a reader to find the start of the next line.

The wise approach to font color

Effective use of color is important for conveying meaningful information to the user. For example, mandatory fields in forms can be marked by color highlights, errors can be shown in red, the blue underlined text usually indicates hyperlinks, and grey can be applied to show disabled form fields.

Although colors increase the aesthetic appeal of a webpage, care should be taken to accommodate people with low color perception, who may not be able to make out the color differences. WCAG 2.1 states that alternate visual cues should be used for distinguishing various features aside from just color.

The use of color is closely tied in with contrast ratios. It is essential to have a good color contrast for readable and accessible text. The following points are important when considering accessible fonts for visually impaired users:

• Color contrast should allow foreground text to be distinguished from the background. It should not be too low or too harsh.
• The text color of grey (#777777) on a white background is the minimum for the AA WCAG level. For larger text, 52 percent grey (#828282) is acceptable.
• Reverse text, which is light foreground text color on a dark background, should be avoided as much as possible as it is harder to read.

Contrast ratio: make everything distinguishable

The WCAG 2.1 guidelines for contrast ratio are listed below:

1. 1. Headings: Contrast ratio for text headings and larger text should be a minimum of 3:1. 18 point text or 14 point bold text is considered large text and should meet this requirement.
2. 2. Main Text: For text other than headings, a contrast ratio of at least 4.5:1 should be maintained.
3. 3. Logotype: Text which is a part of a logo or brand has no contrast requirement.
4. 4. Incidental Text: Text which is part of an inactive user interface, pure decoration, invisible, or part of a picture, and does not convey meaningful information, has no contrast requirement.

There are several recommended ways of maintaining the recommended contrast ratio. For example, if a letter or text symbol is lighter at the bottom then it may violate the contrast ratio of the entire letter. In this case, a designer can either darken the background or add a thin black outline to the letter to maintain the required contrast ratio. The relative luminance of the foreground letters or background can also be changed to achieve the desired result. The various tools that can be used to check the contrast ratio are listed on WCAG’s website

Presentation of text

Apart from incorporating fonts for visually impaired users, it is also important to pay attention to text layout and structure. When it comes to the overall presentation of text on a web page, the following key points should be followed:

• Documents should be written using the same font or as few fonts as possible. A page containing multiple fonts, even if they are ADA compliant fonts, is harder to read.
• Heading HTML tags, e.g. <h1>, <h2>, etc. should be used to convey the structure and hierarchy of the document and should not be applied just because a certain font size was needed to visually highlight an element.
• Animated and moving text should be avoided completely.
• Textual content should be presented via text data rather than with images or graphics. Fonts of text when enlarged generally do not lose their readability and maintain their quality. Images of text tend to exhibit the opposite behavior and their quality may deteriorate when zoomed on.
• Sentence case should be used and small caps should be avoided.
• Bold and italics should not be combined.
• Blocks of text with italics are not accessible and are harder to read.
• Avoid underlining text unless it is a link.

Conclusion

Removing digital barriers and providing the same internet experience for all individuals, with or without a disability, should be the top priority of all companies and organizations. To achieve this, WCAG provides valuable recommendations for choosing the best fonts for a website, which render readable text to all users including those with low vision, dyslexia, or reading disorders.

Businesses with little or no ADA experience can turn to experts when designing and creating new websites or remediating their existing sites. Being proactive to ensure the accessibility of all web content and online services will help to avoid heavy monetary fines and damages.

It is prudent to acquire help from a team of developers, designers, and engineers who have the expertise and experience of developing ADA and 508 compliant websites. As part of our web accessibility services, we offer complete packages for developing websites based on WCAG standards, remediating legacy websites, and conducting regular audits to ensure the accessibility of your website.