Validating Spry pages
Adobe is committed to making sure that Spry pages pass W3C validation tests. The W3C recommends a couple of methods for extending XHTML to encapsulate custom attributes. One method is to add new attribute declarations to the actual page; another method is to use a custom Document Type Declaration (DTD).
Spry provides a custom DTD that you can append to the doc type declaration at the top of a Spry page. When you append the custom DTD, the W3C validator retrieves it and uses it in conjunction with the original DTD. This process ensures the validation of your Spry pages.
The custom Spry DTD also helps ensure that you are using your Spry attributes correctly. For example, you can use the spry:repeat attribute on some tags where you can’t use the spry:region attribute (such as table). The validator shows whether or not you’re using Spry attributes correctly.
The following is a typical doc type declaration.
<!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" xmlns:spry="http://ns.adobe.com/spry"> ... </html>
The doc type is usually the first line of the HTML page that’s delivered to the browser. When you validate a page, the validator looks at the URL of the DTD (http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd), and uses that DTD file as the basis for the validation. In the preceding example, the URL points to the XHTML transitional DTD on the W3C website. This DTD lists all of the rules that your page needs to follow. Different DTDs exist for different page types. For example, the strict DTD (http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd) doesn't allow for the use of some attributes that are deprecated in HTML 4.
In the preceding example, the Spry namespace is declared: xmlns:spry="http://ns.adobe.com/spry". Add this namespace to pages that use Spry attributes. The namespace tells the browser that the page contains attributes that begin with spry. Providing this information helps prevent conflicts with standard XHTML attributes, or other custom attributes from other namespaces that might also be used in the same page. Adding the Spry namespace doesn't necessarily help with validation, but it is a best practice to include it.
Pages that use Spry widgets or effects do not require the Spry namespace declaration. Additionally, no document is required at the namespace URL and, if there is a document, a human or a machine can read it (in contrast to the DTD, which must be written in a very specific, machine-readable way).
Extending doc type
To extend the doc type so that a Spry page validates correctly, add code to the original doc type declaration, as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
[
<!ENTITY % SPRY SYSTEM "http://www.adobe.com/dtd/spry.dtd">
%SPRY;
]>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
...
</html>
The <!ENTITY> line in the code contains the URL to the custom Spry DTD. It’s an absolute link to the Spry DTD on adobe.com.
The %SPRY; line in the code tells the validator to validate the page. If that piece of code is missing, the page will not validate. The square brackets ([]) are also required.
With the preceding items in place, the page fully validates when checked against the W3C validator at http://validator.w3.org/.
After you validate the page and view it in a browser, you’ll notice a problem. You’ll see a piece of code at the top of the page that looks like this:
%SPRY; ]>
The ENTITY tag confuses many browsers, and causes them to read the doc type as closed at that point in the code. The result is a trailing snippet of code that renders in most browsers. Although Opera 9 handles this problem correctly, Internet Explorer, Firefox, and Safari all display the snippet. This problem is a browser bug and there is currently no fix for it.
To ensure validation, add the entity extension to your code as outlined. Then, for the page to appear correctly, remove the entity extension before posting your page to the server. Remember, this custom DTD is only required if you need the page to validate and you are using Spry attributes. If you are not using Spry attributes, or you are only using Spry effects and Spry widgets, this custom DTD is not required.
Spry widgets and the tabIndex attribute
In the samples on Adobe Labs, and in the code that Dreamweaver CS3 generates, Spry uses the tabIndex attribute to enable keyboard navigation for some of the widgets like Tabbed panels and the Collapsible panel. This functionality is added to enhance accessibility in Spry widgets.
Although using the tabIndex property on nonform elements is technically invalid, Internet Explorer and Mozilla-based browsers support using tabIndex on other page elements specifically for accessibility. If you want, you can use a tags to enable tabbing instead. You can also remove tabIndex from any widget without affecting its basic functionality.
The next version of the XHTML spec includes the use of tabIndex on other page elements.