Skip to content

Significant updates for Test 5 #377

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 15 commits into from
Oct 26, 2022
108 changes: 90 additions & 18 deletions _baselines/05Changing.md
Original file line number Diff line number Diff line change
@@ -1,35 +1,107 @@
---
title: "5. Changing Content"
title: "5. User Controls"
order-number: 6
---
## 5. Changing Content
## 5. User Controls

### Accessibility Requirements

- [WCAG2 SC 4.1.2 Name, Role, Value](https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html): For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

### Test Method Rationale

The purpose of this Baseline test is to identify visual changes to content and component states that occur without a page refresh and to correlate those changes with equivalent programmatic and/or textual information. Notification of such changes must be provided.
- Content changes could include component state changes (e.g., closed/open sections, sort order, collapsed/expanded menus), dynamic and/or calculated values (e.g., "34 characters remaining"), and automatically updating content (e.g., stock prices).
- Content that changes in the course of a user's interaction with the content (including, but not limited to changes in text, component states, structure, relationships, or functionality) must provide a means by which the change in content is programmatically determinable or is otherwise available in text.
The purpose of this Baseline test is to check the following accessibility properties of user controls:
- Name Change
- Role (test not yet available)
- State
- Value

### Limitations, Assumptions, or Exceptions

- The state of form elements (checked, unchecked, etc.) are included in this Baseline.
- User initiated changes and automatic updates are included in this test.
- If an ARIA live region is used to provide programmatic notification of changes in content, a value of `"off"` for an `aria-live` attribute is ***NOT*** sufficient to provide programmatic notification (whether implicitly or explicitly defined).
- [User interface component (as defined by WCAG)](https://www.w3.org/TR/WCAG21/#dfn-user-interface-components) is a part of the content that is perceived by users as a single control for a distinct function. User interface components include form elements and links as well as components generated by scripts.
- Examples of controls include changes to buttons, form labels, menu items, and links.
- User-initiated and automatic updates to the name and role of controls are covered in this test. User-initiated changes of state and value of controls are covered in this test. Changes to non-user controls (text, images, etc.) are not covered in this test.

### 5.1 Test Procedure for Changes in Content
### 5.1 Test Procedure for Changes in Control Name

**Baseline Test ID:** 5.1-ChangedControlName

**Baseline Test ID:** 5.1-ChangeContent
#### Identify Content
<p id="1IC">Identify changes in presented content (both user driven and automatic). Examples include changes to images, navigation trees, data table sort controls, automatic information updates, form elements, revealed content, etc.</p>
<p id="1IC">Identify changes (both user driven and automatic) in the functionality, appearance or label of user controls. </p>
<ul>
<li>It may be necessary to use the mouse to determine whether state changes occur on hover or on click.</li>
<li>Depending on the component, a change of state may be triggered by various actions, such as changing values or states of other components, toggling a function, entering data in the component, mouseover, etc.</li>
<li>Depending on the control, a change of name may be triggered by various actions, such as changing values or states of other components, toggling a function, entering data in the component, mouseover, etc.</li>
<li>Examples include entering a response in a form field for country changes the next form field's label from "state" to "province", selecting a control toggles its functionality from sorting ascending to descending, a link appends "Updated" to its name when the linked page is edited.</li>
</ul>

#### Test Instructions
<ol id="1TI">
<li id="1TI-1">Modify the name of the user control.</li>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perform an action that modifies the name ... (or similar)

<li id="1TI-2">Check that the combination of the accessible name and accessible description is not empty after the change. [SC 4.1.2]</li>
<li id="1TI-3">Check that the non-empty combination of the accessible name and accessible description describes the control's purpose after the change. [SC 1.1.1] For details on the computation of the accessible name and accessible description, references include:
<ul>
<li><a href="https://www.w3.org/TR/html-aam-1.0/#input-type-text-input-type-password-input-type-search-input-type-tel-input-type-url-and-textarea-element" target="_blank" rel="noopener">HTML Accessibility API Mappings 1.0 for text <code>input</code></a></li>
<li><a href="https://www.w3.org/TR/html-aam-1.0/#input-type-button-input-type-submit-and-input-type-reset" target="_blank" rel="noopener">HTML Accessibility API Mappings for <code>input</code> controls</a></li>
<li><a href="https://www.w3.org/TR/html-aam-1.0/#button-element" target="_blank" rel="noopener">HTML Accessibility API Mappings for <code>button</code> element</a></li>
<li><a href="https://www.w3.org/TR/html-aam-1.0/#input-type-image" target="_blank" rel="noopener">HTML Accessibility API Mappings for <code>input type="image"</code></a></li>
<li><a href="https://www.w3.org/TR/html-aam-1.0/#other-form-elements" target="_blank" rel="noopener">HTML Accessibility API Mappings for Other Form Elements</a></li>
</ul>
</li>
</ol>

#### Test Results

<p id="1TR">If any of the above checks fail, then Baseline Test 5.1-ChangedControlName fails.</p>

### 5.2 Test Procedure for Control State

**Baseline Test ID:** 5.2-ControlState
#### Identify Content
<p id="2IC">Identify user-initiated changes to the state of user controls. Examples include changes to buttons, form labels, menu items, links.</p>
<ul>
<li>Depending on the control, a change of name may be triggered by various actions, such as changing values or states of other components, toggling a function, entering data in the component, mouseover, etc.</li>
<li>Examples include a disabled "Submit" button is enabled when all required form fields are filled in, a link becomes visible after a user-initiated calculation completes, a check box changes from checked to unchecked, links that are hovered or visited.</li>
</ul>

#### Test Instructions
<ol id="2TI">
<li id="2TI-1">Check that the state of the user control is correct in its default state. [SC 4.1.2]</li>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

correct when in its default state

<li id="2TI-2">Attributes such as <code>hidden</code>, <code>disabled</code>, and the use of <a href="https://www.w3.org/WAI/standards-guidelines/aria/">ARIA</a> to control component states must be used correctly.</li>
<li id="2TI-3">Modify the state of the user control.</li>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

perform an action/trigger ...

<li id="2TI-4">Check that the state of the user control is correct after a change of state. [SC 4.1.2]</li>
</ol>

#### Test Results

<p id="2TR">If any of the above checks fail, then Baseline Test 5.2-ControlState fails.</p>

### 5.3 Test Procedure for Control Value

**Baseline Test ID:** 5.3-ControlValue
#### Identify Content
<p id="3IC">Identify controls that have a value that can be changed by a user. Examples include forms that accept user input to modify another component.</p>
<ul>
<li>Depending on the control, a change of value may be performed by entering a number, selecting from a list of options, etc.</li>
<li>Examples include adjusting a slider modifies a date range that is highlighted in a calendar, entering numbers in text fields determines a graph's data points, selecting colors determines the appearance of links.</li>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

, etc.

</ul>

#### Test Instructions
<ol id="3TI">
<li id="3TI-1">Check that the value of the user control is correct at its default value. [SC 4.1.2]</li>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

correct when at ...

<li id="3TI-2">Modify the value of the user control.</li>
<li id="3TI-3">Check that the state of the user control is correct after a change of state. [SC 4.1.2]</li>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

state or value?

</ol>

#### Test Results

<p id="3TR">If any of the above checks fail, then Baseline Test 5.3-ControlValue fails.</p>
<!--
#### Identify Content
<p id="1IC">Identify changes in presented content (both user driven and automatic). Examples include changes to images, navigation trees, data table sort controls, automatic information updates, form elements, revealed content, etc.</p>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

user-driven

<ul>
<li>It may be necessary to use the mouse to determine whether state changes occur on hover or on click.</li>
<li>Depending on the component, a change of state may be triggered by various actions, such as changing values or states of other components, toggling a function, entering data in the component, mouseover, etc.</li>
</ul>
--
#### Test Instructions
<ol id="1TI">
<li id="1TI-1">Check that the page provides a notification of the change in content programmatically. [SC 4.1.2]
Expand Down Expand Up @@ -58,15 +130,15 @@ The purpose of this Baseline test is to identify visual changes to content and c
</ol>
</li>
</ol>

--
#### Test Results
<p id="1TR">If any of the above checks fail, then Baseline Test 5.1-ChangeContent fails.</p>

-->
### Advisory: Tips for streamlined test processes

- Changing content might also include changes in color to convey information. If so, this test should check that the information is programmatically determinable. If color is used as the only visual means of conveying information (or changes in information), then the content would fail to meet SC 1.4.1 Use of Color (addressed in [Baseline 7. Sensory Characteristics](../07Sensory).
- The number of event notifications can be very large; if the number of changes to an element is unknown or very large, a sampling approach may be necessary.
- Although an ARIA live region with an `aria-live` attribute set to `"off"` is not sufficient to provide programmatic notification of content changes, a web page may provide the user with an option to change the value of the `aria-live` politeness setting to provide desired level of notification. Such an option must meet all of the requirements defined in [20. Conforming Alternate Version](../20AlternateVersions) in order to be considered a "conforming alternate version". It would be helpful to provide instructions for the tester to change the aria-live from "off" before testing the page.
- Changes to controls may also include changes in color to convey information. If so, this test should check that the information is programmatically determinable. If color is used as the only visual means of conveying information (or changes in information), then the content would fail to meet SC 1.4.1 Use of Color (addressed in [Baseline 7. Sensory Characteristics](../07Sensory)).
- The default accessible name and accessible description of user controls (prior to change) are tested in other Baseline tests, such as [Baseline 10. Forms](../10Forms), [Baseline 14. Links](../14Links). It may be helpful to perform the test for Changes in Control Name with those tests.
- This test may require interaction with controls to assess changes in name, role, state, value. For this test, interaction may be performed with a mouse and/or by keyboard.

#### WCAG 2.0 Techniques
- [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](https://www.w3.org/WAI/WCAG21/Techniques/failures/F20.html)
2 changes: 1 addition & 1 deletion _baselines/ChangeLog3.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ Note: Minor punctuation, formatting and spelling changes not included.
|--------------------|-----------------------|
| Multiple Baseline Tests | Test Instructions: corrected outline numbering, added missing requirement mappings |
| 3.1 Non-Interference | Identify Content: added links to Baseline Tests |
| 5. Changing Content | Added WCAG 2.0 Techniques section and F20 |
| 5. Changing Content | Significant changes to this test to cover SC 4.1.2 more accurately. Name changed to Test 5. User Controls. |
| 6. Images | Limitations, Assumptions, Exceptions: Removed "Equivalent descriptions for an image within page text could allow an image to be considered decorative. However, this does not necessitate removal of any accessible text attributes from the image." |
| 6.1 Meaningful Image | Instruction 2: removed mapping to 1.1.1 and 4.1.2 |
| 7. Sensory Characteristics | Advisory: corrected first bullet to remove "must also provide textual cues" |
Expand Down