W3C

From WCAG 1.0 to MWBP 1.0: Making content that meets Web Content Accessibility Guidelines 1.0 also meet Mobile Web Best Practices 1.0

W3C Working Draft 03 July 2008

Table of Contents

Introduction

Incomplete draft: This document is an in-progress Working Draft provided for review and feedback. It is incomplete and will likely have major changes. See also Status of this Document in the overview page.
Please send feedback to public-bpwg-comments@w3.org (with public archive).

This page is part of a multi-page document. Please refer to the “How to Use This Document” section for more information.

If your content already meets Web Content Accessibility Guidelines 1.0, this page describes what needs to be done to meet all the Mobile Web Best Practices (MWBP).

Summary of work required to make content that meets WCAG 1.0 also meet MWBP

This section provides guidance on the “upgrade path” from WCAG 1.0 compliance to MWBP. For each of the WCAG 1.0 priorities (1, 2 and 3) already achieved, the BPs are classified in three broad categories representing the effort required, labelled for simplicity with keywords (nothing, something, everything)

Note on inconsistent links: Links in the “something” and “nothing” sections point to within this page. Links in the “everything” section point to the Recommendation. REVIEW NOTE: Is this too confusing? Suggestions for better ways to do it?

To summarize, if your content already complies with WCAG 1.0, to achieve compliance with MWBP, you need to do the following:

Nothing: Content that already meets WCAG 1.0 should already meet these BPs:

Something: More effort of some kind or a check, is necessary to ensure compliance with these BPs:

Everything: These BPs are not related to WCAG 1.0:

Addressing Mobile Web Best Practices

This section deals with each of the best practices which WCAG 1.0 helps with meeting.

ACCESS_KEYS

MWBP: Assign access keys to links in navigational menus and frequently accessed functionality.

9.5 [Provide keyboard shortcuts to important links…] partially covers this best practice. To fully cover this best practice, you need to make sure that you assign access keys to links in navigational menus and make sure that the same access key is provided for links that are repeated across pages such as links to the home page.

Back to list of MWBP best practices

AUTO_REFRESH

MWBP: Do not create periodically auto-refreshing pages, unless you have informed the user and provided a means of stopping it.

7.4 [Until user agents provide the ability to stop auto-redirect, do not use markup to redirect pages automatically…] covers this best practice.

Back to list of MWBP best practices

AVOID_FREE_TEXT

MWBP: Avoid free text entry where possible.

Back to list of MWBP best practices

-->

BALANCE

MWBP: Take into account the trade-off between having too many links on a page and asking the user to follow too many links to reach what they are looking for.

Back to list of MWBP best practices

-->

BACKGROUND_IMAGE_READABILITY

MWBP: When using background images make sure that content remains readable on the device..

2.2 [Ensure that foreground and background color combinations provide sufficient contrast…] partially covers this best practice. However, to fully cover this checkpoint if you have used a background image, ensure that the content is readable with and without the background image for devices that do not support them. What to Test explains how to meet this best practice.

Back to list of MWBP best practices

CENTRAL_MEANING

MWBP: Ensure that material that is central to the meaning of the page precedes material that is not.

13.6 [Group related links, identify the group (for user agents)…] partially covers this best practice. However, you need to ensure that the most important/relevant information is conveyed first when your page is visited from a mobile device. There should be a minimum amount of clutter preceding the main content - including navigation, decorative images, advertising and other material that is not central to the user's experience of the page. The user should not have to scroll significantly to find the primary content of the page.

Back to list of MWBP best practices

CLARITY

MWBP: Use clear and simple language.

13.8 [Place distinguishing information at the beginning of headings, paragraphs…] covers this best practice.

Back to list of MWBP best practices

COLOR_CONTRAST

MWBP: Ensure that foreground and background color combinations provide sufficient contrast.

