Warning:
This wiki has been archived and is now read-only.
SC1-1-1-text-alternative
This test belongs to 1.1.1 Non-text Content.
Status
Contents
- 1 Status
- 2 Description
- 3 Background
- 4 Assumptions
- 5 Test properties
- 6 Test procedure
- 6.1 Selector
- 6.2 Step 1: check element type (F65)
- 6.3 Step 2: check mandatory attributes (F65)
- 6.4 Step 3: check for img siblings (ARIA10 and G196)
- 6.5 Step 4: ask for informational or functional group of images (ARIA10 and G196)
- 6.6 Step 5: check for aria-labelledby implementation (ARIA10)
- 6.7 Step 6: ask if sufficiently described by textual alternative (ARIA10)
- 6.8 Step 7: ask if sufficiently described by textual alternative (G196)
- 6.9 Step 8: compute text alternative
- 6.10 Step 9: check if child of anchor (H2)
- 6.11 Step 10: check for anchor text (H2)
- 6.12 Step 11: check dimensions (no text alternative)
- 6.13 Step 12: ask if decorative (no text alternative)
- 6.14 Step 13: check text alternative validity (F30 and F39)
- 6.15 Step 14: check dimensions (valid text alternative) (F38)
- 6.16 Step 15: ask if decorative (valid text alternative) (F38)
- 6.17 Step 16: check for empty alt (F38)
- 6.18 Step 17: ask if sufficiently described by textual alternative
- 6.19 Step 18: ask if sufficiently described by adjacent text
- 7 Activity diagram of transitions between steps 1 to 18
- 8 Activity diagram of test steps related to techniques and failures
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
- WAI-ARIA 1.0 - Text Alternative Computation
- ARIA6: Using aria-label to provide labels for objects
- ARIA10: Using aria-labelledby to provide a text alternative for non-text content
- F38: Failure of Success Criterion 1.1.1 due to not marking up decorative images in HTML in a way that allows assistive technology to ignore them
- F30: Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not alternatives (e.g., filenames or placeholder text)
- F39: Failure of Success Criterion 1.1.1 due to providing a text alternative that is not null (e.g., alt="spacer" or alt="image") for images that should be ignored by assistive technology
- F65: Failure of Success Criterion 1.1.1 due to omitting the alt attribute on img elements, area elements, and input elements of type "image"
- G196: Using a text alternative on one item within a group of images that describes all items in the group
- H2: Combining adjacent image and text links for the same resource
- H30: Providing link text that describes the purpose of a link for anchor elements
- H37: Using alt attributes on img elements
- H53: Using the body of the object element
- H67: Using null alt text and no title attribute on img elements for images that AT should ignore
Assumptions
- The techniques used for providing a textual alternative are accessibility supported. For more information read Accessibility Support.
- All elements are contained in the mark-up code in the examined web page snapshot. F20: Failure of Success Criterion 1.1.1 and 4.1.2 due to not updating text alternatives when changes to non-text content occur is not tested.
- Groups of images consist of
img
elements that are adjacent to each other and not wrapped in containers. - The smallest readable font can be displayed on a matrix with a height of 5 and a width of 3. Smaller elements are considered decorative automatically.
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
earl:automatic
//*[self::img or self::input[@type="image"] or self::area or self::embed or self::object]
Step 1: check element type (F65)
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)
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)
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)
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)
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)
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)
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
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)
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)
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)
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)
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)
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)
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)
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)
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
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
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} |