Mi bitácora accesible: abril 2012

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.

Paso 16: Atributo «alt» vacío

Cuando queramos usar una imagen simplemente de manera decorativa, hemos de utilizar el atributo <alt> vacío, para no alterar la lectura que realizan los lectores de pantalla.
Esto se hace puesto que la imagen que estamos incluyendo no es relevante para el contenido. Para lograrlo, hemos de incluir <alt="">.
A modo de ejemplo utilizaré la imagen de la entrada anterior:

El código de esta imagen es el siguiente:
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAJtlyVD2fXv2W-EukvXo9zurUPGQKCor6DnEKqZeNMf89Sp9AnmnloKprotNvQTTatXJyBisJ2LmG1649aP6Du1R_EPwMjQ45BcUlaSsrWCxc0I_9bC-RZeXu-bD0Xkc5FTOCYrWmVks/s1600/lengua_signos.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAJtlyVD2fXv2W-EukvXo9zurUPGQKCor6DnEKqZeNMf89Sp9AnmnloKprotNvQTTatXJyBisJ2LmG1649aP6Du1R_EPwMjQ45BcUlaSsrWCxc0I_9bC-RZeXu-bD0Xkc5FTOCYrWmVks/s1600/lengua_signos.jpg" /></a></div>

Accedo a la edición de entrada HTML y modifico el código por el siguiente:
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAJtlyVD2fXv2W-EukvXo9zurUPGQKCor6DnEKqZeNMf89Sp9AnmnloKprotNvQTTatXJyBisJ2LmG1649aP6Du1R_EPwMjQ45BcUlaSsrWCxc0I_9bC-RZeXu-bD0Xkc5FTOCYrWmVks/s1600/lengua_signos.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAJtlyVD2fXv2W-EukvXo9zurUPGQKCor6DnEKqZeNMf89Sp9AnmnloKprotNvQTTatXJyBisJ2LmG1649aP6Du1R_EPwMjQ45BcUlaSsrWCxc0I_9bC-RZeXu-bD0Xkc5FTOCYrWmVks/s1600/lengua_signos.jpg" alt="" /></a></div>

Tras cambiarlo, salgo y entro de la edición en HTML y observo que el atributo <alt> ha cambiado de lugar dentro del código, quedando asi:
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAJtlyVD2fXv2W-EukvXo9zurUPGQKCor6DnEKqZeNMf89Sp9AnmnloKprotNvQTTatXJyBisJ2LmG1649aP6Du1R_EPwMjQ45BcUlaSsrWCxc0I_9bC-RZeXu-bD0Xkc5FTOCYrWmVks/s1600/lengua_signos.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAJtlyVD2fXv2W-EukvXo9zurUPGQKCor6DnEKqZeNMf89Sp9AnmnloKprotNvQTTatXJyBisJ2LmG1649aP6Du1R_EPwMjQ45BcUlaSsrWCxc0I_9bC-RZeXu-bD0Xkc5FTOCYrWmVks/s1600/lengua_signos.jpg" /></a></div>

Problemas surgidos

Ninguno

Paso 15: Equivalente textual para imágenes

Hablaremos aquí del atributo <alt> que es quizás el más conocido cuando se habla de accesibilidad web.
Este atributo permitirá conocer a las personas que utilicen lectores de pantalla o navegadores por voz el contenido de las imágenes que se presentan.

A modo de ejemplo haré lo siguiente:

Foto que representa la lengua de signos y enlaza con una web sobre un software destinado a la conversión de texto a la lengua de signos española

En esta imagen se ha introducido el atributo <alt> que ofrece información sobre la imagen y el atributo <title> que ofrecerá información visual adicional.
Por tanto el código de esta imagen es el siguiente:

<a href="http://www.textosign.es/" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Foto que representa la lengua de signos y enlaza con una web sobre un software destinado a la conversión de texto a la lengua de signos española " border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWfuiC9-_RXEEPdJ6L12XgpKjVCWgBMRVJoBmzmWwy8EjzQUIijVyYmiWRG5-bnzCzmnmcVgI94Vmp-xetOU4Aj96uMM-WqmKgQG-5gCx_cWJ1aG1oxLYQ2Lx8-cUtfHAjiYN4fO0_7Gs/s200/lengua_signos.jpg" title="Conoce el software Textosing" /></a></div>
Para realizarlo hay dos formas:

