SC1-1-1-text-alternative

From Automated WCAG Monitoring Community Group
Jump to: navigation, search

This test belongs to 1.1.1 Non-text Content.

Status

Version 1.0: Completed

Description

This test checks that non-text elements conveying information are providing sufficient textual alternatives or, if purely decorative, are hidden from assistive technologies.

Background

Assumptions

Test properties

Property Value
Test name Provision of short text alternative
Success Criterion 1.1.1 Non-text Content
Test mode SemiAuto
Test environment Rendered page
Test subject Web page state
User expertise and skills No prior knowledge
User profile Requires sight

Test procedure

Selector

Test mode: earl:automatic


//*[self::img or self::input[@type="image"] or self::area or self::embed or self::object]


Step 1: check element type (F65)

Test mode: earl:automatic


Check if the element is of type <img>,<area> or input[type=”image”]


if yes, continue with #Step 2: check mandatory attributes (F65)

else continue with #Step 8: compute text alternative


Step 2: check mandatory attributes (F65)

Test mode: earl:automatic


Check if one of the following attributes is present: aria-labelledby with valid destinations or alt , aria-label, title.


if yes, continue with #Step 3: check for img siblings (ARIA10 and G196)

else return

Property Value
TestCase SC1-1-1-text-alternative
Identifier SC1-1-1-text-alternative-failed1
Outcome failed
ErrorMessage The element must provide one of the following attributes: alt , aria-label, title or a aria-labelledby.
Pointer position
Info


Step 3: check for img siblings (ARIA10 and G196)

Test mode: earl:automatic


Check if the selected element is an <img> element and has adjacent siblings of type <img>.


if yes, continue with #Step 4: ask for informational or functional group of images (ARIA10 and G196)

else continue with #Step 8: compute text alternative


Step 4: ask for informational or functional group of images (ARIA10 and G196)

Test mode: earl:manual


User input question

Item presented to the user: Parent element containing group of images

Question: Does this combination of images provide information or functionality?

Answer options: "yes/no"

Help text: An example for an informative group of images is the combination of five stars to display a rating-result.

Repair suggestion: none

Properties of the test step:

  • context-sensitive = yes
  • user interaction (with the web content) required = yes


if yes, continue with #Step 5: check for aria-labelledby implementation (ARIA10)

else continue with #Step 8: compute text alternative


Step 5: check for aria-labelledby implementation (ARIA10)

Test mode: earl:automatic


Check if the parent element of the current group has role="img" and an aria-labelledby attribute.


if yes, continue with #Step 6: ask if sufficiently described by textual alternative (ARIA10)

else continue with #Step 7: ask if sufficiently described by textual alternative (G196)


Step 6: ask if sufficiently described by textual alternative (ARIA10)

Test mode: earl:manual


Concatenate the results of Text Alternative Computation Algorithm run on all elements referenced in the aria-labelledby attribute and assign it to variable T1.

All items of the group should be removed from the set of selector-matches after this step.


User input question

Item presented to the user: Parent element containing group of images

Question: Does T1 sufficiently describe the group of images?

Answer options: "yes/no"

Help text: If the images contribute meaning to the page or provide any functionality or convey information additional to the pages text, this must be described. Please refer to the explanations concerning sufficient short text alternatives for further information.

Repair suggestion: If no, could you suggest a sufficient textual alternative?

Properties of the test step:

  • context-sensitive = yes
  • user interaction (with the web content) required = yes


if yes, return

Property Value
TestCase SC1-1-1-text-alternative
Identifier SC1-1-1-text-alternative-passed1
Outcome passed
Pointer position
Info


else return

Property Value
TestCase SC1-1-1-text-alternative
Identifier SC1-1-1-text-alternative-failed2
Outcome failed
ErrorMessage Textual alternative T1 does not sufficiently describe the group of images.
Pointer position
Info Suggestions for textual alternative: {collection of repair-answers}


Step 7: ask if sufficiently described by textual alternative (G196)

Test mode: earl:manual


