For questions about using the Creating Accessible LibGuides resources or about web accessibility in general, contact library@capilanou.ca.
Content refers to the structure of the information on the page and how it is conveyed to the user.
Level A
Level AA
Level AAA
Info and Relationships (Level A)
Information, structure, and relationships conveyed through visual presentation can be determined through assistive technology or are described in the text. For example, semantic markup is used to designate headings, lists, emphasized or special text.
Example of proper semantic markup
Example of improper markup
1. Fruit
2. Vegetables
3. Meat
Meaningful Sequence (Level A)
When the order of information is important to understanding the information, the correct order can be easily determined using assistive technology.
*Note: this primarily applies to adding boxes to the left-column under the menu. The left-column menu appears at the top of the column on mobile and when the screen is zoomed in far enough that the guide resizes to one column.
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.
Orientation (Level AA)
The orientation of content is not restricted to either portrait or landscape, unless the display orientation is essential.
*Note - Examples of necessary orientation include bank checks, music scores or projector slides.
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.
Non-text Contrast (Level AA)
The contrast ratio for the following visual presentations must be 3:1 for neighbouring colors:
Pause, Stop, Hide (Level A)**
For moving, blinking, scrolling, or auto-updating information, all of the following are true:
*Note - Flashing/Flickering content, see Guideline 2.3.
**This is a non-interference requirement. See Conformance Requirement 5: Non-Interference
Three Flashes or Below Threshold (Level A)**
No element on a web page should flash more than 3 times per second, or if the flash is below the general flash and red flash thresholds.
**This is a non-interference requirement. See Conformance Requirement 5: Non-Interference
Three Flashes (Level AAA)
Web pages do not contain anything that flashes more than three times in any one second period.
Animation from Interactions (Level AAA)
Moving animation that is triggered by interaction with content can be turned off, unless the animation is essential.
Page Titled (Level A)
Web pages have titles that describe topic or purpose.
The HTML title element is used here. In LibGuides, the title element is composed of PAGE NAME - GUIDE NAME - SITE NAME at INSTITUTION.
Examples (Guide titles)
Examples (Page titles)
Focus Order (Level A)
If the sequence on a webpage is important, the different sections can be navigated in an order that preserves the meaning and operation.
WCAG example:
On a web page that contains a tree of interactive controls, the user can use the up and down arrow keys to move from tree node to tree node. Pressing the right arrow key expands a node, then using the down arrow key moves into the newly expanded nodes.
Multiple Ways (Level AA)
There is more than one way to locate a page within a website, unless the web page is the next step in a process.
Example: A menu and a search box.
Headings and Labels (Level AA)
Headings and labels are clear and descriptive.
Example from Springshare
Nouns are less informative than phrases or questions.
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.
Section Headings (Level AAA)
Content is organized through section headings.
*Note - “Heading” includes actual headings and titles, among other types of content.
*Note - This is not the user interface components but writing. User Interface Components are under Criterion 4.1.2
Label in Name (Level A)
Controls that have a visual text label use the same words and characters within the accessible name. Accessible name is the
WCAG example:
When these match, speech-input users (i.e., users of speech recognition applications) can navigate by speaking the visible text labels of components, such as menus, links, and buttons, that appear on the screen. Sighted users who use text-to-speech (e.g., screen readers) will also have a better experience if the text they hear matches the text they see on the screen.
Dragging (Level AA) [New to WCAG 2.2]
Any content that uses dragging to make the function work can be changed by the user unless the dragging is necessary.
*Note - This applies to web page content, not actions for using assistive technology.
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.
On Input (Level A)
If the user interacts with content it does not change the context unless the user is warned beforehand. The intent of this Success Criterion is to ensure that entering data or selecting a form control has predictable effects.
Changes of context are appropriate only when it is clear that such a change will happen in response to the user's action (eg. a link is labeled as 'opens in new window').
WCAG example:
Individuals who are blind or have low vision may have difficulty knowing when a visual context change has occurred, such as a new window popping up. In this case, warning users of context changes in advance minimizes confusion when the user discovers that the back button no longer behaves as expected.
Consistent Navigation (Level AA)
If navigation is repeated on multiple web pages within a website, navigation tools appear in the same order unless the change is initiated by the user.
Consistent Identification (Level AA)
Components that are repeated across web pages and have the same functionality are labeled and identified consistently.
WCAG example:
A document icon is used to indicate document download throughout a site. The text alternative for the icon always begins with the word “Download," followed by a shortened form of the document title. Using different text alternatives to identify document names for different documents is a consistent use of text alternatives.
Change on Request (Level AAA)
Changes of context are initiated only by user request or a mechanism is available to turn off such changes.
Changes of context are appropriate only when it is clear that such a change will happen in response to the user's action (eg. a link is labeled as 'opens in new window').
WCAG example:
This Success Criterion aims to eliminate potential confusion that may be caused by unexpected changes of context such as automatic launching of new windows, automatic submission of forms after selecting an item from a list,
Findable Help (Level A) [New to WCAG 2.2]
If help options are offered on multiple webpages, they must be offered in the same relative order on each page.
"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."