Modificando el HTML, donde se incluiría de manera manual el atributo <alt> y el atributo <title>.
Pinchando con el botón derecho sobre la imagen, seleccionamos la opción de "properties" y ahí nos aparecerá las casillas para rellenar los dos atributos.

En mi caso, lo he realizado modificando el HTML.

Problemas surgidos

Ninguno

Paso 14: Usar listas reales

El código HTML utiliza la etiqueta <ul> para las listas aleatorias y la etiqueta <ol> para las listas ordenadas.
Para lograr una apariencia más atractiva, se cambiará por una imagen bonita. En este caso, he elegido una que podemos encontrar en word:

Lo primero que he hecho ha sido subir dicha imagen a este post, para obtener de esta forma la url que usaré para definir mi lista. Una vez subida, he copida la url y he colocado lo siguiente en mi plantilla de blogger:

#mylista{

list-style-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8WWtTrEhK8CduqXws4rg2LE_EwDfrhWJOFALhWoM44SaGyYsGRjeYL1XhFW-8EZbCex4jJFe828ln-qYGZ3K7hWNyQ1LX0qfmrJ2PlhdObheLSle7_LNIG8GNRGbIr_2cOFkGY7kNe9I/s1600/icono.jpg");

list-style-type:none;

Tras hacer esto, he vuelto a esta entrada para realizar una lista a modo de ejemplo, para comprobar que efectivamente aparece la imagen que yo habia seleccionado en lugar de las típicas bolas.

EJEMPLO: Este blog consta de varios apartados:

Página principal.
Datos personales.
Archivos del blog.

Para conseguir esta lista, he modificado lo siguiente dentro de la edición HTML de esta entrada

<li>Página principal.</li>

<li>Datos personales.</li>

<li>Archivos del blog. </li>

</ul>

Problemas surgidos

He tenido muchos problemas para realizar este paso pues no encontraba la forma de que apareciese la imagen que elegía. Tras intentar hacerlo cogiendo la url de la imagen de una web que no resultó, finalmente un compañero explicó como hacerlo de esta forma y siguiendo sus pasos conseguí hacerlo.

sábado, 14 de abril de 2012

Paso 13: Tablas accesibles.

Cuando introducimos una tabla en nuestro blog, hemos de tener en cuenta que éstas puedan ser leidas correctamente por los lectores de pantalla. Para ello, hemos de tener en cuenta una serie de detalles:

Con la etiqueta <caption> hemos de darle un título o subtitulo real a nuestra tabla.
Con la etiqueta <summary> proporcionaremos un resumen de la tabla que será leida por los lectores de pantalla.
Con la etiqueta <th> utilizaremos encabezados accesibles y añadiremos el atributo <abbr>para que sea leído únicamente con los navegadores de voz.
Con la etiqueta <scope="col"> permitiremos que el lector de pantalla vaya leyendo columna por columna.

A continuación expongo un ejemplo de tabla donde he incluido estas cuatro etiquetas.

Cursos semanales
LU	MA	MI	JU	VI
Manualidades infantiles	Informática	Inglés para adultos	Pilates	Magia para niños

Para lograr que esta tabla sea accesible he realizado lo siguiente:

<summary><abbr><table border="1" cellpadding="10" summary="Ejemplo de tabla de datos accesible">
<caption style="font-size: 120%; font-style: bold;">Cursos semanales</caption><tbody>
<tr>
<th abbr="Lunes" scope="col">LU</th>
<th abbr="Martes" scope="col">MA</th>
<th abbr="Miércoles" scope="col">MI</th>
<th abbr="Jueves" scope="col">JU</th>
<th abbr="Viernes" scope="col">VI</th>
</tr>
<tr>
<td>Manualidades infantiles</td>
<td>Informática</td>
<td>Inglés para adultos</td>
<td>Pilates</td>
<td>Magia para niños</td>
</tr>
</tbody></table>
</abbr></summary>

Problemas surgidos

No tenía idea de como insertar una tabla en blogger puesto que no dispone de un editor para ello, por ello, la hice en word y la copié. Lógicamente esto fue un error grandísimo.
Sin tener idea aun de como hacerlo, pregunté en el foro sobre mi problema y gracias a la aportación de Matias logré solucionarlo.

Paso 12: Acrónimos

Para lograr que todas las personas comprendan el significado de determinados acrónimos y abreviaturas hemos de colocar la etiqueta <acronym>. De esta forma al pasar el cursor por encima de nuestro acrónimo aparecerá un cuadro emergente con un título explicativo.

