---
{
	"title": "Liste de contrôle pour les tests d'accessibilité mobiles - Boîte à outils de l’expérience Web (BOEW)",
	"language": "fr",
	"category": "Autre",
	"description": "Un guide pour les tests d'accessibilité mobiles au jour le jour – on devrait être capable de répondre «oui» à chaque question.",
	"tag": "checklist",
	"parentdir": "checklist",
	"altLangPrefix": "checklist",
	"js": ["demo/mobile-accessibility-check"],
	"dateModified": "2018-05-11"
}
---
<!--
Author: @grifare https://github.com/grifare
-->
<div lang="en">
<p><strong>Needs translation</strong></p>
<!--
# Editing the existing test criteria

More test cases can be inserted to or some can be deleted from HTML files easily, without making any changes in the js file.
Please make sure to update the IDs correctly. There is an easy-to-see pattern: in ep140 for example, first letter (e) indicates section, second letter (p) means PASS, numbers should be unique for each fieldset. (Basic knowledge of form elements is a prerequisite.)
Example:
Existing HTML code:
<li>
	<fieldset>
		<legend>Are navigation cues clear?</legend>
		<input id="ep140" type="radio" name="e140" value="pass"><label for="ep140">&nbsp;Pass</label>&nbsp;
		<input id="ef140" type="radio" name="e140" value="fail"><label for="ef140">&nbsp;Fail</label>&nbsp;
		<input id="en140" type="radio" name="e140" value="na"><label for="en140"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
	</fieldset>
</li>
New HTML code:
<li>
	<fieldset>
		<legend>New test case</legend>
		<input id="ep141" type="radio" name="e141" value="pass"><label for="ep141">&nbsp;Pass</label>&nbsp;
		<input id="ef141" type="radio" name="e141" value="fail"><label for="ef141">&nbsp;Fail</label>&nbsp;
		<input id="en141" type="radio" name="e141" value="na"><label for="en141"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
	</fieldset>
</li>
The mobile-accessibility-check.js counts the chosen radio buttons, posts statistics inside the summary table, and is easier to customise, if needed.
There is no hard-coded value inside the html file it manipulates and variables are as self-explanatory as possible.
-->

<section>
	<h2>Purpose:</h2>
	<p>This is intended as a guide to use in day-to-day testing – one should be able to answer ‘yes’ to each question.</p>
	<small class="alert alert-info">Please remember that if you refresh the page or navigate away, all values you entered will be reset.</small>
</section>

<section>
	<h2>Table of Contents</h2>
	<ul>
		<li>Mobile Accessibility Success Criteria Checklist
			<ul>
				<li><a href="#mas1">Zoom and voice output disabled</a></li>
				<li><a href="#mas2">Voice output enabled</a></li>
				<li><a href="#mas3">Zoom enabled</a></li>
				<li><a href="#mas4">Voice output and zoom enabled</a></li>
				<li><a href="#mas5">Inverse colours</a></li>
				<li><a href="#mas6">Summary</a></li>
			</ul>
		</li>
		<li><a href="#about">About the Checklist</a></li>
	</ul>
</section><!-- /h2 -->

