Styling and readability

Must

Core content must still be accessible when styling is unsupported or removed.

Description

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

Content must be separated from presentation. Content and functionality must still work without CSS or with CSS disabled. When using ARIA or HTML 5 techniques, use fallback techniques such as CSS off-screen text to identify custom controls, these must still be readable with CSS disabled.

HTML 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>                        
<!-- No visible indication of the required state -->
<div>
	<label for="t1">E-mail:</label>
	<input type="text" aria-required="true" id="t1" />
</div>                        

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

The following check is true:

  • All content is available and readable.