6.2. Anàlisi de les Directrius d'Accessibilitat.
Capítol 6. Anàlisi i modificació de les Fulles d'Estil.
Anterior | Següent

6.2. Anàlisi de les Directrius d'Accessibilitat.

6.2.1. Directriu 1
6.2.2. Directriu 2
6.2.3. Directriu 3
6.2.4. Directriu 4
6.2.5. Directriu 5
6.2.6. La resta de directrius.

6.2.1. Directriu 1

Utilitzar alternatives equivalents al contingut visual i auditiu

Recomanació W3C de la directriu.

Com afecta DocBook

Per tal de fer accessible el contingut visual i auditiu a aquells usuaris amb alguna discapacitat visual o auditiva o als terminals amb alguna restricció gràfica o sonora que siguen incapassos de visualitzar imatges, vídeos o sons és necessari donar una alternativa equivalent a aquest contingut en forma de text. Dels diferents elements de que disposa DocBook per incloure al document imatges, vídeos o sons, el que respecta aquesta directriu és l'element <mediaobject>, que està dissenyat per incloure una col·lecció d'elements que defineixen representacions en diferents formats del mateix contingut, incloent l'element <textobject> que és el que donaria la representació alternativa en forma de text. S'ha d'evitar l'ús d'altres elements com per exemple <graphic> que encara que també serveix per incloure una imatge, no disposa de cap atribut o element dins d'ell que complisca amb la directriu 1 donant una alternativa en forma de text a la imatge, a més aquest element desapareix en la versió 5 de DocBook.

Aixi doncs s'ha d'utilitzar <mediaobject> o <mediaobjectco> per a incloure al document qualsevol element multimèdia, omplint l'element <textobject> de manera adecuada.

En l'exemple següent podem veure la utilització d'aquest element:

Exemple 6.2. Codi DocBook accessible per a la inclusió d'una imatge

<?xml version="1.0"?>
<!DOCTYPE article SYSTEM "file:///C:/docbook-dtd/xml/4.5/docbookx.dtd">
<article id="exemple" lang="ca">
<figure><title>Exemple del Element MediaObject</title>
<mediaobject>
  <imageobject>
    <imagedata fileref="imatges/emc2.png"/>
  </imageobject>
  <textobject>
    <phrase>Aquest text es una representacio alternativa 
	en forma de text de la imatge anterior: e = mc2</phrase>
  </textobject>
</mediaobject>
</figure>
</article>


Que donaria com a resultat de la transformació el següent codi HTML: 

<div class="mediaobject">
  <img src="imatges/emc2.png" 
       alt="Aquest text es una representacio alternativa en forma 
	   de text de la imatge anterior: e = mc2">
</div>

Figura 6.1. Exemple del Element <mediaobject>

Aquest text és una representació alternativa en forma de text de la imatge anterior: e = mc2


Com es pot comprovar l'element <img> conté l'atribut alt amb l'alternativa en forma de text per a la imatge.

Paràmetres afectats

Segons la directriu 1, s'ha d'evitar utilitzar imatges per a reemplaçar text, per tant, les úniques imatges que deu d'haver al codi HTML generat han de ser les que s'especifiquen al document DocBook. Les fulles d'estil poden generar la inclusió d'imatges, com per exemple per a les capçaleres de navegació, on crea imatges que representen fletxes per als enllaços anterior, següent etc... Mitjançant l'ús de paràmetres es pot evitar la inclusió d'imatges per part de les fulles d'estil. De totes maneres, les imatges generades tenen correctament l'atribut alt amb la representació alternativa de la imatge, però l'objectiu és que el codi siga com més accessible millor, deixant tot el referent al disseny i maquetació de la web per a les fulles d'estil CSS.

Els paràmetres afectats i els valors per tal que no generen imatges son:

  • admon.graphics: valor 0. Deshabilita la inclusió de imatges per als elements <tip>, <warning>, <caution> i <important>.

  • callout.graphics: valor 0. Deshabilita la inclusió de gràfics als elements <callout> i relacionats (les referències numèriques per als peus de pàgina, exemples etc...).

  • navig.graphics: valor 0. Per a que no cree imatges a les capçaleres de navegació que genera al utilitzar la fulla d'estil chunk.xsl.

Suggeriment

Per a una descripció dels elements de DocBook veure la documentació oficial a http://www.docbook.org/tdg/en/html/part2.html [NWal] i [NWal5]

6.2.2. Directriu 2

No us baseu sols en el color

Recomanació W3C de la directriu.

Com afecta DocBook

No hi ha manera d'especificar el color en DocBook, ja que aquest aspecte és referent a l'aspecte. No afecta doncs al codi en DocBook. El codi HTML és molt simple i no es genera cap referència al color, és a la fulla d'estil CSS on s'ha de tindre en compte aquest factor.

6.2.3. Directriu 3

Marqueu els documents amb els elements estructurals adients. Controleu la presentació amb fulls d'estil en comptes de fer-ho amb elements i atributs de presentació.

Recomanació W3C de la directriu.

Com afecta DocBook

No l'afecta.

Paràmetres afectats

Les fulles d'estil que transformen a HTML etiqueten tots els elements de DocBook amb etiquetes HTML de tipo <div> amb l'atribut class amb el nom de l'etiqueta en DocBook. D'aquesta manera el codi resultant compta amb l'etiquetatge suficient per a poder controlar quasi tots els aspectes de la presentació amb la fulls d'estil CSS.