<section class="wb-wamethod mrgn-tp-lg">
	<h2 id="mas1">Zoom and voice output disabled</h2>
	<ol>
		<li>
			<fieldset>
				<legend>Is there sufficient contrast?</legend>
				<input id="ap111" type="radio" name="a111" value="pass"><label for="ap111">&nbsp;Pass</label>&nbsp;
				<input id="af111" type="radio" name="a111" value="fail"><label for="af111">&nbsp;Fail</label>&nbsp;
				<input id="an111" type="radio" name="a111" value="na"><label for="an111"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
		<li>
			<fieldset>
				<legend>Does colour reinforce meaning rather than convey meaning alone?</legend>
				<input id="ap121" type="radio" name="a121" value="pass"><label for="ap121">&nbsp;Pass</label>&nbsp;
				<input id="af121" type="radio" name="a121" value="fail"><label for="af121">&nbsp;Fail</label>&nbsp;
				<input id="an121" type="radio" name="a121" value="na"><label for="an121"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
		<li>
			<fieldset>
				<legend>Are links visually evident?</legend>
				<input id="ap122" type="radio" name="a122" value="pass"><label for="ap122">&nbsp;Pass</label>&nbsp;
				<input id="af122" type="radio" name="a122" value="fail"><label for="af122">&nbsp;Fail</label>&nbsp;
				<input id="an122" type="radio" name="a122" value="na"><label for="an122"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
		<li>
			<fieldset>
				<legend>Are navigation cues clear?</legend>
				<input id="ap123" type="radio" name="a123" value="pass"><label for="ap123">&nbsp;Pass</label>&nbsp;
				<input id="af123" type="radio" name="a123" value="fail"><label for="af123">&nbsp;Fail</label>&nbsp;
				<input id="an123" type="radio" name="a123" value="na"><label for="an123"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
		<li>
			<fieldset>
				<legend>Is <a href="https://web.archive.org/web/20130509175512/http://www.iheni.com/using-opera-10-beta-with-voiceover/">pinch zoom supported (HTML only)</a>?</legend>
				<input id="ap124" type="radio" name="a124" value="pass"><label for="ap124">&nbsp;Pass</label>&nbsp;
				<input id="af124" type="radio" name="a124" value="fail"><label for="af124">&nbsp;Fail</label>&nbsp;
				<input id="an124" type="radio" name="a124" value="na"><label for="an124"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
		<li>
			<fieldset>
				<legend>Is the <a href="http://mobileinputtypes.com/">correct keyboard/input type</a> used in forms i.e. telephone, date, numbers, letters etc?</legend>
				<input id="ap125" type="radio" name="a125" value="pass"><label for="ap125">&nbsp;Pass</label>&nbsp;
				<input id="af125" type="radio" name="a125" value="fail"><label for="af125">&nbsp;Fail</label>&nbsp;
				<input id="an125" type="radio" name="a125" value="na"><label for="an125"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
		<li>
			<fieldset>
				<legend>Can you complete all actions?</legend>
				<input id="ap126" type="radio" name="a126" value="pass"><label for="ap126">&nbsp;Pass</label>&nbsp;
				<input id="af126" type="radio" name="a126" value="fail"><label for="af126">&nbsp;Fail</label>&nbsp;
				<input id="an126" type="radio" name="a126" value="na"><label for="an126"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
		<li>
			<fieldset>
				<legend>Do pop ups fit within the viewport i.e. you don’t have to swipe to find the close/submit/cancel buttons?</legend>
				<input id="ap127" type="radio" name="a127" value="pass"><label for="ap127">&nbsp;Pass</label>&nbsp;
				<input id="af127" type="radio" name="a127" value="fail"><label for="af127">&nbsp;Fail</label>&nbsp;
				<input id="an127" type="radio" name="a127" value="na"><label for="an127"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
		<li>
			<fieldset>
				<legend>Do pop ups have a close button?</legend>
				<input id="ap128" type="radio" name="a128" value="pass"><label for="ap128">&nbsp;Pass</label>&nbsp;
				<input id="af128" type="radio" name="a128" value="fail"><label for="af128">&nbsp;Fail</label>&nbsp;
				<input id="an128" type="radio" name="a128" value="na"><label for="an128"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
		<li>
			<fieldset>
				<legend>Is all content and functionality available by touch?</legend>
				<input id="ap129" type="radio" name="a129" value="pass"><label for="ap129">&nbsp;Pass</label>&nbsp;
				<input id="af129" type="radio" name="a129" value="fail"><label for="af129">&nbsp;Fail</label>&nbsp;
				<input id="an129" type="radio" name="a129" value="na"><label for="an129"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
		<li>
			<fieldset>
				<legend>Is there a clear visible focus on links, form fields, buttons etc when tested with a keyboard (Android)?</legend>
				<input id="ap130" type="radio" name="a130" value="pass"><label for="ap130">&nbsp;Pass</label>&nbsp;
				<input id="af130" type="radio" name="a130" value="fail"><label for="af130">&nbsp;Fail</label>&nbsp;
				<input id="an130" type="radio" name="a130" value="na"><label for="an130"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
		<li>
			<fieldset>
				<legend>Is Text selectable i.e. can users copy and paste and use speak aloud options?</legend>
				<input id="ap131" type="radio" name="a131" value="pass"><label for="ap131">&nbsp;Pass</label>&nbsp;
				<input id="af131" type="radio" name="a131" value="fail"><label for="af131">&nbsp;Fail</label>&nbsp;
				<input id="an131" type="radio" name="a131" value="na"><label for="an131"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
	</ol>
