General output guidelines
Adhere to standards
All portlets that are bundled with SiteVision render XHTML output (not HTML) and much effort is done for making the output compliant to WCAG guidelines (accessibility).
You should in your code always strive to follow XHTML and WCAG. Regardless of what context you write your output code (e.g. in a custom portlet, in a SiteVision HTML portlet, in a SiteVision Script portlet, in a SiteVision JCR menu portlet, or in a SiteVision Proxy portlet etc).
Below you find information about the essentials you should be aware of.
XHTML is essentially a combination of plain old HTML that follows the syntax rules of XML. The essence of this is that you always must ensure that your coding follows these rules:
WCAG is essentially a set of rules/recommendations for how output code should be written to become as accessible as possible. There are many rules but some of the rules you typically will encounter are:
XHTML
XHTML is essentially a combination of plain old HTML that follows the syntax rules of XML. The essence of this is that you always must ensure that your coding follows these rules:
- Element names must be lowercased
- Elements must be closed
- Attribute names must be lowercased
- Attribute values must be enclosed within quotation marks
WCAG
WCAG is essentially a set of rules/recommendations for how output code should be written to become as accessible as possible. There are many rules but some of the rules you typically will encounter are:
- Use a label for all inputs
- Use alternative descriptions for links and images (alt and title) if necessary
- Use proper heading structures (<h1> before any <h2> etc.)
- A page must contain one, and only one main heading (<h1>). (Note! The heading will not necessarily exist in the code/portlet where you are writing your code...)
- Provide a noscript element for all script elements
- Do not rely solely on javascript for core functionality (e.g. links)
- Use the onkeypress attribute in combination with the onclick attribute
- For tables - always use table headers, possibly a caption and use a summary
Some examples
| BAD | <TABLE border=0> |
|---|---|
| GOOD | <table style="border:none" summary="..."> |
| BAD | <BR>, <hr> |
| GOOD | <br />, <hr /> |
| BAD | <IMG src="/x/y.gif"> |
| GOOD | <img src="/x/y.gif" alt="..." /> |
| BAD | <script language="JavaScript 1.3">...</script> |
| GOOD | <script type="text/javascript">...</script> |
| <noscript>...</noscript> | |
| BAD | <input type=BUTTON OnClick="..." value="..."> |
| GOOD | <input type="button" onclick="..." onkeypress="..." value="..." /> |
| BAD | <a href="aaa.htm">...</a> |
| GOOD | <a href="aaa.htm" title="...">...</a> |
| BAD | <a href="b" target="_blank">...</a> |
| BAD | <a href="#" onclick="window.open('b.htm'); return false;">...</a> |
| GOOD | <a href="b.htm" onclick="window.open('b.htm'); return false;" onkeypress="window.open('b.htm'); return false;" title="...">...</a> |
| BAD | Phone: <input type="text" name="phone"> |
| GOOD | <label for="anId">Phone:</label> |
| <input type="text" name="phone" id="anId" /> |
Last updated:
se-sto-pio-sv5-1.sitevision-cloud.net
18.118.1.232
18.118.1.232