w3c standards

Accessibility: WCAG2 at a Glance

Perceivable

1.     Provide text alternatives for non-text content.
2.     Provide captions and alternatives for audio and video content.
3.     Make content adaptable; and make it available to assistive technologies.
4.     Use sufficient contrast to make things easy to see and hear.

Operable

1.     Make all functionality keyboard accessible.
2.     Give users enough time to read and use content.
3.     Do not use content that causes seizures.
4.     Help users navigate and find content.

Understandable

1.     Make text readable and understandable.
2.     Make content appear and operate in predictable ways.
3.     Help users avoid and correct mistakes.

Robust

    Maximize compatibility with current and future technologies.

-------------------------------

Mobile Web Best Practices:


Design for One Web:
Content designed with diverse devices in mind reduces cost, increases flexibility, and reaches the needs of more people.

1.     Ensure that content provided by accessing a URI yields a thematically coherent experience when accessed from different devices.
2.     Exploit device capabilities to provide an enhanced user experience.
3.     Take reasonable steps to work around deficient implementations.
4.     Carry out testing on actual devices as well as emulators.

Rely on Web Standards:

Standards are the best guarantee for interoperability.

1.     Create documents that validate to published formal grammars.
2.     Send content in a format known by the device.
3.     Where possible, send content in a preferred format.
4.     Ensure that content is encoded using a character encoding known to be supported by the target device.
5.     Indicate in the response the character encoding being used.
6.     Use style sheets to control layout and presentation, unless the device is known not to support them.
7.     Use features of the markup language to indicate logical document structure.
8.     Provide informative error messages and a means of navigating away from an error message back to useful information.

Stay away from known hazards:

Thoughtful design can help reduce usability problems due to small screens and keyboards, and other features of mobile devices.

1.     Do not cause pop ups or other windows to appear and do not change the current window without informing the user.
2.     Do not use nested tables.
3.     Do not use tables for layout.
4.     Do not use graphics for spacing.
5.     Do not use frames.
6.     Do not use image maps unless you know the device supports them effectively.

Be cautious of device limitations:
Remember that mobile devices vary greatly in capability.

1.     Do not rely on cookies being available.
2.     Do not rely on embedded objects or script.
3.     Do not use tables unless the device is known to support them.
4.     Where possible, use an alternative to tabular presentation.
5.     Organize documents so that if necessary they may be read without style sheets.
6.     Do not rely on support of font related styling.
7.     Ensure that information conveyed with color is also available without color.

Optimize navigation:
Simple navigation and typing become critical when using a small screen and keyboard, and limited bandwidth.

1.     Provide only minimal navigation at the top of the page.
2.     Provide consistent navigation mechanisms.
3.     Clearly identify the target of each link.
4.     Note the target file’s format unless you know the device supports it.
5.     Assign access keys to links in navigational menus and frequently accessed functionality.
6.     Keep the URIs of site entry points short.
7.     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.

Check graphics & colors:
Images, colors, and style brighten content, but require care: devices may have low-contrast screens or may not support some formats.

1.     Resize images at the server, if they have an intrinsic size.
2.     Do not use images that cannot be rendered by the device. Avoid large or high resolution images except where critical information would otherwise be lost.
3.     Specify the size of images in markup, if they have an intrinsic size.
4.     Provide a text equivalent for every non-text element.
5.     Ensure that foreground and background color combinations provide sufficient contrast.
6.     When using background images make sure that content remains readable on the device.
7.     Do not use pixel measures and do not use absolute units in markup language attribute values and style sheet property values.

Keep it small:
Smaller sites make users happier by costing less in time and money.

1.     Use terse, efficient markup.
2.     Ensure that the overall size of page is appropriate to the memory limitations of the device.
3.     Keep style sheets small.
4.     Limit scrolling to one direction, unless secondary scrolling cannot be avoided.

Use the network sparingly:
Web protocol features can help improve the user experience by reducing the impact of network bottlenecks and latencies.

1.     Do not create periodically auto refreshing pages, unless you have informed the user and provided a means of stopping it.
2.     Do not use markup to redirect pages automatically. Instead, configure the server to perform redirects by means of HTTP 3xx codes.
3.     Keep the number of externally linked resources to a minimum.
4.     Provide caching information in HTTP responses

Help & guide user input:
Keyboards and other input methods on mobile devices can be tedious to use, so effective designs minimize the need for them.

1.     Keep the number of keystrokes to a minimum.
2.     Avoid free text entry where possible.
3.     Provide pre-selected default values where possible.
4.     Specify a default text entry mode, language and/or input format, if the target device is known to support it.
5.     Create a logical order through links, form controls and objects.
6.     Label all form controls appropriately and explicitly associate labels with form controls.
7.     Position labels so they lay out properly in relation to the form controls they refer to.

Think of users on the go:
Web users on the go want compact information when time is short and distractions many.

1.     Provide a short but descriptive page title.
2.     Use clear and simple language.
3.     Ensure that material that is central to the meaning of the page precedes material that is not.
4.     Limit content to what the user has requested.
5.     Ensure that content is suitable for use in a mobile context.
6.     Divide pages into usable but limited size portions.

-----------------------------------------------


Internationalization Quicktips:

1. Use Unicode wherever possible for content, databases, etc. Always declare the encoding of content.
2. Use characters rather than escapes (e.g. á á or á) whenever you can.
3. Declare the language of documents and indicate internal language changes.
4. Use style sheets for presentational information. Restrict markup to semantics.
5. Check for translatability and inappropriate cultural bias in images, animations & examples.
6. Use an appropriate encoding on both form and server. Support local formats of names/addresses, times/dates, etc.
7. Use simple, concise text. Use care when composing sentences from multiple strings.
8. On each page include clearly visible navigation to localized pages or sites, using the target language.
9. For XHTML, add dir="rtl" to the html tag for right-to-left text. Only re-use it to change the base direction.
10. Validate! Use techniques, tutorials, and articles at http://www.w3.org/International/

English Typography:

Use the proper English characters instead of their misused equivalents.

1. Quotes
2.     “ (“) opening quote (instead of ")
3.     ” (”) closing quote (instead of ")
4. Apostrophe
5.     ’ (’) apostrophe (instead of ')
6. Dashes and Hyphens
7.     – (– or –) en dash, used for ranges, e.g. “13–15 November” (instead of -)
8.     — (— or —) em dash, used for change of thought, e.g. “Star Wars is—as everyone knows—amazing.” (instead of -, or --)
9. Ellipsis
10.     … (… or …) horizontal ellipsis, used to indicate an omission or a pause (instead of ...)