</section><!-- /h2 -->

<section class="wb-wamethod mrgn-tp-lg">
	<h2 id="mas2">Voice output enabled</h2>
	<p>Use the Web Rotor in iOS to test content on selections such as images, headings, landmarks, forms, hints, links, buttons etc. Try not to look at the screen when doing this or activate Screen Curtain if using iOS (3 finger triple tap).</p>
	<ol>
		<li>
		<fieldset>
			<legend>Are images labelled appropriately?</legend>
			<input id="bp120" type="radio" name="b120" value="pass"><label for="bp120">&nbsp;Pass</label>&nbsp;
			<input id="bf120" type="radio" name="b120" value="fail"><label for="bf120">&nbsp;Fail</label>&nbsp;
			<input id="bn120" type="radio" name="b120" value="na"><label for="bn120"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
		</fieldset>
		</li>
		<li>
			<fieldset>
				<legend>Are decorative images ignored?</legend>
				<input id="bp121" type="radio" name="b121" value="pass"><label for="bp121">&nbsp;Pass</label>&nbsp;
				<input id="bf121" type="radio" name="b121" value="fail"><label for="bf121">&nbsp;Fail</label>&nbsp;
				<input id="bn121" type="radio" name="b121" value="na"><label for="bn121"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
		<li>
			<fieldset>
				<legend>Is the <a href="https://web.archive.org/web/20150907093348/http://www.iheni.com/content-order-on-touch-screens/">content order logical</a>?</legend>
				<input id="bp122" type="radio" name="b122" value="pass"><label for="bp122">&nbsp;Pass</label>&nbsp;
				<input id="bf122" type="radio" name="b122" value="fail"><label for="bf122">&nbsp;Fail</label>&nbsp;
				<input id="bn122" type="radio" name="b122" value="na"><label for="bn122"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
		<li>
			<fieldset>
				<legend>Are <a href="https://web.archive.org/web/20180402210727/http://www.iheni.com:80/usable-landmarks-across-desktop-and-mobile/">landmarks</a> labelled or have the appropriate headings been announced with them?</legend>
				<input id="bp123" type="radio" name="b123" value="pass"><label for="bp123">&nbsp;Pass</label>&nbsp;
				<input id="bf123" type="radio" name="b123" value="fail"><label for="bf123">&nbsp;Fail</label>&nbsp;
				<input id="bn123" type="radio" name="b123" value="na"><label for="bn123"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
		<li>
			<fieldset>
				<legend>Do form fields have clear labels?</legend>
				<input id="bp124" type="radio" name="b124" value="pass"><label for="bp124">&nbsp;Pass</label>&nbsp;
				<input id="bf124" type="radio" name="b124" value="fail"><label for="bf124">&nbsp;Fail</label>&nbsp;
				<input id="bn124" type="radio" name="b124" value="na"><label for="bn124"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
		<li>
			<fieldset>
				<legend>Is the appropriate keyboard used in forms i.e. telephone, date, numbers, letters etc?</legend>
				<input id="bp125" type="radio" name="b125" value="pass"><label for="bp125">&nbsp;Pass</label>&nbsp;
				<input id="bf125" type="radio" name="b125" value="fail"><label for="bf125">&nbsp;Fail</label>&nbsp;
				<input id="bn125" type="radio" name="b125" value="na"><label for="bn125"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
		<li>
			<fieldset>
				<legend>Do data table headings read correctly?</legend>
				<input id="bp126" type="radio" name="b126" value="pass"><label for="bp126">&nbsp;Pass</label>&nbsp;
				<input id="bf126" type="radio" name="b126" value="fail"><label for="bf126">&nbsp;Fail</label>&nbsp;
				<input id="bn126" type="radio" name="b126" value="na"><label for="bn126"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
		<li>
			<fieldset>
				<legend>Are hints appropriate?</legend>
				<input id="bp127" type="radio" name="b127" value="pass"><label for="bp127">&nbsp;Pass</label>&nbsp;
				<input id="bf127" type="radio" name="b127" value="fail"><label for="bf127">&nbsp;Fail</label>&nbsp;
				<input id="bn127" type="radio" name="b127" value="na"><label for="bn127"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
		<li>
			<fieldset>
				<legend>Are users notified of navigation cues i.e. can you scroll pages/screen by swiping right when in portrait?</legend>
				<input id="bp128" type="radio" name="b128" value="pass"><label for="bp128">&nbsp;Pass</label>&nbsp;
				<input id="bf128" type="radio" name="b128" value="fail"><label for="bf128">&nbsp;Fail</label>&nbsp;
				<input id="bn128" type="radio" name="b128" value="na"><label for="bn128"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
		<li>
			<fieldset>
				<legend>Are changes of state announced?</legend>
				<input id="bp129" type="radio" name="b129" value="pass"><label for="bp129">&nbsp;Pass</label>&nbsp;
				<input id="bf129" type="radio" name="b129" value="fail"><label for="bf129">&nbsp;Fail</label>&nbsp;
				<input id="bn129" type="radio" name="b129" value="na"><label for="bn129"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
		<li>
			<fieldset>
				<legend>Does link text describe the target?</legend>
				<input id="bp130" type="radio" name="b130" value="pass"><label for="bp130">&nbsp;Pass</label>&nbsp;
				<input id="bf130" type="radio" name="b130" value="fail"><label for="bf130">&nbsp;Fail</label>&nbsp;
				<input id="bn130" type="radio" name="b130" value="na"><label for="bn130"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
		<li>
			<fieldset>
				<legend>Are <a href="https://web.archive.org/web/20130218204846/http://www.spotlessinteractive.com/articles/accessibility/handling-repeated-adjacent-links.php">images and links to the same target grouped into one touchzone</a>?</legend>
				<input id="bp131" type="radio" name="b131" value="pass"><label for="bp131">&nbsp;Pass</label>&nbsp;
				<input id="bf131" type="radio" name="b131" value="fail"><label for="bf131">&nbsp;Fail</label>&nbsp;
				<input id="bn131" type="radio" name="b131" value="na"><label for="bn131"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
		<li>
			<fieldset>
				<legend>Can you complete all actions?</legend>
				<input id="bp132" type="radio" name="b132" value="pass"><label for="bp132">&nbsp;Pass</label>&nbsp;
				<input id="bf132" type="radio" name="b132" value="fail"><label for="bf132">&nbsp;Fail</label>&nbsp;
				<input id="bn132" type="radio" name="b132" value="na"><label for="bn132"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
		<li>
			<fieldset>
				<legend>Can you complete all actions?</legend>
				<input id="bp133" type="radio" name="b133" value="pass"><label for="bp133">&nbsp;Pass</label>&nbsp;
				<input id="bf133" type="radio" name="b133" value="fail"><label for="bf133">&nbsp;Fail</label>&nbsp;
				<input id="bn133" type="radio" name="b133" value="na"><label for="bn133"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
		<li>
			<fieldset>
				<legend>Is content in a different language read correctly?</legend>
				<input id="bp134" type="radio" name="b134" value="pass"><label for="bp134">&nbsp;Pass</label>&nbsp;
				<input id="bf134" type="radio" name="b134" value="fail"><label for="bf134">&nbsp;Fail</label>&nbsp;
				<input id="bn134" type="radio" name="b134" value="na"><label for="bn134"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
		<li>
			<fieldset>
				<legend>Are buttons used for actions?</legend>
				<input id="bp135" type="radio" name="b135" value="pass"><label for="bp135">&nbsp;Pass</label>&nbsp;
				<input id="bf135" type="radio" name="b135" value="fail"><label for="bf135">&nbsp;Fail</label>&nbsp;
				<input id="bn135" type="radio" name="b135" value="na"><label for="bn135"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
		<li>
			<fieldset>
				<legend>Have the correct controls (HTML) and traits (app) been used?</legend>
				<input id="bp136" type="radio" name="b136" value="pass"><label for="bp136">&nbsp;Pass</label>&nbsp;
				<input id="bf136" type="radio" name="b136" value="fail"><label for="bf136">&nbsp;Fail</label>&nbsp;
				<input id="bn136" type="radio" name="b136" value="na"><label for="bn136"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
		<li>
			<fieldset>
				<legend>Is hidden content appropriate and necessary?</legend>
				<input id="bp137" type="radio" name="b137" value="pass"><label for="bp137">&nbsp;Pass</label>&nbsp;
				<input id="bf137" type="radio" name="b137" value="fail"><label for="bf137">&nbsp;Fail</label>&nbsp;
				<input id="bn137" type="radio" name="b137" value="na"><label for="bn137"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
		<li>
			<fieldset>
				<legend>Do pop ups have close buttons?</legend>
				<input id="bp138" type="radio" name="b138" value="pass"><label for="bp138">&nbsp;Pass</label>&nbsp;
				<input id="bf138" type="radio" name="b138" value="fail"><label for="bf138">&nbsp;Fail</label>&nbsp;
				<input id="bn138" type="radio" name="b138" value="na"><label for="bn138"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
		<li>
			<fieldset>
				<legend>Does focus stay in the pop up rather than continue through the rest of the page/screen?</legend>
				<input id="bp139" type="radio" name="b139" value="pass"><label for="bp139">&nbsp;Pass</label>&nbsp;
				<input id="bf139" type="radio" name="b139" value="fail"><label for="bf139">&nbsp;Fail</label>&nbsp;
				<input id="bn139" type="radio" name="b139" value="na"><label for="bn139"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
		<li>
			<fieldset>
				<legend>Is all content and functionality available by swiping left and right and up and down?</legend>
				<input id="bp140" type="radio" name="b140" value="pass"><label for="bp140">&nbsp;Pass</label>&nbsp;
				<input id="bf140" type="radio" name="b140" value="fail"><label for="bf140">&nbsp;Fail</label>&nbsp;
				<input id="bn140" type="radio" name="b140" value="na"><label for="bn140"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
	</ol>