2.2 [Ensure that foreground and background color combinations provide sufficient contrast…] partially covers this best practice. To fully cover this best practice, you need to make sure that your page is still readable from a mobile device when accessed with less-than-ideal lighting conditions. What to test explains how to meet this best practice.

Back to list of MWBP best practices

CONTROL_LABELLING

MWBP: Label all form controls appropriately and explicitly associate labels with form controls.

12.4 [Associate labels explicitly with their controls] covers this best practice.

Back to list of MWBP best practices

CONTROL_POSITION

MWBP: Position labels so they lay out properly in relation to the form controls they refer to.

10.2 [Until user agents support explicit associations between labels…] partially covers this best practice. However, you need to make sure that where the label goes is consistent and close to the form control so re-flowing or adapting the content intelligently will always recognize label controls and keep them together.

Back to list of MWBP best practices

CONTROL_POSITION

MWBP: Specify a default text entry mode, language and/or input format, if the device is known to support it.

Back to list of MWBP best practices

-->

ERROR_MESSAGES

MWBP: Provide informative error messages and a means of navigating away from an error message back to useful information.

Back to list of MWBP best practices

-->

FONTS

MWBP: Do not rely on support of font related styling.

6.1 [Organize documents so they may be read without style sheets]. If the styling of your content is encoded in a stylesheet, then this best practice is possibly covered by 6.1. However, you need to check for the presence of font related styling in an environment that does not support it and ensure that the author's intentions remain clear.

Back to list of MWBP best practices

GRAPHICS_FOR_SPACING

MWBP: Do not use graphics for spacing.

3.1 [When an appropriate markup language exists, use markup…] covers this best practice.

Back to list of MWBP best practices

IMAGE_MAPS

MWBP: Do not use image maps unless you know the device supports them effectively.

1.2 [Provide redundant text links for each active region of a server-side image map], 9.1 [Provide client-side image maps instead of server-side image maps] and 1.5 [Until user agents render text equivalents for client-side image map links, provide redundant text links for each active region of a client-side image map], possibly cover this best practice. If you have not used image maps then this best practice is covered. However, if you have used image maps, then make sure that the requesting device can support the image involved and make sure that there is a means of navigating the map satisfactorily. How to do it explains how to meet this best practice.

Back to list of MWBP best practices

MWBP: Clearly identify the target of each link.

13.1 [Clearly identify the target of each link] covers this best practice.

Back to list of MWBP best practices

MEASURES

MWBP: Do not use pixel measures and do not use absolute units in markup language attribute values and style sheet property values.

3.4 [Use relative rather than absolute units in markup language attribute values…] covers this best practice.

Back to list of MWBP best practices

NAVBAR

MWBP: Provide only minimal navigation at the top of the page.

13.5 [Provide navigation bars to highlight and give access to the navigation mechanism] partially covers this best practice. Although 13.5 recommends to have a navigation bar, this best practice recommends that minimal navigation is provided at the top of the page. Therefore, you need to ensure that there is minimum navigation at the top and the user can see page content once the page has loaded without scrolling.

Back to list of MWBP best practices

NAVIGATION

MWBP: Provide consistent navigation mechanisms.

13.4 [Use navigation mechanisms in a consistent manner] covers this best practice.

Back to list of MWBP best practices

NO_FRAMES

MWBP: Do not use frames.

Back to list of MWBP best practices

-->

NON-TEXT_ALTERNATIVES

MWBP: Provide a text equivalent for every non-text element.

1.1 [Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content)...] covers this best practice.

Back to list of MWBP best practices

OBJECTS_OR_SCRIPT

MWBP: Do not rely on embedded objects or script.

6.3 [Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported…] covers this best practice.

Back to list of MWBP best practices

PAGE_SIZE_USABLE

MWBP: Divide pages into usable but limited size portions.

12.3 [Divide large blocks of information into more manageable groups where natural and appropriate] partially covers this best practice. However, this best practice focuses on the memory and processing limitations of mobile devices. Therefore, to fully cover this checkpoint you need to ensure that it does not take an unduly long time to load a page and also the user does not have poor scrolling experience. What to test explains how to meet this best practice.