Hi ha alguns paràmetres que ajuden a millorar la manera en que s'etiqueta el codi HTML:

  • html.stylesheet: valor estil.css. Nom de la fulla d'estil CSS que s'aplica a l'arxiu HTML generat.

  • html.stylesheet.type: valor text/css. Tipus de la fulla d'estil que associa a l'arxiu HTML generat, en aquest cas CSS.

  • para|emphasis|entry|phrase.propagate.style: valor 1. Passa el valor de l'atribut role dels elements DocBook com a atribut class en l'element <div> de HTML, de manera que podem donar diferent aspecte als mateixos elements de DocBook segons el valor de l'atribut role.

  • css.decoration: valor 0. Deshabilita l'us de la etiqueta <style> en el codi HTMl, ja que volem tindre tot el referent a disseny i maquetació separat en l'arxiu CSS.

  • make.valid.html: valor 1. Procura generar un codi HTML vàlid. Per exemple etiqueta amb <div> els elements <para> de DocBook (a més de transformar-los a l'element <p> de HTML).

  • html.cleanup: valor 1. De manera similar a l'anterior paràmetre, intenta que el codi generat siga vàlid, i millora l'etiquetatge. La diferència és que aquest necessita que el processador XSLT suporte les extensions EXSLT (Saxon i Xalan les suporten).

  • generate.id.attributes: valor 1. Si l'element DocBook té l'atribut id, aquest atribut serà l'atribut id de l'etiqueta <div> corresponent en HTML.

  • show.revisionflag: valor 1. Etiqueta amb <div> o <span> les elements DocBook amb atributs d'aquest tipus, permetent a la fulla d'estil CSS poder-los donar estil.

  • chunker.output.doctype-public: valor -//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd. Associar el DTD per al fitxer HTML generat, en la declaració DOCTYPE, el valor de l'identificador PUBLIC.

Plantilles modificades

La plantilla encarregada de crear l'etiqueta <body> al codi HTML pot incloure atributs com el tipus de lletra, el color de fons i altres segons les paràmetres definits per a tal efecte. Per tal d'evitar-ho, ja que serà la fulla d'estil CSS l'encarregada de definir aquests trets del disseny, només hem d'incloure aquesta plantilla a la capa de personalització i fer que estiga buida, de manera que només generarà l'etiqueta <body> sense cap atribut: 

<xsl:template name="body.attributes">
</xsl:template>

6.2.4. Directriu 4

Utilitzeu etiquetes de marcatge que facilitin la pronunciació o interpretació de text abreujat o estranger

Recomanació W3C de la directriu.

Com afecta DocBook

En la capçalera de definició DOCTYPE del document DocBook es pot definir el llenguatge utilitzat per defecte, amb el codi del IETF RFC 1766. Aquest serà el llenguatge per defecte si no s'especifica cap altre al llarg del document. Es pot especificar un llenguatge diferent al de per defecte mitjançant l'atribut lang, present a tots els elements.

En la transformació, els elements de DocBook són etiquetats en HTML amb l'element <div>, que accepta l'atribut lang en cas de que estiga present en l'element a transformar complint d'aquesta manera amb la directriu 4 punt de verificació 4.1.

Paràmetres afectats

Ningun.

Plantilles modificades

Ninguna.

6.2.5. Directriu 5

Assegureu-vos que les taules tenen el marcatge necessari per a facilitar-ne la conversió per navegadors accessibles i altres agents d'usuari.

Recomanació W3C de la directriu.

Aquesta directriu mereix una atenció especial, ja que el concepte d'accessibilitat pot ser molt subjectiu de vegades, no es pot comprovar de manera automàtica per algun software i depèn de l'autor, del que considere què és accessible i què no.

Les taules deuen d'utilitzar-se solament per a la representació de la informació tabular, és a dir, taules de dades. Son taules on la informació representada té significat pel context on es troba, la fila i la columna aporten informació a l'element en qüestió, poguent identificar la informació en comú que tenen tots els elements d'una determinada fila o columna. No obstant hi ha ocasions en que la informació, encara que no siga tabular, es presenta d'una manera més clara si va en taules, llavors diguem que s'utilitzen taules per a maquetació de la informació. Aquest ús de taules per a maquetació és delicat, ja que els usuaris que utilitzen lectors de pantalla poden malinterpretar la informació degut a que els lectors de pantalla llegeixen línia per línia. Els creadors de contingut han de restringir doncs l'ús de taules a la informació tabular i només usar-les per a maquetar si és estrictament necessari i la taula creada és fàcilment comprensible quan es linealitza. El procés de linealitzar una taula consisteix en posar en paràgrafs el contingut de les cel·les de manera seqüencial.

Com afecta DocBook

DocBook té l'element <table> i <informaltable> per tal de crear taules, amb una sintaxi i semàntica equivalents a les de l'HTML, per tant disposa de tots els elements necessaris per a crear taules que es transformen correctament, generant un codi accessible. Consultar aquesta directriu en l'apèndix per informació més detallada sobre la creació de taules accessibles.

Hi ha molts elements de DocBook que generen taules al ser transformats. Taules que són accessibles si l'element DocBook té l'estructura correcta:

  • <revhistory>: història de les diferents revisions de un document. Conté informació sobre les revisions que s'han fet d'un document: el codi, la data de realització, l'autor i una descripció de la revisió. Podem veure un exemple a continuació:

    Exemple 6.3. Ús de l'element <revhistory> i la seva transformació.

    <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE article SYSTEM 
       "file:///C:/docbook-dtd/xml/4.4/docbookx.dtd">
<article id="exemple3" lang="ca">
<title>Exemple de l'us de l'element RevHistory</title>
<revhistory>
<revision>
  <revnumber>0.91</revnumber>
  <date>11 Dec 1996</date>
  <authorinitials>Adolf B.</authorinitials>
  <revremark>Correcció d'errors</revremark>
</revision>
<revision>
  <revnumber>0.90</revnumber>
  <date>30 Nov 1996</date>
  <authorinitials>Adolf B.</authorinitials>
  <revremark>Revisió final</revremark>
</revision>
</revhistory>
</article>


    En la transformació a HTML, es crea una cel·la capçalera <TH> amb el títol “Historial de Revisions” complint amb el punt de verificació 5.1. Els lectors de pantalla llegeixen les taules línia a línia, quedant la informació de manera clara: la primera línia contindria el número de revisió, la data i les inicials de l'autor i la segon línia contindria una descripció de la revisió realitzada. 

    <table border="0" width="100%" summary="Revision history">
    <tr>
    <th align="left" valign="top" colspan="3">
        <b>Historial de Revisions</b>
    </th>
    </tr>
    <tr>
        <td align="left">Revision 0.91</td>
        <td align="left">11 Dec 1996</td>
        <td align="left">Adolf B.</td>
    </tr>
    <tr>
        <td align="left" colspan="3">Correcció d'errors</td>
    </tr>
    <tr>
        <td align="left">Revision 0.90</td>
        <td align="left">30 Nov 1996</td>
        <td align="left">Adolf B.</td>
    </tr>
    <tr>
        <td align="left" colspan="3">Revisió final</td>
    </tr>
</table>

  • <productionset> si s'utilitza el mòdul per a definir gramàtiques amb el format EBNF . La taula generada és clarament una taula de dades, amb cinc columnes: el nombre de la producció, el no terminal que produeix, el símbol emprat per a produir (es modificable mitjançant el paràmetre ebnf.assignment de les fulles d'estil XSL), la producció que realitza i alguna anotació important de la producció. Per tant hem d'assegurar-nos que la taula generada és accessible. En l'exemple següent podem veure l'ús d'aquest element per a escriure una gramàtica senzilla en notació EBNF.

    Exemple 6.4. Ús de l'element <productionset> amb notació EBNF i la seva transformació.

    <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE article SYSTEM "file:///C:/docbook-dtd/xml/4.4/docbookx.dtd">
