La mayoría de la gente que maqueta no lo tiene en cuenta, pero es bastante importante tener en cuenta que el tamaño del texto de nuestros sitios web pueden crecer a voluntad del usuario. Y hay usuarios que tienen problemas de visión y pueden aumentar el texto del navegador al máximo.
Es importante maquetar la página para que también los usuarios que amplían al máximo el texto puedan leer toda la información sin problemas.
Hacer esto puede ser un poco lío porque hay que tener en cuenta algunos factores que se suman a otros tantos que ya llevábamos como los estándares y la compatibilidad entre navegadores, que no es poco.
- Lo primero es usar para el tamaño de texto siempre las unidades em. Definimos para el body un tamaño de texto estándar y si algún texto tiene un tamaño distinto lo haría en proporción al estándar. Así siembre va a guardar las proporciones exactas entre tamaños de textos distintos a la hora de que el texto amplíe.
- Es muy importante no usar nunca para los contenedores la propiedad height para fijar la altura de estos porque si tienen un alto fijo cuando crezca el texto va a bloquear y la maquetación debe de ser flexible para cuando crezca el texto.
- Un fallo común que ocurre cuando se amplia un texto es que cuando amplia este texto se superpone en zonas que tienen el mismo color del texto, y claro, ya no se puede leer ese texto superpuesto. La solución a esto es ponerle a los textos que tengan este problema un color de fondo igual al color del contenedor de este, para que cuando se superponga el color de fondo del texto también se superponga y se pueda seguir leyendo.
Básicamente siguiendo estos consejos el texto será legible para cuando el usuario lo amplíe al máximo y así estaremos mas cerca de la accesibilidad y usabilidad total.
Uno de los problemas de construir sitios web con contenidos dinámicos para clientes es que la mayoría de los clientes no terminan de entender la importancia de que todas las imágenes que pongan en la web deben llevar texto alternativo ALT para que tenga una correcta accesibilidad. Pues para revisar esto, si el sitio ha crecido demasiado como para revisarlo a mano, es utilizar una sencilla truco en la hoja de estilos CSS. Es el siguiente:
img {outline: 3px dashed red;}
img[alt] {outline-width: 0;}
Es sencillo, en la primera linea se asigna un borde dashed rojo a todas las imagnes, y en la segunda linea se le quita el borde a las imagenes que tengan texto alternativo ALT, con lo cual nos quedan con el borde las imagenes sin ALT.
Tags: alt,
css,
texto alternativo
Para mostrar un árbol de categorías con varios subniveles y accerlo correctamente accesible se debe construir de la seguiente forma:
Para obtener este resultado:
- oviperos
- aves
- palomo
- gorrion
- golondrina
- reptiles
- serpiente
- cocodrilo
- lagarto
- mamiferos
En un proyecto que realicé hace poco tuve que implementar un menú en forma de arbol de categorías, con distintos niveles de subcategorías y, como no, que fuera accesible.
La tabla donde se almacena los datos de cada familia tiene los siguientes campos:
- id_familia: INT primary key
- padre: INT indica el id de la familia padre. Será 0 cuando no tenga padre
- nivel: INT indica el nivel de profundidad en el arbol de categorías. Las familas con padre 0 tienen nivel 0.
- nombre_es: VARCHAR nombre de la familia
El código del ejemplo es el siguiente:
<?php
//se declara la variable global $nivel para tener una referencia fuera de la función recursiva que indique el nivel de profundidad de subfamilia actual
$nivel = "";
global $nivel;
///funcion recursiva que recorre el menu
function recorrer_menu_familias
($padre, $nivel_anterior){
//la consulta a la tabla familias busca los hijos del padre que entró como parametro a esta función
$sql="SELECT id_familia, padre, nivel, nombre_es FROM familias WHERE padre = $padre";
$result=mysql_query($sql);
while($row = mysql_fetch_array($result)){
if($GLOBALS['nivel']=="")
//si la goblal nivel está vacia es que acaba de empecar el ciclo recursivo
echo "<li>\n";
else{
//según la diferencia de nivel actual con el anterior guardada en $GLOBALS['nivel'] se cierran o abren etiquetas <Li>
$diferencia = $row['nivel'] - $GLOBALS['nivel'];
if($diferencia==0) echo "</li>\n<li>\n"; //no ha cambiado de nivel de subfamilia respecto al anterior
if($diferencia==1) echo "<ul>\n<li>\n"; //ha subido un nivel de subfamilia respecto al anterior
if($diferencia==-1) echo "</li>\n</ul>\n<li>\n"; //ha bajado un nivel de subfamilia respecto al anterior
if($diferencia < (-1)){
//baja varios niveles de subfamilia respecto al anterior
echo "</li>";
for($i=$diferencia;$i<0;$i++)
echo "</ul>\n</li>\n";
echo "<li>\n";
}
}
//crea el enlace
echo "<a href='?fam=".$row['id_familia']."'>".$row['nombre_es']."</a>";
//actualiza $GLOBALS['nivel'] al nivel actual
$GLOBALS['nivel'] = $row['nivel'];
//se llama a si mismo para comprovar quienes son los hijos de la familia actual
recorrer_menu_familias
($row['id_familia'],$row['nivel']);
}
}
//muestra menu
function muestra_menu_familias
(){
recorrer_menu_familias
(0, "");
echo "</li>\n";
for($i=0;$i==$GLOBALS['nivel'];$i++)
echo "</ul>\n</li>\n";
}
?>
<ul>
<?php muestra_menu_familias
(); ?></ul>
Y aplicando al resultado obtenido un buen aspecto con Treeview de jQuery http://docs.jquery.com/Plugins/Treeview da como resultado un arbol de categorías bastante elegante.
