Parte 2.

Analizar la accesibilidad de la herramienta para la gestión de blogs

Blogger (CMS simplificado) desde el punto de vista del autor. Observar si el CMS
es accesible para los autores con discapacidad.

1. REVISIÓN DEL CÓDIGO XHTML

Inicio con la revisión de la sintaxis XHTML del blog y para ello voy a utilizar la
herramienta del W3C (Consorcio World Wide Web) Markup Validation Service.
Para nuestra sorpresa se encuentra el siguiente resultado:

Errors found while checking this document as HTML 4.0

Strict!
Result: 38 Errors, 30 warning(s)

Address:

Encoding: utf-8

Doctype: HTML 4.0 Strict

Root Element: HTML

Analizando los resultados encuentro tres tipos de errores

Errores en la sintaxis de los comentarios

Se aprecia que algunas de las etiquetas no se han cerrado y otras estan escritas en
mayusculas, esto no se puede modificar por el administrador del contenidos debido a
que esto pertenece a la programación interna del blogger ,por lo tanto estos errores son
imposibles de corregir.

Ejemplo:

1. Line 314, Column 7: end tag for "FORM" which is not finished

</form>

Line 119, Column 8: end tag for element "IMG" which is not open
Duplicación de etiquetas

Si el artículo se ha creado en modo "Edición de HTML" y se ingresaron elementos "p",

Blogger duplica estos elementos al publicar el artículo. Por otra parte, cualquier retorno
de carro lo convierte en un elemento "br".

Rutas dinámicas

El resto de los errores se refieren a las rutas dinámicas en los atributos "href" que
contienen símbolos &. La solución es sustituirlos por &amp; pero Blogger los vuelve a
publicar como &, definitivamente no tiene solución por nuestra parte como
administradores de contenidos.

VALIDACIÓN DE HOJAS DE ESTILO

Como segunda validación básica , se realiza sobre el manejo de los estilos CSS.

Se encontraron 2 errores y 7 alertas en la plantilla que tiene por defecto el blog, para
tratar de solucionar este inconveniente se requiere ingresar a las opciones:

“Diseño” y dentro de este a “edición del HTML”

Esto conlleva a dos situaciones:

1. para un administrador de contenidos sin previos conocimientos de xhtml y de

hojas de estilo le sería imposible la solución de estos problemas de estilo.
2. Tanto el estilo como el código HTML se encuentra en el mismo archivo no se
tiene independencia de cada uno de ellos.
3. Debido a que no se tiene independencia en el uso del HTML y de los estilos ,
se repite en cada página en la parte superior el código del estilo utilizado.
No se ofrece información para tener CSS diferentes para los distintos dispositivos
(móviles, TV, impresión, etc.) se requiere de un proceso de investigación para poder
solucionar esta necesidad.

REVISIÓN DE IMÁGENES

El administrador de contenidos del blogger no obliga a incluir un atributo "alt" a las

imágenes que se insertan en los artículos, ni tampoco facilita la inclusión del atributo
"longdesc” no dispone de herramientas adecuadas de edición que faciliten el manejo de
estos atributos. Para realizar el ingreso de estos stributos es necesario realizar la
edición en HTML lo cual no esta al alcance de personas sin conocimientos técnicos en
programación.

REVISIÓN DE IDIOMA

Se realiza la verificación de que la plantilla tenga indicado el idioma y la codificación

correctamente, pero aquí encuentro el primer problema, Blogger incluye como primera
línea de la plantilla la codificación UTF-8 siendo esta imposible de modificar.

<?xml version="1.0" encoding="UTF-8" ?>

Para especificar el cambio de idioma en el texto mediante el atributo "lang", el Blogger

tampoco facilita esta actualización, debido a que al igual que en el manejo de las
imágenes no cuenta con una herramienta que facilite esta actualización y conlleva a
realizar los cambios directamente en el código HTML.

Por otra parte, Blogger no permite indicar el cambio de idioma en el título o en el