A modo de ejemplo expongo la abreviatura:

La AEMET predice el tiempo diario.

Para conseguirlo, he escrito lo siguiente:

<acronym title="Agencia Estatal de Meteorología">AEMET</acronym></acronym>

Tan sólo he tenido que añadir el atributo <title>. En el caso de que hubiese sido una palabra inglesa, habría tenido que añadir también el atributo <lang>.

Problemas surgidos

Ninguno

Paso 11: No abrir nuevas ventanas

Es aconsejable que al seleccionar un vínculo no nos direccione a otra página, pues esto puede ocasionar problemas a las personas que usan lectores de pantallas o a aquellas que no tienen mucha experiencia en la navegación web.
Para comprobar si nuestros vínculos se abren en otras ventanas, lo más sencillo sería pinchando sobre ellos y comprobándolo de esta forma.
La forma más técnica de comprobarlo es observar si los vínculos llevan el atributo target=«_blank». De llevarlo, deberíamos eliminarlo.

En mi caso, lo he comprobado de las dos formas y mis vínculos son correctos.

Problemas surgidos

Ninguno

Paso 10: Atajos del teclado

Definiré unos atajos del teclado para facilitar de esta forma el acceso a tres zonas principales:
ALT + 1: Página de inicio.
ALT + 2: Saltar la barra de navegación para ir al contenido principal.
ALT + 9: Formulario de contacto.

Para establecer estos atajos, lo único que he hecho ha sido insertar lo siguiente en el </body> :
<a accesskey='1' href='http://accesibilidadatodos.blogspot.com.es'/>
<a accesskey='2' href='#saltabarra'/>
<a accesskey='9' href='mailto:lorecari@hotmail.com'/>

Problemas surgidos:

No me funcionaban porque pulsaba Alt + el número correspondiente. Sin embargo, como uso Firefox, debía pulsar Alt + mayúsculas + el número.

viernes, 13 de abril de 2012

Paso 9: Vínculos correctos y con títulos.

Dentro de una página web es muy importante tener unos vínculos correctos y que proporcionen información al usuario. Por otro lado, se puede añadir además un título a cada vínculo que complete esa información, esto lo lograremos mediante el atributo "title".

A modo de ejemplo señalo lo siguiente:

Textosign es una herramienta software que permite la conversión de texto a Lengua de Signos Española (LSE). Es capaz de convertir el contenido escrito de una página web a la lengua de signos española, en formato video. Podrá ser integrado en webs, audiovisuales, pantallas de información y asistentes virtuales que deseen traducir su información a LSE.

Lo que he hecho con este ejemplo ha sido lo siguiente:
<a href="http://www.textosign.es/textosign-ique-es-textosign" title="Software que permite traducir un texto a la lengua de signos">Textosign</a>

Tras esto, paso a modificar los vinculos que incluí en el paso 7.

Problemas surgidos

Ninguno

jueves, 12 de abril de 2012

Paso 8: Vínculos reales.

En este paso se explica que no hemos de utilizar JavaScript porque algunas personas pueden encontrar problemas ya que no los utilizan por motivos de seguridad o porque sus navegadores no lo soportan.
Hemos de tener en cuenta que Google no pueden indexar los enlaces en JavaScript, ya que no lo ejecutan.

Afortunadamente Blogger no utiliza la técnica del vínculo <javascript> , para comprobarlo en blogger he accedido a la hoja de estilo y lo único que he encontrado ha sido lo siguiente:
<script type='text/javascript'>

Evidentemente, ninguno de los vínculos que he insertado en mi bitácora son de JavaScript.

Problemas surgidos

Ninguno

Paso 7: El uso de los colores.

Es muy importante la utilización adecuada de los colores para aquellas personas con daltonismo o dificultades de visión. Para comprobar si los colores del blog son adecuados hay diferentes herramientas como:

Yo he usado la barra de accesibilidad de AIS y el analizador de contraste que se encuentra en la misma web. Al usarlo he observado algunos fallos, por lo tanto, he procedido a cambiar el color accediendo a las opciones avanzadas de mi plantilla y comprobando posteriormente que fuese adecuado.
Por otro lado, para lograr que los vínculos aparezcan subrayados he cambiado dentro de mi hoja de estilo:

