Help SiteVision 4

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


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
Note! Some elements and attributes that are allowed in HTML are NOT allowed in XHTML (e.g. the 'target' attribute of an <a> element, <font> element etc.)

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>
 
BADPhone: <input type="text" name="phone">
GOOD<label for="anId">Phone:</label>
 <input type="text" name="phone" id="anId" />

The page published: 2009-09-18

Find us!

SiteVision AB (Headquarter)
Vasagatan 10
702 10 Orebro
Sweden


Info: +46 19-17 30 30
Support: +46 19-17 30 39