Mi bitácora accesible

lunes, 4 de junio de 2012

Página principal

Bienvenidos a mi blog.
Este blog ha sido creado con la finalidad de aprender a realizar una bitácora accesible para todas las personas. Para ello, seguiré los pasos mencionados por Carlos Egea García (2007) en su manual "Diseño Web para todos 1" .He modificado el título del libro puesto que si pongo @, aquellas personas que utilicen un lector de pantalla, no lo leerán correctamente.
Los pasos que se seguirán para llevar a cabo esta bitácora serán los siguientes:
Espero que todos y todas aprendamos a realizarlo.

Lorena Díaz

martes, 17 de abril de 2012

Conclusiones finales de la asignatura

Para la realización de esta asignatura he creado una bitácora con los 21 pasos que se describen en el manual. Esta bitácora está recogida en la siguiente dirección web: http://accesibilidadatodos.blogspot.com.es/

He de señalar que para mí esta asignatura es la que está dando nombre al subprograma que se está estudiado porque es donde verdaderamente hemos aprendido la accesibilidad web y la inclusión digital.

Es una asignatura esencial y muy necesaria para conocer la accesibilidad web la cual yo consideraba - hasta antes de comenzar a estudiar - como la posibilidad de acceder a internet más que la posibilidad de poder navegar por la web sin limitaciones de contraste, tamaño, vínculos…

Destaca de esta asignatura su contenido práctico, pues el trabajo que hemos realizado es la mejor forma de conocer los impedimentos y limitaciones que supone acceder a diversos contenidos de la web para aquellas personas que tienen algún tipo de discapacidad. La realización de los 21 pasos de la bitácora es una manera de introducirnos en este campo tan amplio donde aún queda mucho por hacer. Si la realización de esta asignatura hubiera sido de contenido teórico, creo que no habríamos entendido ni el 50% de lo que se logra con la realización de la bitácora accesible.

Por tanto, con esta asignatura he comprendido la importancia de realizar webs donde se tenga en cuenta que será vista por millones de personas con características y limitaciones propias y por ello, se ha de realizar la web teniendo presente que pueda ser vista por todas ellas, es decir, la accesibilidad web para todos.

Por supuesto, he de señalar la importancia que ha tenido durante toda la asignatura el trabajo colaborativo en los foros entre todos los alumnos de la asignatura, pues gracias a las aportaciones de todos se ha conseguido adquirir mayores contenidos, solucionar dudas, sentirse comprendido…

En definitiva, considero esta asignatura como una de las más interesantes del Máster quizás por su contenido práctico, pues siempre se ha dicho que cuando uno realiza algo por sí mismo adquiere los contenidos de una forma más eficaz y duradera, denominándose esto en la enseñanza como aprendizaje significativo.

Paso 21: Verificar la accesibilidad

El último paso para comprobar si nuestra bitácora es accesible será verificarlo a través de cinco programas:

Habrá que verificar el código fuente de nuestra bitácora a través de la página http://validator.w3.org.
Habrá que verificar el código de nuestra hoja de estilo a través de http://jigsaw.w3.org/css-validator/.
Realizar un análisis automático de los criterios de accesibilidad promovidos por W3C en sus WCAG 1.0 a través de la web http://www.tawdis.net/ .
Realizaremos un contraste de color de nuestra bitácora a través de http://www.nils.org.au/ais/web/resources/contrast_analyser/versions/es/
Hemos de desactivar la hoja de estilo de nuestra bitácora. Para ello descargaremos la barra de herramienta AIS en la web http://www.technosite.es/software.asp.

Una vez determinado los cinco puntos a seguir, procedo a llevarlo a cabo en mi bitácora, los resultados que observa son:

El análisis del código fuente me devuelve 230 errores, los cuales son procedentes del código propio de blogger y generalmente referidos al atributo "&" y al atributo "b" como:

Line 8, Column 23: character "&" is the first character of a delimiter but occurred as data

Line 7, Column 460: general entity "b.chrome.csi" not defined and no default entity

