conflicting-state-in-name

The accessible name of this element contains a reference to its state which conflicts with the actual element state.

Description

Elements' state (e.g., checked, expanded, etc.) should never be conveyed through its name or label (see State In Name); however, in this case, not only that the state is included in the accessible name, but it is also conflicting with the actual state of the element which may lead to lack of clarity and to be a barrier for assistive technologies users.

Quick Fixes

contentDescription should not contain states of a view especially if the states do not reflect the actual state of the view such as “enabled”, “disabled”, “checked”,”selected”.

Android (.xml):

Pass

1✓ <CheckBox
2    android:id="@+id/termsOfUseCheck"
3    android:layout_width="wrap_content"
4    android:layout_height="wrap_content"
5    android:contentDescription="Agree to terms of use"
6    android:checked="true" />

1✓ <Switch
2    android:id="@+id/addBreakfastSwitch"
3    android:layout_width="wrap_content"
4    android:layout_height="wrap_content"
5    android:contentDescription="Include breakfast to my order"
6    android:checked="false" />

1✓ <LinearLayout
2    android:layout_width="match_parent"
3    android:layout_height="match_parent"
4    android:orientation="vertical">
5    <TextView
6        android:layout_width="match_parent"
7        android:layout_height="wrap_content"
8        android:text="Agree to terms of use"
9        android:labelFor="@id/termsOfUseCheck" />
10    <CheckBox
11        android:id="@+id/termsOfUseCheck"
12        android:layout_width="wrap_content"
13        android:layout_height="wrap_content"
14        android:checked="true" />
15</LinearLayout>

Fail

1✗ <CheckBox
2    android:id="@+id/termsOfUseCheck"
3    android:layout_width="wrap_content"
4    android:layout_height="wrap_content"
5    android:contentDescription="Agree to terms of use, Not checked"
6    android:checked="true" />

1✗ <Switch
2    android:id="@+id/addBreakfastSwitch"
3    android:layout_width="wrap_content"
4    android:layout_height="wrap_content"
5    android:contentDescription="Include breakfast to my order, Checked"
6    android:checked="false" />

Android (Java):

Pass

1✓ TextView label = new TextView(this);
2  label.setText("Agree to terms");
3
4  CheckBox checkBox = new CheckBox(this);
5
6  label.setLabelFor(checkBox.getId());

1✓ CheckBox checkBox = new EditText(this);
2
3  checkBox.setText("Agree to terms");

Fail

1✗ TextView label = new TextView(this);
2  label.setText("Agree to terms, Not checked");
3
4  CheckBox checkBox = new CheckBox(this);
5  checkBox.setChecked(true);
6
7  label.setLabelFor(checkBox.getId());

1✗ CheckBox checkBox = new CheckBox(this);
2
3  checkBox.setChecked(false);
4
5  checkBox.setText("Agree to terms, Checked");

How Users Are Affected

Assistive technologies that use the accessibility tree will announce this element as it has two opposite states simultaneously. One is reported according to the state registered in the accessibility tree, and the other is from the accessible name. This situation may cause users to distrust the UI and even make them avoid using it since they cannot determine which of the reported states is the "correct" one.

WCAG Success criteria

1.3.1 Info and relationships (A)