</section><!-- /h2 -->

<section class="wb-wamethod mrgn-tp-lg">
	<h2 id="mas3">Zoom enabled</h2>
	<ol>
		<li>
			<fieldset>
				<legend>Is text readable?</legend>
				<input id="cp138" type="radio" name="c138" value="pass"><label for="cp138">&nbsp;Pass</label>&nbsp;
				<input id="cf138" type="radio" name="c138" value="fail"><label for="cf138">&nbsp;Fail</label>&nbsp;
				<input id="cn138" type="radio" name="c138" value="na"><label for="cn138"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
		<li>
			<fieldset>
				<legend>Are large areas of empty spaces absent?</legend>
				<input id="cp139" type="radio" name="c139" value="pass"><label for="cp139">&nbsp;Pass</label>&nbsp;
				<input id="cf139" type="radio" name="c139" value="fail"><label for="cf139">&nbsp;Fail</label>&nbsp;
				<input id="cn139" type="radio" name="c139" value="na"><label for="cn139"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
		<li>
			<fieldset>
				<legend>Are labels and form inputs not separated by large areas of empty spaces?</legend>
				<input id="cp140" type="radio" name="c140" value="pass"><label for="cp140">&nbsp;Pass</label>&nbsp;
				<input id="cf140" type="radio" name="c140" value="fail"><label for="cf140">&nbsp;Fail</label>&nbsp;
				<input id="cn140" type="radio" name="c140" value="na"><label for="cn140"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
	</ol>
