Estándares Web
30
Noviembre
2006
Muchas veces, cuando reviso páginas, me encuentro con textos alternativos en imágenes del estilo: “esquina superior derecha”, “barra de decoración”, “imagen decorativa”…
Como todos deberíamos saber ya a estas alturas, las imágenes que no aportan información al usuario deben llevar un texto alternativo vacío.
Problemas
El problema está cuando te encuentras que muchos usuarios entienden lo de texto alternativo vacío como una indicación clara para eliminar el texto alternativo. Y es todo lo contrario.
Una imagen debe llevar siempre el atributo alt. No sólo por accesibilidad, sino porque por definición tanto en HTML como en XHTML es obligatorio (al igual que siempre tenemos que poner el atributo src).
Mala comprensión
No es lo mismo un texto alternativo vacío, que la ausencia del texto alternativo.
Ausencia de texto alternativo significa que no va a existir el atributo alt.
Texto alternativo vacío significa que existirá el atributo alt pero con un valor vacío: alt="".
Podéis decir, ¿pero no es lo mismo?. Pues no (y punto).
El por qué
Si el atributo alt no existe, cuando un usuario que navegue sin carga de imágenes (por ejemplo) llegue a esa imagen, sabrá que hay una imagen, pero al no tener texto alternativo no podrá saber si se trata de una imagen decorativa o bien una imagen relevante, con información (algo que nosotros, como desarrolladores sí que sabemos).
Sin embargo, si utilizamos un texto alternativo vacío, alt="", cuando este usuario llegue a esa imagen, ni siquiera reparará en ella. Es decir, se hace transparente, ya que como no ofrece información, es como si no existiera.
Gazapos
A día de hoy me he encontrado los siguientes métodos para implementar un texto alternativo vacío:
alt="vacío"alt=""""alt=""e "e"alt="comillas comillas"
Parece increible pero en 3 años y medio que llevo dedicándome exclusivamente a la Accesibilid Web he visto de todo y aunque os pueda parecer sorprendente (sobre todo el último caso), creedme que es cierto.
Recomendación final
Bien, ahora que no se os ocurra poner a todas vuestras imágenes un texto alternativo vacío, para así pasar los validadores automáticos, o toda la furia de los WAI’s caerá sobre vosotros.
Recordad que los profesionales serios revisamos a mano la accesibilidad, con lo cual no vais a poder engañarnos, así que sed niños buenos y trabajad correcta y honradamente.
3 comentarios »
Deportes, Estándares Web
23
Octubre
2006
Si estás harta y harto de que te roben las imágenes de tu web (sí, esas que te curras durante horas con el photoshop, the gimp o similares…), estás de enhorabuena, porque acabamos de descubrir el método definitivo para que nadie te las robe.
Ayer me enteré (sí un poco tarde) que salía desde Bilbao la regata Velux 5 Oceans, una de las vueltas al mundo más importantes. Tan sólo hay 8 participantes y uno de ellos es Unai Basurko, portugalujo. Este es el primer gran viaje en solitario que emprende.
Así que ante esta gran aventura, visité la página oficial, en castellano y os invito que también la visitéis:
Página oficial de la Velux 5 Oceans.
Sygmar me avisó que la página tenía una sorpresita muy agradable y, efectivamente, cual sería mi sorpresa cuando me percato de que no se me carga ninguna imagen y, en su lugar, me aparece el texto alternativo Image ©.
Ya estaba echando pestes contra el webmaster con frases del estilo: claro, seguro que con IExplorer las imágenes salen perfectas y como utilizo Firefox, nada de nada… Así que me vi obligada (en contra de mi voluntad, eso sí) a abrir la página con IE y voilá, tampoco rulaban.
Así que a la única conclusión lógica y posible que he llegado es que han querido proteger las imágenes tan bien, que ni dios las pueda ver.
Os dejo unas capturas por si deciden desproteger las imágenes en algún momento.
Comentarios desactivados
Estándares Web
10
Julio
2006
O lo que es lo mismo, marcos en línea implementados de forma accesible.
Primero hazte una pregunta y reflexiona: ¿realmente necesitas utilizar marcos? ¿no puedes utilizar los include de tu lenguaje de programación? ¿estás completamente seguro?
Bueno, si no he podido disuadirte, al menos hazlo accesible.
IFRAME no accesible
Vamos con lo más sencillo. Tenemos una página comercial y queremos insertar el catálogo de productos, por ejemplo, en un iframe:
<iframe src=”URL” [resto de parámetros]></iframe>
IFRAME Accesible
Para dar una alternativa accesible a un iframe (marco en línea), simplemente tenemos que ofrecer el contenido alternativo entre la apertura y cierre del elemento iframe:
<iframe src=”URL” [resto de parámetros]>
<a href=”URL”>Catálogo de productos</a>
</iframe>
Conclusiones
Lo más práctico es insertar un enlace, obviamente que tenga sentido independientemente del contexto. Otra solución es insertar todo el código del catálogo dentro del iframe, pero entonces estaríamos escribiendo 2 veces el código…
¿A que ha sido fácil?, bueno, aún así, ¡¡¡si puedes aniquilar de tu cabeza los iframe, mucho mejor!!!
Comentarios desactivados
Estándares Web
30
Mayo
2006
Como todos sabemos, no es válido utilizar el atributo target si nuestra página está validando contra un dtd de (X)HTML estricto.
Pero podemos simular este comportamiento mediante un javascript no intrusivo:
En la web de Sitepoint existe un artículo que explica cómo hacerlo:
function externalLinks(){
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++){
var anchor = anchors [i];
if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external"){
anchor.target = "_blank";
}
}
}
window.onload = externalLinks;
<a href="http://www.antxoa.com" rel="external">Blog de Antxoa</a>
Pero este script tiene un fallo de accesibilidad. Si queremos satisfacer el nivel WCAG-AA, necesitaremos avisar al usuario de que se va a abrir una nueva ventana.
Podemos pensar en aplicar un atributo title del estilo:
<a href="http://www.antxoa.com" rel="external" title="este enlace se abrirá en una nueva ventana">Blog de Antxoa</a>
Pero si lo hacemos, todos los usuarios sin soporte javascript tendrán que aguantar el aviso, con unas instrucciones totalmente erróneas.
Lo ideal es que sólo aparezca el aviso si se tiene soporte javascript y es muy fácil: basta con incluir el atributo title en la propia función javascript:
function externalLinks(){
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++){
var anchor = anchors [i];
if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external"){
anchor.target = "_blank";
anchor.title = "este enlace se abrirá en una nueva ventana";
}
}
}
window.onload = externalLinks;
<a href="http://www.antxoa.com" rel="external">Blog de Antxoa</a>
Y asunto arreglado. Pero para dejarlo aún más perfecto, lo que vamos a hacer es modificar ligeramente la forma de incluir el title para que, en el caso de que ese enlace tenga ya este atributo con un valor, no lo reemplacemos, sino que lo mantengamos, añadiéndole la coletilla de la nueva ventana:
function externalLinks(){
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++){
var anchor = anchors [i];
if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external"){
anchor.target = "_blank";
if (anchor.getAttribute("title")){
anchor.title = anchor.getAttribute("title") + " (se abre en nueva ventana)";
}
else{
anchor.title = "(se abre en nueva ventana)";
}
}
}
}
window.onload = externalLinks;
<a href="http://www.antxoa.com" rel="external">Blog de Antxoa</a>
Ahora sólo queda por decidir si realmente queremos abrir ventanas nuevas o no…
Comentarios desactivados
Estándares Web
10
Mayo
2006
Ya podéis acceder en la web de Enpresa Digitala a la información de la jornada sobre Javascript no Intrusivo, que se impartirá el jueves, 1 de junio en el Parque Tecnológico de Zamudio.
La verdad es que tengo muchas ganas de que llegue el día, porque llevaba mucho tiempo con la idea de preparar esta jornada y me hace ilusión de hablar de otra cosa distinta a la Accesibilidad Web, XHTML y CSS, aunque lo vaya a tocar de refilón.
Así que, ya sabéis, si os apetece aprender algo nuevo, os espero en la jornada, y de paso, nos tomamos un café. Saluditos!
1 comentario »
Estándares Web
3
Mayo
2006
Encuentro en Que Web! un curioso y divertido experimento que han hecho en The Man in Blue: Ponle la cara de una web al cuerpo de otra web.
De esta forma queda demostrado que existen similitudes (o no) en los nombres que utilizamos los desarrolladores para nuestras clases e identificaciones.
Prueba a mezclar estilos o comprueba qué bien queda Google con mi CSS. Igual así empiezo a usarlo…. ¡ni de coña!, sigo fiel a All the web
1 comentario »
Estándares Web
19
Marzo
2006
Una de las advertencias más cantosas del Validador CSS del W3C es la siguiente:
Recomendamos encarecidamente ofrecer una familia genérica como última opción.
Bien, ¿qué significa? Vamos a explicarlo con un ejemplo que siempre repito en los cursos. Realmente no se trata de un error, sino de una advertencia (warning).
Imagínate que estás en el supermercado y tu madre te pide que compres detergente de marca Ariel. Vas a la seccion de limpieza, lo buscas, y resulta que no queda Ariel.
Como no quieres comprar algo equivocado, llamas a tu madre y le cuentas el problema. Entonces ella te dice que compres el detergente de marca Elena.
Lo buscas, y tampoco queda Elena. Vuelves a llamar a tu madre, que te dice que, entonces, compres Skip.
Miras, y qué mala suerte, tampoco queda. Vuelves a llamar a tu madre y te dice:
Ok, cómprame cualquier detergente, de la marca que quieras, pero compra uno.
Y éso es precisamente lo que nos pide el Validador: que como última opción indiquemos una familia genérica. Vale, bien, eso ya lo hemos dicho al principio. ¿Pero qué significa.?
Bien, cuando indicamos la tipografía de un elemento en la hoja de estilos, algo así como:
h1{ font-family: Arial, Verdana;}
En este caso estoy indicando que quiero que todos los encabezados de primer nivel (h1) utilicen la letra Arial, y en el caso de que el usuario no disponga de esta fuente en su sistema, que utilice Verdana.
¿Pero qué ocurre cuando el usuario no tiene ni Arial ni Verdana? Entonces es el navegador el que las sustituye por la funte predeterminada en el navegador.
Y ahí es precisamente donde entra en juego la advertencia del validador. En este ejemplo estoy poniendo 2 tipos de letras de tipo “sans-serif”. ¿mande?, ¿y esto qué es?
Los tipos de letras se agrupan en cuatro grandes familias: serif, sans-serif, fantasy y monospace. Las más conocidas para nosotros pueden ser:
- serif:
- Letras con mucho detalle (como la Times New Roman). En pantalla se leen peor debido a la cantidad de detallas que tienen, sin embargo, impresas en papel se leen mejor.
- sans-serif
- Letras sin detalla (como la Arial o la Verdana). En pantalla se leen mejor porque no tienen detalles, sin embargo, impresas en papel se leen peor.
¿Ya sabéis por dónde voy? Vale, lo explico aún más.
En mi ejemplo, quiero que los encabezados de primer nivel tengan una tipografía de tipo sans-serif (verdana o arial). Pero igual un usuario no dispone de esa tipografía, así que el navegador la sustituye por la que tenga establecida por defecto, y se puede dar la casualidad que el navegador tenga estabecida, por defecto, una letra de tipo serif.
Lo que el validador nos está “cantando” es que, si el usuario no dispone de nuestra tipografía, al menos se sustituya por una de su familia. Si queremos una letra sans-serif, para favorecer la legibilidad en pantalla de la página, que el navegador ponga otra letra sans-serif.
Entonces, nuestro ejemplo quedará así:
h1{ font-family: Arial, Verdana, sans-serif;}
Y el validador ya no nos mostrará la advertencia.
Comentarios desactivados