etiquetado de los artículos, puesto que pinta el elemento en vez de interpretarlo.

REVISIÓN DE COLOR

Realizo la comprobación que no haya información basada en el color. Para realizar esto
utilizo en primer lugar la herramienta Vischeck que simula la visualización de las
páginas por personas con problemas de ceguera cromática. No encuentro problemas en
este item.

Mediante la utilización de la herramientaWeb Accessibility Toolbar de Explorer,

compruebo que el blog sea legible en escala de grises y reviso el contraste de color.
Encuentro problemas en el manejo del editor de contenidos debido a que no es claro su
ubicación en la pantalla.

REVISIÓN AUTOMÁTICA CON TAW

Se realizó la verificación de accesibilidad por medio de la herramientaTAW.
(http://www.tawdis.net) y se presento en inconveniente de no poder realizr la verificación
de la páginas internas del administrador de contenidos, esto debido a que se requiere
autenticación para poder ingresar a estos contenidos, por tal motivo me limite a verificar la
accesibilidad con la primera página de ingreso al sistema de administración, esta verificación
arrojo los sigientes resultados:

Error de prioridad 1
Se presentaron gran cantidad de errores de prioridad uno por lo cual no realicé comprobaciones de
prioridades tipo dos y tres, en los errores de prioridad tipo 1 se encontraron los siguientes como los mas
destacados:

• Esta tabla no contiene encabezados. Si es una tabla de datos son

necesarios. (2)
• Línea 110: <table>
Línea 311: <table class="form-noindent" border="0" cellpadding="6" cellspacing="3"
width="100%">
• No existe el elemento "noscript" con contenido alternativo para
"scripts". Compruebe si es necesario para no perfer funcionalidad o
información. (3)
• Línea 65: <script>
• Línea 124: <script type="text/javascript">

• Este elemento utiliza unidades de medida absolutas en lugar de

unidades de medida relativas.
 Línea 242: <td colspan="2" height="33.0" class="gaia le fpwd" align="center" valign="bottom">

EEste elemento HTML está desaconsejado en HTML 4.01 y no debería ser

utilizado. (2)
Línea 107: <font size="-1">
Este control de formulario no tiene asociado ninguna etiqueta. (2)
Línea 199: <input type="password" name="Passwd" id="Passwd" size="18" class="gaia le val" />
Línea 178: <input type="text" name="Email" id="Email" size="18" value="" class='gaia le val' />

Convierta los elementos de presentación a hojas de estilo (Por ejemplo, los elementos
"FONT"). (9)
Cuando los controles de formulario se puedan agrupar, utilice el elemento "fieldset" y
aplique una etiqueta mediante el elemento "legend". (2)

REVISIÓN EN DISTINTOS NAVEGADORES, RESOLUCIONES Y

DISPOSITIVOS

Se realizó navegación en el blogger con los siguientes navegadores de internetFirefox, Internet Explorer,
Chrome y no se dieron inconvenientes en su funcionamiento, compruebo ademas que no tengo
problemas para visualizar el blog en ninguno de estos navegadores y los resultados son satisfactorios en
los diversos navegadores.

Se realiza la validación para dispositivos móviles para ello utilizo diferentes emuladores (ver Mis
validadores) , utilizando TAW OK Basic es un validador de web móvil basado en las Buenas Prácticas
para Móvil 1.0 de W3C. Se dieron los siguientes resultados:

Comprueba que la página es usable cuando los elementos object y script no sean admitidos por el
dispositivo.

Intente trasladar los estilos en linea a hojas de estilo enlazadas.

101:3:<td valign="top" style="text-align:center" nowrap="nowrap"

bgcolor="#e8eefa">

Compruebe si las siguientes tablas pueden sustituirse por otras alternativas de

representación.

<table cellspacing="0" cellpadding="0" border="0" width="100%">

Prueba de visualización en el simulador para iphod el cual se puede acceder desde la

páginahttp://iphonetester.com , se encuentra que a pesar de ser afectada la interfaz gráfica la
funcionalidad no se ve afectada , la siguiente es una imagen de como se aprecia el administrador de
contenidos del blogger.
A continuación lo reviso en un navegador sólo texto como Lynx.

Como la página es muy extensa, para mejorar la navegación incluyo tres enlaces: "Ir al contenido", "Ir a
enlaces de interés" e "Ir al menú", que permiten saltar a determinados contenidos con agilidad.

También compruebo que el contenido es accesible con distintas resoluciones. Por último reviso la
impresión de las páginas. Estas se imprimen correctamente con Explorer, Opera y Chrome, sin embargo
no se imprime bien desde Firefox.

Me gustaría crear un CSS especial para la impresión, que permitiera además aprovechar mejor el
papel imprimiendo sólo el contenido del artículo, sin embargo Blogger no permite subir ficheros CSS, así
que apunto como tarea programada estudiar la creación de dicha CSS alojándola en otro servidor.

DÍA 8: Revisión de abreviaturas y acrónimos

El tema de las abreviaturas y acrónimos es un tanto peliagudo, más aun si no se tiene

claro qué es una abreviatura y qué es un acrónimo y encima se leen los ejemplos
erróneos que aparecen en las Técnicas de HTML para las Pautas de Accesibilidad del
Contenido Web 1.0 o en la especificación de HTML 4.01.

Para aclarar este tema no hay mejor referencia que el artículo de SIDAR "Abreviaturas
versus Acrónimos". En él, además de aclarar la diferencia entre abreviatura y acrónimo
y por tanto cuándo se debe utilizar el elemento "abbr" y cuando el elemento "acronym"
(2), se especifica que:
 • Las abreviaturas y los acrónimos deben marcarse con su etiqueta correspondiente al menos la
primera vez que se usan en el texto. La primera vez que se usan también debe expandirse su
significado en el propio texto. Por ejemplo, "La ONU (Organización de Naciones Unidas) ha
decidido...".
• Deben marcarse siempre las abreviaturas en las cabeceras de las tablas.
• Es una práctica recomendable recoger en una lista, en página aparte o en la misma, todas las
abreviaturas y acrónimos para que el lector pueda acudir a ella en caso de duda.

Por otro lado hay que añadir que las abreviaturas de uso común, recogidas en el
diccionario de la Real Academia de la Lengua, no requieren ser marcadas, puesto
que los lectores de pantalla deberían incluirlas (y suelen hacerlo) en sus diccionarios.

Como no estoy segura de lo rigurosa que he sido en la aplicación de estas normas,

decido añadirlas como buenas prácticas en la preparación de post futuros y como tarea
programada que me permita revisarlo en los artículos pasado.

Por último, Blogger no permite indicar acrónimos o abreviaturas en el título o en el

etiquetado de los artículos, puesto que pinta el elemento en vez de interpretarlo.

DÍA 9: Revisión de la navegación semántica

La plantilla no contiene ningún vínculo definido que permita la navegación semántica, tal y como
recomienda el punto de verificación 13.2 de las WCAG 1.0 (Web Content Accessibility Guidelines).

En Plantilla base XHTML explico en detalle cómo y para qué agregar esta información a las páginas.

Como se ve en la imagen, la barra de navegación semántica de Explorer tiene ahora los botones activos.
Me hubiera gustado también añadir los vínculos al "artículo anterior" y al "artículo siguiente"
pero no he encontrado en Blogger la etiqueta que permita añadir esta ruta automática a la
plantilla, ¿alguna idea?.

DÍA 10: Revisión de scripts

Un 6% de los navegadores con los que me visitan no son compatibles con javascript o
no lo tienen habilitado, por ello hoy he decidido desactivar los scripts (en las
preferencias del navegador) para revisar si se puede interactuar correctamente con el
blog.

Compruebo que la búsqueda en el blog funciona y que la agenda sigue siendo accesible.

Como se aprecia en la imagen, aparece un mensaje advirtiendo de que se puede

consultar la agenda en formato texto pulsando un enlace. La agenda es un "iframe" a
cuyo contenido no tengo acceso, por tanto no puedo modificar el mensaje que aparece.
Hubiera deseado mejorar la redacción del mismo y que el texto del enlace fuera
diferente a la ruta.

Al final he decidido incluir un enlace siempre visible (señalado en la imagen con una
flecha) a la versión texto de la agenda, de este modo, los usuarios que por ejemplo no
pueden visualizar los "iframes", o que a pesar de tener activo el javascript utilicen
tecnologías asistivas que le impidan acceder al contenido de la agenda, no tengan
problemas en consultarla.

Por otro lado, todos los artículos tenían al final una opción "escuchar este post". Este
enlace fallaba cuando los artículos eran demasiado extensos (lo cual es muy habitual en
mí) de modo que lo he cambiado por "escucha el texto seleccionado". Estas
funcionalidades las proporciona vozme.com mediante un "script" que hay que incluir en
la plantilla. Este script no tiene una alternativa accesible, de modo que no me ha
quedado más alternativa que advertir de esta circunstancia en el elemento "noscript".
Al final de cada artículo hay también una serie de iconos que permiten añadir el artículo
a Digg, Technorati, etc.

La única manera de incluir en sus enlaces la dirección dinámica del artículo fue
mediante javascript, de modo que añado un elemento "noscript" con dichas direcciones
para que sean accesibles sin el javascript activo.

Por último me doy cuenta de que no aparece el icono de las estadísticas, puesto que el
"script" que proporciona StatCounter pinta la imagen. Como las estadísticas son de
carácter privado y por tanto su ausencia no resta funcionalidad a la página, no le doy
mayor importancia. Tampoco aparece el tooltip de Coloriuris, pero como la información
de esa ventanita está disponible en la página a la que enlaza el icono, la ausencia de esta
ventana no resta accesibilidad a la página.

Tareas programadas para revisar el blog

Revisar los siguientes puntos en los artículos del blog:

• Revisar que no haya estilos definidos mediante los atributo "style" o "border" fruto de la
inserción de imágenes, textos en negrita, etc.
• Revisar que las imágenes tenga un atributo "alt" correcto y en su caso un atributo "longdesc"
adecuado acompañado de un enlace "D".
• Revisar que los cambios de idioma en el texto se especifican mediante el atributo "lang".
• Revisar que las abreviaturas y los acrónimos estén definidos (con la etiqueta correcta) al menos
la primera vez que se usan, y en este caso que se haya expandido también su significado en el
propio texto.
Estudiar la adecuación o no de crear CSS específicas para impresión, dispositivos móviles o TV alojadas
en otro servidor.

Buenas prácticas para crear artículos accesibles

• Escribir el artículo en modo "Redactar", pasando al modo "Edición de HTML" sólo para incluir
etiquetas o atributos no contemplados en el editor.
• Validar la sintaxis XHTML al terminar el nuevo artículo.
• Si se insertan imágenes eliminar los atributos "border" y "style" que incluye Blogger
• No utilizar los botones del editor de Blogger para poner el texto en negrita o itálica, sino incluir
las etiquetas adecuadas manualmente.
• Añadir a las imágenes un atributo "alt" adecuado y caso de ser necesario un atributo "longdesc"
más un enlace "D".
• Indicar los cambios de idioma en el texto mediante el atributo "lang".
• Etiquetar adecuadamente abreviaturas y acrónimos la primera que aparecen en el texto,
expandiendo también su significado en el propio texto.

Tareas para futuras revisiones

• Atajos de teclado
• Estructura interna de las páginas (encabezados, elementos bien utilizados, etc.)
• Medidas relativas
• Enlaces (enlaces rotos, nuevas ventanas, "title", orden de tabulación, revisar enlaces con el
mismo literal, colores de los enlaces, acceso mediante ratón, enlaces tipo "pulsar aquí,
comentamos por aquí", etc.)