Creating Accessible LibGuides

On many webpages, text is a primary way of conveying information and needs to be presented as clear as possible.

Level A

• Do not solely rely on sensory characteristics (i.e. shape, color, size, visual location, orientation, or sound) to convey meaning (Success Criterion 1.3.3)
• Do not solely rely on colour to show importance or illicit a response (Success Criterion 1.4.1)
• The purpose of a link is described in the link text or can be determined through assistive technology and link relationships (Success Criterion 2.4.4)

Level AA

• The contrast between text or images of text and the background should be minimum 4.5:1. For large text the contrast should be minimum 3:1 (Success Requirement 1.4.3)
• Text should be able to be resized up to 200% and still be functional and understandable. Exceptions are captions and images of text (Success Criterion 1.4.4)
• Only use images of text if the user can alter the image (e.g. increase size or change colour) or if the image of text is essential. Note: images of text do not include graphs, screenshots, and diagrams which visually convey important information (Success Criterion 1.4.5)
• Users should be able to alter content without changing the meaning (e.g. increase: line height, spacing after paragraphs, space between letters and words) (Success Criterion 1.4.12)
• Headings and labels are clear and descriptive (Success Criterion 2.4.6)
• Include HTML/ARIA cues when a section of text is in a different language than the primary language of the webpage (Success Criterion 3.1.2)

Level AAA

• Text is either left, right or center-aligned and not justified  (Success Criterion 1.4.8)
• Images of text should be only be used for pure decorative or when absolutely essential to the information (Success Criterion 1.4.9)
• A mechanism is available so the purpose of each link can be identified from link text alone (Success Criterion 2.4.9)
• Include definitions for unusual words and jargon (Success Criterion 3.1.3)
• A mechanism for identifying the meaning of abbreviations is available (e.g. identified in text or in a glossary) (Success Criterion 3.1.4)
• Text is written at a lower secondary education level or an alternative, simpler version is available (Success Criterion 3.1.5)
• Include a mechanism for understanding the pronunciation of words where meaning of the words, in context, is ambiguous without knowing the pronunciation (i.e. a glossary) (Success Criterion 3.1.6)

Sensory Characteristics (Level A)

Do not solely rely on shape, size, location, orientation, or sound to convey meaning. For requirements related to color, refer to Guideline 1.4.

Example: 

"Click on the red button to continue" would fail this criterion. 

Use of Color (Level A)

Information should not only use color to establish its importance or response. For example, if a section requires the user’s attention, the use of red words should not be the only thing used to draw attention. An exclamation point (that could also be in red) that off-sets the issue can be used to attract the user's eye, in addition to the color red.

*Note - This success criterion is for visualizing color only. Guideline 1.3 covers different ways of presenting information that can be perceived, including programmatic access to color and other visual presentation coding.

WCAG examples:

A form contains both required and optional fields. Instructions at the top of the form explain that required fields are labeled with red text and also with an icon. Users who cannot perceive the difference between the optional field labels and the red labels for the required fields will still be able to see the icon next to the red labels.

Contrast (Minimum) (Level AA)

Text and images of text must meet the contrast ratio of 4.5:1, except for:

• Large Font text must be 3:1;
• Incidental text or images do not have a required contrast;
• Logotypes - Logo/brand text has no required contrast.

Resize Text (Level AA)

Text should be able to be resized up to 200% and still be functional and understandable. Exceptions are captions and images of text.

Images of Text (Level AA)

If it is possible to use text, then text is always preferred over images of text. However, images of text can be used if the image is:

• Customizable – The image of the text can be changed by the user as needed;
• Essential – The particular images of text are absolutely necessary for the information.

*Note - Logotypes are considered essential.

** - This does not include text that is part of a picture that contains significant other visual content. Examples of such pictures include graphs, screenshots, and diagrams which visually convey important information through more than just text.

Contrast (Enhanced) (Level AAA)

The contrast ratio of text and images of text should be 7:1, except for:

• Large font text and text images must have a contrast ratio of 4.5:1;
• Incidental text or images of text that are only for decoration have no contrast requirement;
• Logotypes have no contrast requirement.

Visual Presentation (Level AAA)