<article id="exemple4" lang="ca">
<title>Exemple de l'element ProductionSet aplicat a produccions EBNF</title>
<simplesect><title>Gramàtica EBNF</title>

<productionset><title>Expresions Aritmètiques</title>
<production id="ebnf.expression">
  <lhs>Expresió</lhs>
  <rhs><nonterminal def="#ebnf.arith">ExpresióArit</nonterminal> |
       <nonterminal def="#ebnf.mult">ExpresióMult</nonterminal>
  </rhs>
</production>
<production id="ebnf.arith">
  <lhs>ArithExpression</lhs>
  <rhs><nonterminal def="#ebnf.expression">Expresió</nonterminal>
       '+'
       <nonterminal def="#ebnf.mult">ExpresióMult</nonterminal> |
       <nonterminal def="#ebnf.expression">Expresió</nonterminal>
       '-'
       <nonterminal def="#ebnf.mult">ExpresióMult</nonterminal>
  </rhs>
</production>
<production id="ebnf.mult">
  <lhs>MultExpression</lhs>
  <rhs><nonterminal def="#ebnf.mult">ExpresióMult</nonterminal>
       '*'
       <nonterminal def="#ebnf.mult">ExpresióMult</nonterminal> |
       <nonterminal def="#ebnf.mult">ExpresióMult</nonterminal>
       '/'
       <nonterminal def="#ebnf.mult">ExpresióMult</nonterminal> |
       <nonterminal def="#ebnf.number">Nombre</nonterminal>
  </rhs>
  <constraint linkend="div0"/>
</production>
<production id="ebnf.number">
  <lhs>Nombre</lhs>
  <rhs>[0-9]+</rhs>
</production>
</productionset>

<constraintdef id="div0">
<title>Divisió per Zero</title>
<para>Divisió per zero és un error.</para>
</constraintdef>
</simplesect>
</article>


    A continuació les taules resultants de la seva transformació, que com podem comprovar no compleixen amb el punt de comprovació 5.1: utilitzar capçaleres per a les columnes de la taula, ja que si que ho fa en la primera taula, però no en la segon. Caldrà doncs modificar aquesta plantilla. 

    <table width="100%" cellpadding="5" class="productionset" 
  summary="EBNF for Expresions Aritmètiques">
<tr>
   <th align="left" valign="top" class="productionset">
     Expresions Aritmètiques</th>
</tr>
<tr>
    <td>
    <table border="0" width="99%" cellpadding="0" 
      class="productionset" summary="EBNF productions">
    <tr>
       <td align="left" valign="top" width="3%">
        [1]</td>
       <td align="right" valign="top" width="10%">
        <a name="ebnf.expression"></a>Expresió</td>
       <td valign="top" width="5%" align="center">
        ::=</td>
       <td valign="top" width="52%">
        <a href="#ebnf.arith">ExpresióArit</a> |
        <a href="#ebnf.mult">ExpresióMult</a></td>
       <td align="left" valign="top" width="30%"> </td>
    </tr>
	....
    </table>
    </td>
