Pasos a Realizar

Paso 19: Tamaños de fuente relativos

Esta característica de accesibilidad es indiferente para los navegadores sólo texto, siempre lo mostrarán con el mismo tamaño, y para los lectores de pantalla que se limitan a leer y presentar el contenido de forma oral.

El empleo de las unidades relativas permite redimensionar el texto, lo que facilita el acceso a la información a usuarios con problemas visuales y en general a todos los usuarios, de tal forma que puedan adaptar el tamaño de la fuente a sus preferencias o necesidad


¿Cómo hacerlo?


En Blogger editamos la plantilla principal, seleccionando la solapa "Plantilla" del editor y pulsando el botón “Personalizar”, se abre el editor de la plantilla que Blogger nos facilita para poder seleccionar el tamaño de texto y fondo de todos los elementos que aparecen en el blog seleccionamos  "Avanzado".


imagen con el texto en tamaño más grande imagen con el texto en tamaño normal










En Blogger editamos la plantilla principal, seleccionando la solapa "Plantilla" del editor y pulsando el botón “Editor HTML”. Buscamos la etiqueta  body o el código de los atajos del teclado visto en el Pso 10 (<!-- Atajos de teclado --> ) y colocamos a continuación el siguiene código:



 <!-- Aumentar y disminuir tamaño del texto -->
<script type='text/javascript'>
//<![CDATA[
var tgs = new Array( 'div','td','tr');
var szs = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' );
var startSz = 2;
function ts( trgt,inc ) {
if (!document.getElementById) return
var d = document,cEl = null,sz = startSz,i,j,cTags;
sz += inc;
if ( sz < 0 ) sz = 0;
if ( sz > 6 ) sz = 6;
startSz = sz;
if (!( cEl = d.getElementById( trgt ) ) ) cEl = d.getElementsByTagName( trgt )[ 0 ];
cEl.style.fontSize = szs[ sz ];
for ( i = 0 ; i < tgs.length ; i++ ) {
cTags = cEl.getElementsByTagName( tgs[ i ] );
for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize = szs[ sz ];
}
}
//]]>
</script>
/* */


Ahora podemos obtar por dos opciones.
  1. Sería añadir en la parte "Diseño" un elemento gadget "HTML/Javascript" con el título "Tamaño del texto".
  2. Y otra opción sería colocarlo dentro de cada artículo o alguna parte del propio código HTML.
En los dos casos hay que insertar en su interior el código siguiente:

  <a href="javascript:ts('body',1)">Aumentar</a> | <a href="javascript:ts('body',-1)">Disminuri</a>

Si no queremos que aparezca texto como: Aumentr | Disminuir. Podemos sustituir esto por imágenes. Este sería el código:

<a href="javascript:ts('body',1)"><img src="URL DE LA IMAGEN DE AUMENTAR TAMAÑO"/></a><a href="javascript:ts('body',-1)"><img src="URL DE LA IMAGEN DE DISMINUIR TAMAÑO"/></a>



Nota:
Antes de salvar los cambios con “Guardar Plantilla”, será conveniente comprobar que no existe ningún error para ello pulsar “Vista Previa”.