</section><!-- /h2 -->

<section class="wb-wamethod mrgn-tp-lg">
	<h2 id="mas4">Voice output and zoom enabled</h2>
	<p>iOS 6 now allows both zoom and Voiceover to run simultaneously. Follow the same tests used with just zoom enabled, voice output running, and as well as the following:</p>
	<ol>
		<li>
			<fieldset>
				<legend>Does visible text match audible labels on buttons, forms, linked images of text etc?</legend>
				<input id="dp138" type="radio" name="d138" value="pass"><label for="dp138">&nbsp;Pass</label>&nbsp;
				<input id="df138" type="radio" name="d138" value="fail"><label for="df138">&nbsp;Fail</label>&nbsp;
				<input id="dn138" type="radio" name="d138" value="na"><label for="dn138"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
		<li>
			<fieldset>
				<legend>Do visible and Voiceover focus match?</legend>
				<input id="dp139" type="radio" name="d139" value="pass"><label for="dp139">&nbsp;Pass</label>&nbsp;
				<input id="df139" type="radio" name="d139" value="fail"><label for="df139">&nbsp;Fail</label>&nbsp;
				<input id="dn139" type="radio" name="d139" value="na"><label for="dn139"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
	</ol>
</section><!-- /h2 -->

<section class="wb-wamethod mrgn-tp-lg">
	<h2 id="mas5">Inverse colours</h2>
	<p>Follow the same tests used when zoom and voice output are disabled paying special attention to the following:</p>
	<ol>
		<li>
			<fieldset>
				<legend>Is text readable?</legend>
				<input id="ep138" type="radio" name="e138" value="pass"><label for="ep138">&nbsp;Pass</label>&nbsp;
				<input id="ef138" type="radio" name="e138" value="fail"><label for="ef138">&nbsp;Fail</label>&nbsp;
				<input id="en138" type="radio" name="e138" value="na"><label for="en138"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
		<li>
			<fieldset>
				<legend>Is there sufficient contrast?</legend>
				<input id="ep139" type="radio" name="e139" value="pass"><label for="ep139">&nbsp;Pass</label>&nbsp;
				<input id="ef139" type="radio" name="e139" value="fail"><label for="ef139">&nbsp;Fail</label>&nbsp;
				<input id="en139" type="radio" name="e139" value="na"><label for="en139"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
		<li>
			<fieldset>
				<legend>Are navigation cues clear?</legend>
				<input id="ep140" type="radio" name="e140" value="pass"><label for="ep140">&nbsp;Pass</label>&nbsp;
				<input id="ef140" type="radio" name="e140" value="fail"><label for="ef140">&nbsp;Fail</label>&nbsp;
				<input id="en140" type="radio" name="e140" value="na"><label for="en140"><abbr title="Not applicable">&nbsp;N/A</abbr></label>&nbsp;
			</fieldset>
		</li>
	</ol>
