With everyone depending on the internet for many things like shopping, looking for jobs, and traveling, you never know who uses your website or app. You often end up with a visitor on your website finding the text difficult to understand. So, your app or website has an accessible design containing content that anyone or everyone can access, with or without disabilities. The problem is that most web owners end up confused about exactly what accessibility means, and especially what accessible fonts are. Here is a complete guide on how to choose accessible fonts to help ensure you attain ADA compliance for websites.
Importance of Fonts for Web Accessibility
Despite having access to a billion vision loss cases and Americans who can’t see without contact lenses, many businesses overlook the importance of using accessible fonts on their websites.
Websites that do not comply with web accessibility requirements can face compliance issues, damage their brand and also lose out on that section of customers who cannot access their sites. It is for these reasons that fonts are so important for web accessibility.
What are accessible fonts?
Accessible fonts are ADA-compliant fonts that people with poor eyesight and cognitive disabilities can understand.
Sans serif fonts or serif fonts- Which for better accessibility?
Serif fonts are larger and generally used more in headings. They have a block-like appearance and are less decorative than serif fonts, with slightly higher readability than serif fonts. Serif fonts have decorative edges called serifs that make them less readable.
Complete guide for choosing accessible fonts for your website
With the web page text communicating what you have to offer on your site, people struggling to understand it does not help you. While considering the text, its typography, font, style, letter spacing, and word spacing are a few factors to consider.
It is human nature to quickly scan through the text and parse individual characters to convert them into something meaningful. It is this action of the subconscious mind that lets us read and understand text content without having to even see or think of characters and words.
Sometimes unfamiliar words or characters create a barrier that makes us pause to take a close look before being able to process things. Avoiding these interruptions is vital for optimal readability and understanding.
Use common fonts
Choosing widely available fonts like Times New Roman and Arial over custom fonts improves website accessibility. It ensures readers gain smooth access to content across multiple devices and browsers.
Use easy-to-read fonts
According to WCAG guideline 1.4, people with visual disabilities should be able to understand the font and words. A stark contrast between the background and texts provides for easy readability.
Besides, uncomplicated fonts are easier to read than complex or decorative difficult-to-read fonts. While serif fonts like Times New Roman do not have decorative strokes and are easier to read, sans serif typefaces have similar characters that can reduce readability.
Let users control the font size
Website designers should let readers control the content font sizes to something suitable. It is better than using a specific font size while creating web content.
Ability to zoom in on the site
The text should be readable without overlapping when one zooms onto a page. Overlapping text becomes difficult, if not challenging to read. Besides, users should not depend on assistive devices to zoom in and out of pages.
Instead, web designers should include a slider to let readers increase or reduce text size as needed.
The right colors
Colors help in relating important information to readers. You could perhaps use red for errors, hyperlinks in blue, and gray for disabled fields. However, keep people with low color perception in mind while designing a website. And according to WCAG 1.4, the text should have a color ratio of 3:1 for readability and accessibility.
Web content accessibility guidelines for the size of text
WCAG does not have any specifications when it comes to acceptable text size. However, 12px or less seems to be a standard. The WCAG recommends users zoom pages to a maximum size of 200% to increase the text size.
Fonts to avoid
Some fonts are better avoided for your website. They include:
- Fonts that slow down readers
- Fonts without separate characters
- Decorative fonts like fonts resembling shapes
- Fonts that make it difficult to understand written content
Tips for implementing accessible fonts
Selecting the right font to apply to your site is not always enough because it is not always that an accessible font automatically renders your text legible. You never know who your next visitor is. There is always the chance that you will have some visitors who may need larger-sized text than others.
These tips for implementing accessible fonts will prove helpful in ensuring web compliance.
- Ensure your text size works well on various devices and assistive technologies like smartphones, desktop devices, and screen readers. Visitors should be able to reduce and increase text size without affecting other user interface components. And to do this, it is better to define font sizes in percentages. Increasing or reducing the font size in pixels or points without affecting the other elements is challenging.
- Do not rely on font color to communicate instructions and present text to users. If you do, ensure you have some alternative to convey meaningful information, like bolding or underlining the text to make it easier for visitors with low color perception to understanding. Always use the correct color contrast ratio for text. The optimal contrast for body text is 4.5:1, while 3:1 is ideal for headings. Logos or brand doesn’t have contrast requirements.
- Color contrast helps measure accessibility compliance and refers to contrasting text and background colors. Adequate color contrast in the text makes it easier for everyone, especially those with low vision, to see your web text. While black text on a white background is the default for web content, most web designers look for other color combinations. Whatever the color combination, too much or too little contrast can create problems.
1: Which is the best font for accessibility?
The fonts known for providing maximum web accessibility are Times New Roman, Verdana, Cabri, Helvetica, and Tahoma. Other slab serif fonts like Arvo Museo Slab and Rockwell are also accessible.
2: What are ADA-compliant fonts?
ADA-compliant fonts have a maximum 12-point width and good contrast between the background and text colors. Examples are Times New Roman, Verdana, and Arians.
3: What makes a font accessible?
Accessible fonts have good legibility characteristics like width, thickness, and height and should be widely available. There are a few points worth remembering about accessible fonts:
- Having adequate paragraph spacing and proper spacing between letters and characters
- Unequal height and differences between capital and lowercase letters
- Characters like o, e, a, and c look similar to other letter shapes
- Thin-weight and narrow-width fonts are not deemed accessible
- Color compliance
4: What is an accessible font for print?
And it’s not just your website that demands accessible fonts. All platforms or media you use to promote and communicate with your target audiences, like PDF documents and emails, should have accessible fonts.
When printing, a sans-serif font like Verdana is highly recommended for accessibility.
In short, though you may have to put in extra time and effort to look for and apply accessible fonts to your site, it is essential. Not only does it ensure your website is compliant, but you also include disabled users in your customer base to generate more income.
You don’t even have to worry if you don’t know how or don’t have the time to ensure web compliance. All you have to do is contact us at ADA Site Compliance to help you, as we are the #1 source for all ADA website compliance work.
Have a question?
We’re always here to help.
The ADA prohibits any private businesses that provide goods or services to the public, referred to as “public accommodations,” from discriminating against those with disabilities. Federal courts have ruled that the ADA includes websites in the definition of public accommodation. As such, websites must offer auxiliary aids and services to low-vision, hearing-impaired, and physically disabled persons, in the same way a business facility must offer wheelchair ramps, braille signage, and sign language interpreters, among other forms of assistance.
All websites must be properly coded for use by electronic screen readers that read aloud to sight-impaired users the visual elements of a webpage. Additionally, all live and pre-recorded audio content must have synchronous captioning for hearing-impaired users.
Websites must accommodate hundreds of keyboard combinations, such as Ctrl + P to print, that people with disabilities depend on to navigate the Internet.
Litigation continues to increase substantially. All business and governmental entities are potential targets for lawsuits and demand letters. Recent actions by the Department of Justice targeting businesses with inaccessible websites will likely create a dramatic increase of litigation risk.
Big box retailer Target Corp. was ordered to pay $6 million – plus $3.7 million more in legal costs – to settle a landmark class action suit brought by the National Federation of the Blind. Other recent defendants in these cases have included McDonald’s, Carnival Cruise Lines, Netflix, Harvard University, Foot Locker, and the National Basketball Association (NBA). Along with these large companies, thousands of small businesses have been subject to ADA website litigation.
Defendants in ADA lawsuits typically pay plaintiff's legal fees, their own legal fees for defending the litigation, and potential additional costs. In all, the average cost can range from tens of thousands of dollars, to above six figures. There are also high intangible costs, such as added stress, time and human capital, as well as reputational damage. Furthermore, if the remediation is incomplete, copycat suits and serial filers can follow, meaning double or triple the outlay. It's vital to implement a long-term strategy for ensuring your website is accessible and legally compliant.