Otros señalan que el elemento <group> y la "variable" no está definido como:

Line 57, Column 54: element "Group" undefined

<Group description="Blog Title" selector=".header h1">

Line 70,Column 90: element "Variable" undefined

…ame="tabs.text.color" description="Text Color" type="color"

default="#000000"/>

Otros señalan error en la entidad "target" como:

 Line 1701,Column 154:reference to entity "target" for which no system

identifier could be generated
…1641&postID=4872997322554504148&target=email' target='_blank'

title='Enviar po…

Por último observo que me devuelve estos tres errores:

   
Line 1945, Column 67:document type does not allow element "a" here
<a accesskey='1' href='http://accesibilidadatodos.blogspot.com.es'></a>

Line 1946,Column 36:document type does not allow element

"a" here
<a accesskey='2' href='#saltabarra'></a>

    
Line 1947,Column 52:document type does not allow element "a" here
<a accesskey='9' href='mailto:lorecari@hotmail.com'></a>

Sin embargo, accedo a mi hoja de estilo para comprobar lo que me está diciendo

y observo que yo tengo escrito lo siguiente:

<a accesskey='1' href='http://accesibilidadatodos.blogspot.com.es'/>

<a accesskey='2' href='#saltabarra'/>

<a accesskey='9' href='mailto:lorecari@hotmail.com'/>

He colocado detrás de cada "accesskey" </a> pero me devuelve error al guardarlo.

El análisis de la hoja de estilo me devuelve 92 errores, entre ellos uno referido a lo introducido para insertar la linea horizontal lo cual he solucionado cambiándolo de lugar, pues no se encontraba en el lugar correcto.

El resto de errores son referidos a que hay propiedades que no existen, pero todas ellas son problema de la hoja de estilo de blogger, y no de cambios introducidos por mi. Algunos son:

La propiedad -moz-border-radius-topright no existe : 5px

La propiedad -goog-ms-border-top-right-radius no existe : 5px

La propiedad -webkit-box-shadow no existe : 0 4px 16px rgba(0,0,0,0.2 )
...

He realizado el análisis automático de los criterios de accesibilidad para todas las entradas de mi blog. Algunas de las advertencias que me hacía eran:

Que me asegure de que este documento puede ser leido sin necesidad de hoja de estilo.
También me señala que la lista de los archivos de mi blog no podrán ser vistos si no se tiene instalado JavaScript.
Otra de las advertencias me ha llevado a cambiar el subrallado de las palabras "problemas surgidos" pues señalaba que era desaconsejable en el HTML 4.01 por lo cual he procedio a eliminarlo y ponerlo de la siguiente forma: "problemas surgidos".

El contraste de color me devuelve siempre un valor positivo, indicándome que los colores elegidos son correctos.

Utilizando la barra de herramienta AIS he desactivado mi hoja de estilo y he comprobado que el contenido no desaparece.

Por último, he comprobado mediante la barra de herramienta AIS que al reducir mi bitácora a un tamaño de 800x600 se vea todo el contenido.

Paso 20: Encabezados correctos

Dentro de cada página de una bitácora podemos encontrar 4 niveles que facilitarán la navegación para los lectores de pantalla.
Estos niveles serán representados dentro del lenguaje HTML con las etiquetas: <h1>, <h2>, <h3> y <h4>.

Para conocer la manera en la cual blogger ha usado estas etiquetas he accedido a su hoja de estilo y esto es lo que he obtenido:

Blogger utiliza la etiqueta<h1> para su cabecera, como vemos en lo siguiente:

Header h1 {
font: $(header.font);
color: $(header.text.color);}

Blogger utiliza la etiqueta<h2> para el encabezado de los post:

Headings
----------------------------------------------- */
h2 {
font: $(widget.title.font);
color: $(widget.title.text.color);}

Blogger utiliza la etiqueta<h3> para el título de los post:

h3.post-title a {
font: $(post.title.font);
color: $(post.title.text.color);
text-decoration: none;}

