±«Óãtv

People who are vision impaired may not perceive visual formatting, such as size, shape, location and colour, or attributes such as bold and italics.

Visual formatting must not be the sole method of communicating information. Provide non-visual alternatives, such as semantic code, hidden text, accessibility labels or audio cues. In particular, alternatives for predominantly visual components, such as maps, charts, and infographics, will need to suitably represent information in a non-visual way.

---

iOS

Use an accessibility trait or label to convey meaning that is also conveyed visually through presentation. For example, when building a custom checkbox, use the accessibilityLabel attribute to indicate that the control represents a checkbox, then use the UIAccessibilityTraitSelected attribute to indicate whether or not the checkbox is selected.

iOS Example (Objective-C)

Remove any previous traits from the control

[customCheckbox.setAccessibilityTraits:UIAccessibilityTraitNone];

Use the accessibilityLabel attribute to identify the role of the element

[customCheckbox.setAccessibilityLabel:@"[checkbox label], checkbox"];

Use the UIAccessibilityTraitSelected attribute to indicate when the checkbox is checked

[customCheckbox.setAccessibilityTraits:UIAccessibilityTraitSelected];

---

Android

Include any information conveyed by formatting in the contentDescription attribute of the page element.

The text input field is required and uses a large font to indicate it’s required. This is also indicated via on-screen text (label) and the contentDescription attribute on the corresponding EditText element.

Android Pass Example

<TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:id="@+id/label" android:text="Password (required)" android:textStyle="bold"></TextView>
 
<EditText android:id="@+id/editText" android:inputType="textPassword" android:layout_height="wrap_content" android:layout_width="wrap_content" android:="Password (required)"></EditText>

---

HTML

Mark up page content using the correct HTML elements for the task; do not rely on visual styling. For example, use heading elements (h1 to h6) to indicate page headings - do not style plain text to have the visual appearance of a heading. Similarly, use HTML list markup rather than plain text separated using symbols (such as asterisk or dashes).

HTML Pass Example

<h2>Fruit</h2>
<ul>
  <li>Apples</li>
  <li>Oranges</li>
  <li>Bananas</li>
</ul>

---

Testing

Procedures

1. Activate the app.
2. Determine if any component is using visual formatting to convey meaning, including:
   • Colour,
   • Shape/size,
   • Font attributes (bold/italics, etc.),
   • Location,
   • Orientation,
   • Selection.
3. Determine if on-screen text, alternative text or audio cues are present that supplements the visual formatting:
   • Navigate to the item with a screen reader to confirm alternative text;
   • Visually verify the presence of on-screen text.

Outcome

The following check is true:

• When an object, element, or control uses visual formatting to convey meaning, on-screen text, alternative text or audio cues are also provided.

---