Changing Content - name not accurate after change

Test Case Summary

Test Case ID

TC05.1-2-fail-1

Test Case Description

The page has a button whose text appears on screen as “subscribe”.

When the button is pressed the text on the button changes to “subscribed” (past tense). The user is able to endlessley toggle the button from “subscribe” to “subscribed”. The background color of the button also changes to signify the change to content.

When the tester checks the accessible name of the button, they will discover that it is not changing.

The code consists of a button element with innertext and an aria-label. When the button is pressed a javascript function causes the innertext and background color to change, however, the function does not update the aria-label to the proper value.

In the accessible name calculation of a button, the aria-label takes precedence over the innertext. Since the aria-label is not changing when the screen content changes, this should result in failure.

A successful test should identify a FAIL against Baseline 5.1 Changing Content.

Applicable ICT Baseline Test

5.1 Test Procedure for Changes in Content

Baseline Test ID: 5.1-ChangeContent

Test Instruction: 2.a

Test Case Detail

Expected Baseline Result

Fail

After content change, the accessible name of the element does not change.

Test Data

Single-Page URL

https://section508coordinators.github.io/baselinealignment/testfiles/TF05/05.1-2-fail-1.html

Embedded Code

Code

Test Case Instruction

Test Instruction	Instruction Detail	Expected Test Case Result
IC-1	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. It may be necessary to use the mouse to determine whether state changes occur on hover or on click. 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.	Identify that there is a button. Activate the button and observe for changes to content.
1	Check that the page provides a notification of the change in content programmatically. `[`SC 4.1.2`]` Programmatic event notifications include alert dialogs, focus shifts to the content that changed, and ARIA live regions.	Pass: Focus does not shift from the element that changed.
2.a	For each change in content, check that the combination of name, role, state, and value of the changed content is accurate. `[`SC 4.1.2`]` Name: the name is accurate after a change. Apply the accessible name and description computation, if applicable.	Fail: The accessible name of the button doesn’t reflect the change to content.