</tr>
</table>

  • <simplelist>: element per a representar una llista simple, segons el valor dels atributs type i columns, es transformara d'una manera o altra. L'atribut type pot tenir els següents valors: inline, vert i horiz. Amb el valor inline no hi ha problema, però els altres dos generen taules per a ordenar els elements de la llista en tantes columnes com indica l'atribut columns de manera vertical o horitzontal. Les taules generades no tenen cel·les de capçalera <th>, per tant no compleixen amb el punt 5.1. Com que tots els membres de la llista són del mateix tipus (de no ser així seria convenient utilitzar una taula en compte de una llista simple) l'únic objectiu de presentar els elements de manera horitzontal o vertical és la maquetació, per tant és convenient evitar aquesta presentació. De qualsevol manera, si es vol presentar la informació de la llista de manera tabulada la millor opció des de el punt de vista de l'accessibilitat és emprar un element <table> posant com a capçalera <th> el títol de la llista.

  • <segmentedlist>: llista de grups d'elements. Es pot representar tant com a taula com a llista depenent del valor del paràmetre segmentedlist.as.table. Si es vol representar com a taula, és necessari utilitzar els elements <segtitle> <seglistitem> i <seg> de manera adecuada tal com es pot veure al següent exemple.

    Exemple 6.5. Utilització de l'element <segmentedlist> i la seva transformació.

    <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE article SYSTEM "file:///C:/docbook-dtd/xml/4.5/docbookx.dtd">
<article id="exemple6" lang="ca">
<para>
<segmentedlist>
<title>Fruiters i fruita que produeixen</title>
<segtitle>Arbre</segtitle>
<segtitle>Fruit</segtitle>
<seglistitem>
  <seg>Taronger</seg><seg>Taronja</seg>
</seglistitem>
<seglistitem>
  <seg>Alvocat</seg><seg>Alvocat</seg>
</seglistitem>
<seglistitem>
  <seg>Palmera</seg><seg>Dàtil</seg>
</seglistitem>
</segmentedlist>
</para>
</article>


    Podem veure com la taula generada és accessible, separant les files de capçalera de les del cos amb les etiquetes <thead> i <tbody> i marcant les cel·les de capçalera amb <th>: 

    <div class="segmentedlist">
   <div class="title"><strong>
   <span class="title">
     Fruiters i fruita que produeixen
   </span></strong></div>
   <table border="0">
      <thead>
      <tr class="segtitle">
         <th>Arbre</th>
         <th>Fruit</th>
      </tr>
      </thead>
      <tbody>
      <tr class="seglistitem">
         <td class="seg">Taronger</td>
         <td class="seg">Taronja</td>
      </tr>
      <tr class="seglistitem">
         <td class="seg">Alvocat</td>
         <td class="seg">Alvocat</td>
      </tr>
      <tr class="seglistitem">
         <td class="seg">Palmera</td>
         <td class="seg">Dàtil</td>
      </tr>
      </tbody>
   </table>
</div>

  • <qandaset>: per a agrupar preguntes i respostes. Amb l'element <quandadiv> engloba un grup d'elements <question> i <answer>. Genera una taula simple, cada pregunta o resposta correspon a una fila de la taula amb dos columnes, la primera per a la numeració o identificació de la pregunta o resposta i la segona per al text corresponent, per tant al serialitzar la taula queda totalment comprensible. Aquest és un cas en que la informació de les taules no és tabular, però la seva representació maquetada amb una taula clarifica la comprensió de la informació representada.

    Una possible millora en l'accessibilitat de la taula generada, seria modificar la plantilla per a incloure les capçaleres <th>, que correspondrien al títol de cada grup de preguntes, pel que cada element <quandadiv> hauria de tindre un element <title, que seria el candidat per a capçalera de taula.

    En l'exemple a continuació es pot comprovar l'ús d'aquest element i la taula que genera:

    Exemple 6.6. Ús de l'element <qandaset> i la seva transformació

    <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE article SYSTEM "file:///C:/docbook-dtd/xml/4.4/docbookx.dtd">
<article id="exemple7" lang="ca">
<title>Exemple de l'ús de l'element quandaset</title>

<qandaset defaultlabel='number'>
<qandadiv>
	<title>Parelles de Pregunta-Resposta</title>
<qandaentry>
	<question>
		<para>Pregunta A?</para>
	</question>
	<answer>
		<para>Resposta A.</para>
	</answer>
</qandaentry>
<qandaentry>
	<question>
		<para>Pregunta sense resposta B?</para>
	</question>
</qandaentry>
<qandaentry>
	<question>
		<para>Pregunta C?</para>
	</question>
	<answer>
		<para>Resposta valida C1.</para>
	</answer>
	<answer>
		<para>Resposta valida C2.</para>
	</answer>
</qandaentry>
</qandadiv>
</article>


    Taula que genera al ser transformat: 

    <table border="0" summary="Q and A Set">
<tbody>
<tr class="qandadiv">
    <td align="left" valign="top" colspan="2">
    <h3 class="title"><a name="d0e5"></a>1. Parelles de Pregunta-Resposta
    </h3>
    </td>
</tr>
<tr class="toc">
    <td align="left" valign="top" colspan="2">
      <dl>
      <dt>1.1. <a href="#d0e8">Pregunta A?</a></dt>
      <dt>1.2. <a href="#d0e15">Pregunta sense resposta B?</a></dt>
      <dt>1.3. <a href="#d0e19">Pregunta C?</a></dt>
      </dl>
    </td>
</tr>
<tr class="question">
    <td align="left" valign="top">
      <a name="d0e8"></a><a name="d0e9"></a><b>1.1.</b></td>
    <td align="left" valign="top">
      <p>Pregunta A?</p></td>
</tr>
<tr class="answer">
    <td align="left" valign="top"></td>
    <td align="left" valign="top">
      <p>Resposta A.</p></td>