Blogger utiliza la etiqueta <h4> para los comentarios:

Problemas surgidos

Ninguno

Paso 19: Tamaños de fuente relativos

Algunos diseñadores determinan el tamaño absoluto de la fuente con unos determinados pixeles o puntos. Esto impedirá la correcta visualización de los contenidos para aquellas personas que aumenten el tamaño, pues el navegador no lo aumentará ya que está predefinido por el autor.
Para evitar esto, hemos de definir los valores con unidades "em". Blogger utiliza porcentajes y diferentes palabras clave como: xx-small, x-small, small, medium, large, x-large y xx-large.

Para comprobar que Blogger utiliza estos códigos accedo a la edición HTML de mi plantilla y encuentro lo siguiente:

<Variable name="body.font" description="Font" type="font"

default="normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 20px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

</Group>

</Group>

<Variable name="header.font" description="Font" type="font"

default="normal normal 60px Times, 'Times New Roman', FreeSerif, serif" value="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

</Group>

<Variable name="description.text.color" description="Description Color" type="color"

default="#666666" value="#666666"/>

</Group>

<Variable name="tabs.font" description="Font" type="font"

default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

</Group>

</Group>

<Variable name="post.title.font" description="Font" type="font"

default="normal normal 24px Times, Times New Roman, serif" value="normal normal 30px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

</Group>

<Variable name="widget.title.font" description="Title Font" type="font"

default="normal bold 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 20px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

</Group>

</Group>

<Variable name="body.background" description="Body Background" type="background"

color="$(body.background.color)" default="$(color) none repeat-x scroll top left" value="$(color) none repeat-x scroll top left"/>

<Variable name="body.background.gradient" description="Body Gradient Cap" type="url"

default="none" value="url(http://themes.googleusercontent.com/image?id=0BwVBOzw_-hbMMDZjM2Q4YjctMTY2OC00ZGU2LWJjZDYtODVjOGRiOThlMGQ3)"/>

<Variable name="body.background.imageBorder" description="Body Image Border" type="url"

default="none" value="none"/>

<Variable name="body.background.imageBorder.position.left" description="Body Image Border Left" type="length"

default="0" value="0"/>

<Variable name="body.background.imageBorder.position.right" description="Body Image Border Right" type="length"

default="0" value="0"/>

Dentro de este código podemos observar varias fuentes determinadas por pixeles. Por tanto, procedo a borrar todos los números con pixeles y quedo unicamente "normal normal".
Mi código quedaría entonces asi:

