No Boundaries Logo

Web Accessibility Policy of the State of Maine

Back to Policy Table of Contents

Implementation Guidelines

2. Text

2.1 - Avoid using images to display text.

What:
Web developers often use images of text to achieve a specific style, size, or special effect.

Why:
Users with limited vision rely on the ability to enlarge text or choose enhanced color combinations. However, most web browsers cannot change the size and color of images.

How:
Whenever possible, use actual text instead of images of text. Style sheets can be used to achieve specific sizes, colors, or effects. Text that requires exact formatting, such as logos, are appropriate exceptions.

Ref: WCAG 3.1

2.2 - Avoid using absolute sizes for fonts.

What:
Font sizes can be set using "absolute" or "relative" units of measurement. Absolute units, notably pixels, points, and inches, are based on fixed physical measurements; "relative" units, such as percentages or "small," "medium," or "large," are based on the user's default font size.

Why:
Users with limited vision often rely on the ability to enlarge text. Most web browsers allow users to easily change the size of text that has been set with relative units (or not set at all). Using absolute font sizes generally makes it much more difficult for users to change text size to meet their needs.

How: Set font sizes using relative measurements or avoid setting font sizes altogether.

Ref: WCAG 3.4

2.3 - Specify the language of text.

What:
HTML uses the lang attribute to specify language in a web page. It can be set for any HTML element.

Why:
Words written in foreign languages can be unintelligible when spoken by a screen reader. Some screen readers are able to pronounce words in their appropriate language if it is specified.

How:
Use the lang attribute on the <html> element to identify the primary language of each document, for example, <html lang="en">, for English. Use the lang attribute on <span> or other elements to identify words or phrases in other languages. For example, a Spanish phrase within an English document could be coded as <span lang="sp">se habla español</span>.
Note: Not all screen readers support automatic language changes, but setting the lang attribute will not negatively affect those that do not.

Ref: WCAG 4.1, 4.3

2.4 - Avoid using "ASCII art."

What:
"ASCII art" (and "emoticons") are images created using special arrangements of text characters and symbols. For example, ":-)" is often used to create a smiley face, and "->" is often used as an arrow.

Why:
Screen readers read most ASCII art literally, which can be extremely confusing. For example, ":-)" reads as "colon dash right parenthesis," and "->" as "dash greater than."

How:
Use images with appropriate alternate text instead of ASCII art.

Ref: n/a