</tr>
<tr class="question">
    <td align="left" valign="top">
      <a name="d0e15"></a><a name="d0e16"></a><b>1.2.</b></td>
    <td align="left" valign="top">
      <p>Pregunta sense resposta B?</p>
    </td>
</tr>
<tr class="question">
    <td align="left" valign="top">
      <a name="d0e19"></a><a name="d0e20"></a><b>1.3.</b></td>
    <td align="left" valign="top">
      <p>Pregunta C?</p></td>
</tr>
<tr class="answer">
    <td align="left" valign="top"></td>
    <td align="left" valign="top">
      <p>Resposta valida C1.</p></td>
</tr>
<tr class="answer">
    <td align="left" valign="top"></td>
    <td align="left" valign="top">
       <p>Resposta valida C2.</p></td>
</tr>
</tbody>
</table>

  • <funcsynopsis: per a definir prototips de funcions. És un altre cas de taula de maquetació on la informació queda més clara, ja que cada fila de la taula correspòn a un paràmetre de la funció i les cel·les restants queden buides amb l'única funció de tabular la cel·la següent. Com es pot veure en l'exemple següent, aquesta taula resultant és completament comprensible quan es serialitza, ja que cada cel·la només té una línia de text i es respecta l'ordre natural de serialització (esquerra-dreta i dalt-baix).

    Exemple 6.7. Ús de l'element <funcsynopsis> i la seva transformació.

    <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE article 
  SYSTEM "file:///C:/docbook-dtd/xml/4.5/docbookx.dtd">
<article id="exemple8" lang="ca">
<title>Exemple d'ús de l'element FUNCSYNOPSIS.</title>

<para>Funció qsort amb estil ansi</para>
<funcsynopsis>
<funcprototype>
  <funcdef>void <function>qsort</function></funcdef>
    <paramdef>void *<parameter>dataptr</parameter>[]</paramdef>
    <paramdef>int <parameter>left</parameter></paramdef>
    <paramdef>int <parameter>right</parameter></paramdef>
    <paramdef>int <parameter>(* comp)</parameter>
      <funcparams>void *, void *</funcparams></paramdef>
</funcprototype>
</funcsynopsis>
</article>


    La transformació genera la següent taula: 

    <table border="0" summary="Function synopsis">
<tr>
    <td><code class="funcdef">void <b class="fsfunc">qsort</b>(</code></td>
    <td> </td>
    <td><var class="pdparam">dataptr</var>,</td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td><var class="pdparam">dataptr</var>, </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td><var class="pdparam">left</var>, </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td><var class="pdparam">right</var>, </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td><var class="pdparam">(* comp)</var>
        <code>(</code>void *, void *<code>))</code>;
	</td>
</tr>
</table>

Paràmetres afectats

Hi ha molts elements de DocBook que al ser transformats depenen d'algun paràmetre per a generar taules o no. Aquestes taules són de maquetació, que s'han d'evitar, però la majoria generen taules simples que es poden linealitzar sense cap problema. Com que l'objectiu és generar un codi HTML el més accessible que es puga, s'evitarà generar taules d'aquest tipus.

Els paràmetres afectats son:

  • admon.graphics: valor 0. Aquest paràmetre ja s'ha utilitzat per a la directriu 1. En cas d'estar activat utilitza taules per a maquetar la posició de la imatge que genera.

  • make.graphics.viewport: valor 0. Utilitza les taules HTML per a definir la zona visible d'una imatge, cosa que no permet l'element <img> de HTML, però que es pot aconseguir amb CSS, mitjançant els atributs width, height per a definir la mida d'una caixa contenidora d'un determinat element i l'atribut overflow que indica que fer amb la part de l'element que queda fora de la caixa què el conté.

  • variablelist.as.table: valor 0. Evita l'ús de taules HTML per a representar aquest element.

  • segmentedlist.as.table: valor 0. Similar a l'anterior.

  • funcsynopsis.tabular.threshold: valor 0. Evita l'ús de taules per a tabular l'aspecte d'aquest element.

  • suppres.navigation: valor 0. Si utilitzem les fulles d'estil que generen varis arxius HTML, crea unes capçaleres de navegació molt útils per a recórrer el document. Aquestes capçaleres estàn maquetades amb taules. Si li donem valor distint de zero a aquest paràmetre deshabilita la creació d'aquestes capçaleres i per tant les taules, augmentant l'accessibilitat, però al mateix temps no disposem dels enllaços per a navegar dins del document que faciliten en gran manera l'accessibilitat. Per tant donarem valor 0 i es modificarà la plantilla per tal que no genere taules i siga més accessible encara que la taula generada és fàcilment linealitzable.

Plantilles modificades

