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.