Content Validity

Summary

...

Techniques

Although it is possible for validators to check the initial state of an EPUB prior to its being loaded and consumed in a reading system, it is not so easy to determine whether scripted interactions will result in invalid markup being injected into a publication.

Developers should note that the write method is not available in XHTML. New elements must be created using DOM node functionality. The innerHTML function for writing strings of markup is similarly not available.

Using DOM methods will ensure that you create well-formed markup, but the JavaScript functions do not check if the content is valid at the point of insertion (or leaves valid markup after a deletion). A simple typo, for example, might result in a table cell being added to a forced line break (br), instead of a table row (tr).

While many developers only look at the visual result of their actions, consideration must be given to how an assistive technology will process such aberrations. In some cases the mistakes might be benign, but often they result in unexpected behaviors being triggered at unexpected times, and can limit, or take away, access to the content.

Examples

Example 1 — Adding text via the DOM

<script type="text/javascript">
<![CDATA[
   function writeResult(pass, msg) {
   
      /* get the results div */
      var rDiv = document.getElementById('results');
      
      /* create a new span element */
      var result = document.createElement('span');
         result.setAttribute('class', pass ? 'win' : 'lose');
      
      /* create a text node with the result */
      var message = document.createTextNode(msg);
      
      /* add the message to the span */
      result.appendChild(message);
      
      /* show the new message for to user */
      rDiv.appendChild(result);
   
   }
]]>
</script>

Example 2 — Invalid use of the DOM

The following example inserts a new html element at the start of the body.

<script type="text/javascript">
<![CDATA[
   var invalid = document.createElement('html');
      invalid.appendChild(document.createTextNode(msg));
   
   document.body.insertBefore(invalid, document.body.firstChild);
]]>
</script>