Encara que algunes de les taules que les fulles d'estil generen es poden considerar accessibles, és millor evitar-les i donar un aspecte similar amb les fulles d'estil CSS. A continuació les plantilles que es modifiquen:

  • <xsl:template match="header.navigation">: la plantilla que genera la capçalera de navegació maquetada amb taules.

    Exemple 6.8. Modificació de la plantilla que genera la capçalera de navegació.

    <xsl:template name="header.navigation">
  <xsl:param name="prev" select="/foo"/>
  <xsl:param name="next" select="/foo"/>
  <xsl:param name="nav.context"/>

  <xsl:variable name="home" select="/*[1]"/>
  <xsl:variable name="up" select="parent::*"/>

  <xsl:variable name="row1" select="$navig.showtitles != 0"/>
  <xsl:variable name="row2" select="count($prev) > 0
                       or (count($up) > 0 
                           and generate-id($up) != generate-id($home)
                           and $navig.showtitles != 0)
                       or count($next) > 0"/>

  <xsl:if test="$suppress.navigation = '0' 
             and $suppress.header.navigation = '0'">
    <div class="navheader">
      <xsl:if test="$row1 or $row2">
	   
	   
        <xsl:if test="$row1">
	      <div class="navheader_title">
             <xsl:apply-templates select="." 
			   mode="object.title.markup"/>
		  </div>
        </xsl:if>

        <xsl:if test="$row2">
		  <xsl:choose>
             <xsl:when test="count($up) > 0
                and generate-id($up) != generate-id($home)
                and $navig.showtitles != 0">
				<div class="navheader_titleup">
                <xsl:apply-templates select="$up" 
			       mode="object.title.markup"/>
				</div>
             </xsl:when>
           </xsl:choose>
		    
		   <div class="navheader_links">
		     <xsl:if test="count($prev)>0">
			   <span class="navheader_prev">
               <a accesskey="p">
               <xsl:attribute name="href">
                 <xsl:call-template name="href.target">
                 <xsl:with-param name="object" select="$prev"/>
                 </xsl:call-template>
               </xsl:attribute>
               <xsl:call-template name="navig.content">
               <xsl:with-param name="direction" select="'prev'"/>
               </xsl:call-template>
               </a>
			   </span>
             </xsl:if>
              			  
			 <xsl:if test="count($prev)>0">
			 <xsl:if test="count($next)>0">
			 	<span class="sep">
			   	<xsl:text> | </xsl:text>
				</span>
			 </xsl:if>
			 </xsl:if>
			  
             <xsl:if test="count($next)>0">
			    <span class="navheader_next">
                <a accesskey="n">
                <xsl:attribute name="href">
                  <xsl:call-template name="href.target">
                  <xsl:with-param name="object" select="$next"/>
                  </xsl:call-template>
                </xsl:attribute>
                <xsl:call-template name="navig.content">
                <xsl:with-param name="direction" select="'next'"/>
                </xsl:call-template>
                </a>
				</span>
              </xsl:if>
              </div>
          </xsl:if>
      </xsl:if>
      <xsl:if test="$header.rule != 0">
        <hr/>
      </xsl:if>
    </div>
  </xsl:if>
</xsl:template>


    Amb aquesta modificació els enllaços de navegació de la capçalera es presenten un per cada línia, però degudament etiquetats amb <div> i <span>: 

    <div class="navheader">
   <div class="navheader_title">
 	Titol de la secció.</div>
   <div class="navheader_titleup">
    Titol de la secció superior.</div>
   <div class="navheader_links">
     <span class="navheader_prev">
	 <a accesskey="p" href="anterior.html">Anterior</a>
	 </span>
	 <span class="sep"> | </span>
	 <span class="navheader_next">
	 <a accesskey="n" href="seguent.html">Següent</a>
	 </span>
   </div>
</div>

    D'aquesta manera es pot obtenir un aspecte equivalent a la maquetació amb taules utilitzant el següent codi en la fulla d'estil CSS associada al HTML: 

    div.navheader {
width:100%;
background-color: #ddd;
border-bottom: 1px solid #333333;
overflow:hidden;
font-size: 0.9em;
padding: 0.5em;}

div.navheader span.sep { display:none;}

div.navheader_links {
padding: 0% 2%;}
div.navheader_links span.navheader_next {
width: 20%;
float: right;
text-align: right;}

div.navheader_links span.navheader_prev {
width: 20%;
float:left;
text-align:left;}

