One of the goals of Spry is to enable the user community to build and share widgets. Adobe has a set of guidelines to use when authoring widgets for public distribution. Adobe is providing these guidelines with the hope that all widgets will have a consistent base functionality.

• Use standard HTML code for structure

• Don’t require CSS code unless necessary

• If you require CSS code for functionality, clearly document the requirements

• Use a single line (if possible) of JavaScript to enable the widget functionality

• Write keyboard navigation options in a function by default

• When JavaScript is turned off, the content should still appear on the page

• Widgets should be self-contained. Everything needed for the widget is provided in the HTML, JavaScript, and CSS files.

Keeping to these guidelines will help ensure that widgets are easy to understand and use, plus consistency strengthens the framework for everyone.

Using standard code is important because there is less to learn for the common user. It also makes it easy to use these widgets in WYSIWYG editors.

CSS code is used in some widgets to show and hide content by switching the visibility rule in CSS code. This is an example of a required use of CSS. Such a use is acceptable because the CSS code is the obvious mechanism for showing and hiding content. CSS code that is pure styling, however, should not be required. The widget should always function without styling. Document required CSS rules with comments in the CSS file, and if you’re providing further documentation, mention it there as well.

Most widgets are activated with a single line of JavaScript code just after the actual widget code. Try to keep the JavaScript arguments to a minimum. Widths and heights of widgets should be set in CSS code, not in JavaScript, unless there are no other options.

Keyboard navigation and accessibility are important to users and to Spry. Write keyboard navigation so that users can use common workflow keys (arrow keys, space bar) to access all parts of your widget. Use things like tab order where appropriate.

It’s vital that content not be hidden in non-scripting environments. Ensure that when JavaScript is turned off, your content is not hidden because of CSS visibility being turned off or content being positioned off screen.