Back to list of MWBP best practices

PAGE_TITLE

MWBP: Provide a short but descriptive page title.

If you have added a page title as suggested by 13.2 [Provide metadata to add semantic information to pages and sites…], then you have possibly covered this best practice. You need to ensure that the provided title is short and descriptive. Provide a descriptive title for the page to allow easy identification and keep the title short to reduce page weight, and bear in mind that it may be truncated.

Back to list of MWBP best practices

POP_UPS

MWBP: Do not cause pop-ups or other windows to appear and do not change the current window without informing the user.

10.1 [Until user agents allow users to turn off spawned windows, do not cause pop-ups or other windows to appear…] covers this best practice.

Back to list of MWBP best practices

PROVIDE_DEFAULTS

MWBP: Provide pre-selected default values where possible.

10.4 [Until user agents handle empty controls correctly…] covers this best practice.

Back to list of MWBP best practices

REDIRECTION

MWBP: Do not use markup to redirect pages automatically. Instead, configure the server to perform redirects by means of HTTP 3xx codes.

7.5 [Until user agents provide the ability to stop auto-redirect, do not use markup to redirect pages automatically…] covers this best practice.

Back to list of MWBP best practices

SCROLLING

MWBP: Limit scrolling to one direction, unless secondary scrolling cannot be avoided.

Back to list of MWBP best practices

-->

STRUCTURE

MWBP: Use features of the markup language to indicate logical document structure.

3.5 [Use header elements to convey document structure…] covers this best practice.

Back to list of MWBP best practices

STYLE_SHEETS_SUPPORT

MWBP: Organize documents so that if necessary they may be read without style sheets.

6.1 [Organize documents so they may be read without style sheets] covers this best practice.

Back to list of MWBP best practices

STYLE_SHEETS_USE

MWBP: Use style sheets to control layout and presentation, unless the device is known not to support them.

3.3 [Use style sheets to control layout and presentation] covers this best practice.

Back to list of MWBP best practices

TAB_ORDER

MWBP: Create a logical order through links, form controls and objects.

9.4 [Create a logical tab order through links, form controls, and objects] covers this best practice.

Back to list of MWBP best practices

TABLES_ALTERNATIVES

MWBP: Where possible, use an alternative to tabular presentation.

If you have not used tables for layout as suggested by 5.3 [Do not use tables for layout unless the table makes sense when linearized…], then you possibly partially covered this best practice. However, you still need to ensure that you have used alternatives where possible to data tables.

Back to list of MWBP best practices

TABLES_LAYOUT

MWBP: Do not use tables for layout.

If you have not used tables for layout as suggested by 5.3 [Do not use tables for layout unless the table makes sense when linearized…], then you covered this best practice.

Back to list of MWBP best practices

TABLES_NESTED

MWBP: Do not use nested tables.

Back to list of MWBP best practices

-->

TABLES_SUPPORT

MWBP: Do not use tables unless the device is known to support them.

Back to list of MWBP best practices

-->

TESTING

MWBP: Carry out testing on actual devices as well as emulators.

Back to list of MWBP best practices

-->

THEMATIC_CONSISTENCY

MWBP: Ensure that content provided by accessing a URI yields a thematically coherent experience when accessed from different devices.

Back to list of MWBP best practices

-->

URIS

MWBP: Keep the URIs of site entry points short.

Back to list of MWBP best practices

-->

USE_OF_COLOR

MWBP: Ensure that information conveyed with color is also available without color.

2.1 [Ensure that all information conveyed with color is also available without color…] covers this best practice.

Back to list of MWBP best practices

VALID_MARKUP

MWBP: Create documents that validate to published formal grammars.

3.2 [Create documents that validate to published formal grammars] covers this best practice.

Back to list of MWBP best practices