WCAG Overview & 1. Perceivable

Question 1

1. Perceivable
2. Operable
3. Understandable
4. Robust
   What to each of these mean?

Answer 1

1. Information and user interface components must be presentable to users in ways they can perceive.
2. User interface components and navigation must be operable for all.
3. Both the Information contained on the page and the operation of the user interface must be understandable.
4. Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.

Question 2

What’s the hierarchy of WCAG look like?

Answer 2

Principle > Guideline > Success Criterion > Sufficient Techniques

Question 3

Perceivable
1.1 Text Alternatives
1.1.1 Non-Text Content (pictures, charts, applets, audio files, video)
Level A
Intent- to make information conveyed by non-text content accessible through the use of a text alternative.

Answer 3

Success Criterion 1.1.1 Non-text Content (Level A): All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below:
Controls and Input — these have names to describe purpose.
Time-Based Media, Tests, Sensory ( is not purely decorative and does not primarily convey important information or perform a function) – text alternatives at least provide descriptive identification of the non-text content.
CAPTCHA –text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities. At least two modes.
Decorative, Formatting, Invisible – implemented in a way that it can be ignored by assistive technology.

Question 4

Perceivable

1. 1 Text Alternatives
   
   1. 1.1 Non-Text Content

Failures

Answer 4

using CSS to include images that convey important information
having a text alternative that does not include information that is conveyed by color differences in the image
not updating text alternatives when changes to non-text content occur
using text alternatives that are not alternatives (e.g., filenames or placeholder text)
not marking up decorative images in HTML in a way that allows assistive technology to ignore them
providing a text alternative that is not null (e.g., alt=”spacer” or alt=”image”) for images that should be ignored by assistive technology
omitting the alt attribute or text alternative on img elements, area elements, and input elements of type “image”
providing long descriptions for non-text content that does not serve the same purpose or does not present the same information
using text look-alikes or ASCII-art to represent text without providing a text alternative

Question 5

What are some “text alternative”s?

Answer 5

Short labels the describe content and/or the purpose of the content (if interactive)
longer descriptions of chart contents and summary of data
text transcript of audio
short description of animation and reference the longer explanation coming up
longer, detailed descriptions of images to convey why it is included (the two leaders shaking hands)
Additional descriptions to give context (may be linked to)
Text that replaces sounds like Right or Wrong answers

Question 6

1.1.1 Non-Text

Note on Captcha – Name the three things you can do for Captcha accessibility

Answer 6

1. Providing more than two modalities of CAPTCHAs
2. Providing access to a human customer service representative who can bypass CAPTCHA
3. Not requiring CAPTCHAs for authorized users

Question 7

Combining adjacent image and text links for the same resource

Answer 7

Where there is both an image and text, the image should have an empty alt unless it is explicitly referred to elsewhere (such as an instruction that says to click on the trash can icon). Then, the alt should contain the exact reference, alt=”trash can icon”

Question 8

Perceivable

1. 2 Time-Based Media
   
   1. 2.1 Audio-only/Video-only Prerecorded

INTENT: make information conveyed by prerecorded audio-only and prerecorded video-only content available to all users

Answer 8

For both- creating a document that tells the same story and presents the same information as the prerecorded audio-only content
the document serves as a long description for the content and includes all of the important information as well as descriptions of scenery, actions, expressions, dialog, background sounds, etc. that are part of the presentation.
Failures:
using text alternatives that are not alternatives (e.g., filenames or placeholder text)
providing long descriptions for non-text content that does not serve the same purpose or does not present the same information

Question 9

Perceivable

1. 2 Time-Based Media
   
   1. 2.2 Captions (Prerecorded)

Intent: enable people who are deaf or hard of hearing to watch synchronized media presentations

Answer 9

Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.
Provide open or closed captions

Failures:
captions omitting some dialogue or important sound effects
providing synchronized media without captions when the synchronized media presents more information than is presented on the page
not labeling a synchronized media alternative to text as an alternative

Question 10