<Variable name="keycolor" description="Main Color" type="color" default="#000000" value="#3d85c6"/>

   <Group description="Body Text" selector="body">
     <Variable name="body.font" description="Font" type="font"
         default="normal normal Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="body.text.color" description="Text Color" type="color" default="#666666" value="#000000"/>
   </Group>

   <Group description="Background" selector=".body-fauxcolumns-outer">
     <Variable name="body.background.color" description="Outer Background" type="color" default="#fb5e53" value="#3d85c6"/>
     <Variable name="content.background.color" description="Main Background" type="color" default="#ffffff" value="#ffffff"/>
     <Variable name="body.border.color" description="Border Color" type="color" default="#fb5e53" value="#bbbbff"/>
   </Group>

    <Group description="Links" selector=".main-inner">
     <Variable name="link.color" description="Link Color" type="color" default="#2198a6" value="#073763"/>
     <Variable name="link.visited.color" description="Visited Color" type="color" default="#4d469c" value="#073763"/>
     <Variable name="link.hover.color" description="Hover Color" type="color" default="$(link.color)" value="#073763"/>
   </Group>

   <Group description="Blog Title" selector=".header h1">
     <Variable name="header.font" description="Font" type="font"
         default="normal normal Times, 'Times New Roman', FreeSerif, serif" value="normal normal Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="header.text.color" description="Text Color" type="color" default="#ff8b8b" value="#701967"/>
   </Group>

   <Group description="Blog Description" selector=".header .description">
     <Variable name="description.text.color" description="Description Color" type="color"
         default="#666666" value="#666666"/>
   </Group>

   <Group description="Tabs Text" selector=".tabs-inner .widget li a">
     <Variable name="tabs.font" description="Font" type="font"
         default="normal normal Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="#ffffff" value="#ffffff"/>
     <Variable name="tabs.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#666666"/>
   </Group>

   <Group description="Tabs Background" selector=".tabs-outer .PageList">
     <Variable name="tabs.selected.background.color" description="Selected Color" type="color" default="#ffa183" value="#4eabff"/>
     <Variable name="tabs.background.color" description="Background Color" type="color" default="#ffdfc7" value="#c2d8fa"/>
     <Variable name="tabs.border.bevel.color" description="Bevel Color" type="color" default="#fb5e53" value="#c2d8fa"/>
   </Group>

   <Group description="Post Title" selector="h3.post-title, h4, h3.post-title a">
     <Variable name="post.title.font" description="Font" type="font"
         default="normal normal Times, Times New Roman, serif" value="normal normal Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="post.title.text.color" description="Text Color" type="color" default="#2198a6" value="#251a9c"/>
   </Group>

   <Group description="Gadget Title" selector="h2">
     <Variable name="widget.title.font" description="Title Font" type="font"
        default="normal bold Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="widget.title.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#000000"/>
     <Variable name="widget.title.border.bevel.color" description="Bevel Color" type="color" default="#dbdbdb" value="#ffffff"/>
   </Group>

   <Group description="Accents" selector=".main-inner .widget">
     <Variable name="widget.alternate.text.color" description="Alternate Color" type="color" default="#cccccc" value="#666666"/>
     <Variable name="widget.border.bevel.color" description="Bevel Color" type="color" default="#dbdbdb" value="#dbdbdb"/>
   </Group>

   <Variable name="body.background" description="Body Background" type="background"
       color="$(body.background.color)" default="$(color) none repeat-x scroll top left" value="$(color) none repeat-x scroll top left"/>
   <Variable name="body.background.gradient" description="Body Gradient Cap" type="url"
       default="none" value="url(http://themes.googleusercontent.com/image?id=0BwVBOzw_-hbMMDZjM2Q4YjctMTY2OC00ZGU2LWJjZDYtODVjOGRiOThlMGQ3)"/>
   <Variable name="body.background.imageBorder" description="Body Image Border" type="url"
       default="none" value="none"/>
   <Variable name="body.background.imageBorder.position.left" description="Body Image Border Left" type="length"
       default="0" value="0"/>
   <Variable name="body.background.imageBorder.position.right" description="Body Image Border Right" type="length"
       default="0" value="0"/>
   <Variable name="header.background.gradient" description="Header Background Gradient" type="url" default="none" value="none"/>
   <Variable name="content.background.gradient" description="Content Gradient" type="url" default="none" value="url(http://www.blogblog.com/1kt/ethereal/white-fade.png)"/>

   <Variable name="link.decoration" description="Link Decoration" type="string" default="none" value="none"/>
   <Variable name="link.visited.decoration" description="Link Visited Decoration" type="string" default="$(link.decoration)" value="$(link.decoration)"/>
   <Variable name="link.hover.decoration" description="Link Hover Decoration" type="string" default="underline" value="underline"/>

   <Variable name="widget.padding.top" description="Widget Padding Top" type="length" default="15px" value="15px"/>

   <Variable name="date.space" description="Date Space" type="length" default="15px" value="15px"/>

   <Variable name="post.first.padding.top" description="First Post Padding Top" type="length" default="0" value="0"/>

   <Variable name="mobile.background.overlay" description="Mobile Background Overlay" type="string" default="" value=""/>
   <Variable name="mobile.background.size" description="Mobile Background Size" type="string" default="auto" value="auto"/>

   <Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left" value="left"/>
   <Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right" value="right"/>
*/

El cambio que observo al modificar esto es que la letra a disminuido su tamaño adaptándose a la definida por mi pantalla.