Concatenate the results of Text Alternative Computation Algorithm run on all images and assign it to variable T1.

All items of the group should be removed from the set of selector-matches after this step.


User input question

Item presented to the user: Parent element containing group of images

Question: Does T1 sufficiently describe the group of images?

Answer options: "yes/no"

Help text: If the images contribute meaning to the page or provide any functionality or convey information additional to the pages text, this must be described. Please refer to the explanations concerning sufficient short text alternatives for further information.

Repair suggestion: If no, could you suggest a sufficient textual alternative?

Properties of the test step:

  • context-sensitive = yes
  • user interaction (with the web content) required = yes


if yes, return

Property Value
TestCase SC1-1-1-text-alternative
Identifier SC1-1-1-text-alternative-passed2
Outcome passed
Pointer position
Info


else return

Property Value
TestCase SC1-1-1-text-alternative
Identifier SC1-1-1-text-alternative-failed3
Outcome failed
ErrorMessage Textual alternative T1 does not sufficiently describe the group of images.
Pointer position
Info Suggestions for textual alternative: {collection of repair-answers}


Step 8: compute text alternative

Test mode: earl:automatic


Use the Text Alternative Computation Algorithm to compute the textual alternative provided and assign it to variable T1.


If T1 is empty and the current element is an <img>

continue with #Step 9: check if child of anchor (H2)

else if T1 is empty and the current element is NOT an <img>

continue with #Step 11: check dimensions (no text alternative)

else if T1 is NOT empty

continue with #Step 13: check text alternative validity (F30 and F39)


Step 9: check if child of anchor (H2)

Test mode: earl:automatic


Check if the img is child of an <a> element.


If yes, continue with #Step 10: check for anchor text (H2)

else continue with #Step 11: check dimensions (no text alternative)


Step 10: check for anchor text (H2)

Test mode: earl:automatic


Note: The img has no textual alternative at this test step.

Check if the parent anchor element or any of its children contains text.


if yes, return

Property Value
TestCase SC1-1-1-text-alternative
Identifier SC1-1-1-text-alternative-passed3
Outcome passed
Pointer position
Info


else return

Property Value
TestCase SC1-1-1-text-alternative
Identifier SC1-1-1-text-alternative-failed4
Outcome failed
ErrorMessage No text alternative for image contained in link without link text.
Pointer position
Info


Step 11: check dimensions (no text alternative)

Test mode: earl:automatic


Check if the elements height is less or equal 5px or the elements width is less or equal 3px.


if yes, return

Property Value
TestCase SC1-1-1-text-alternative
Identifier SC1-1-1-text-alternative-passed4
Outcome passed
Pointer position
Info


else Continue with #Step 12: ask if decorative (no text alternative)


Step 12: ask if decorative (no text alternative)

Test mode: earl:manual


User input question

Item presented to the user: Current element

Question: Is this element solely for decorative purposes?

Answer options: "yes/no"

Help text: Answer with 'Yes', if it is a decorative element such as a spacer, line or menu-background solely used for layout purposes or an eyecatching element that don't convey information useful for understanding the content of the page.

Repair suggestion: If no, could you suggest a sufficient textual alternative?

Properties of the test step:

  • context-sensitive = yes
  • user interaction (with the web content) required = no


if yes, return

Property Value
TestCase SC1-1-1-text-alternative
Identifier SC1-1-1-text-alternative-passed5
Outcome passed
Pointer position
Info


else return

Property Value
TestCase SC1-1-1-text-alternative
Identifier SC1-1-1-text-alternative-failed5
Outcome failed
ErrorMessage No sufficiently descriptive textual alternative for an element, which is not pure decoration.
Pointer position
Info Suggestions for textual alternative: {collection of repair-answers}


Step 13: check text alternative validity (F30 and F39)

Test mode: earl:automatic


Use the Validate Text Alternative algorithm to check if the textual alternative value is non-empty, as defined (contain 2 or more characters that are not white space characters or punctionmarks), not a filename, an URL or a placeholder text.


if valid, continue with #Step 14: check dimensions (valid text alternative) (F38)