1. Perceivable
2. 2 Time-Based Media
   
   1. 2.3 Audio Description or Media Alternative (Prerecorded)

Intent: to provide people who are blind or visually impaired access to the visual information in a synchronized media presentation.

Answer 10

An alternative for time-based media or audio description of the prerecorded video content is provided for synchronized media, except when the media is a media alternative for text and is clearly labeled as such.
How- provide audio description of the video content OR providing all of the information in the synchronized media (both visual and auditory) in text form.
FAILURES: none

Question 11

1. Perceivable
   1.2 Time-Based Media
   1.2.4 Captions Live
   Level AA

INTENT: enable people who are deaf or hard of hearing to watch real-time presentations.

Answer 11

Captions are provided for all live audio content in synchronized media.
Either open or closed
Failures: none

Question 12

1. Perceivable
   1.2 Time-Based Media
   1.2.5 Audio Description Prerecorded
   Level AA
   Intent provide people who are blind or visually impaired access to the visual information in a synchronized media presentation.

Answer 12

Audio description (an audio track) is provided for all prerecorded video content in synchronized media. 
The audio description augments the audio portion of the presentation with the information needed when the video portion is not available. During existing pauses in dialogue, audio description provides information about actions, characters, scene changes, and on-screen text that are important and are not described or spoken in the main sound track.
FAILURES: none

Question 13

1. Perceivable
2. 2 Time-Based Media
   
   1. 2.6 Sign Language

Level AAA

INTENT: to enable people who are deaf or hard of hearing and who are fluent in a sign language to understand the content of the audio track of synchronized media presentations.

Answer 13

Sign language interpretation is provided for all prerecorded audio content in synchronized media.
Failures:none

Question 14

1. Perceivable
2. 2 Time-Based Media
   
   1. 2.7 Extend Audio Description Prerecorded

Level AAA

Intent: provide people who are blind or visually impaired access to a synchronized media presentation beyond that which can be provided by standard audio description.

Answer 14

Where pauses in foreground audio are insufficient to allow audio descriptions to convey the sense of the video, extended audio description is provided for all prerecorded video content in synchronized media.
How- Using the track element to provide audio descriptions
Failures: none

Question 15

1. Perceivable
   1.2 Time-Based Media
   1.2.8 Media Alternative
   Level AAA

INTENT: to make audio visual material available to individuals whose vision is too poor to reliably read captions and whose hearing is too poor to reliably hear dialogue and audio description.

Answer 15

An alternative for time-based media is provided for all prerecorded synchronized media and for all prerecorded video-only media.
This approach involves providing all of the information in the synchronized media (both visual and auditory) in text form. It reads something like a book.
Failures: none

Question 16

1. Perceivable
2. 2 Time-Based Media
   
   1. 2.9 Audio only - Live

Level AAA

Intent: to make information conveyed by live audio, such as video conferencing, live speeches and radio Webcasts, accessible through the use of a text alternative.

Answer 16

An alternative for time-based media that presents equivalent information for live audio-only content is provided.
A live text caption service will enable live audio to be accessible to people who are deaf or hard of hearing, or who cannot otherwise hear the audio.
OR a script is provided or other text based alternative
Failures:none

Question 17

1. Perceivable
2. 3 Adaptable
3. 3.1 Info and Relationships

Level A

Intent: information and relationships that are implied by visual or auditory formatting are preserved when the presentation format changes.

Answer 17

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (think headings)
How-
Semantic markup (if not available using text to convey what variations in text presentation mean)
Aria landmarks and roles (grouping, region)
Aria-labeledby
Using text to convey information that is conveyed by variations in presentation of text
A simple text document is formatted with double blank lines before titles, asterisks to indicate list items and other standard formatting conventions so that its structure can be programmatically determined.
Separating information and structure from presentation to enable different presentations
Font icons have role = “img”
Failures- tons of them, all not doing the above plus
inserting non-decorative content by using :before and :after pseudo-elements and the ‘content’ property in CSS

Question 18

