91Èȱ¬

Older mobile devices may have poor support for fonts, colours and styles. Additionally, assistive technology cannot draw meaning from styling. And some users will change settings (fonts, styles, colours, etc.) to suit their needs.

A user must still be able to complete the core purpose of a page or screen, whether reading or taking action, when background colours, images, layout or features are missing. For example, read a news article, play a radio station or navigate elsewhere.

If embedded media is not supported then a suitable message should be displayed instead.

---

iOS

Not applicable.

---

Android

Not applicable.

---

HTML

Make sure that structure/content and presentation are separated out by using CSS alone to control presentation. Content and functionality must work when CSS is disabled or not available.

For example, mark up navigation lists using HTML list markup, and use CSS to style those lists (i.e. to make the list horizontal, to remove the bullets, to provide enough padding between list items, to change the font style, etc).

If CSS is not available, a user will be presented with browser default styles, and therefore still distinguishable, list of links.

HTML Pass Example

<!-- ARIA used in addition to visible text -->
<div>
 <label for="t1">E-mail (required):</label>
 <input type="text" aria-required="true" id="t1" />
</div>


<!-- ARIA tab list supported with hidden '(selected)' text for no CSS or ARIA support cases -->
<style>
 .tabs li {
  float: left;
 }
 
 .tabs a {
  display: block;
  padding: 0.5em;
  border: 1px solid #000;
  color: #000;
  text-decoration: none;
 }
 
 /\* Add visual selected style \*/
 .tabs .selected {
  background: #def;
 }
 
 .hidden-offscreen {
  position: absolute;
  left: -999em;
 }
</style>
 
<ul class="tabs" role="tablist">
 <li role="presentation"><a href="#" role="tab" aria-controls="tab-1" aria-selected+"false">Tab 1</a></li>
 <li role="presentation"><a href="#" role="tab" aria-controls="tab-2" aria-selected="false">Tab 2</a></li>
 <li role="presentation"><a href="#" role="tab" aria-controls="tab-3" aria-selected="true" class="selected">Tab 3<span class="hidden-offscreen"> (selected)</span></a></li>
</ul>

---

Testing

Procedures

1. Identify styles that are not supported by older devices or assistive technologies.
2. Verify that all content is available on older devices and assistive technology that do not support these styles:
   • alternatives for background images,
   • colours,
   • fonts.

Outcome

The following check is true:

• All content is available and readable.

---