Visual formatting

Must Not

Visual formatting alone must not be used to convey meaning.

Description

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 or accessibility labels. 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 accessible traits or labels to convey meaning that is also conveyed visually through visual presentation.

iOS example

// aLabel is a UILabel that is selected
[aLabel setText:NSLocalizedString(@"Setup", @"Label title")];
[aLabel setAccessibilityTraits:UIAccessibilityTraitStaticText | UIAccessibilityTraitSelected];
[aLabel setTextColor:[UIColor whiteColor]];
[ALabel setBackgroundColor:[UIColor blueColor]];                        
// aLabel is a UILabel that is selected
[aLabel setText:NSLocalizedString(@"Setup", @"Label title")];
[aLabel setAccessibilityTraits:UIAccessibilityTraitStaticText];
[aLabel setTextColor:[UIColor whiteColor]];
[aLabel setBackgroundColor:[UIColor blueColor]];                        

ANDROID

Include any information conveyed by formatting in the accessible name of the element. This can be done by setting the contentDescription attribute for the field.

Android example

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.

<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>                        

The text input field is required and uses a large font to indicate it's required.

<TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:id="@+id/label" android:text="Password" android:textStyle="bold"></TextView>

<EditText android:id="@+id/editText" android:inputType="textPassword" android:layout_height="wrap_content" android:layout_width="wrap_content" android:hint="Password:"></EditText>                        

HTML

Semantic mark-up such as strong, em, etc. should be used over purely visual formatting using CSS to indicate meaningful aspects such as text formatting. Additionally, structures such as lists, and headings should be used to indicate relationships of items.

HTML example

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

<div>An <strong>error</strong> was detected...</div>                        
<div class="heading">Fruit</div>
<div>
    <div style="padding-left:1em;">Apples</div>
    <div style="padding-left:1em;">Oranges</div>
    <div style="padding-left:1em;">Bananas</div>
</div>

<div>An <span style="font-weight:bold;">error</span> was detected...</div>                        

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.
Results

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.