1. Perceivable
2. 3 Adaptable
3. 3.2 Meaningful Sequence

Level A

intent: enable a user agent to provide an alternative presentation of content while preserving the reading order needed to understand the meaning.

Answer 18

When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.
Providing a particular linear order is only required where it affects meaning.
There may be more than one order that is “correct” (according to the WCAG 2.0 definition).
Only one correct order needs to be provided.
how- dom in right order, tabindex to order, unicode left-to-right or right-to-left mark, CSS letter-spacing
Failures: CSS to change order, whitespaces for tables, columns words, HTML layout table that loses meaning if linear,

Question 19

1. Perceivable
2. 3 Adaptable
3. 3.3 Sensory Characteristics

Intent: all users can access instructions for using the content, even when they cannot perceive shape or size or use information about spatial location or orientation.

Answer 19

Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, color, size, visual location, orientation, or sound.
how-Providing textual identification of items that otherwise rely only on sensory information to be understood
Failures: identifying content only by its shape or location
using a graphical symbol alone to convey information

Question 20

1. Perceivable
2. 3 Adaptable
3. 3.4 Orientation

Level AA

Intent: Content displays in the orientation (portrait or landscape) preferred by the user.

Answer 20

Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.
How-Using CSS to set the orientation to allow both landscape and portrait.
Use of show/hide controls to allow access to content in different orientations.
Failure- locking into one orientation or the other

Question 21

1. Perceivable
2. 3 Adaptable
3. 3.5 Identify Input Purpose

Level AA

Intent:to ensure that the purpose of a form input collecting information about the user can be programmatically determined, so that user agents can extract and present this purpose to users using different modalities.

Answer 21

The purpose of each input field collecting information about the user can be programmatically determined
This success criterion defines the types of user interface component input purposes, found in Section 7 of the WCAG 2.1 Recommendation, that must be programmatically identifiable.
how- the type attribute and HTML autocomplete attribute
Failures: none

Question 22

1. Perceivable
2. 3 Adaptable
3. 3. Identify Purpose

Level AAA

Intent: ensure that the purpose of many elements on a page can be programmatically determined, so that user agents can extract and present that purpose to users using different modalities.

Answer 22

In content implemented using markup languages, the purpose of user interface components, icons, and regions can be programmatically determined.
how-A website uses ARIA landmarks to identify the regions of the page, and users can hide areas that do not have a role of main.
The links in the navigation of a website are marked up so that users can add their own icons.
Icons on a website are marked up so that users can substitute their own icon sets into the page.
Enable user agents to find the version of the content that best fits their needs.
Using semantics to identify important features (coga-simplification=”simplest”).
Use of aria-invalid and aria-required.
Failures: none

Question 23

1. Perceivable
2. 4 Distinguishable
3. 4.1 Use of Color

Level A
Intent: to ensure that all sighted users can access information that is conveyed by color differences, that is, by the use of color where each color has a meaning assigned to it.

Answer 23

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
How
in words- Ensuring that information conveyed by color differences is also available in text
Including a text cue for colored form control labels
Ensuring that additional visual cues are available when text color differences are used to convey information
Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them
Color in an image:
Using color and pattern and Ensuring that information conveyed by color differences is also available in text
ADvidory- Using CSS to change the presentation of a user interface component when it receives focus
failures: not doing the above

Question 24

1. Perceivable
2. 4 Distinguishable
3. 4.2 Audio Control

Level A

intent: when using an SR it is important that the user be able to turn off the background sound from the site

Answer 24

If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level.
Failures: sound longer than 3 seconds without a means to turn it off
No way to turn off an autoplaying HTML5 media element

Question 25

1. Perceivable
2. 4 Distinguishable
3. 4.3 Contrast (minimum)

Level AA
Intent:to provide enough contrast between text and its background so that it can be read by people with moderately low vision (who do not use contrast-enhancing assistive technology).

