index.html 63.6 KB

Raw Blame History Permalink

<?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> &copy; 2009 <a href="http://www.w3.org/"><acronym title="World Wide Web Consortium">W3C</acronym></a><sup>&reg;</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>&lt;input type="text"&gt;, &lt;input
type="password"&gt;, &lt;textarea&gt;</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>&lt;input&gt;</code> elements are correctly labeled so that
the association between <code>&lt;label&gt;</code> and
<code>&lt;input&gt;</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>&lt;label&gt;</code> elements, if
    user-visible <code>&lt;input&gt;</code> elements are used.</li>
                  <li>Verify that
    <ul>
                        <li>either the <code>for</code> attribute of the
        <code>&lt;label&gt;</code> element is present and corresponds to the
        <code>id</code> attribute of a form control.</li>
                        <li>or that the <code>&lt;label&gt;</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>&lt;input&gt;</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>&lt;label&gt;</code>Your name <code>&lt;input
        type="date"/&gt;&lt;/label&gt;</code>
                        </li>
                     </ul>

                  </li>
                  <li>The for attribute and corresponding id are meaningless except that they
    must match:
    <ul>
                        <li>Good example: <code>&lt;label for="firstname"&gt;</code>First
        name:<code>&lt;/label&gt;&lt;input type="text" name="firstname"
        id="firstname" /&gt;</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>&lt;strong&gt;</code>, <code>&lt;em&gt;</code> and
    <code>&lt;q&gt;</code> (rather than <code>&lt;b&gt;</code> or
    <code>&lt;i&gt; </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>&lt;img&gt;</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 &amp; 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>&lt;text&gt;</code> or <code>&lt;textarea&gt;</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>&lt;h1&gt;, &lt;h2&gt;</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>&lt;list&gt;</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>&lt;p&gt;</code> or
    <code>&lt;div&gt;</code> in the markup rather than creating visual
    separation using multiple <code>&lt;br&gt;</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>&lt;table&gt;</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>&lt;em&gt;</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>