a:link {text-decoration: $(link.decoration);

color: $(link.color);

Por lo siguiente:

a:link {text-decoration: $(link.decoration underline);

color: $(link.color);

Los colores de los vinculos al pasar sobre ellos así como los colores que obtienen una vez se ha pinchado sobre ellos los he cambiado mediante las opciones avanzadas de la plantilla. De esta forma podemos tener más posibilidades de acertar.

Problemas surgidos

Algunos colores que había usado en mi plantilla no respondían a las normas de contraste por lo que he procedido a su cambio.

Paso 6: Colocar primero el contenido principal

Para facilitar la lectura de nuestra bitácora a aquellas personas que utilicen navegadores de lectores de pantalla hemos de colocar el contenido principal primero.

Por ello, he optado por una de las plantillas prediseñadas donde el menú está colocado en la parte derecha de mi blog, dejando prioridad al contenido principal.

Problemas surgidos

Ninguno

Paso 5: Ayudas adicionales a la navegación

Con este paso se pretende dar un acceso rápido a la página principal de nuestro blog. Para eso, he incluido una nueva declaración en mi <head> tal como se especifica en el manual.
La página principal de mi blog recoge la información a cerca del propósito de este blog.

Para acceder a ella pinchamos sobre el título del blog y nos llevará a la página principal.
Para conseguirlo, he incluido lo siguiente al final del <head>:

Cuando he pulsado en la casilla de "guardar plantillas" lo que he escrito se ha modificado quedándose de la siguiente manera:

Interpreto que esto será la correcto.

Problemas surgidos

Al principio me ha dado error pues había escrito lo siguiente:

Tras ver el mensaje de un compañero en el foro sobre la importancia de los colores y el tamaño de la letra de nuestro blog, he cambiado el diseño y he observado que los cambios que realicé en el Doctype y el idioma desaparecieron, asi que he tenido que volver a realizarlo.

miércoles, 11 de abril de 2012

Paso 4: Elegir un título significativo.

Lo que se pretende en este paso es que nuestra bitácora tenga un título adecuado a su contenido.
Por este motivo lo he titulado "Mi bitácora accesible", ya que pretendo crear a lo largo de esta asignatura, una bitácora accesible.

Problemas surgidos:

Ninguno

Paso 3: Identificar el idioma.

En este paso debemos de identificar el idioma para permitir a los lectores de pantalla pronunciar las palabras correctamente.

Para realizar este paso, accedo de nuevo a la configuración html de mi plantilla y observo lo siguiente:

<html
 b:version='2' class='v2' expr:dir='data:blog.languageDirection' 
xmlns='http://www.w3.org/1999/xhtml' 
xmlns:b='http://www.google.com/2005/gml/b' 
xmlns:data='http://www.google.com/2005/gml/data' 
xmlns:expr='http://www.google.com/2005/gml/expr'>

Esto no coincide con lo que en este paso se explica, por tanto procedo a cambiarla, añadiendo lang='es' xml:lang='es', quedando de la siguiente manera:

Problemas surgidos:

No hubo problemas.

Paso 2: Elegir un DOCTYPE

El Doctype dirá a nuestro navegador en qué idioma está escrito.
Para comprobar el Doctype tal y como se señala en el manual me dirijo a mi plantilla de diseño y selecciono la edición en html.
Una vez ahí, compruebo que mi Doctype es el siguiente:

<!DOCTYPE>

Lógicamente, no coincide con lo que se especifica en el manual, por ello, selecciono la casilla de "expandir plantillas de artilugios" y cambio el Doctype por el siguiente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Problemas surgidos:

Antes de señalar la casilla de "expandir artilugios" lo intenté y me daba error pero gracias a las aportaciones de los compañeros en el foro de la asignatura conseguí resolverlo.

Paso 1: ¿Para quién es la accesibilidad web?

En este primer paso he leido y comprendido que la accesibilidad web es para todos. Se puede decir que este primer punto es un resumen de la primera parte del manual "Diseño web para todos I". Por consiguiente, se ha de señalar que la accesibilidad web se centrará en:
- Personas con ceguera.
- Cegueras de color (daltonismo).
- Problemas de agudeza visual.
- Personas con dificultades motrices en sus manos.
- Las personas con dificultades auditivas o sordera.
- Personas con dificultades de aprendizaje o con discapacidades intelectuales.

Tras leerlo he procedido a crear mi blog para comenzar a hacerlo accesible.