Answer 25

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1 or 3:1 (larger text)
Exceptions- large text, incidental text, logos
How- depends if more than/less than 18 and not bold or 14 if bold
Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast
Not specifying background color, not specifying text color, and not using technology features that change those defaults
Advisory- Using a technology that has commonly-available user agents that can change the foreground and background of blocks of text
Failures- specifying either font or background color without the other
Using background images that don’t provide enough contrast for overlaying text

Question 26

1. Perceivable
2. 4 Distinguishable
3. 4.4 Re-size Text

Level AA

Intent: To ensure that visually rendered text, including text-based controls (text characters that have been displayed so that they can be seen [vs. text characters that are still in data form such as ASCII]) can be scaled successfully so that it can be read directly by people with mild visual disabilities, without requiring the use of assistive technology such as a screen magnifier.

Answer 26

Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.
how- coding for common user agents, text containers in em units, fonts in em or percentages, using named font sizes, Calculating size and position in a way that scales with text size (calculatePosition), using liquid layout, Providing controls on the Web page that allow users to incrementally change the size of all text on the page up to 200 percent, Ensuring that there is no loss of content or functionality when the text
resizes and text containers do not change their width
(Reflow requires 400%)

Question 27

1. Perceivable
2. 4 Distinguishable
3. 4.5 Images of Text

Level AA

Intent: to encourage authors, who are using technologies which are capable of achieving their desired default visual presentation, to enable people who require a particular visual presentation of text to be able to adjust the text presentation as needed. This includes people who require the text in a particular font size, foreground and background color, font family, line spacing or alignment.

Answer 27

If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following: Customizable (users can change it) or Essential (logos)
If an author can use text to achieve the same visual effect, he or she should present the information as text rather than using an image.
Image of Text CAN BE used if-
the author cannot format the text to get the same effect,
the effect won’t be reliably presented on the commonly available user agents,
or using a technology to meet this criterion would interfere with meeting other criteria such as 1.4.4 (Resize Text)
to use a particular font that is either not widely deployed or which the author doesn’t have the right to redistribute,
or to ensure that the text would be anti-aliased on all user agents.
if the image can be customized to the user requirements
if the image is a logo

Question 28

1. Perceivable
2. 4 Distinguishable
3. 4.6 Contrast (Enhanced)

Level AAA

Intent: to provide enough contrast between text and its background so that it can be read by people with moderately low vision (who do not use contrast-enhancing assistive technology).

Answer 28

The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following:
Large-scale text (18 pt or 14 pt bold) and images of large-scale text have a contrast ratio of at least 4.5:1;
Incidental (decorative)
Logos
(14pt and 18pt are equivalent to approximately 18.5px and 24px.)
The 7:1 and 4.5:1 contrast ratios referenced in this Success Criterion are intended to be treated as threshold values. When comparing the computed contrast ratio to the Success Criterion ratio, the computed values should not be rounded (e.g. 4.499:1 would not meet the 4.5:1 threshold).

Question 29

1. Perceivable
2. 4 Distinguishable
3. 4.7 Low or No Background Audio

Level AAA

Intent: to ensure that any non-speech sounds are low enough that a user who is hard of hearing can separate the speech from background sounds or other noise foreground speech content.

Answer 29

For prerecorded audio-only content that (1) contains primarily speech in the foreground, (2) is not an audio CAPTCHA or audio logo, and (3) is not vocalization intended to be primarily musical expression such as singing or rapping, at least one of the following is true:

No Background
The audio does not contain background sounds.

Turn Off
The background sounds can be turned off.

20 dB
The background sounds are at least 20 decibels lower than the foreground speech content, with the exception of occasional sounds that last for only one or two seconds.

HOW- Mixing audio files so that non-speech sounds are at least 20 decibels lower than the speech audio content

Question 30

1. Perceivable
2. 4 Distinguishable
3. 4.8 Visual Presentation

Level AAA

Intent: to ensure that visually rendered text is presented in such a manner that it can be perceived without its layout interfering with its readability. People with some cognitive, language and learning disabilities and some low vision users cannot perceive the text and/or lose their reading place if the text is presented in a manner that is difficult for them to read.