</section><!-- /h2 -->

<section>
	<h2 id="mas6">Summary</h2>
		<table id="summary" class="table table-hover">
		<caption class="wb-inv">Test Results</caption>
		<tr>
			<th scope="col">Test Cases</th>
			<th class="text-right" scope="col">Results</th>
			<th class="text-right" scope="col">Percentage</th>
		</tr>
			<tbody>
				<tr>
					<th scope="row">Zoom and voice output disabled</th>
					<td class="text-right"><span id="rsltA"></span>/<span id="rsltACount"></span></td>
					<td class="text-right">(<span id="percA"></span>%)</td>
				</tr>
				<tr>
					<th scope="row">Voice output enabled</th>
					<td class="text-right"><span id="rsltB"></span>/<span id="rsltBCount"></span></td>
					<td class="text-right">(<span id="percB"></span>%)</td>
				</tr>
				<tr>
					<th scope="row">Zoom enabled</th>
					<td class="text-right"><span id="rsltC"></span>/<span id="rsltCCount"></span></td>
					<td class="text-right">(<span id="percC"></span>%)</td>
				</tr>
				<tr>
					<th scope="row">Voice output and zoom enabled</th>
					<td class="text-right"><span id="rsltD"></span>/<span id="rsltDCount"></span></td>
					<td class="text-right">(<span id="percD"></span>%)</td>
				</tr>
				<tr>
					<th scope="row">Inverse colours</th>
					<td class="text-right"><span id="rsltE"></span>/<span id="rsltECount"></span></td>
					<td class="text-right">(<span id="percE"></span>%)</td>
				</tr>
			</tbody>
			<tbody>
				<tr class="success">
					<th scope="row">Total items passed</th>
					<td class="text-right"><span id="itemsPassed"></span>/<span class="totalItems"></span></td>
					<td class="text-right">(<span id="percPassed"></span>%)</td>
				</tr>
			</tbody>
			<tbody>
				<tr class="active">
					<th scope="row">Number of items evaluated</th>
					<td class="text-right"><span id="itemsEvaluated"></span>/<span class="totalItems"></span></td>
					<td class="text-right">(<span id="percEval"></span>%)</td>
				</tr>
				<tr class="active">
					<th scope="row">Items <abbr title="Not applicable">N/A</abbr></th>
					<td class="text-right"><span id="itemsNotApplicable"></span>/<span class="totalItems"></span></td>
					<td class="text-right">(<span id="percNA"></span>%)</td>
				</tr>
			</tbody>
		</table>
		<p><strong>Note:</strong> The number of total items passed means the total number of PASS and <abbr title="Not applicable">N/A</abbr>.</p>