Problemas surgidos

Ninguno

Paso 18: Líneas horizontales

Las líneas horizontales que aparecen para delimitar los "post" pueden ser sosas y aburridas. Estas líneas aparecen con la etiqueta <hr>. Por ello, vamos a cambiarla por una imagen.
Lo primero que hago es elegir una imagen y subirla a este post, para así obterner la url de la imagen.

Una vez he subido esta imagen, colocaré lo siguiente dentro de la hoja de estilo entre <head> y </head>:

div.hr {display:none}

/*/*/a{}

div.hr{

display: block;

height: 33 px;

background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4m-c9-pfUuxpvmBxUROgFisMMHnb2eNYNQl6ZS6-LtQmxLTS4JZP4els-klqXU8AHxSGLBY40D-Y0yhFhrdfDZZLq80ZotlSwyuLbyRNgzFuOIdkEC8hGIkeqCvi1w5fU2lwQT8gM8Jw/s1600/capture-20120513-112151.jpg");

background-repeat: no-repeat;

background-position: center center;

margin: 1em 0 1em 0;

}

hr {display: none}

/* */

El siguiente paso para lograr que aparezca la línea en la parte inferior no he logrado realizarlo. Por más que he intentado no consigo dar con ello.

Problemas surgidos

No he logrado dar con dicho paso.

Paso 17: Mapa de imagen accesibles

Los mapas de imágenes es un nuevo planteamiento de navegación que incorpora una serie de enlaces dentro de una misma imagen.

Hemos de crear mapas del lado de los usuarios mediante la atributo "usemap".
Estos mapas de imágenes se definen con la etiqueta <map> que determinará cada área de la imagen con un enlace establecido.
La etiqueta <area> contendrá los siguientes atributos:

Alt: para mostrar el equivalente de la imagen.
Shape: indica el tipo de área seleccionada que puede ser de tres tipos:

- "circle"--- crea un área circular.

- "poly" --- crea un área poligonal.

Coords: serán las coordenadas que definiran el área.
Href: para indicar el destino del enlace correspondiente al área.

A modo de ejemplo, he creado el siguiente mapa donde cada círculo nos llevará a una sección distinta del blog.
El círculo rojo, nos llevará a la página principal, el cículo amarillo, a mis datos personales y el círculo azul al primer post de este blog.

Imagen con tres círculos que enlazan a tres apartados de este blog

El código HTML de este mápa de imagen es el siguiente:

<area alt="Ir a la página principal" coords="47,17, 68,17, 96,35, 105,62, 104,89, 94,111, 67,131, 45,126, 26,109, 15,82, 17,56, 26,34, 42,21, 47,17" href="http://accesibilidadatodos.blogspot.com.es/" shape="POLY" ></area>

<area alt="Ir a mis datos personales" coords="131,97, 111,120, 102,156, 115,188, 134,206, 168,203, 187,181, 197,148, 194,127, 179,107, 161,96, 131,97" href="http://www.blogger.com/profile/08720898324792798156" shape="POLY"></area>

<area alt="Ir al primer post del blog" coords="218,179, 199,206, 195,244, 209,270, 235,287, 266,275, 284,251, 285,221, 273,191, 248,173, 218,179" href="http://accesibilidadatodos.blogspot.com.es/2012/04/paso-1-para-quien-es-la-accesibilidad.html" shape="POLY" ></area>

</map>

Como se puede ver, se ha incluido todos los atributos definidos anteriormente, y además he insertado el atributo <alt> y <title> también para la imagen en general.

Problemas surgidos:

La razón por la cual no lograba que dicho mapa me apareciese era porque tan solo insertaba el código que me proporcionaba el programa Image Mapper. Lo que tenía que hacer era subir dicha imagen desde el editor de artículos de blogger para copiar la "src" de la imagen en lugar de la que me ofrecía el programa Image Mapper.Tan solo cambiando esto, ya tenía mi mapa de imagen insertado y podia borrar la imagen subida desde el editor de blogger.