Answer 30

For the visual presentation of blocks of text, a mechanism is available to achieve the following:

Foreground and background colors can be selected by the user.
Width is no more than 80 characters or glyphs (40 if CJK).
Text is not justified (aligned to both the left and the right margins).
Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.
Text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window.

People with some visual or cognitive disabilities need to be able to select the color of text and the color of the background.
For people with some reading or vision disabilities, long lines of text can become a significant barrier.
People with some cognitive disabilities find it difficult to track text where the lines are close together.
People with certain cognitive disabilities have problems reading text that is both left and right justified.
The resizing provision ensures that visually rendered text (text characters that have been displayed so that they can be seen [vs. text characters that are still in data form such as ASCII]) can be scaled successfully without requiring that the user scroll left and right to see all of the content. When the content has been authored so that this is possible, the content is said to reflow.
authors should ensure that content meets this requirement on standard desktop/laptop displays with the browser window maximized.
This provision does not mean that a user would never need to use horizontal scrolling. It only means that they would not need to use horizontal scrolling back and forth to read a line of text.
Failures: due to specifying foreground colors without specifying background colors or vice versa,
due to using text that is justified (aligned to both the left and the right margins)

Question 31

1. Perceivable
2. 4 Distinguishable
3. 4.9 Images of Text (No Exception)

Level AAA

Intent: to enable people who require a particular visual presentation of text to be able to adjust the text presentation as required.

Answer 31

Images of text are only used for pure decoration or where a particular presentation of text is essential to the information being conveyed.
This means implementing the text in a manner that allows its presentation to be changed or providing a mechanism by which users can select an alternate presentation.

Question 32

1. Perceivable
2. 4 Distinguishable
3. 4.10 Reflow

Level AA

Intent: to support people with low vision who need to enlarge text and read it in a single column. When the browser zoom is used to scale content to 400%, it reflows - i.e., it is presented in one column so that scrolling in more than one direction is not necessary.
The width of 320 CSS pixels exactly corresponds to a desktop browser window set to a width of 1280px and zoomed in to 400%. It should be noted that 400% applies to the dimension, not the area. It means four times the default width and four times the default height.

Answer 32

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.

When appropriately authored, page content can reflow (wrap) to stay within the window’s boundaries (viewport) when users zoom in to enlarge the size of content. Spatial relationships of content may change when users zoom, but all information and functionality should continue to be available.
It’s Responsive Web Design!
how-
Using the responsive web design approach is the most effective method of achieving the goal of allowing people to zoom in to 400%.
For organisations which are using legacy systems or are not able to update their layout methods for some reason, an alternative conforming version could be a mobile site which has a fixed 320px wide layout. The user should be able to find that version from the default website.
C32: Using media queries and grid CSS to reflow columns
C31: Using CSS Flexbox to reflow content
C33: Allowing for Reflow with Long URLs and Strings of Text
C38: Using CSS width, max-width and flexbox to fit labels and inputs
SCR34: Calculating size and position in a way that scales with text size
G206: Providing options within the content to switch to a layout that does not require the user to scroll horizontally to read a line of text
C34: Using media queries to un-fixing sticky headers / footers
C37: Using CSS max-width and height to fit images
CSS, Reflowing simple data tables (Potential future technique)
CSS, Fitting data cells within the width of the viewport (Potential future technique)
Mechanism to allow mobile view at any time (Potential future technique)
Success Criterion 1.4.4 Resize Text also applies, so it should be possible to increase the size of all text to at least 200% while simultaneously meeting the reflow requirement.

Question 33

1. Perceivable
2. 4 Distinguishable
3. 4.11 Non-text Contrast

Level AA

Intent: People with low vision often have difficulty perceiving graphics that have insufficient contrast. to ensure that active user interface components (i.e., controls) and meaningful graphics are distinguishable by people with moderately low vision.

Answer 33