For blocks of text, a process or technique is available to achieve the following:  : 

• The user can choose the foreground and background colors;
• Width of text lines are no more than 80 characters/glyphs;
• Text is either left, right or center-aligned and not justified;
• Line spacing is 1.5 within paragraphs and 2 between paragraphs;
• Text sizes can be changed 200% without needing to scroll horizontally to read a full-line of text on a full-screen window.

Images of Text (No Exception) (Level AAA)

Images of text are only used decoratively or when the image is absolutely necessary to the information presented.

*Note - Logotypes are essential.

** - This does not include text that is part of a picture that contains significant other visual content. Examples of such pictures include graphs, screenshots, and diagrams which visually convey important information through more than just text.

Text Spacing (Level AA)

In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property: 

• Line height to at least 1.5 times the font
• Spacing after paragraphs to at least 2 x font size
• Letter spacing (tracking) to at least .12 times the font size
• Word spacing to at least .16 x font size

Exception: Human languages and scripts that do not use these styles regularly need to only incorporate one. 

WCAG example:

When spacing is be overridden to the success criterion's metrics:

• Text fits within the bounds of its containing box without being cut off.
• Text fits within the bounds of its containing box without overlapping other boxes.

Link Purpose (In Context) (Level A)

The purpose of a link is described in the link text or can be determined through assistive technology and link relationships, unless the purpose of the link is ambiguous to users in general, for example: the link leads to a definition of an unfamiliar word.

Links with the same text that go to different locations are readily distinguishable.

Headings and Labels (Level AA)

Headings and labels are clear and descriptive. 

Example from Springshare
Nouns are less informative than phrases or questions. 

1. How do I request items via ILL? (better)
2. ILL (worse)

Link Purpose (Link Only) (Level AAA)

A mechanism is available so the purpose of each link can be identified from link text alone, except where the purpose of the link ambiguous to users in general.

WCAG example:

Links should be understandable out of context, unless there is no disadvantage to the person with a disability. 

For example: in the sentence "One of the notable exports is guava", the word guava is a link. The link could lead to a definition of guava, a chart listing the quantity of guava exported or a photograph of people harvesting guava. Until the link is activated, all readers are unsure and the person with a disability is not at any disadvantage.

Language of Parts (Level AA)

If a passage or phrase is in a different language than the webpage's language, this can be programmatically determined. It is not necessary to label different language for: proper names, technical terms, words of indeterminate language and vernacular. For example: when adding a passage in French on a page where English is the primary language, use HTML/ARIA to identify the portion that is in a different language.

WCAG example:

In the sentence, "He maintained that the DDR (German Democratic Republic) was just a 'Treppenwitz der Weltgeschichte'," the German phrase 'Treppenwitz der Weltgeschichte' is marked as German. Depending on the markup language, English may either be marked as the language for the entire document except where specified, or marked at the paragraph level. When a screen reader encounters the German phrase, it changes pronunciation rules from English to German to pronounce the word correctly.

Unusual Words (Level AAA)

The content is design so that words in a specific context are clearly defined, including idioms and jargon.

WCAG examples:

• Text that includes a definition for a word used in an unusual way.
• Including definitions in the glossary.
• The specific definition of a word is provided at the bottom of the page.

Abbreviations (Level AAA)

A mechanism for identifying the expanded form or meaning of abbreviations is available.

WCAG example:

An abbreviation whose expansion is provided the first time the abbreviation appears in the content.

Reading Level (Level AAA)

When text requires reading ability more advanced than the lower secondary education level after removal of proper names and titles, supplemental content, or a version that does not require reading ability more advanced than the lower secondary education level, is available.

Pronunciation (Level AAA)

A mechanism is available for identifying specific pronunciation of words where meaning of the words, in context, is ambiguous without knowing the pronunciation.

WCAG example:

A Web page includes a glossary section. Some items in the glossary include pronunciation information as well as definitions. Words in the content whose meaning cannot be determined without knowing their pronunciation are linked to the appropriate entries in the glossary.

"Copyright © 2020 W3C® (MIT, ERCIM, Keio, Beihang). This software or document includes material copied from or derived from Web Content Accessibility Guidelines (WCAG) 2.2."