else return

Property Value
TestCase SC1-1-1-text-alternative
Identifier SC1-1-1-text-alternative-failed6
Outcome failed
ErrorMessage Textual alternative is not valid.
Pointer position
Info The textual alternative is a filename, an URL, a placeholder text or does not contain 2 or more characters that are not white space characters or punctionmarks.


Step 14: check dimensions (valid text alternative) (F38)

Test mode: earl:automatic


Check if the elements height is less or equal 5px or the elements width is less or equal 3px.


if yes, continue with #Step 16: check for empty alt (F38)

else continue with #Step 15: ask if decorative (valid text alternative) (F38)


Step 15: ask if decorative (valid text alternative) (F38)

Test mode: earl:manual


User input question

Item presented to the user: Current element

Question: Is this element solely for decorative purposes?

Answer options: "yes/no"

Help text: Answer with 'Yes', if it is a decorative element such as a spacer, line or menu-background solely used for layout purposes or an eyecatching element that don't convey information useful for understanding the content of the page.

Repair suggestion: If no, could you suggest a sufficient textual alternative?

Properties of the test step:

  • context-sensitive = yes
  • user interaction (with the web content) required = no


if yes, continue with #Step 16: check for empty alt (F38)

else continue with #Step 17: ask if sufficiently described by textual alternative

Step 16: check for empty alt (F38)

Test mode: earl:automatic


Note: The image has a textual alternative at this test step.

If the current element is an img, check, if an empty alt attribute or role="presentation" is provided.


if yes, return

Property Value
TestCase SC1-1-1-text-alternative
Identifier SC1-1-1-text-alternative-passed6
Outcome passed
Pointer position
Info


else return

Property Value
TestCase SC1-1-1-text-alternative
Identifier SC1-1-1-text-alternative-failed7
Outcome failed
ErrorMessage Image assessed as decorative cannot be ignored by assistive technologies
Pointer position
Info An empty alt attribute or role=”presentation” must be set.


Step 17: ask if sufficiently described by textual alternative

Test mode: earl:manual


User input question

Item presented to the user: Current element

Question: Does the textual alternative T1 sufficiently describe the element?

Answer options: "yes/no"

Help text: If the element contributes meaning to the page or provides any functionality or conveys information additional to the pages text, this must be described. Please refer to the explanations concerning sufficient short text alternatives for further information.

Repair suggestion: If no, could you suggest a sufficient textual alternative?

Properties of the test step:

  • context-sensitive = yes
  • user interaction (with the web content) required = yes


if yes, return

Property Value
TestCase SC1-1-1-text-alternative
Identifier SC1-1-1-text-alternative-passed7
Outcome passed
Pointer position
Info


else continue with #Step 18: ask if sufficiently described by adjacent text

Step 18: ask if sufficiently described by adjacent text

Test mode: earl:manual


User input question

Item presented to the user: Current element in context

Question: Is the element sufficiently described by adjacent text?

Answer options: "yes/no"

Help text: If the element shows content, which is redundant to real text nearby, answer 'Yes'. Otherwise, or if the element provides any functionality, answer 'No'. Please refer to the explanations concerning sufficient short text alternatives for further information.

Repair suggestion: If no, could you suggest a sufficient textual alternative?

Properties of the test step:

  • context-sensitive = yes
  • user interaction (with the web content) required = no


if yes, return

Property Value
TestCase SC1-1-1-text-alternative
Identifier SC1-1-1-text-alternative-passed8
Outcome passed
Pointer position
Info


else return

Property Value
TestCase SC1-1-1-text-alternative
Identifier SC1-1-1-text-alternative-failed8
Outcome failed
ErrorMessage Textual alternative T1 is not sufficiently descriptive and the element is also not described in adjacent text.
Pointer position
Info Suggestions for texual alternative: {collection of repair-answers}


Activity diagram of transitions between steps 1 to 18

Graphical alternative of steps one to eighteen

Activity diagram of test steps related to techniques and failures

Detailed graphical alternative to text above