Images

Overview

Images and graphics make content more pleasant and easier to understand for many people, and in particular for those with cognitive and learning disabilities. They serve as cues that are used by people with visual impairments, including people with low vision, to orient themselves in the content.

However, images are used extensively on websites and can create major barriers when they are not accessible. Accessible images are beneficial in many situations, such as:

People using screen readers: The text alternative can be read aloud or rendered as Braille
People using speech input software: Users can put the focus onto a button or linked image with a single voice command
People browsing speech-enabled websites: The text alternative can be read aloud
Mobile web users: Images can be turned off, especially for data-roaming
Search engine optimization: Images become indexable by search engines

Images must have text alternatives that describe the information or function represented by them. This ensures that images can be used by people with various disabilities. To provide an accurate alternative text, it’s important to understand the image’s purpose. Some of these categories are informative, decorative, functional, maps, and images of text.

Make Text Accessible

Fonts

Our website text is already ADA compliant, so it is recommended to use the default font. To ensure no other styles are displayed across the site, remember to clear the content formatting with the eraser icon in the content editor.

As a reference, ADA-compliant fonts are defined by characteristics such as simple and familiar, distinguishable letters, sufficient size for comfortable reading, sufficient space between characters, and not over-decorated or italicized. Here is a list of web-safe accessible fonts that can also be used for Word documents or PDF compliance:

Arial
Calibri
Century Gothic

Helvetica
Tahoma
Verdana

WCAG doesn’t specify a particular font size as accessible. However, best practices make text more readable for people with vision impairments. A safe bet for a WCAG-conforming font size is 16px (or 1em or 1rem) as the smallest size for body text. This is also the font size recommended by Google.

Our site has been optimized with a 2rem font size for small text, so ensuring the font in the editor has been formatted will prove your content to be compliant.

Font Weight

The weight of a font refers to the width of the stroke within a character. The thinner the stroke, the lighter the font. As with cursive, extra-bold, condensed, and script fonts, light fonts may be best suited for headlines or short passages.

Accessibility experts recommend using STRONG for bold-face text, and EM for italic text. The reason is that these semantic tags indicate that the author wishes to provide emphasis, which is rendered as bold/italic on a visual browser or in different speaking styles on a screen reader.

WordPress uses these tags by default when we make text bold and italic. Please keep in mind that adding emphasis to a large body of text will have an adverse effect when highlighting important content to the reader. It is more efficient to bold only keywords or short phrases.

Text Block Formatting

For body text, it is best to use left-aligned, non-justified alignment. Using other alignment options for long passages may interfere with the ability for users with different reading disorders to efficiently read the text.

If text is presented online, consider using more bullets and breaking up text into smaller chunks of text than normal academic text. Readers online tend to scan text more quickly than when reading a printed page, so these conventions help direct reader flow.

Except for headlines or decorative text, it is best to avoid large blocks of italic text, colored text, underlined text, decorative fonts, and capitalized letters. These formatting choices can make text difficult to read.

Below are the examples to avoid:

All Italics – An entire block of italic can be hard to read because computer monitors may not render diagonal lines clearly.
All Underlined – Not only is underlined text harder to read, but underlines should only be used to designate a link.
All Brightly Colored – Subtle, dark colors can work, but not long passages of brightly colored text. Too much color can cause eyestrain and may induce migraines.
All Decorative Font – Reading times for unusual fonts are much slower, and display technologies may affect visibility. For example example the Microsoft Harrington semi-cursive font.
All Caps – TESTS SHOW THAT READERS RELY ON CUES FROM LOWERCASE ASCENDERS & DESCENDERS….PLUS, CAPITALIZATION IS EQUATED TO “SHOUTING” ON THE WEB.

What to check for?

Use text over images of text whenever possible: This is more compatible with screen readers, aiding users with visual impairments. However, if images of text are essential, such as in logos, ensure they are complemented with alt text to uphold accessibility standards.
Maintain suitable text colour contrast: Consider the contrast ratio between your text and its background. The WCAG recommendation is 4.5:1 for normal text up to 24px, 3:1 for bold text of at least 19px or larger, and 3:1 for regular text of at least 24px or larger.
Minimum font size: WCAG recommended font size is 16px or the responsive equivalent of 1em or 1rem as the smallest size for body text
Choose the strong and em tags: These tags are better elements for conveying emphasis throughout your content.
Avoid large blocks of italic text: These formatting choices can make text difficult to read.

Benefits

People with low vision who require increased space between lines, words, and letters are able to read text.
People with dyslexia may increase space between lines, words, and letters to increase reading speed.
Although not required by this SC, white space between blocks of text can help people with cognitive disabilities discern sections and call-out boxes.

References: