Paso 21. Verificar la accesibilidad

Primer control vía "El Servicio de Validación de marcas del Consorcio W3C"

Como primer paso para realziar la etapa de control de accesibilidad se usó el servicio en línea de verificación de marcas provisto por el Consorcio W3C sobre la página del blog correspondiente a la entrada titulada "Paso 18. Líneas horizontales" (se usó una entrada simple, de poco contenido, para determinar que errores son propios y cuales heredados por el diseño provisto por los técnicos de Blogger). Como resultado del test se obtuvo un reporte en que indicó que existen 31 errores y 19 avisos.

Ante la sorpresa de obtener tantos errores me dispuse a chequear el código fuente de la entrada, localizando los errores sugeridos (a partir de encontrar las líneas) y analizando la marca HTML.

A los efectos de facilitar mi trabajo ordené los errores por tipo. A continuación listo los grupos de errores obtenidos y mi comentario asociado a cada uno.

Grupo 1 de errores: "reference to external entity in attribute value"

Hace referencia a la plantilla base provista por el servicio Blogger, no tiene que ver con el contenido agregado por mi.

Grupo 2 de errores: "general entity X not defined and no default entity"

Hace referencia a la plantilla base provista por el servicio Blogger, no tiene que ver con el contenido agregado por mi. En particular tiene que ver con porciones de códigos realizados en Javascript.

Grupo 3 de errores: "end tag for X omitted, but OMITTAG NO was specified"

Hace referencia a la plantilla base provista por el servicio Blogger, no tiene que ver con el contenido agregado por mi.

Grupo 4 de errores: " there is no attribute X"

Hace referencia a la plantilla base provista por el servicio Blogger, no tiene que ver con el contenido agregado por mi.

Grupo 5 de errores: "reference not terminated by REFC delimiter"

Hace referencia a la plantilla base provista por el servicio Blogger, no tiene que ver con el contenido agregado por mi

Grupo 6 de errores: "end tag for X which is not finished"

Hace referencia a la plantilla base provista por el servicio Blogger, no tiene que ver con el contenido agregado por mi

Grupo 7 de errores: "cannot generate system identifier for general entity X"

Hace referencia a la plantilla base provista por el servicio Blogger, no tiene que ver con el contenido agregado por mi

Grupo 8 de errores: "element X undefined"

Hace referencia a la plantilla base provista por el servicio Blogger, no tiene que ver con el contenido agregado por mi

Grupo 9 de errores: "

document type does not allow element X here; missing one of Y start-tag

"

Hace referencia a la plantilla base provista por el servicio Blogger, no tiene que ver con el contenido agregado por mi.

Grupo 10 de errores: "

reference to entity X for which no system identifier could be generated"

Hace referencia a la plantilla base provista por el servicio Blogger, no tiene que ver con el contenido agregado por mi

Grupo 11 de errores: "

character X is the first character of a delimiter but occurred as data"

Hace referencia a la plantilla base provista por el servicio Blogger, no tiene que ver con el contenido agregado por mi

Se volvió a correr el mencionado test sobre la dirección del blog. Se chequearon los resultados en búsqueda de erres relacionados solamente con el contenido aportado.

Error propio 1: "required attribute X not specified"
Line 655, column 725: required attribute "id" not specified.
Se lo corrigió.

Error propio 2: "character data is not allowed here"
Line 1261, column 1822: character data is not allowed here
Se lo corrigió.

Se da por superada esta etapa y se continúa con el siguiente paso de verificación.


Segundo control vía "El Servicio de Validación CSS del Consorcio W3C"

En el segundo paso para realizar la etapa de control de accesibilidad se usó el servicio en línea de verificación CSS provisto por el Consorcio W3C sobre la página principal del blog. Como resultado del test se obtuvo un reporte en que indicó que existe 1 error.

23 #leftcontent La propiedad _margin-top no existe : 30px 30px

Se chequeó el archivo CSS y efectivamente esa entrada no está definida. Es un problema derivado del diseño de plantilla por parte del servicio Blogger.


Tercer control vía "TAW (Test de Accesibilidad Web)"

Como primer paso para realziar la etapa de control de accesibilidad se usó el servicio en línea de verificación CSS provisto por el Consorcio W3C sobre la página principal del blog. El resultado del análisis fué: Prioridad 1: automático 1 y manual 179 y prioridad 2: automático 58 y manual 100.

En la prioridad 1 de los 179 problemas 158 corresponden al mensaje "Asegúrese de que este documento puede ser leído sin necesidad de utilizar hojas de estilo".

Uno sobre "No existe contenido alternativo en el cuerpo del elemento iframe." el cual pertenece al diseño de plantilla de Blogger.

Cuatro sobre "Este elemento podría estar generando contenido dinámico" y pertenecen al diseño de plantilla de Blogger.

Seis sobre "Compruebe que proporciona textos alternativos válidos para los elementos "pre" y "xmp", utilizados para crear ASCII art." pertenecen al diseño de plantilla de Blogger.

Uno "Compruebe que de entre las siguientes tablas, en aquellas que sean de datos y tengan varios niveles lógicos de encabezado, estén marcados todos los encabezados" sobre la tabla insertada. Se lo está revisando para solucionarlo.

Cuatro sobre "Compruebe que los contenidos dinámicos son accesibles o proporcione una alternativa." pertenecen al diseño de plantilla de Blogger.

Cuatro sobre "Este elemento puede no ser accesible para todos los usuarios. Asegúrese de que existe una interfaz accesible para este objeto." pertenecen al diseño de plantilla de Blogger.


Sobre los avisos o warning el test indicó que la mayoría (cincuenta y ocho) son del tipo "Este elemento utiliza unidades de medida absolutas en lugar de unidades de medida relativas" se verificó que pertenecen al diseño de plantilla de Blogger.

El test de visualización del sitio, sin cargar la página de estilo, no se pudo realizar debido a que el servicio se encuentra fuera de línea.

Utilizando el software Explorer de Microsoft pude cargar la página sin la hoja de estilo asociada. Esto me permitió verificar si podía ser leida y entendida sin formato especial. Llego a la conclusión que así también es comprendida y puede ser navegada.

Paso 20. Encabezados

Sobre los encabezados recurrí a la hoja de estilo del blog y verifiqué de que manera el servicio Blogger los define.

Por ejemplo el máximo encabezado H1 en el contexto del header Blooger en la plantilla TicTacBlue (en la que uso yo no está definido explicitamente) se define así:

#blog-header h1 {
margin: 0;
padding: 45px 60px 50px 160px;
font-size: 200%;
color: #fff;
text-shadow: #4F73B6 2px 2px 2px;
background: url(http://www.blogblog.com/tictac_blue/top_h1_blue.gif) no-repeat bottom left;
}

Nótese el uso del porcentaje en el tamaño de la fuente.

El siguiente estilo es para h2:

h2.date-header {
margin-top: 0;
padding-left: 14px;
font-size: 90%;
color: #999999;
background: url(http://www.blogblog.com/tictac_blue/date_icon_blue.gif) no-repeat 0 50%;
}

Paso 19. Acomodando los tamaños de las fuentes

Se toma nota de las técnicas explicadas pro el autor en referencia a como Blogger trata el tema de los tamaños de fuentes en los blogs. Desde lo personal coincido con el autor que el blog visto a diferentes tamaños de resolución mantiene una buena proporción de las letras frente al resto del contenido, permitiendo así ser más legible.
He revisado la plantilla y el código fuente y he verificado que Blogger maneja porcentajes en la definiciòn de modelos de letras, como ser:

.post-title {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:#c60;
}

Paso 18. Lineas horizontales

He modificado la plantilla del blog para reemplazar la barra separadora original por una imagen siguiendo los pasos sugeridos.

parte a

---

parte b

---

parte c

Paso 17. Mapas de imágenes

Los mapas de imágenes son una especia de menúes gráficos que tienen asociados eventos a zonas determinadas de una imagen. Es un sistema visualmente interesante para hacer atractiva una web, pero generalmente ni los navegadores que tengan desactivadas las imágenes ni los motores de búsqueda pueden seguirlos.

Como ejemplo incluí el siguiente mapa de imagen a la presente entrada del blog, el cual fue adaptado para lograr accesibilidad.





Se agregó el parámetro "title" para una mayor expresión acerca de las acciones de navegación propuestas.

Paso 16. Variaciones sobre "alt"

Se toma debida nota de dos cosas: a) siempre el atributo "alt" debe estar asociado a una imagen y b) si es una imagen decorativa el contenido debe ser vacío y estar entre comillas "".

Igualmente he verificado insertar imágenes en artículos y he obtenido el siguiente resultado (el cual tuve que editar a mano para insertar el contenidos de ALT):

Paso 15. Semántica asociada a imágenes

En esta entrada se tratará el tema de la metainformación agregada a imágenes para que las personas con discapacidad visual tengan textos asociados a las mismas para una efectiva e integral comprensión del contenido de una página web.

