You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1468 lines
64 KiB
1468 lines
64 KiB
<?xml version="1.0" encoding="utf-8"?>
|
|
<!DOCTYPE html
|
|
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
|
<title>Extended Guidelines for Mobile Web Best Practices 1.0</title>
|
|
<style type="text/css" xml:space="preserve">
|
|
code { font-family: monospace; }
|
|
.sublevel { margin-left: 1em; }
|
|
.desc { margin-left: 2em; }
|
|
.example { margin-left: 4em; }
|
|
#Evaluation_proc_div div p, #Evaluation_proc_div div img { margin-left: 2em; }
|
|
#Evaluation_Struc_div p { margin-left: 2em; }
|
|
</style>
|
|
<link rel="stylesheet" type="text/css"
|
|
href="http://www.w3.org/StyleSheets/TR/W3C-WG-NOTE.css"/>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="head">
|
|
<p>
|
|
<a href="http://www.w3.org/">
|
|
<img src="http://www.w3.org/Icons/w3c_home" alt="W3C" height="48" width="72"/>
|
|
</a>
|
|
</p>
|
|
|
|
<h1>
|
|
<a name="title" id="title"/>Extended Guidelines for Mobile Web Best Practices 1.0</h1>
|
|
|
|
<h2>
|
|
<a name="w3c-doctype" id="w3c-doctype"/>W3C Working Group Note 20 October 2009</h2>
|
|
<dl>
|
|
<dt/>
|
|
<dt>This version:</dt>
|
|
<dd>
|
|
<a href="http://www.w3.org/TR/2009/NOTE-mwbp-guidelines-20091020/">http://www.w3.org/TR/2009/NOTE-mwbp-guidelines-20091020/</a>
|
|
</dd>
|
|
<dt>Latest version:</dt>
|
|
<dd>
|
|
<a href="http://www.w3.org/TR/mwbp-guidelines/">http://www.w3.org/TR/mwbp-guidelines/</a>
|
|
</dd>
|
|
<dt>Previous version:</dt>
|
|
<dd>none</dd>
|
|
<dt/>
|
|
<dt>Editor:</dt>
|
|
<dd>Kai Scheppe, Deutsche Telekom AG</dd>
|
|
<dt/>
|
|
<dt>Substantial contributions made by:</dt>
|
|
<dd>Phil Archer, W3C/ERCIM (formerly at FOSI)<br clear="none"/>
|
|
Alan Chuter, Technosite<br clear="none"/>
|
|
Jo Rabin, DotMobi </dd>
|
|
<dd>Dave Rooks, Segala</dd>
|
|
<dd>José Manrique López de la Fuente, Fundación CTIC</dd>
|
|
</dl>
|
|
|
|
<p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2009 <a href="http://www.w3.org/"><acronym title="World Wide Web Consortium">W3C</acronym></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology">MIT</acronym></a>, <a href="http://www.ercim.org/"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>, <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply.</p>
|
|
</div>
|
|
<hr/>
|
|
|
|
<div>
|
|
<h2>
|
|
<a name="abstract" id="abstract"/>Abstract</h2>
|
|
|
|
<p>This document supplements <a href="http://www.w3.org/TR/mobile-bp/">W3C
|
|
Mobile Web Best Practices 1.0</a> [<a href="#MWBP" id="x1rz" title="MWBP" name="x1rz">MWBP</a>] by providing additional evaluations of conformance to
|
|
Best Practice statements and by providing additional interpretations of Best
|
|
Practice statements. </p>
|
|
</div>
|
|
|
|
<div>
|
|
<h2>
|
|
<a name="status" id="status"/>Status of this Document</h2>
|
|
|
|
<p>
|
|
<em>This section describes the status of this document at the time of its
|
|
publication. Other documents may supersede this document. A list of current W3C
|
|
publications and the latest revision of this technical report can be found in
|
|
the W3C technical reports index at http://www.w3.org/TR/. </em>
|
|
</p>
|
|
|
|
<p>This is a public <strong>Working Group Note</strong> produced by the <a href="http://www.w3.org/2005/MWI/BPWG/">Mobile Web Best Practices Working
|
|
Group</a> as part of the <a href="http://www.w3.org/2005/MWI/Activity">Mobile
|
|
Web Initiative</a>.</p>
|
|
|
|
<p>This Note is the result of the group's chartered work on a second level for mobileOK [<a href="#MOKTESTS">MOKTESTS</a>]. The group resolved against the introduction of a second level for mobileOK as it believes it would negatively affect the adoption of mobileOK. This Note was published on 8 October 2009. The group does not expect to further update the document at this point. Please send comments on this document to the Working Group's public email list <a href="mailto:public-bpwg-comments@w3.org">public-bpwg-comments@w3.org</a>, a <a href="http://lists.w3.org/Archives/Public/public-bpwg-comments/">publicly archived mailing list</a> with a subject that starts with "[Extended guidelines for MWBP]".</p>
|
|
|
|
<p>Publication as a Working Group Note does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.</p>
|
|
|
|
<p>
|
|
This document was produced by a group operating under the <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent Policy</a>. W3C maintains a <a href="http://www.w3.org/2004/01/pp-impl/37584/status">public list of any patent disclosures</a> made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential"
|
|
>Essential Claim(s)</a> must disclose the information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure"
|
|
>section 6 of the W3C Patent Policy</a>.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="toc">
|
|
<h2 id="contents">Table of Contents</h2>
|
|
|
|
<p>1 <a href="#Introducti">Introduction</a>
|
|
</p>
|
|
|
|
<p class="sublevel">1.1 <a href="#Purpose">Purpose</a>
|
|
<br clear="none"/>
|
|
1.2 <a href="#Relationsh">Relationship to mobileOK Basic Tests</a>
|
|
<br clear="none"/>
|
|
|
|
1.3 <a href="#Scope">Scope</a>
|
|
<br clear="none"/>
|
|
1.4 <a href="#Audience">Audience</a>
|
|
</p>
|
|
|
|
<p>2 <a href="#Sampling">Sampling</a>
|
|
</p>
|
|
|
|
<p class="sublevel">2.1 <a href="#Evaluation_Scope">Evaluation Scope</a>
|
|
<br clear="none"/>
|
|
2.2 <a href="#Evaluation_Struc">Evaluation Structure</a>
|
|
</p>
|
|
|
|
<p>3 <a href="#Evaluation_proc">Evaluation
|
|
Procedures</a>
|
|
</p>
|
|
|
|
<p class="sublevel">3.1 <a href="#L37603">Access Keys</a>
|
|
<br clear="none"/>
|
|
3.2 <a href="#L11263">Auto Refresh</a>
|
|
<br clear="none"/>
|
|
3.3 <a href="#L48755">Avoid Free Text</a>
|
|
<br clear="none"/>
|
|
3.4 <a href="#Background">Background Image Readability</a>
|
|
<br clear="none"/>
|
|
|
|
3.5 <a href="#L9472">Balance</a>
|
|
<br clear="none"/>
|
|
3.6 <a href="#L16806">Device Capabilities</a>
|
|
<br clear="none"/>
|
|
3.7 <a href="#L20732">Central Meaning</a>
|
|
<br clear="none"/>
|
|
3.8 <a href="#Suitable">Suitable, Limited and Clarity</a>
|
|
<br clear="none"/>
|
|
3.9 <a href="#L45121">Content Format Preferred</a>
|
|
<br clear="none"/>
|
|
3.10 <a href="#L68079">Control Labeling and Position</a>
|
|
<br clear="none"/>
|
|
|
|
3.11 <a href="#L89263">Cookies</a>
|
|
<br clear="none"/>
|
|
3.12 <a href="#L103845">Error Messages</a>
|
|
<br clear="none"/>
|
|
3.13 <a href="#L113158">Fonts, Style Sheet Use and Style Sheet Support</a>
|
|
<br clear="none"/>
|
|
3.14 <a href="#L120371">Graphics for Spacing</a>
|
|
<br clear="none"/>
|
|
3.15 <a href="#L124791">Link Target ID</a>
|
|
<br clear="none"/>
|
|
|
|
3.16 <a href="#L134272">Minimize Keystrokes</a>
|
|
<br clear="none"/>
|
|
3.17 <a href="#L138133">Navbar</a>
|
|
<br clear="none"/>
|
|
3.18 <a href="#L145858">Navigation</a>
|
|
<br clear="none"/>
|
|
3.19 <a href="#L146017">Non-text Alternatives</a>
|
|
<br clear="none"/>
|
|
3.20 <a href="#L151530">Objects or Scripts</a>
|
|
<br clear="none"/>
|
|
3.21 <a href="#L154665">Page Size Usable</a>
|
|
<br clear="none"/>
|
|
|
|
3.22 <a href="#L160777">Page Title</a>
|
|
<br clear="none"/>
|
|
3.23 <a href="#L174697">Provide Defaults</a>
|
|
<br clear="none"/>
|
|
3.24 <a href="#L179567">Scrolling</a>
|
|
<br clear="none"/>
|
|
3.25 <a href="#L184555">Structure</a>
|
|
<br clear="none"/>
|
|
3.26 <a href="#L187879">Style Sheets Size</a>
|
|
<br clear="none"/>
|
|
3.27 <a href="#L194701">Tab Order</a>
|
|
<br clear="none"/>
|
|
|
|
3.28 <a href="#L201556">Tables Layout</a>
|
|
<br clear="none"/>
|
|
3.29 <a href="#L204960">Tables Support</a>
|
|
<br clear="none"/>
|
|
3.30 <a href="#L208631">URIs</a>
|
|
<br clear="none"/>
|
|
3.31 <a href="#L212226">Use of Color</a>
|
|
</p>
|
|
|
|
<h3>
|
|
<a id="appendices" name="appendices">Appendices</a>
|
|
</h3>
|
|
|
|
<p>A <a href="#References">References</a>
|
|
</p>
|
|
</div>
|
|
<hr/>
|
|
|
|
<div class="body">
|
|
|
|
<div>
|
|
<h2>1 <a name="Introducti" id="Introducti">Introduction</a>
|
|
</h2>
|
|
|
|
<div>
|
|
<h3>1.1 <a name="Purpose" id="Purpose">Purpose</a>
|
|
</h3>
|
|
|
|
<p>This document builds on Mobile Web Best Practices 1.0 [<a href="#MWBP" id="kgc2" title="MWBP" name="kgc2">MWBP</a>] and helps content providers to
|
|
create content suitable for delivery to mobile devices. It does this by
|
|
providing additional evaluations for content and by interpreting and clarifying
|
|
some Best Practice statements. </p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3>1.2 <a name="Relationsh" id="Relationsh">Relationship to mobileOK Basic
|
|
Tests</a>
|
|
</h3>
|
|
|
|
<p>mobileOK Basic Tests 1.0 [<a href="#MOKTESTS" id="od22" title="moktests" name="od22">MOKTESTS</a>] also builds on Mobile Web Best Practices 1.0 [<a href="#MWBP" id="ubru" title="MWBP" name="ubru">MWBP</a>] and describes
|
|
machine-executable tests for some of the Best Practice statements. Performing
|
|
those tests assesses whether a Web site is capable of delivering content to the
|
|
hypothetical basic mobile device called the "Default Delivery Context" (<a href="http://www.w3.org/TR/mobile-bp/#ddc">DDC</a>). It does not assess the
|
|
capability of a Web site to deliver alternative representations that take
|
|
advantage of capabilities that exceed those of the <a href="http://www.w3.org/TR/mobile-bp/#ddc">DDC</a> when accessed from such
|
|
devices. This addendum provides an additional set of evaluations, some
|
|
machine-testable, that go beyond the objectives of mobileOK Basic Tests in that
|
|
they are not applicable solely to the <a href="http://www.w3.org/TR/mobile-bp/#ddc">DDC</a>. </p>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
<h3>1.3 <a name="Scope" id="Scope">Scope</a>
|
|
</h3>
|
|
|
|
<p>The scope of this document is a commentary on Mobile Web Best Practices 1.0
|
|
[<a href="#MWBP" id="rx2u" title="MWBP" name="rx2u">MWBP</a>] and mobileOK
|
|
Basic Tests 1.0 [<a href="#MOKTESTS" id="qk9c" title="moktests" name="qk9c">MOKTESTS</a>]. </p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3>1.4 <a name="Audience" id="Audience">Audience</a>
|
|
</h3>
|
|
|
|
<p>This document is intended for creators, maintainers and operators of Web
|
|
sites. Readers of this document are expected to be familiar with the creation
|
|
of Web sites, and to have a general familiarity with the technologies involved,
|
|
such as Web servers and HTTP, and with Mobile Web Best Practices and mobileOK
|
|
Basic Tests. </p>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h2>2 <a name="Sampling" id="Sampling">Sampling</a>
|
|
</h2>
|
|
|
|
<div>
|
|
<h3>2.1 <a name="Evaluation_Scope" id="Evaluation_Scope">Evaluation
|
|
Scope</a>
|
|
</h3>
|
|
|
|
<p>While most evaluations apply to single pages or <a href="http://www.w3.org/TR/di-gloss/#def-delivery-unit" id="rebr"
|
|
title="Glossary definition of 'delivery units'"
|
|
name="rebr"
|
|
>delivery units</a>
|
|
|
|
[<a href="#DIGLOSS">DIGLOSS</a>], some, such as <a href="#L37603">ACCESS_KEYS</a>, <a href="#L145858">NAVIGATION</a> and <a href="#L208631">URIS</a>, are tested across multiple pages. </p>
|
|
</div>
|
|
|
|
<div id="Evaluation_Struc_div">
|
|
<h3>2.2 <a name="Evaluation_Struc" id="Evaluation_Struc">Evaluation
|
|
Structure</a>
|
|
</h3>
|
|
|
|
<p style="margin-left:0;">Where useful the following structure has been adhered to:</p>
|
|
|
|
<h4 id="d1e487">Related mobileOK Basic Test</h4>
|
|
|
|
<p>A link to a related mobileOK Basic Test, where
|
|
relevant.</p>
|
|
|
|
<h4 id="d1e495">Relevant Delivery Context Capabilities</h4>
|
|
|
|
<p>Properties of the <a href="http://www.w3.org/TR/di-gloss/#def-delivery-context">delivery context</a>
|
|
|
|
[<a href="#DIGLOSS">DIGLOSS</a>] that are referred to by the evaluation. </p>
|
|
|
|
<p>You will need to use a Device Description
|
|
Repository (<a href="http://www.w3.org/TR/DDR-Simple-API/">DDR)</a> [<a href="#DDRSA">DDRSA</a>] to find out which capabilities a given device
|
|
possesses. See <a href="http://deviceatlas.com/">Device Atlas</a> or <a href="http://forge.morfeo-project.org/projects/ddr-ri">Morfeo</a> for example.
|
|
|
|
</p>
|
|
|
|
<h4 id="d1e524">Interpretation of the Best Practice</h4>
|
|
|
|
<p>Clarification of one or more aspects of the Best
|
|
Practice to which the evaluation refers.</p>
|
|
|
|
<h4 id="d1e531">Evaluation Procedure</h4>
|
|
|
|
<p>How to carry out the evaluation.</p>
|
|
|
|
<h4 id="d1e539">Examples</h4>
|
|
|
|
<p>Explanatory material. </p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="Evaluation_proc_div">
|
|
<h2>3 <a name="Evaluation_proc" id="Evaluation_proc">Evaluation
|
|
Procedures</a>
|
|
</h2>
|
|
|
|
<p>To satisfy the <a href="http://www.w3.org/TR/mobile-bp/#TESTING" id="yeq4" title="Testing"
|
|
name="yeq4"
|
|
>Testing</a> Best Practice, the following
|
|
evaluations should be carried out using a <strong>range of real
|
|
devices</strong> as well as, or instead of, emulators. Note that several tests
|
|
require certain features of the device or browser to be absent or disabled if
|
|
present. </p>
|
|
|
|
<div>
|
|
<h3>
|
|
<a href="http://www.w3.org/TR/mobile-bp/#ACCESS_KEYS" name="L37603" id="L37603"
|
|
>3.1 Access Keys</a>
|
|
</h3>
|
|
|
|
<h4 id="d1e570">Relevant Delivery Context Capability</h4>
|
|
|
|
<p>Support for access keys, i.e. key presses that
|
|
provide a short cut to activation of links in a page.</p>
|
|
|
|
<h4 id="d1e577">Interpretation of the Best Practice</h4>
|
|
|
|
<p>Typically a "Web site" has common navigation links
|
|
that apply to most, or all, pages in the site (a menu bar for example). Such
|
|
navigation links should be associated with access keys and the keys assigned
|
|
should be the same on all pages. Other frequently accessed links (such as
|
|
navigation within a page) may also benefit from being associated with an access
|
|
key.</p>
|
|
|
|
<p>Note that access keys are not supported by some
|
|
user agents. Representations targeted at such user agents should not contain
|
|
link decoration.</p>
|
|
|
|
<h4 id="d1e588">Evaluation Procedure</h4>
|
|
|
|
<p>Where there are elements that would benefit from
|
|
quick access, particularly navigation links and form controls:</p>
|
|
<ul>
|
|
<li>Verify that access keys are assigned to
|
|
navigation links present on all pages on the site.</li>
|
|
<li>Verify that access keys are used consistently
|
|
for the same links.</li>
|
|
<li>Verify that the access keys are numeric, or if
|
|
not, have been tailored for use on a specific target device.</li>
|
|
<li>Verify that the user can establish which access
|
|
keys are assigned to links.</li>
|
|
</ul>
|
|
|
|
</div>
|
|
<div>
|
|
<h3>
|
|
<a href="http://www.w3.org/TR/mobile-bp/#AUTO_REFRESH" name="L11263" id="L11263"
|
|
>3.2 Auto Refresh</a>
|
|
</h3>
|
|
|
|
<h4 id="d1e612">Related mobileOK Basic Test</h4>
|
|
|
|
<p>
|
|
<a href="http://www.w3.org/TR/mobileOK-basic10-tests/#AUTO_REFRESH">AUTO_REFRESH</a>
|
|
and <a href="http://www.w3.org/TR/mobileOK-basic10-tests/#AUTO_REFRESH">REDIRECTION</a>
|
|
</p>
|
|
|
|
<h4 id="d1e623">Evaluation Procedure</h4>
|
|
|
|
<p>Verify that pages that use automatic refresh (e.g.
|
|
as highlighted by a mobileOK evaluation) contain a link to a non-refreshing
|
|
version. </p>
|
|
|
|
</div>
|
|
<div>
|
|
<h3>
|
|
<a href="http://www.w3.org/TR/mobile-bp/#AVOID_FREE_TEXT" name="L48755"
|
|
id="L48755"
|
|
>3.3 Avoid Free Text</a>
|
|
</h3>
|
|
|
|
<h4 id="d1e637">Relevant Delivery Context Capabilities</h4>
|
|
<ul>
|
|
<li>Maximum size of a select list.</li>
|
|
<li>Availability of an Alpha-Numeric Keyboard.</li>
|
|
</ul>
|
|
|
|
<h4 id="d1e647">Evaluation Procedure </h4>
|
|
|
|
<p>Assess whether free-text input fields:</p>
|
|
|
|
<p class="example">
|
|
<code><input type="text">, <input
|
|
type="password">, <textarea></code>
|
|
</p>
|
|
|
|
<p>would provide a more usable experience if replaced
|
|
by a series of radio buttons, checkboxes or a select menu (where the number of
|
|
choices is limited so as to be appropriate to the capabilities and ergonomics
|
|
of the device).<br clear="none"/>
|
|
</p>
|
|
<strong>Examples </strong>
|
|
<ul>
|
|
<li>Replacement of text entry with selection:
|
|
<ul>
|
|
<li>Selection ZIP/Post codes from a list, perhaps within a limited
|
|
geographical area or by progressive refinement based on previous
|
|
selection. </li>
|
|
<li>Selecting a country from a drop down list, ideally with the most
|
|
likely choice(s) at the top as well as in the list in their
|
|
alphabetical position. </li>
|
|
</ul>
|
|
|
|
</li>
|
|
</ul>
|
|
<ul>
|
|
<li>Use of radio buttons for limited choice selections such as (Yes/No) and
|
|
(Small/Medium/Large). </li>
|
|
</ul>
|
|
|
|
</div>
|
|
<div>
|
|
<h3>3.4 <a href="http://www.w3.org/TR/mobile-bp/#BACKGROUND_IMAGE_READABILITY"
|
|
name="Background"
|
|
id="Background"
|
|
>Background Image Readability</a> and <a href="http://www.w3.org/TR/mobile-bp/#COLOR_CONTRAST">Color Contrast</a>
|
|
</h3>
|
|
|
|
<h4 id="d1e694">Relevant Delivery Context Capabilities</h4>
|
|
<ul>
|
|
<li>Screen Contrast </li>
|
|
<li>Color Depth </li>
|
|
<li>Screen quality </li>
|
|
<li>Resolution</li>
|
|
</ul>
|
|
|
|
<h4 id="d1e709">Interpretation of the Best Practice</h4>
|
|
|
|
<p>The use of colored, patterned or photographic
|
|
background images can make text hard to read both because of reduced device
|
|
screen contrast and because of the context of use, in bright sunlight for
|
|
example, reducing the perceived contrast. </p>
|
|
|
|
<h4 id="d1e717">Evaluation Procedure </h4>
|
|
|
|
<p>Verify that where background images are used
|
|
contrast ratio between the overlying text and each color used in the background
|
|
image is sufficient. </p>
|
|
|
|
<h4 id="d1e724">Examples</h4>
|
|
<img alt="Example of an image where the contrast between the background color and the foreground text is 5:1"
|
|
src="contrastimage.png"
|
|
width="461"
|
|
height="49"/>
|
|
|
|
|
|
<p>There are also a variety of color contrast measuring tools available online,
|
|
such as: </p>
|
|
<ul>
|
|
<li>
|
|
<a href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/G18.html"
|
|
title="WCAG Technique G18"
|
|
>WCAG Technique G18</a>
|
|
(provides a formula as well as links to further tools) [<a href="#WCAG20">WCAG20</a>]<br clear="none"/>
|
|
</li>
|
|
<li>
|
|
<a href="http://www.w3.org/TR/mobile-bp/#COLOR_CONTRAST">Color Contrast
|
|
Check</a>
|
|
</li>
|
|
<li>
|
|
<a href="http://cssanalyzer.com/">CSS Analyzer</a>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
<div>
|
|
<h3>
|
|
<a href="http://www.w3.org/TR/mobile-bp/#BALANCE" name="L9472" id="L9472"
|
|
>3.5 Balance</a>
|
|
</h3>
|
|
|
|
<h4 id="d1e759">Relevant Delivery Context Capability </h4>
|
|
|
|
<p>Type of scrolling and link navigation</p>
|
|
|
|
<h4 id="d1e766">Interpretation of the Best Practice </h4>
|
|
|
|
<p>Different devices provide a number of means of
|
|
navigating within a page: </p>
|
|
<ul>
|
|
<li>Selection of each link in document order.</li>
|
|
<li>Scrolling independently of links.</li>
|
|
<li>Stylus or Finger Based.</li>
|
|
</ul>
|
|
|
|
<p>If there is a large number of links in the page,
|
|
users of devices that can only navigate by successive selection of links will
|
|
find it difficult to scroll the page and use links that are lower down. </p>
|
|
|
|
<h4 id="d1e785">Evaluation Procedure </h4>
|
|
|
|
<p>Assess the number of links in the page. If the
|
|
representation is targeted at devices that do not support navigation
|
|
independently of the number of links in the page, verify that the page does not
|
|
use more than 30 links. Other types of device and special purpose pages may
|
|
warrant a larger number of links. </p>
|
|
|
|
</div>
|
|
<div>
|
|
<h3>
|
|
<a href="http://www.w3.org/TR/mobile-bp/#CAPABILITIES" name="L16806" id="L16806"
|
|
>3.6 Exploit Device Capabilities</a>
|
|
</h3>
|
|
|
|
<h4 id="d1e800">Relevant Delivery Context Capabilities </h4>
|
|
|
|
<ul>
|
|
<li>Screen Width </li>
|
|
<li>Screen Height </li>
|
|
<li>Color Depth </li>
|
|
<li>Markup Language Support</li>
|
|
<li>Character Encoding Support </li>
|
|
<li>Image Format Support </li>
|
|
<li>CSS Support </li>
|
|
<li>Script and XHR Support </li>
|
|
</ul>
|
|
|
|
<p>For details see the <a href="http://www.w3.org/TR/mobile-bp/#ddc">DDC</a>. </p>
|
|
|
|
<h4 id="d1e828">Interpretation of the Best Practice</h4>
|
|
|
|
<p>Unlike the <a href="http://www.w3.org/TR/mobile-bp/#ddc">DDC</a>, many real devices support
|
|
Scripts, XML HTTP requests, DOM Capabilities, Cookies and advanced CSS support.
|
|
Web sites that are designed to support a variety of different representations
|
|
might target a particular demographic of users with certain classes of device
|
|
or simply make significant efforts to give users the best possible experience.
|
|
Browsing a simple, static Web site on an advanced device may be little more
|
|
rewarding than attempting to browse one that assumes capabilities that are
|
|
unavailable on the device used, thereby making the content inaccessible. </p>
|
|
|
|
<p>There is no simple rule or single evaluation that
|
|
will determine whether a content provider has exploited device capabilities.
|
|
There will always be a balance between the cost of providing multiple
|
|
representations versus the benefit of doing so. For this reason, we do not
|
|
provide a formal evaluation procedure to test this aspect of Best Practice
|
|
except to say that any evaluation necessarily requires the Web site to be
|
|
accessed from a variety of different devices with different capabilities.
|
|
However, we do offer some examples of the kind of informal evaluation that may
|
|
be possible, depending on what type of content is being offered. </p>
|
|
|
|
<h4 id="d1e843">Examples </h4>
|
|
<ul>
|
|
<li>Where links lead to content that may not work on less-capable devices,
|
|
e.g. links to video, the user should be warned. Such warnings should not
|
|
appear when the content is delivered to a target device known to
|
|
support the feature (see also <a href="#Suitable">3.8 Suitable, Limited
|
|
and Clarity</a>, below).</li>
|
|
<li>The representation should not be unnecessarily limited to 120 pixels wide
|
|
for devices that have wider screens.</li>
|
|
<li>JavaScript should be used for form validation on devices that support it
|
|
as this can reduce network traffic and latency.</li>
|
|
<li>In forms, scripting may be used to adjust the content or state of a
|
|
controls based on the input already supplied.</li>
|
|
<li>Enhancements, such as JavaScript and advanced CSS, must fail
|
|
gracefully - i.e. where such features are used, the lack of support on
|
|
less sophisticated devices must not prevent access or limit
|
|
functionality.</li>
|
|
</ul>
|
|
|
|
</div>
|
|
<div>
|
|
<h3>
|
|
<a href="http://www.w3.org/TR/mobile-bp/#CENTRAL_MEANING" name="L20732"
|
|
id="L20732"
|
|
>3.7 Central Meaning</a>
|
|
</h3>
|
|
|
|
<h4 id="d1e870">Interpretation of the Best Practice </h4>
|
|
|
|
<p>When accessing a page on a mobile device, the
|
|
primary content should be visible. This means that the well-established layout
|
|
for desktop devices, with navigation along the top and/or side of the page, is
|
|
usually inappropriate. </p>
|
|
|
|
<h4 id="d1e877">Evaluation Procedure </h4>
|
|
|
|
<p>Verify that the main content of the web page is
|
|
visible without scrolling. This is usually content that is unique to the page
|
|
and does not repeat across several pages </p>
|
|
|
|
</div>
|
|
<div>
|
|
<h3>
|
|
<a href="http://www.w3.org/TR/mobile-bp/#SUITABLE" name="Suitable" id="Suitable"
|
|
>3.8 Suitable</a>, <a href="http://www.w3.org/TR/mobile-bp/#LIMITED">Limited</a> and <a href="http://www.w3.org/TR/mobile-bp/#CLARITY">Clarity</a>
|
|
</h3>
|
|
|
|
<h4 id="d1e898">Interpretation of the Best Practice</h4>
|
|
|
|
<p>Informational content should be provided in a
|
|
manner suitable for access on mobile, i.e. with an eye to quick assimilation by
|
|
the user, rather than in a verbose style. </p>
|
|
|
|
<h4 id="d1e905">Evaluation Procedure </h4>
|
|
<ul>
|
|
<li>Verify that informational content is characterized by a brief writing
|
|
style using features such as headings and lists.</li>
|
|
<li>Verify that a user can see skip through the content if so desired to
|
|
reach the particular information they seek.</li>
|
|
<li>Verify that any more detailed information that is provided comes after
|
|
the introductory paragraph(s).</li>
|
|
<li>Verify that the text is generally written in short sentences without
|
|
unnecessary sub-clauses.</li>
|
|
<li>Verify that unfamiliar terms are not used (except technical terms
|
|
relevant to the subject matter). </li>
|
|
</ul>
|
|
|
|
<h4 id="d1e922">Examples</h4>
|
|
<ul>
|
|
<li>News stories are typically 'front-loaded' with key information (who,
|
|
what, why, when) provided in the headline and in the opening sentences.
|
|
</li>
|
|
<li>Event information should be in the form Venue: village hall; time: 6pm;
|
|
Refreshments available; rather than the more verbose: "The meeting will
|
|
begin at 6pm in the village hall where refreshments will be available."
|
|
</li>
|
|
<li>
|
|
<div>
|
|
Non-mechanical gardening implements are referred to as a spade. </div>
|
|
</li>
|
|
<li>For English language pages, the <a href="http://www.usingenglish.com/glossary/fog-index.html">Gunning Fog
|
|
test</a> can give an indication of complexity. A level of roughly 7 or 8
|
|
would be ideal. </li>
|
|
<li>Otherwise unsuitable content may be suitable in a controlled environment,
|
|
perhaps with logon for entry. This might be relevant, for example, for the
|
|
retrieval of large medical scans on mobile devices.</li>
|
|
</ul>
|
|
|
|
</div>
|
|
<div>
|
|
<h3>
|
|
<a href="http://www.w3.org/TR/mobile-bp/#CONTENT_FORMAT_PREFERRED" name="L45121"
|
|
id="L45121"
|
|
>3.9 Content Format Preferred</a>
|
|
</h3>
|
|
|
|
<h4 id="d1e952">Related mobileOK Basic Test</h4>
|
|
|
|
<p>
|
|
<a href="http://www.w3.org/TR/mobileOK-basic10-tests/#CONTENT_FORMAT_SUPPORT"
|
|
>CONTENT
|
|
FORMAT SUPPORT</a>
|
|
</p>
|
|
|
|
<h4 id="d1e960">Interpretation of the Best Practice </h4>
|
|
|
|
<p>If a device supports one format better than
|
|
another, it is preferable to deliver content in the better-supported format if
|
|
possible. </p>
|
|
|
|
<h4 id="d1e968">Evaluation Procedure</h4>
|
|
<ul>
|
|
<li>Request the content simulating a device with a preference for a
|
|
particular format.</li>
|
|
<li>Repeat the request simulating a device that has a preference for a
|
|
different format.</li>
|
|
<li>Verify that the appropriate alternative format has been delivered in both
|
|
cases.</li>
|
|
</ul>
|
|
<strong>Examples</strong>
|
|
|
|
<ul>
|
|
<li>PNG images may display better than GIF. </li>
|
|
<li>Support for Shift-JIS character encoding may be better than for UTF-8.
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
<div>
|
|
<h3>
|
|
<a href="http://www.w3.org/TR/mobile-bp/#CONTROL_LABELLING" name="L68079"
|
|
id="L68079"
|
|
>3.10 Control Labeling</a> and <a href="http://www.w3.org/TR/mobile-bp/#CONTROL_POSITION">Control
|
|
Position</a>
|
|
</h3>
|
|
<strong>Interpretation of the Best Practice</strong>
|
|
|
|
|
|
<p>It is dangerous to assume that the same layout will
|
|
be presented to all users of mobile devices. It is important therefore to
|
|
ensure that <code><input></code> elements are correctly labeled so that
|
|
the association between <code><label></code> and
|
|
<code><input></code> element is retained even if the layout is changed.
|
|
</p>
|
|
|
|
<p>For a detailed description of labels and form
|
|
controls, the reader may also refer to Techniques for WCAG 2.0 [<a href="#TWCAG">TWCAG</a>], specifically to section <a href="http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H44">H44: Using
|
|
label elements to associate text labels with form controls</a> from some
|
|
examples have been. </p>
|
|
|
|
<h4 id="d1e1024">Evaluation Procedure </h4>
|
|
<ol>
|
|
<li>Verify that there are <code><label></code> elements, if
|
|
user-visible <code><input></code> elements are used.</li>
|
|
<li>Verify that
|
|
<ul>
|
|
<li>either the <code>for</code> attribute of the
|
|
<code><label></code> element is present and corresponds to the
|
|
<code>id</code> attribute of a form control.</li>
|
|
<li>or that the <code><label></code> element contains the form
|
|
control for which it is a label. </li>
|
|
<li>doing both of these is also acceptable.</li>
|
|
</ul>
|
|
</li>
|
|
<li>Verify that the label describes the purpose of the form control.</li>
|
|
<li>Verify that labels and <code><input></code> elements are visually
|
|
associated with and without CSS support.</li>
|
|
</ol>
|
|
|
|
<h4 id="d1e1068">Examples</h4>
|
|
<ul>
|
|
<li>A label which requests a person's name but is associated with a birth
|
|
date field presented as drop down boxes, fails step 3.
|
|
<ul>
|
|
<li>Bad example: <code><label></code>Your name <code><input
|
|
type="date"/></label></code>
|
|
</li>
|
|
</ul>
|
|
|
|
</li>
|
|
<li>The for attribute and corresponding id are meaningless except that they
|
|
must match:
|
|
<ul>
|
|
<li>Good example: <code><label for="firstname"></code>First
|
|
name:<code></label><input type="text" name="firstname"
|
|
id="firstname" /></code>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
<div>
|
|
<h3>
|
|
<a href="http://www.w3.org/TR/mobile-bp/#COOKIES" name="L89263" id="L89263"
|
|
>3.11 Cookies</a>
|
|
</h3>
|
|
|
|
<h4 id="d1e1103">Relevant Delivery Context Capabilities </h4>
|
|
|
|
<p>Device can accept cookies and the network is
|
|
transparent to cookies </p>
|
|
|
|
<h4 id="d1e1110">Evaluation Procedure </h4>
|
|
<ol>
|
|
<li>Identify the main functionality of the site that is important for the
|
|
user and may rely on state.</li>
|
|
<li>Evaluate the functionality with cookies enabled. </li>
|
|
<li>Disable support for cookies. Evaluate the functionality and compare with
|
|
that evaluated in 2. </li>
|
|
</ol>
|
|
|
|
<h4 id="d1e1123">Examples </h4>
|
|
|
|
<p>A site that requires a user to login might store
|
|
that login in a cookie to save the user typing in their credentials each time
|
|
they visit. If cookies are unavailable, an acceptable degradation would mean
|
|
that the user was prompted for a login each time they visited that page, but
|
|
would browse the site without further logins from then on. A poor (and
|
|
unacceptable) cookie-less degradation would render a site useless by always
|
|
checking for a non-existent cookie and so not letting the user past the login
|
|
page. </p>
|
|
|
|
</div>
|
|
<div>
|
|
<h3>
|
|
<a href="http://www.w3.org/TR/mobile-bp/#ERROR_MESSAGES" name="L103845"
|
|
id="L103845"
|
|
>3.12 Error Messages</a>
|
|
</h3>
|
|
|
|
<h4 id="d1e1138">Evaluation Procedure </h4>
|
|
<ol>
|
|
<li>Provoke a server-side error. For example: request a URL known not to
|
|
correspond to any endpoint on the site. </li>
|
|
<li>Examine the content of the error page.<br clear="none"/>
|
|
It should: <br clear="none"/>
|
|
</li>
|
|
</ol>
|
|
<ul>
|
|
<li>Explain in non-technical language the error which has occurred. </li>
|
|
<li>Be suitable for the <a href="http://www.w3.org/TR/mobile-bp/#ddc">DDC</a>, at a minimum, (i.e. it
|
|
must comply with all other tests). </li>
|
|
<li>Provide at least one of the following links: site home page, back,
|
|
reload. </li>
|
|
<li>Be in the language the user was reading on the site when the error
|
|
occurred. </li>
|
|
</ul>
|
|
|
|
</div>
|
|
<div>
|
|
<h3>
|
|
<a href="http://www.w3.org/TR/mobile-bp/#FONTS" name="L113158" id="L113158"
|
|
>3.13 Fonts</a>, <a href="http://www.w3.org/TR/mobile-bp/#STYLE_SHEETS_USE">Style Sheets Use</a>
|
|
and <a href="http://www.w3.org/TR/mobile-bp/#STYLE_SHEETS_SUPPORT">Style Sheets
|
|
Support</a>
|
|
</h3>
|
|
|
|
<h4 id="d1e1179">Relevant Delivery Context Capabilities</h4>
|
|
|
|
<ul>
|
|
<li>Style sheets support</li>
|
|
<li>Font availability</li>
|
|
<li>Font size</li>
|
|
<li>Font effects</li>
|
|
</ul>
|
|
|
|
<h4 id="d1e1193">Interpretation of the Best Practices</h4>
|
|
|
|
<p>Although the overwhelming majority of devices have
|
|
support for CSS, such support is not uniform. CSS is designed to control
|
|
presentation but it should not be used to convey meaning - that is the job of
|
|
the markup.</p>
|
|
|
|
<h4 id="d1e1201">Evaluation Procedure</h4>
|
|
<ul>
|
|
<li>Verify that content is readable and intelligible with style sheets
|
|
disabled.</li>
|
|
<li>Assess the difference between the appearance of the content with CSS
|
|
enabled and disabled and verify that this does not alter the meaning.</li>
|
|
<li>Verify that structural markup is used such as
|
|
<code><strong></code>, <code><em></code> and
|
|
<code><q></code> (rather than <code><b></code> or
|
|
<code><i> </code>which, although HTML tags instead of CSS, are
|
|
presentational in nature).</li>
|
|
</ul>
|
|
|
|
</div>
|
|
<div>
|
|
<h3>
|
|
<a href="http://www.w3.org/TR/mobile-bp/#GRAPHICS_FOR_SPACING" name="L120371"
|
|
id="L120371"
|
|
>3.14 Graphics for Spacing</a>
|
|
</h3>
|
|
|
|
<h4 id="d1e1235">Interpretation of the Best Practice</h4>
|
|
|
|
<p>The correct way to control presentation on a Web
|
|
page is to use CSS. Using graphics to achieve positioning and spacing effects
|
|
adds an unnecessary overhead to the page. </p>
|
|
|
|
<h4 id="d1e1242">Evaluation Procedure</h4>
|
|
<ol>
|
|
<li>Verify that the content complies with <a href="http://www.w3.org/TR/mobileOK-basic10-tests/#GRAPHICS_FOR_SPACING"
|
|
>GRAPHICS_FOR_SPACING
|
|
mobileOK Basic Test</a> [<a href="#MOKTESTS">MOKTESTS</a>]. </li>
|
|
<li>View all images in a page, for example in a separate list of images, or
|
|
by outlining them. For XHTML these will usually be included using the
|
|
<code><img></code> element.</li>
|
|
<li>Ignoring images that are part of the page's graphic design, such as
|
|
rounded corners, determine whether any of the images do not convey
|
|
information and are used purely for spacing.</li>
|
|
</ol>
|
|
|
|
<h4 id="d1e1264">Examples</h4>
|
|
<ul>
|
|
<li>A 1 pixel square image used to separate other content is unacceptable.
|
|
</li>
|
|
<li>A small image with the same color as the surrounding content is
|
|
unacceptable. </li>
|
|
<li>Using images to indent text, such as the beginning of a paragraph, is
|
|
unacceptable. </li>
|
|
</ul>
|
|
|
|
</div>
|
|
<div>
|
|
<h3>
|
|
<a href="http://www.w3.org/TR/mobile-bp/#LINK_TARGET_ID" name="L124791"
|
|
id="L124791"
|
|
>3.15 Link Target ID</a>
|
|
</h3>
|
|
|
|
<h4 id="d1e1283">Evaluation Procedure </h4>
|
|
<ol>
|
|
<li>Verify that each link in the text is described by attributes as follows:
|
|
<ul>
|
|
<li>If the target content is in a language
|
|
different to that of the tested content, it should be correctly marked
|
|
with the <code>hreflang</code> attribute. </li>
|
|
<li>If it is in a format other than that of the
|
|
tested content, it should be correctly described by the
|
|
<code>type</code> attribute. </li>
|
|
<li>If it uses a character encoding different to
|
|
that of the tested content, it should be described by the
|
|
<code>charset</code> attribute. </li>
|
|
</ul>
|
|
</li>
|
|
<li>Verify that the link text (including alternative text for any non-text
|
|
elements) clearly describes the information obtained when activating the
|
|
element. </li>
|
|
<li>Select elements pairwise. Verify that two links with same link text
|
|
(including alternative text for non-text elements) and same
|
|
<code>title</code> attribute (if provided) point to the same resource. </li>
|
|
</ol>
|
|
|
|
<p>(See <a href="http://www.wabcluster.org/uwem/tests/#guideline-13">UWEM 1.0
|
|
13.1</a> for more details) </p>
|
|
|
|
<h4 id="d1e1321">Examples</h4>
|
|
<ul>
|
|
<li>Links with only the text "Click here" are unacceptable. </li>
|
|
<li>Multiple links in same page with same text or content but pointing to
|
|
different things are unacceptable. </li>
|
|
<li>Links from an HTML page to a large video file that does not mention
|
|
format or size are unacceptable. </li>
|
|
<li>Links to content in a language different to that of the current page are
|
|
unacceptable.</li>
|
|
</ul>
|
|
|
|
</div>
|
|
<div>
|
|
<h3>
|
|
<a href="http://www.w3.org/TR/mobile-bp/#MINIMIZE_KEYSTROKES" name="L134272"
|
|
id="L134272"
|
|
>3.16 Minimize Keystrokes</a>
|
|
</h3>
|
|
|
|
<h4 id="d1e1345">Relevant Delivery Context Capabilities </h4>
|
|
|
|
<p>Input mode</p>
|
|
|
|
<h4 id="d1e1352">Evaluation Procedure</h4>
|
|
|
|
<p>This evaluation is covered by <a href="#L48755">AVOID_FREE_TEXT</a>, <a href="#L208631">URIS</a>, <a href="#L20732">CENTRAL_MEANING</a> and <a href="#L174697">PROVIDE_DEFAULTS</a>.
|
|
[<a href="#MWBP">MWBP</a>] </p>
|
|
|
|
</div>
|
|
<div>
|
|
<h3>
|
|
<a href="http://www.w3.org/TR/mobile-bp/#NAVBAR" name="L138133" id="L138133"
|
|
>3.17 Navbar</a>
|
|
</h3>
|
|
|
|
<h4 id="d1e1381">Relevant Delivery Context Capabilities</h4>
|
|
|
|
<p>Screen width </p>
|
|
|
|
<h4 id="d1e1388">Evaluation Procedure</h4>
|
|
<ul>
|
|
<li>Verify that there are basic navigational elements located above the rest
|
|
of the content.</li>
|
|
<li>Verify that all navigational elements fit on a single line in the <a href="http://www.w3.org/TR/mobile-bp/#ddc">DDC</a>.</li>
|
|
<li>Verify that, upon loading the page, enough of the main content is visible
|
|
without scrolling.</li>
|
|
</ul>
|
|
|
|
<h4 id="d1e1404">Examples</h4>
|
|
|
|
<p>A navigation bar above the main content consisting
|
|
of only: Home, Up, Down, Site map & Search, or similarly limited options,
|
|
would be acceptable. </p>
|
|
|
|
</div>
|
|
<div>
|
|
<h3>
|
|
<a href="http://www.w3.org/TR/mobile-bp/#NAVIGATION" name="L145858" id="L145858"
|
|
>3.18 Navigation</a>
|
|
</h3>
|
|
|
|
<h4 id="d1e1418">Evaluation Procedure</h4>
|
|
<ol>
|
|
<li>For all the pages in the sample, examine the
|
|
navigation mechanisms in the pages. These include inline links, groups of
|
|
links (for example menus) in different parts of the page.</li>
|
|
<li>Verify that navigation mechanisms are similar throughout pages of the
|
|
sample, other than for changes that are necessary within the context of a
|
|
given page.</li>
|
|
</ol>
|
|
|
|
<h4 id="d1e1428">Examples</h4>
|
|
<ul>
|
|
<li>A well designed site will offer the same navigation menu(s) on all pages
|
|
with the only changes being in the presentation as it affects ths current
|
|
page, e.g. the link to the current page may be shown differently or
|
|
elided. </li>
|
|
<li>Bad examples include:
|
|
<ul>
|
|
<li>A site navigation menu that is presented differently on different
|
|
pages.</li>
|
|
<li>A site navigation menu that is present on some pages but not on the
|
|
current page. </li>
|
|
<li>Inline links on other pages have a descriptive title but on the
|
|
current page they do not. </li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
<div>
|
|
<h3>
|
|
<a href="http://www.w3.org/TR/mobile-bp/#NON-TEXT_ALTERNATIVES" name="L146017"
|
|
id="L146017"
|
|
>3.19 Non-text Alternatives</a>
|
|
</h3>
|
|
|
|
<h4 id="d1e1453">Evaluation Procedure</h4>
|
|
|
|
<p>Referring to <a href="http://www.w3.org/TR/WCAG20/">Web Content Accessibility Guidelines (WCAG)
|
|
2.0</a> [<a href="#WCAG20">WCAG20</a>]</p>
|
|
|
|
<ul>
|
|
<li>
|
|
<a href="http://www.w3.org/TR/WCAG10/#gl-provide-equivalents">Guideline
|
|
1. Provide equivalent alternatives to auditory and visual content.</a>
|
|
</li>
|
|
<li>
|
|
<a href="http://www.w3.org/TR/WCAG20/#text-equiv">Guideline 1.1 Text
|
|
Alternatives</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<p>Non-text elements include images, graphical
|
|
representations of text (including symbols), image map regions, animations
|
|
(e.g., animated GIFs), applets and programmatic objects, ASCII art, frames,
|
|
scripts, images used as list bullets, spacers, graphical buttons, sounds
|
|
(played with or without user interaction), stand-alone audio files, audio
|
|
tracks of video, and video.</p>
|
|
|
|
<p>Verify that content meets the mobileOK Basic Test
|
|
<a href="http://www.w3.org/TR/mobileOK-basic10-tests/#NON_TEXT_ALTERNATIVES"
|
|
>NON_TEXT_ALTERNATIVES</a>
|
|
[<a href="#MOKTESTS">MOKTESTS</a>] </p>
|
|
|
|
<ul>
|
|
<li>Verify that a text equivalent has been provided for every non-text
|
|
element that, when presented to the user, conveys essentially the same
|
|
function or purpose as auditory or visual content. </li>
|
|
<li>Content is "equivalent" to other content when both fulfill essentially
|
|
the same function or purpose upon presentation to the user. </li>
|
|
</ul>
|
|
|
|
<h4 id="d1e1494">Examples</h4>
|
|
<ul>
|
|
<li>Good examples:
|
|
<ul>
|
|
<li>Null value (<code>alt=""</code>) for
|
|
decorative images such as rounded corners in frame. </li>
|
|
<li>A text equivalent for an image of an upward
|
|
arrow that links to a table of contents could be "Return to table of
|
|
contents". </li>
|
|
</ul>
|
|
</li>
|
|
<li>Bad examples:
|
|
<ul>
|
|
<li>An <code>alt</code> value that is the same as the filename.</li>
|
|
<li>
|
|
<code>alt=" "</code> (space).</li>
|
|
<li>No <code>alt</code> attribute.</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
<div>
|
|
<h3>
|
|
<a href="http://www.w3.org/TR/mobile-bp/#OBJECTS_OR_SCRIPT" name="L151530"
|
|
id="L151530"
|
|
>3.20 Objects or Scripts</a>
|
|
</h3>
|
|
|
|
<h4 id="d1e1537">Evaluation Procedure</h4>
|
|
|
|
<p>Verify that the document can be viewed or used,
|
|
with objects or scripts inactive or removed, without any change in the
|
|
function, or value of the content, of the page.</p>
|
|
|
|
<h4 id="d1e1544">Examples</h4>
|
|
|
|
<p>From <a href="http://www.w3.org/TR/WAI-WEBCONTENT/">Web Content Accessibility
|
|
Guidelines 1.0</a> [<a href="#WCAG10">WCAG10</a>], <a href="http://www.w3.org/TR/WAI-WEBCONTENT/wai-pageauth.html#tech-scripts"
|
|
>Guideline
|
|
6, Checkpoint 6.3</a>: </p>
|
|
|
|
<p>
|
|
<cite>Check that links that trigger scripts work
|
|
when scripts are turned off or are not supported (e.g., do not use
|
|
"javascript:" as the link target). If it is not possible to make the page
|
|
usable without scripts, provide a text equivalent with the NOSCRIPT element, or
|
|
use a server-side script instead of a client-side script, or provide an
|
|
alternative accessible page as per <a href="http://www.w3.org/TR/WAI-WEBCONTENT/wai-pageauth.html#tech-alt-pages"
|
|
>checkpoint
|
|
11.4.</a> Refer also to <a href="http://www.w3.org/TR/WAI-WEBCONTENT/wai-pageauth.html#gl-provide-equivalents"
|
|
>guideline
|
|
1</a>. </cite>
|
|
</p>
|
|
|
|
<p>With scripts turned off or when the page is
|
|
accessed on a device that does not support scripts or objects: </p>
|
|
<ul>
|
|
<li>A given form can still be filled out and submitted. </li>
|
|
<li>Images are displayed and alternative content is shown.</li>
|
|
</ul>
|
|
|
|
</div>
|
|
<div>
|
|
<h3>
|
|
<a href="http://www.w3.org/TR/mobile-bp/#PAGE_SIZE_USABLE" name="L154665"
|
|
id="L154665"
|
|
>3.21 Page Size Usable</a>
|
|
</h3>
|
|
|
|
<h4 id="d1e1587">Relevant Delivery Context Capabilities</h4>
|
|
<ul>
|
|
<li>Bandwidth</li>
|
|
<li>CPU power</li>
|
|
<li>Screen size</li>
|
|
</ul>
|
|
|
|
<h4 id="d1e1599">Evaluation Procedure</h4>
|
|
|
|
<p>Verify that a given web page contains contiguous
|
|
content, which could technically and semantically be separated into individual
|
|
pages, and exceeds 3 screen sizes in length without page break.</p>
|
|
|
|
<h4 id="d1e1607">Examples</h4>
|
|
<ul>
|
|
<li>A long article that extends over 3 screens full without some type of page
|
|
break should be broken up into pages.</li>
|
|
<li>Display of navigational information, requiring continuous movement
|
|
through the map would pass, because additional maps are loaded as
|
|
needed.</li>
|
|
</ul>
|
|
|
|
</div>
|
|
<div>
|
|
<h3>
|
|
<a href="http://www.w3.org/TR/mobile-bp/#PAGE_TITLE" name="L160777" id="L160777"
|
|
>3.22 Page Title</a>
|
|
</h3>
|
|
|
|
<h4 id="d1e1625">Relevant Delivery Context Capabilities </h4>
|
|
<ul>
|
|
<li>Screen width</li>
|
|
</ul>
|
|
|
|
<h4 id="d1e1633">Evaluation Procedure</h4>
|
|
|
|
<ul>
|
|
<li>Verify that the title thematically describes the main intent of the page
|
|
content.</li>
|
|
<li>Verify that the title does not repeat unchanged across more than 3 pages
|
|
unless a continuous piece of text has been paginated.</li>
|
|
<li>Verify that the title is too long to display on a screen matching the
|
|
Default Delivery Context.</li>
|
|
</ul>
|
|
|
|
<h4 id="d1e1646">Examples</h4>
|
|
<ul>
|
|
<li>A page with the primary purpose of offering ring tones alongside small
|
|
textual items should have this reflected in the title.</li>
|
|
<li>A title such as "Main Portal" which is repeated across more than 3 pages
|
|
would have to have to be adapted on the pages in question.</li>
|
|
<li>Conversely a title of "Uncle Tom's Cabin" in an ebook page, across many
|
|
pages, would be perfectly acceptable.</li>
|
|
</ul>
|
|
|
|
</div>
|
|
<div>
|
|
<h3>
|
|
<a href="http://www.w3.org/TR/mobile-bp/#PROVIDE_DEFAULTS" name="L174697"
|
|
id="L174697"
|
|
>3.23 Provide Defaults</a>
|
|
</h3>
|
|
|
|
<h4 id="d1e1665">Interpretation of the Best Practice</h4>
|
|
|
|
<p>This section only applies to pages that call for
|
|
user input in a form.</p>
|
|
|
|
<h4 id="d1e1672">Evaluation Procedure</h4>
|
|
|
|
<p>Submit the form without selecting any item. This
|
|
will ensure that defaults, such as preselected values, will be used: </p>
|
|
<ul>
|
|
<li>Verify that the response is not an error page.</li>
|
|
<li>Verify that the response is not a page asking the user to fix some
|
|
data.</li>
|
|
<li>Verify that the response is not the original page.</li>
|
|
<li>If there are <code><text></code> or <code><textarea></code>
|
|
|
|
elements that include a default value telling the user what to enter,
|
|
verify that these values do not have to be manually deleted in order for
|
|
them not to be processed as user input.</li>
|
|
</ul>
|
|
|
|
<h4 id="d1e1696">Examples</h4>
|
|
<ul>
|
|
<li>A country list might preselect the country code of where the page or
|
|
service is most relevant.</li>
|
|
<li>A ZIP code listing might have the local ZIP code preselected and
|
|
surrounding ZIP codes at the top of the list.</li>
|
|
<li>A date field might have today's date filled in.</li>
|
|
</ul>
|
|
|
|
</div>
|
|
<div>
|
|
<h3>
|
|
<a href="http://www.w3.org/TR/mobile-bp/#SCROLLING" name="L179567" id="L179567"
|
|
>3.24 Scrolling</a>
|
|
</h3>
|
|
|
|
<h4 id="d1e1715">Relevant Delivery Context Capabilities</h4>
|
|
<ul>
|
|
<li>Input mode</li>
|
|
<li>Screen size</li>
|
|
</ul>
|
|
|
|
<h4 id="d1e1725">Evaluation Procedure</h4>
|
|
|
|
<p>If horizontal scrolling is necessary to view a
|
|
page, for each element wider than screen size: </p>
|
|
<ul>
|
|
<li>Ensure the element is not decorative.</li>
|
|
<li>Ensure that the element requires the oversize display, i.e. it cannot
|
|
reasonably be reduced in size or omitted altogether. </li>
|
|
</ul>
|
|
|
|
<h4 id="d1e1739">Examples</h4>
|
|
|
|
<ul>
|
|
<li>A map showing an entire trip, information which would be lost upon zoom,
|
|
is acceptable.</li>
|
|
<li>A X-ray image, intended for a portable medical device where zooming out
|
|
would loose vital detail of the image is acceptable. </li>
|
|
</ul>
|
|
|
|
</div>
|
|
<div>
|
|
<h3>
|
|
<a href="http://www.w3.org/TR/mobile-bp/#STRUCTURE" name="L184555" id="L184555"
|
|
>3.25 Structure</a>
|
|
</h3>
|
|
|
|
<h4 id="d1e1756">Related mobileOK Basic Test</h4>
|
|
|
|
<p>
|
|
<a href="http://www.w3.org/TR/mobileOK-basic10-tests/#CONTENT_FORMAT_SUPPORT"
|
|
>VALID
|
|
MARK_UP</a>
|
|
</p>
|
|
|
|
<h4 id="d1e1765">Interpretation of the Best Practice</h4>
|
|
|
|
<p>The mobileOK test will ensure that markup is valid,
|
|
however, it does not ensure that markup elements are used correctly, in terms
|
|
of the semantics of the document, as opposed to being used to achieve
|
|
presentational effects. </p>
|
|
|
|
<h4 id="d1e1773">Evaluation Procedure</h4>
|
|
<ul>
|
|
<li>Verify that headers are properly nested according to their level.</li>
|
|
<li>Verify that list elements are used to represent lists (ordered,
|
|
unordered, or definition lists) and are not used for formatting
|
|
effects.</li>
|
|
<li>Verify that heading elements (<code><h1>, <h2></code> etc.)
|
|
are used to represent headers and are not used for formatting effects.</li>
|
|
<li>Verify that all information, which is visually is shown as a group of
|
|
related elements, uses the <code><list></code> element in the markup
|
|
to provide that structure.</li>
|
|
<li>Verify that all information that is shown visually as blocks of text uses
|
|
separate elements such as <code><p></code> or
|
|
<code><div></code> in the markup rather than creating visual
|
|
separation using multiple <code><br></code> line breaks.</li>
|
|
</ul>
|
|
|
|
</div>
|
|
<div>
|
|
<h3>
|
|
<a href="http://www.w3.org/TR/mobile-bp/#STYLE_SHEETS_SIZE" name="L187879"
|
|
id="L187879"
|
|
>3.26 Style Sheets Size</a>
|
|
</h3>
|
|
|
|
<h4 id="d1e1811">Evaluation Procedure</h4>
|
|
<ul>
|
|
<li>Verify that style sheets do not contain more than 25% white space.</li>
|
|
<li>Verify that all style rules are used somewhere in the Web site.</li>
|
|
</ul>
|
|
|
|
</div>
|
|
<div>
|
|
<h3>
|
|
<a href="http://www.w3.org/TR/mobile-bp/#TAB_ORDER" name="L194701" id="L194701"
|
|
>3.27 Tab Order</a>
|
|
</h3>
|
|
|
|
<h4 id="d1e1828">Evaluation Procedure</h4>
|
|
|
|
<p>Verify that the tab order of links, form controls
|
|
and objects follows a logical or thematic order.</p>
|
|
|
|
<h4 id="d1e1835">Examples</h4>
|
|
<ul>
|
|
<li>If a user is required to enter their first name, last name, address and
|
|
contact number, the tab order should not jump, for example, between the
|
|
first name and the phone number and then back to the last name.</li>
|
|
<li>If a pizza ordering service offers a choice of toppings and bases, the
|
|
tab order should not jump between those two categories when presenting the
|
|
user with options.</li>
|
|
<li>If the Submit button, or Submit and Cancel buttons, are not the last
|
|
item(s) in the form.</li>
|
|
</ul>
|
|
|
|
</div>
|
|
<div>
|
|
<h3>
|
|
<a href="http://www.w3.org/TR/mobile-bp/#TABLES_LAYOUT" name="L201556"
|
|
id="L201556"
|
|
>3.28 Tables Layout</a>
|
|
</h3>
|
|
|
|
<h4 id="d1e1855">Relevant Delivery Context Capabilities</h4>
|
|
|
|
<p>Table support</p>
|
|
|
|
<h4 id="d1e1862">Evaluation Procedure</h4>
|
|
|
|
<p>Verify that tables used solely for layout cannot be
|
|
replaced by use of CSS.</p>
|
|
|
|
<h4 id="d1e1870">Examples</h4>
|
|
|
|
<p>An image or text which is spaced and positioned
|
|
with the aid of a table is not acceptable. </p>
|
|
|
|
</div>
|
|
<div>
|
|
<h3>
|
|
<a href="http://www.w3.org/TR/mobile-bp/#TABLES_SUPPORT" name="L204960"
|
|
id="L204960"
|
|
>3.29 Tables Support</a>
|
|
</h3>
|
|
|
|
<h4 id="d1e1884">Relevant Delivery Context Capabilities</h4>
|
|
|
|
<p>Table support</p>
|
|
|
|
<h4 id="d1e1891">Evaluation Procedure</h4>
|
|
|
|
<p>Verify that the <code><table></code> element
|
|
is not found within the source code if the device does not support tables. </p>
|
|
|
|
<p/>
|
|
|
|
</div>
|
|
<div>
|
|
<h3>
|
|
<a href="http://www.w3.org/TR/mobile-bp/#URIS" name="L208631" id="L208631"
|
|
>3.30 URIs</a>
|
|
</h3>
|
|
|
|
<h4 id="d1e1911">Evaluation Procedure</h4>
|
|
<ul>
|
|
<li>Verify that the entry domain, including main and subdomain, can be called
|
|
up with less than 20 multi-tap key presses on the device.</li>
|
|
<li>Ensure that the entry URI does not require a file extension (such as
|
|
.html) and that the entry URI does not require the www subdomain.</li>
|
|
</ul>
|
|
|
|
</div>
|
|
<div>
|
|
<h3>
|
|
<a href="http://www.w3.org/TR/mobile-bp/#USE_OF_COLOR" name="L212226" id="L212226"
|
|
>3.31 Use of Color</a>
|
|
</h3>
|
|
|
|
<h4 id="d1e1928">Evaluation Procedure</h4>
|
|
<ul>
|
|
<li>Verify that , excluding hyperlinks, the page does not include any other
|
|
blue or purple text.</li>
|
|
<li>Check if, when viewed on a monochrome screen, all content is still
|
|
readable.</li>
|
|
<li>Verify that color is not used as the sole means to represent any item of
|
|
information.</li>
|
|
</ul>
|
|
|
|
<h4 id="d1e1940">Examples</h4>
|
|
<ul>
|
|
<li>Red text may be used to highlight error messages but the fact that it is
|
|
an error message should also be conveyed in some other way without color
|
|
(such as with asterisks or emphasis using the <code><em></code>
|
|
element).</li>
|
|
<li>Telling the user that important information is highlighted in yellow is
|
|
unacceptable.</li>
|
|
</ul>
|
|
|
|
<p>See the closely related <a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html"
|
|
>
|
|
<abbr title="Web Content Accessibility Guidelines">WCAG</abbr> Success Criteria</a>
|
|
|
|
for more.</p>
|
|
|
|
<div class="back">
|
|
|
|
<div class="div1">
|
|
<h2>
|
|
<a name="sec-references" id="sec-references"/>A <a name="References" id="References">References</a>
|
|
</h2>
|
|
<dl>
|
|
<dt>
|
|
<a name="DDRSA" id="DDRSA">DDRSA</a>
|
|
</dt>
|
|
<dd>W3C Device Description Repository Simple API, Jo Rabin, José Manuel
|
|
Cantera Fonseca, Rotan Hanrahan, Ignacio Marín, Editors, W3C
|
|
Recommendation, 05 December 2008 (see <a href="http://www.w3.org/TR/DDR-Simple-API/">http://www.w3.org/TR/DDR-Simple-API/</a>)</dd>
|
|
<dt>
|
|
<a name="DIGLOSS" id="DIGLOSS">DIGLOSS</a>
|
|
</dt>
|
|
<dd>Glossary of Terms for Device Independence, Rhys Lewis, W3C Working
|
|
Draft 18 January 2005 (see <a href="http://www.w3.org/TR/di-gloss/">http://www.w3.org/TR/di-gloss/</a>)
|
|
</dd>
|
|
<dt>
|
|
<a name="MOKTESTS" id="MOKTESTS">MOKTESTS</a>
|
|
</dt>
|
|
<dd>W3C Mobile OK Basic Tests 1.0, Sean Owen, Jo Rabin, Editors, W3C
|
|
Recommendation, 08 December 2008 (see <a href="http://www.w3.org/TR/mobileOK-basic10-tests/">http://www.w3.org/TR/mobileOK-basic10-tests/</a>)
|
|
</dd>
|
|
<dt>
|
|
<a name="MWBP" id="MWBP">MWBP</a>
|
|
</dt>
|
|
<dd>W3C Mobile Web Best Practices 1.0, Jo Rabin, Charles McCathieNevile,
|
|
Editors, W3C Recommendation, 29 July 2008 (see <a href="http://www.w3.org/TR/mobile-bp/">http://www.w3.org/TR/mobile-bp/</a>/)</dd>
|
|
<dt>
|
|
<a name="TWCAG" id="TWCAG">TWCAG</a>
|
|
</dt>
|
|
<dd>W3C Techniques for WCAG 2.0, Ben Caldwell, Michael Cooper, Loretta
|
|
Guarino Reid, Gregg Vanderheiden, Editors, W3C Working Group Note, 11
|
|
December 2008 (see <a href="http://www.w3.org/TR/WCAG20-TECHS/">http://www.w3.org/TR/WCAG20-TECHS/</a>)</dd>
|
|
<dt>
|
|
<a name="WCAG10" id="WCAG10">WCAG10</a>
|
|
</dt>
|
|
<dd>W3C Web Content Accessibility Guidelines 1.0, Wendy Chisholm, Gregg
|
|
Vanderheiden, Ian Jacobs, Editors, W3C Recommendation 5 May 1999 (see <a href="http://www.w3.org/TR/WAI-WEBCONTENT/">http://www.w3.org/TR/WAI-WEBCONTENT/</a>)</dd>
|
|
<dt>
|
|
<a name="WCAG20" id="WCAG20">WCAG20</a>
|
|
</dt>
|
|
<dd>W3C Web Content Accessibility Guidelines (WCAG) 2.0, Ben Caldwell,
|
|
Michael Cooper, Loretta Guarino Reid, Gregg Vanderheiden, Editors, W3C
|
|
Recommendation, 11 December 2008 (see <a href="http://www.w3.org/TR/WCAG20/">http://www.w3.org/TR/WCAG20/</a>)</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|