On Website Accessibility...

As with any design code, the Web Content Accessibility Guidelines (WCAG), Americans with Disabilities Act (ADA), American Council for the Blind (ACB), and Architectural Barriers Act (ABA) are minimum standards.

These frameworks are individually helpful, but they often have conflicting information. If we were to follow standards from the ACB alone, then we would only be using Arial font at 18pt for all text. However, it is also a well known fact that every person’s needs vary and can fluctuate over time as our life circumstances change, whether that be through aging, illness, injury or other life-altering events. Therefore, we must consider and accommodate for the many potential intersectionalities of disabilities. Someone with low vision will have different digital or print needs than someone with dyslexia or other cognitive disability. One might be able to read sans serif fonts like Arial more easily, but many studies also show that some serif fonts are much easier to read for long texts, and for people with specific types of visual disabilities. Color contrast is also helpful in matters of visual accessibility, for example, analogous and some complementary colors can be difficult for people with color blindness to view in digital content. Designers can use websites like Audio Eye to confirm whether your digital content colors, typefaces, fonts, and icons are in compliance with the ADA and WCAG. 

As best practice for creating website accessibility, it is essential to consider your audience and design accordingly. User testing is highly recommended if you would like to make sure that your digital or print content can actually meet the needs of your intended audience. If you would like to make your website accessible to an even wider audience, then it is also often helpful to provide multiple options, as there is not a one-size-fits-all solution for website accessibility. More options means more accommodation. One must not forget that a lot of digital content is not simply read visually, as many people with visual disabilities use screen readers.  If your digital content does not follow a format that screen readers can easily convert (for example, using an image of text versus typing out the block of text) this can reduce your digital content accessibility significantly.

Typography

The ADA (Americans with Disabilities Act) and ABA (Architectural Barriers Act) accessibility standards require sans-serif fonts in a few places.

• 703.2.3 Style [Signage]: Characters should be sans-serif, not italic, oblique, script, highly decorative, or unusually shaped.

• 707.7.2 Characters [on certain display screens]: Characters on the screen must be in a sans-serif font, at least 3/16 inch (4.8 mm) high based on the uppercase letter “I” and contrast with the background.

Section 508 Standards

402.4 Characters on Display Screens [for ICT with closed functionality]: At least one mode of characters displayed on the screen shall be in a sans serif font. Where ICT does not provide a screen enlargement feature, characters shall be 3/16 inch (4.8 mm) high minimum based on the uppercase letter “I”. Characters shall contrast with their background with either light characters on a dark background or dark characters on a light background.

Why Sans Serif?

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.

It’s okay to use serif fonts for headings or other emphasis. Sans serif is most important for body text and fluid reading.

Why 3/16 inch?

Accessibility regulations specify a measurement of 3/16-inch-high minimum based on the uppercase letter “I,” which is not a metric traditionally associated with typography. This is because the regulation must work “in the field” for third-party testing. For most typefaces, this works out to 16 pt. For websites and documents, the user has control over “zoom” so use a typical font size of 11 or 12pt, or 15 to 16px. Similarly, for email messages, text is typically 10 to 11pt, or 13 to 15px.

American Council for the Blind: Large Print Guidelines

As of 2022, according to the American Council for the Blind, the best practices for large print documents would be to use the following: 

Base Font

—Arial, not bold, 18pt

Headings

—Flush left, bold, Heading 22pt, Subheading 20 pt

Spacing

—1.15 line spacing

Paragraphs

—Blocked with 1 blank line before and between headings/subheadings and text 

Margins

—Flush left margin, Ragged right margin

Columns

—Single column per page

Color

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.

Contrast

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.

Resize Text

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.

Images

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.

Reflow

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.

Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:

—Vertical scrolling content at a width equivalent to 320 CSS pixels;

—Horizontal scrolling content at a height equivalent to 256 CSS pixels;

Except for parts of the content which require two-dimensional layout for usage or meaning.

Text Spacing

1.4.12 Text Spacing (WCAG 2.1 AA): Content should not be lost if a reader uses assistive technology to make minor adjustments to paragraph, line, word, or letter spacing.