Como ejemplos prácticos he agregado a esta entrada las siguientes imágenes:

Paso 14. Las listas

El lenguaje de marcas HTML provee recursos de marcado para establecer listas en el contenido de un documento. Hay dos tipos de listas básicas: las numeradas u ordenadas (ol) y las sin numerar o aleatoria (ul), tienen sus propias etiquetas para marcarlas.

La propuesta docente es sustituir los recursos visuales que se asocian a cada ítem por defecto con algo más atractivo. Siguiendo las indicaciones del docente se chequeó la plantilla y no se encontró la referencia a un objeto gráfico asociado:

Se hizo una lista de prueba con referencia a la plantilla original modificada:

• Principal


• Buscar en Google

Se cambió el objeto gráfico y se probó nuevamente :

• Principal


• Buscar en Google

Paso 13. Construyendo tablas

Se leyò atentamente las indicaciones técnicas del paso 13 y luego se diseño una tabla de ejemplo. Al visualizarla no se veían los separadores. Fuí a la plantilla CSS revisé el código y verifiqué que no había referencia alguna a tablas. Paso siguiente buqué un ejemplo de código CSS para tablas y lo inserté en la plantilla. Para seleccionar los colores de la tabla tuve en cuenta que exista contraste y que estén en la paleta del diseño. El siguiente es el resultado.

Distribución de ventas por sucursal

Sucursal	Ventas ($)	Incremento en %
Aranduzar Hermanos S.A.
Luján	1354,66	22.4
Pilar	276.44	31.3

Nota. He agregado el atributo "abbr" a los títulos de las columnas y no veo el tooltip pertinente. Pero agregando title el cartel de mayor información aparece.

Paso 12. Acrónimos

Se corrigieron acrónimos en entradas existentes. El servicio no me tomò la etiqueta acronym pero si abbr.

Paso 11. Ventanas emergentes

En esta etapa de la construcción de un blog accesible me dedique a chequear que el servicio Blogger no haya insertado ventanas emergentes en algún enlace. Para lo cual edité el código fuente y busqué el término "blank" el resultado fue no satisfactorio dado que hallé una ocurrencia. No la pude modificar dado que no aparece en la plantilla.

Paso 10. Teclas de acceso rápido

Se editó la plantilla y se incluyó la opción de atajo para ALT+1 (accesskey="1" ) para enviar al navegante a la página principal cuando está en una subpágina del blog.

Luego se chequeó por si hay opción de envío de correo en el modelo armado hasta el momento y no se encontró. Por lo tanto no se pudo insertar otro accesskey momentaneamente.

Paso 9. Control de enlaces

En primer lugar se ha verificado en las entradas de este blog si los vínculos insertados están correctos de acuerdo a las sugerencias de la página 158 del libro.

En una entrada corrijo

Como veo una diferencia con lo presentado en el libro recurro al Consorcio W3C y me dice que en HTML versión 5 este es el nuevo formato de la marca DOCTYPE (ver documento)

Por

Como veo una diferencia con lo presentado en el libro recurro al Consorcio W3C y me dice que en HTML versión 5 este es el nuevo formato de la marca DOCTYPE (ver documento Consorcio W3C)

Como se sugiere a continuación he chequeado como Blogger ha construido los enlaces insertados a las entradas de mi blog y en ninguno se ha insertado automáticamente el parámetro "title" a una etiqueta "a". Edito las entradas en modo no visual y modifico el código a mano insertanto la opción "title". Pruebo y ahora puedo ver lo elementos tiptools asociados a los enlaces cuando paso el mouse por sobre ellos.

También se corrigen en la plantilla los enlaces de los sitios recomendados, insertando contenidos para los tiptools correspondientes.

Paso 8. Trabajando con enlaces reales.

Se revisó el uso de vínculos en Javascript por parte de Blogger. Se buscaron pseudovínculos que puedan afectar la navegación de algunas personas que deseen anular la ejecución scripts de Javascripts. No se encontraton estos elementos en el código fuente de la página principal del blog.

Paso 7. Trabajando con colores

Es todo un mundo nuevo para mi la problemática de aquellas personas que tienen algún transtorno no que les permite ver los mismos colores que la mayoría de la población o en casos particular distinguir colores distintos.

Atendiendo a las recomendaciones de la bibliografía chequeé en mi hoja de estilo como quedaron definidos los enlaces. Hallé la siguiente sección "link" en la definición de la hoja de estilo CSS de mi blog:

a {
color:#3333FF; /* el típico color azul de los vínculos, pero podemos usar cualquier otro */
text-decoration:underline; /* para que aparezca
subrayado */
font-weight:bold; /* para que aparezca en negrita */
}

a:link {
color:#58a;
text-decoration:none;
}
a:visited {
color:#969;
text-decoration:none;
}
a:hover {
color:#c60;
text-decoration:underline;
}
a img {
border-width:0;
}

Chequee los códigos de color con el programa de edición Photoshop y me parecieron correctos para cada situación a denotar.

Hice la prueba de análisis de contrastes de color Vischeck y el resultado de mi blog fue satisfactorio dado que he elegido colores azules, celestes y grises en mi interface. Ellos casi no varían en personas con la problemas analizados por la aplicación anterior.

Paso 6. Seleccionando una plantilla

Según recomendaciones que apuntan a facilitar la organización y lectura del material he decidido hacer las siguientes modificaciones en la estructura de mi blog:

• Se seleccionó una plantilla que sitúa a la derecha el menú de navegación.
• Se chequeó en el código fuente que la nueva plantilla no contenga tablas.

Paso 5. Ayudas adicionales a navegación

Se incluyó etiqueta "link" en la sección header.

Paso 4. Sobre títulos de páginas

Se toma debida nota de lo apuntado como sugerencia.

Paso 3. Toda una cuestión el hablar el mismo idioma

Arranco a trabajar con el paso 3, el cual consiste en versificar en el código HTML del blog que el idioma configurado sea el español. Esto es de suma importancia debido a que procesadores automáticos de contenidos (por ejemplo lectores parlantes) pueden llegar funcionar mal si este parámetros está definido incorrectamente.

Accedo al "código fuente" de la página de inicio del blog y verifico que la estructura de definición de idioma no está como sugiere el libro del curso, esto puede deberse a que el material fue escrito en el año 2007.

Accedo a los foros de consultas del curso y encuentro una respuesta a este tema, es como lo había imaginado, ha evolucionado la versión de lenguaje HTML y tal parámetro se ajusta de otra forma.

Como opción, en el foro proponen configurar mi blog para que trabaje con una versión anterior de HTML y así pueda practicar sobre este aspecto. realizo los pasos necesarios para recuperar una plantilla que corresponda a una versión anterior de HTML. Pruebo ver el blog y sopresa! el aspecto visual cambió significativamente. Míro el código fuente y también el DOCTYPE y la definición de idioma, el cual ahora aparece y está seteado por mi en español. Chequeo este código con la página del profesor Egea y es el mismo.

Antes de dar por finalizado este paso voy a hacer una pequeña prueba de insertar un texto en inglés y asociarle una marca de idioma:

Por que como alguna vez dijeron Los Beatles todos

We all live in yellow submarine

y no veo a nadie capaz de argumentar lo contrario.

Grabo, chequeo el código fuente de la entrada y confirmo que Blogger me ha almacenado el parámetro de cambio de idioma junto a la marca "blockquote".

Empezando a caminar por los senderos de la accesibilidad

Luego de leer los pasos 1 y 2 de la tercera sección del libro "Diseño Web para Tod@s I" del profesor Carlos Egea me dispuse a poner en práctica algunas recomendaciones sobre este blog.

De la lectura del paso 1 tome una mayor conciencia acerca de cuales son los distintos grupos de personas que tengan problemas de acceso a contenidos si una web no tiene en cuenta cuestiones elementales de diseño. Digo "distintos grupos" por que tengo la percepción que muchas veces se asocia "accesibilidad" con "disminución visual" solamente o más grave aún con "ceguera" solo.

Ya sobre el paso 2, accediendo al "código fuente de la página", compruebo que esta nueva versión del servicio de Blogger inserta en la cabecera el siguiente formato DOCTYPE "(!DOCTYPE html)"1. Como veo una diferencia con lo presentado en el libro recurro al Consorcio W3C y me dice que en HTML versión 5 este es el nuevo formato de la marca DOCTYPE (ver documento Consorcio W3C). Para mayor información consulté el documento de especificación de la norma.



1 A los efectos de reemplazar a los símbolos de menor y mayor en este blog usaré paréntesis.

Presentándome

Hola

Mi nombre es Fernando Bordignon y soy alumno de la Maestría en Tecnologías Integradas y Sociedad del Conocimiento de la UNED. Este espacio digital, parte del curso Diseño para Tod@s", tiene por intención ser un laboratorio personal donde haga una puesta en práctica de conceptos de accesibilidad web.

Saludos y a sus órdenes por cualquier consulta o sugerencia.

Fernando Bordignon