div.navheader_title, div.navheader_titleup{
width: 100%;
text-align:center;}

  • <xsl:template match="footer.navigation">: de manera similar a l'anterior s'elimina la maquetació amb taules i s'etiqueta de manera adient per a la maquetació en la fulla d'estil CSS:

    Exemple 6.9. Modificació de la plantilla que genera el peu de navegació

    <xsl:template name="footer.navigation">
  <xsl:param name="prev" select="/foo"/>
  <xsl:param name="next" select="/foo"/>
  <xsl:param name="nav.context"/>

  <xsl:variable name="home" select="/*[1]"/>
  <xsl:variable name="up" select="parent::*"/>

  <xsl:if test="$suppress.navigation = '0' 
          and $suppress.footer.navigation = '0'">
    <div class="navfooter">
    <xsl:if test="$footer.rule != 0">
      <hr/>
    </xsl:if>
	  
    <!-- Navegar a l'inici o a la Taula de Continguts -->
    <xsl:choose>
      <xsl:when test="$home != . or $nav.context = 'toc'">
        <div class="navfooter_ht">
        <span class="navfooter_home">
        <a accesskey="h">
        <xsl:attribute name="href">
          <xsl:call-template name="href.target">
            <xsl:with-param name="object" select="$home"/>
          </xsl:call-template>
        </xsl:attribute>
        <xsl:call-template name="navig.content">
          <xsl:with-param name="direction" select="'home'"/>
        </xsl:call-template>
        </a>
        </span>
    
        <xsl:if test="$chunk.tocs.and.lots != 0 
                and $nav.context != 'toc'">
          <xsl:text> | </xsl:text>
          <span class="navfooter_toc">
          <a accesskey="t">
          <xsl:attribute name="href">
            <xsl:apply-templates select="/*[1]"
                 mode="recursive-chunk-filename">
              <xsl:with-param name="recursive" select="true()"/>
            </xsl:apply-templates>
            <xsl:text>-toc</xsl:text>
            <xsl:value-of select="$html.ext"/>
          </xsl:attribute>
          <xsl:call-template name="gentext">
            <xsl:with-param name="key" select="'nav-toc'"/>
          </xsl:call-template>
          </a>
          </span>
        </xsl:if>
			
        </div>
      </xsl:when>
    </xsl:choose>

    <!-- Navegar un nivell amunt, si existeix -->
    <xsl:choose>
      <xsl:when test="count($up)>0
                and generate-id($up) != generate-id($home)">
        <div class="navfooter_up">
        <a accesskey="u">
        <xsl:attribute name="href">
          <xsl:call-template name="href.target">
            <xsl:with-param name="object" select="$up"/>
          </xsl:call-template>
        </xsl:attribute>
        <xsl:call-template name="navig.content">
          <xsl:with-param name="direction" select="'up'"/>
        </xsl:call-template>
        </a>
		</div>
      </xsl:when>
    </xsl:choose>
	  
	<!-- Navegar al nivell anterior, si existeix -->
    <xsl:if test="count($prev)>0">
      <div class="navfooter_prev">
      <a accesskey="p">
      <xsl:attribute name="href">
        <xsl:call-template name="href.target">
          <xsl:with-param name="object" select="$prev"/>
        </xsl:call-template>
      </xsl:attribute>
      <xsl:call-template name="navig.content">
        <xsl:with-param name="direction" select="'prev'"/>
      </xsl:call-template>
	  <xsl:if test="$navig.showtitles != 0">
	    <xsl:text>: </xsl:text>
        <xsl:apply-templates select="$prev" 
		           mode="object.title.markup"/>
      </xsl:if>
      </a>
      </div>
    </xsl:if>
	  
    <!-- Navegar al nivell següent, si existeix -->
    <xsl:if test="count($next)>0">
      <div class="navfooter_next">
      <a accesskey="n">
      <xsl:attribute name="href">
        <xsl:call-template name="href.target">
          <xsl:with-param name="object" select="$next"/>
        </xsl:call-template>
      </xsl:attribute>
      <xsl:call-template name="navig.content">
        <xsl:with-param name="direction" select="'next'"/>
      </xsl:call-template>
	  <xsl:if test="$navig.showtitles != 0">
	      <xsl:text>: </xsl:text>
          <xsl:apply-templates select="$next" 
	                 mode="object.title.markup"/>
      </xsl:if>
      </a>
	  </div> 
    </xsl:if>
    </div>
  </xsl:if>
</xsl:template>


  • <xsl:template match="blockquote">: si conté un element <attribution> genera una taula per a la seva maquetació. Amb aquesta modificació generarà dos paràgrafs, un amb la citació i l'altre amb l'autor.

    Exemple 6.10. Modificació de la plantilla que transforma l'element <blockquote>

    <xsl:template match="blockquote">
  <div class="{local-name(.)}">
    <xsl:if test="@lang or @xml:lang">
      <xsl:call-template name="language.attribute"/>
    </xsl:if>
    <xsl:call-template name="anchor"/>

    <xsl:choose>
      <xsl:when test="attribution">
        <p class="blockquote">
            <xsl:apply-templates 
			select="child::*[local-name(.)!='attribution']"/>
            <xsl:text>--</xsl:text>
            <xsl:apply-templates select="attribution"/>
        </p>
      </xsl:when>
      <xsl:otherwise>
        <blockquote class="{local-name(.)}">
          <xsl:apply-templates/>
        </blockquote>
      </xsl:otherwise>
    </xsl:choose>
  </div>
</xsl:template>


  • <xsl:template match="productionset"> i <xsl:template match="production" per tal de millorar l'accessibilitat de la taula generada s'afegiran cel·les de capçalera <th> amb el títol de cada columna.

    Exemple 6.11. Modificació de la plantilla que transforma l'element <productionset>

    <xsl:template match="productionset">
  <span>
    <xsl:attribute name="class">
      <xsl:value-of select="name(.)"/>
    </xsl:attribute>
	<xsl:if test="title">
	  <h3 class="title">
      <xsl:apply-templates select="title"/>
	  </h3>
	</xsl:if>
    
	<table>
	  <xsl:if test="$ebnf.table.bgcolor != ''">
	    <xsl:attribute name="bgcolor">
	      <xsl:value-of select="$ebnf.table.bgcolor"/>
	    </xsl:attribute>
	  </xsl:if>
	  <xsl:attribute name="class">
	    <xsl:value-of select="name(.)"/>
	  </xsl:attribute>
	  <xsl:attribute name="summary">
		  <xsl:text>EBNF</xsl:text>
		  <xsl:if test="title">
				<xsl:text>: </xsl:text>
				<xsl:value-of select="title"/>
		  </xsl:if>
	  </xsl:attribute>
	  <tr align="left">
		  <th id="cap1" width="3%">
		  	Nº</th>
		  <th  id="cap2" width="10%">
		  	No Terminal</th>
		  <th id="cap3" width="10%">
		  	Produeix</th>
		  <th id="cap4" width="52%">
		  	Producció</th>
		  <th id="cap5" width="25%">
		  	Nota</th>
      </tr>
	  <xsl:apply-templates 
	       select="production|productionrecap"/>
	</table>
  </span>
</xsl:template>