The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):
User Interface Components
Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
Graphical Objects
Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.
Inactive interactive component, like a submit button that cannot be used until form is complete, is exempt.
Also exepmt:
A graphic with text embedded or overlayed conveys the same information, such as labels and values on a chart.
The graphic is for aesthetic purposes that does not require the user to see or understand it to understand the content or use the functionality.
The information is available in another form, such as in a table that follows the graph, which becomes visible when a “Long Description” button is pressed.
The graphic is part of a logo or brand name (which is considered “essential” to its presentation).
Failure: styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator

Question 34

Infographics tend to fail where?

Answer 34

Infographics often fail to meet several WCAG level AA criteria including:

1. 1.1 Non-text Content
2. 4.1 Use of Color
3. 4.3 (Text) Contrast
4. 4.5 Images of Text

Question 35

1. Perceivable
2. 4 Distinguishable
3. 4.11 Non-text Contrast

Test procedure

Answer 35

Identify each user-interface component (link, button, form control) on the page and:
Identify the visual (non-text) indicators of the component that are required to identify that a control exists, and indicate the current state. In the default (on page load) state, test the contrast ratio against the adjacent colors.
Test those contrast indicators in each state.
Identify each graphic on the page that includes information required for understanding the content (i.e. excluding graphics which have visible text for the same information, or are decorative) and:
Check the contrast of the graphical object against its adjacent colors;
If there are multiple colors and/or a gradient, choose the least contrasting area to test;
If it passes, move to the next graphical object;
If the least-contrasting area is less than 3:1, assume that area is invisible, is the graphical object still understandable?
If there is enough of the graphical object to understand, it passes, else fail.

Question 36

• *1. Perceivable
  1. 4 Distinguishable
  
  1. 4.12 Text Spacing (does not apply to PDF)

Level AA

intent: to ensure that when people override author specified text spacing to improve their reading experience, content is still readable and operable.

Answer 36

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 (line spacing) to at least 1.5 times the font size;
Spacing following paragraphs to at least 2 times the font size;
Letter spacing (tracking) to at least 0.12 times the font size;
Word spacing to at least 0.16 times the font size.

This SC does not dictate that authors must set all their content to the specified metrics. Rather, it specifies that an author’s content has the ability to be set to those metrics without loss of content or functionality. The author requirement is both to not interfere with a user’s ability to override the author settings, and to ensure that content thus modified does not break content.
Further, this SC is not concerned with how users change the line height and spacing metrics. It does not require that content implement its own mechanisms to allow users to do this.
HOW- Allowing for text spacing override
Allowing for text spacing without wrapping
Using CSS letter-spacing to control spacing within a word
Specifying line spacing in CSS
Specifying the size of text containers using em units

Failure: due to clipped or overlapped content when text spacing is adjusted

Question 37

1. Perceivable
2. 4 Distinguishable
3. 4.13 Content on Hover or Focus

Level AA

Intent: to ensure that authors who cause additional content to appear and disappear in this manner must design the interaction in such a way that users can:
perceive the additional content AND
dismiss it without disrupting their page experience.

Answer 37

Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:
Dismissible
A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content;
Hoverable
If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;
Persistent
The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.
Exception: The visual presentation of the additional content is controlled by the user agent and is not modified by the author.
HTML title attribute tooltips and Skip to Main are exempt.
Custom tooltips, sub-menus, and other nonmodal popups that display on hover and focus are examples of additional content covered by this criterion.
how- A keyboard means of dismissing the additional content provides a workaround.
Position the additional content so that it does not obscure any other content including the trigger, with the exception of white space and purely decorative content, such as a background graphic which provides no information.
Provide a mechanism to easily dismiss the additional content, such as by pressing Escape.
A technique to view the content fully in both situations is to move the mouse pointer directly from the trigger onto the new content.
Failures:
F95: Failure of Success Criterion 1.4.13 due to content shown on hover not being hoverable
Failure to make content dismissable without moving pointer hover or keyboard focus (Potential future technique)
Failure to meet by content on hover or focus not remaining visible until dismissed or invalid (Potential future technique)