<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fnextobserver%2Fvideos%2F2486060728135791%2F&show_text=0&width=476" width="476" height="476" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>

Presentación

Esta entrada es un intento de orientar el contenido de este blog.

Es una práctica del módulo "Diseño para tod@s" del Programa Modular en Tecnologías Digitales y Sociedad del Conocimiento" impartido por la UNED, y llevado a cabo por el Profesor Carlos Egea García.
Consiste en una serie de pasos básicos para construir blog accesibles para tod@s.

Según Blogger la entrada primera (que sería nuestro paso número 1 se encuentra oculta) y el modo de acceder a ella es, pinchando en el menú de la derecha en ARCHIVO marzo 2011 y bajando el cursor hasta el final, donde aparece con el título ¿Accesibilidad para qué y para quién? y de ahí se puede ir subiendo. Esto nos es ajeno, dado que es Blogger quién estipuló el orden de las entradas de esta forma.  Además el menú principal, muestra tan solo las últimas 10 entradas, esto se debe a que es una plantilla antigua de todas las que tiene Blogger, recomendada para aprender sobre lenguaje HTML de forma sencilla.

Comentar que se han incluido Atajos de teclado como se explica en la entrada que habla de ello. Por tanto si se pulsan las Teclas "Alt + 1" y después se da "intro" se accederá a la página principal.  También si se pulsa "Alt + 9" y después se da "intro" se abrirá un programa de correo electrónico para ponerse en contacto conmigo.

Sin más, deseo ante todo, que se pueda acceder de la forma más cómoda posible. Y que disculpen los pasos no conseguidos y los fallos y errores no corregidos aún.

Saludos Ana

21 Verificar la Accesibilidad

Algunos consejos para verificar la web:

Ver si nuestro código es accesible, en:
http://validator.w3c.org/
Una vez comprobado me salen 86 errores y 35 avisos, (impresionante) en dicha página se van detallando los lugares del código donde se encuentran los fallos

Comprobar las hojas de estilo con:
http://jigsaw.w3.org/css-validator/
Me dice que tengo un error  en la linea 23  #leftcontent   donde me comenta que la propiedad _margin-top no existe: 30px 30px
Y una Advertencia o aviso que está en la línea 107 #descripción y me dice lo siguiente:
Los nombres de familias que contengan espacios en blanco deben entrecomillarse. Si no se hace, cualquier espacio en blanco anterior o posterior al nombre será ignorado y cualquier secuencia de espacios en blanco dentro del nombre será convertida a un único espacio.


Analicemos los criterios de Accesibilidad promovidos por la W3C.
Con la siguiente herramienta en castellano:
http://usuarios.discapnet.es/disweb2000/WCAG2003/wcag10/WAI-WEBCONTENT-19990505_es.html

Analicemos el contraste de colores descargándonos gratuitamente
 el siguiente programa en:
http://www.nils.org.au/ais/web/resources/contrast_anlyser/versions/es/

Por lo que a mí respecta me salen muchos errores, !! Muchísimos ¡¡ he comprobado en el foro que es normal, pues en muchos casos se debe a el mismo editor de blogger al que no se tiene acceso. Con todo me quedo revisando aquellos que puedo cambiar

20 Encabezados correctos

Así a simple vista parece que carecen de importancia, pero en accesibilidad hay y existen unos criterios que siguen por ejemplo lectores de pantalla como algunos navegadores, criterios digo, de búsqueda y de congruencia en las etiquetas de marcado, según su encabezado y el tamaño de éste. Hay distintos niveles con distintas etiquetas.

El primer nivel . Etiqueta "h1".
El Segundo nivel. Etiqueta "h2"
El Tercer nivel . Etiqueta "h3"
El Cuarto nivel . Etiqueta  "h4"
El Quinto nivel.  Etiqueta  "h5"

Parece obvio pero de lo que se trata es, de que no se nos salte un nivel con una etiqueta que no corresponda al encabezado que se edite, o lo que es lo mismo seguir la lógica del anterior encabezado y la etiqueta utilizada.  Por ejemplo:  si en el encabezado de los títulos hemos utilizado la etiqueta h2 no deberíamos poner al siguiente subtitulo, en ese apartado, ni una etiqueta h1 (es evidente) pero tampoco una h2 ni una h4 pues podría dar lugar a perdida para algunos lectores de pantalla como ya he comentado.

Por mi parte compruebo que bloguer al editar el los titulos con el editor propio los tenga bien definidos en la hoja de estilo.

19 Tamaño de fuente

Es de suma importancia el tamaño de la fuente y pienso que no se le da la que merece. La mayoría de los sitios tienen una letras sumamente pequeñas y lo peor es que son valores absolutos o pixeles marcados fijos. Esto puede ser un tremendo error pues impide que se le pueda dar un aumento de tamaño tanto a las letras como a la pantalla.
Reviso la plantilla base y compruebo que Blogger trabaja con porcentajes, que serían los valores relativos más fáciles con los que trabajar y no perjudican el objetivo de este blog, la accesiblidad.
ejemplos:

#blog-title {
  margin:5px 5px 0;
  padding:20px 20px .25em;
  border:1px solid #eee;
  border-width:1px 1px 0;
  font-size:200%;
  line-height:1.2em;
  font-weight:normal;
  color:#6O6;
  text-transform:uppercase;
  letter-spacing:.2em;
  }

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

Por lo tanto no modifico ni pongo nada.Pero sí me permito el probar con los atributos "span style="font-size:180%" el texto en grande y "span style="font-size:85% el pequeño:

Texto en grande
Y este en pequeño

18 Línea horizontales decorativas

Podemos conseguir que el aspecto del blog tenga un toque diferente haciendo que las líneas separatorias sean por ejemplo imágenes.

Para hacerlo bien hemos de recurrir a las CSS las hojas de estilo en el que incluiremos el siguiente código:

div.hr {
height: 25px;
background:url(http://www.marcodigital.com/imagenes/pieses.gif);
}

Una vez incluida nustra hoja de estilo con el tamaño de la imagen en "height" y con la dirección donde se aloja dicha imagen en "background-image:" ya podríamos poner nuestra linea en el código fuente añadiendo: (div class="hr")(/div)(/hr /)

Donde ya sabemos que los paréntesis son el signo de mayor y menor.
que si yo lo edito queda del modo siguiente:

17 Mapa de imágenes

Sinceramente si se trata de hacer una bitácora accesible los mapas de imagen, que son accesos a distintos sitios dentro de una misma imagen, no es muy aconsejable, accesibles no son, ya que suponen para los lectores de pantalla y para otros dispositivos de ayuda, francas dificultades. Por tanto no se recomienda, en caso de hacerlo si interesa tener en cuenta lo siguiente:

Crear mapas de imagen para usuarios, con la etiqueta "usemap" con lo que se avisa de que el/la usuari@ tiene el control.
Dar alternativas textuales tanto a la imagen en sí como a las distintas zonas que contenga.



Yo de momento estoy teniendo serios problemas para conseguirlo, he de estudiar con detenimineto y claridad qué ocurre. De momento la elección de la foto no es la más correcta pues no tiene relación con la intención o la invitación a que sigas estudiando, y lo segundo no están definidos en absoluto las zonas sensibles para enlazar. Me quedo analizando qué pasa y buscando la solución inmediata.