<xsl:template match="production">
  <xsl:param name="recap" select="false()"/>
  <tr>
    <td headers="1" align="left" valign="top" width="3%">
      <xsl:text>[</xsl:text>
      <xsl:number count="production" level="any"/>
      <xsl:text>]</xsl:text>
    </td>
    <td headers="cap2" align="right" 
	    valign="top" width="10%">
      <xsl:choose>
	<xsl:when test="$recap">
	  <a>
	    <xsl:attribute name="href">
	      <xsl:call-template name="href.target">
		<xsl:with-param name="object" select="."/>
	      </xsl:call-template>
	    </xsl:attribute>
	    <xsl:apply-templates select="lhs"/>
	  </a>
	</xsl:when>
	<xsl:otherwise>
          <xsl:call-template name="anchor"/>
	  <xsl:apply-templates select="lhs"/>
	</xsl:otherwise>
      </xsl:choose>
    </td>
    <td headers="cap3" valign="top" 
	    width="10%" align="center">
      <xsl:copy-of select="$ebnf.assignment"/>
    </td>
    <td headers="cap4" valign="top" width="52%">
      <xsl:apply-templates select="rhs"/>
      <xsl:copy-of select="$ebnf.statement.terminator"/>
    </td>
    <td headers="cap5" align="left" 
	    valign="top" width="25%">
      <xsl:choose>
	<xsl:when test="rhs/lineannotation|constraint">
          <xsl:apply-templates 
		    select="rhs/lineannotation" mode="rhslo"/>
          <xsl:apply-templates select="constraint"/>
	</xsl:when>
	<xsl:otherwise>
	  <xsl:text> </xsl:text>
	</xsl:otherwise>
      </xsl:choose>
    </td>
  </tr>
</xsl:template>


6.2.6. La resta de directrius.

Com que DocBook està pensat per a crear documents amb informació estàtica, el codi HTML que generen és molt simple i no utilitza tecnologies modernes que poden donar problemes d'accessibilitat, per tant, la majoria de les següents directrius no l'afecten o l'afecten molt poc.

Directriu 6: Assegureu-vos que les pàgines són accessibles fins i tot quan no permeten la utilització de les tecnologies més modernes o aquestes estiguin desconnectades.

Els documents HTML creats són perfectament llegibles sense associar cap fulla d'estil CSS, i ja que el codi generat no conté JavaScript ni demés tecnologies de scripts, ni continguts dinàmics ni frames, compleix amb aquesta directriu.

Directriu 7: Assegureu-vos que els objectes o les pàgines que es mouen, parpellegen, es desplacen o s'actualitzen automàticament puguin ser aturats momentàniament o definitivament.

DocBook està pensat per a continguts estàtics i per tant no generarà cap element que puga tindre aquestes característiques.

Directriu 8: Assegureu-vos que la interfície d'usuari segueix els principis d'un disseny accessible: accés a les funcionalitats amb independència del dispositiu, operativitat del teclat, veu automàtica, etc.

Aquesta directriu no afecta el codi generat a partir d'un document DocBook.

Directriu 9: Utilitzeu característiques que permetin l'activació dels elements de la pàgina mitjançant diversos dispositius d'entrada.

Les fulles d'estil generen un codi HTML que compleix tots els punt d'aquesta directriu.

Directriu 10: Utilitzeu solucions provisionals d'accessibilitat per tal que les tecnologies d'assistència i els navegadors antics operin correctament.

No afecta al codi HTML generat per les fulles d'estil.

Directriu 11: Utilitzeu les tecnologies W3C (d'acord amb les especificacions) i seguiu les directrius d'accessibilitat. Allà on no sigui possible utilitzar la tecnologia W3C, o si en utilitzar-la s'obtenen com a resultat materials de difícil conversió, proporcioneu una versió alternativa del contingut que sigui accessible.

Tant el codi generat com la fulla d'estil que es pot associar són tecnologies W3C.

Directriu 12: Proporcioneu informació de context i orientació per a ajudar els usuaris a entendre pàgines o elements complexos.

No afecta al codi HTML generat per les fulles d'estil.

Directriu 13: Proporcioneu mecanismes clars i consistents de navegació (informació d'orientació, barres de navegació, mapa del web, etc.) per a incrementar la probabilitat que una persona trobi allò que està buscant en un lloc web.

L'autor del contingut en format DocBook ha de crear el text dels enllaços de forma clara, evitant enllaços del tipus "clica ací"

Encara que DocBook té elements suficients per a crear sumaris i demés elements de navegació, les fulles d'estil disposen de paràmetres per a controlar la generació de sumaris per a diferents parts del document:

  • toc.section.depth: fins quina profunditat en la jerarquia de seccions es crearà una taula de continguts.

  • generate.section.toc.level: fins quina profunditat en la jerarquia de seccions del document, aquestes seccions generen una entrada en la taula de continguts.

  • toc.max.depth: màxima profunditat en la jerarquia d'elements DocBook que apareixeran en la taula de continguts, independentment que siguin seccions o altres documents.

  • generate.toc: aci es defineixen quins elements de DocBook generaran una entrada en la taula de contingut i en el llistat de taules, figures i exemples.

Si s'utilitza la fulla d'estil chunk.xsl per a generar varis arxius HTML, es crea una capçalera i peu de navegació amb enllaços clars per anar al següent, anterior, a l'inici o un nivell amunt, i en l'idioma en que està fet el document. Els següents paràmetres controlen aquestes capçaleres:

  • suppress.header.navigation: posar a 0 per a habilitar la creació de la capçalera de navegació.

  • suppress.footer.navigation: igual per al peu de navegació. El paràmetre suppress.navigation controla les dos capçaleres alhora.

Directriu 14: Assegureu-vos que els documents siguin clars i simples perquè puguin ser entesos amb facilitat.

L'autor del contingut és qui ha de respectar aquesta directriu.

Inici
Pujar
Anterior: Capítol 6. Anàlisi i modificació de les Fulles d'Estil.
Següent: Capítol 7. Conclusions i treball futur.