</section>

<section>
	<h2 id="about">About:</h2>
	<p>Inspired by Al Duggin’s <strong>browser based tests for accessibility</strong> in his kick ass post <a onclick="javascript:_gaq.push(['_trackPageview', '/out/alistairduggin.co.uk/blog/accessibile-interoperable-webpage-1']);" href="https://alistairduggin.co.uk/blog/accessibile-interoperable-webpage-1">building a web page with accessibility and interoperability in mind</a>, I thought I’d put some tests together for mobile. This is intended as a guide you can use in day-to-day testing – you should be able to answer ‘yes’ to each question.</p>
	<p>Tests should be carried out in the <a href="https://web.archive.org/web/20160408173132/http://www.iheni.com/talk-is-cheap-screen-reader-testing-on-mobile/">native browser in iOS Android</a> or any other of your <a href="https://web.archive.org/web/20180225031631/http://www.iheni.com:80/getting-to-grips-with-a-mobile-accessibility-strategy/">supported devices</a> without any accessibility settings or support running as well as a combination of settings and support running i.e. zoom, voice output, inverse colours etc.</p>
	<p>It’s worth also checking content in <a href="https://web.archive.org/web/20160810040135/http://www.iheni.com/accessible-firefox-chrome-android-ios/">Firefox and Chrome on iOS and Android</a> which both have voice output support and various zoom functions. I find this especially useful when I need to establish whether the content, voice output or browser is buggy.</p>
	<p>Finally this is a general list of core tests. Different devices will offer different accessibility settings and support ranging from anything including external braille displays and keyboards to different types of zoom. It’s important to be aware of these and include them in your testing where possible.</p>
	<p>Henny Swan</p>
	<small>Sourced from this <a href="https://web.archive.org/web/20180129002224/http://www.iheni.com:80/mobile-accessibility-tests/">blog</a>.</small>
</section><!-- /h2 -->
</div><!-- /lang en -->
