Pido consejos sobre accesibilidad de una web

kazafun · #1 (**permalink**) 11/08/2006, 03:58

... es para un colectivo de discapacitados por lo que, creo mas esencial que nunca que la pagina sea todo lo accesible posible.

Cumple CSS2 ( con advertencias ) y xhtml 1.0
Tambien lo he probado en TAW, pero no me he atrevido a colocarle un logo de AAA, prefiero antes saber vuestra opinion.

Me agradaria mucho que lo probarais en herramientas que conozcais y me dijerais que tal os parece. Yo he intentado cumplir con los detalles que creo importantes para cumplir los requisitos de accesibilidad.

Ya puestos, tambien agradeceria una opinion sobre el diseño, creo que aguanta bien las resoluciones como el aumenteo del tamaño del texto.

Como vereis todavia no esta en su alojamiento definitivo, por lo que estoy completamente abierto a cualquier sugerencia.
PD: Los enlaces no llevan a ninguna parte, solo he maquetado la portada y espero consejos antes de continuar

http://www.telefonica.net/web2/karch...sensebarreres/

1000 gracias!!!!

Nigel · #2 (**permalink**) 13/08/2006, 17:52

Así en apariencia parece que cumple con todos los criterios:

1 - Separación total entre diseño y contenido
2 - Etiquetado HTML semántico
3 - Validación XHTML... aunque con unas advertencias que deberías revisar, porque no tienen muy buena pinta, además de que por lo que he visto, los caracteres especiales no están sustituidos por sus correspondientes entidades HTML (me extraña que valide XHTML strict, supongo que será por la codificación empleada, nunca he usado ese doctype)
Tampoco me parece muy conveniente usar   para crear espacios, eso deberías hacerlo con CSS (en mi opinión)

4 - Pasa el test de la sección 508 (Cynthia)
5 - Pasa el test WAI (Cynthia)
6 - Pasa el test de Examinator, y con muy buena nota

(NOTA: Pasados estos tres tests, se asume que muchas de las pautas de accesibilidad se cumplen, pero no todas)

7 - Los contrastes entre colores parecen adecuados.
8 - La selección de colores es adecuada para daltónicos
Aquí tienes una utilidad que renderiza tu página según diversas deficiencias visuales:
http://colorfilter.wickline.org/

9 - La visualización en un navegador de texto es correcta
10 - Toda la información se basa en el texto y no en las imágenes

Bueno, no sé qué más probar, por mi parte te doy la enhorabuena

Ahora sólo falta que sea bonita

Es broma, es broma

PD: Las advertencias en CSS no suelen ser un problema en páginas "normales", pero por lo general éstas se refieren a no haber definido colores de fondo o primer plano, lo cual puede ser problemático si el usuario sí los ha definido y no contrastan adecuadamente con los que tú sí has definido

PD2: El diseño líquido está muy bien, pero al igual que el de ancho fijo, tiene sus problemas cuando el ancho de la pantalla es excesivo, y las lineas se hacen ilegibles. Yo probaría a poner un límite en la anchura que no se sobrepase para no entorpecer la legibilidad, pero bueno, eso ya puede considerarse una pijada

kazafun · #3 (**permalink**) 17/08/2006, 02:19

Muchas gracias Nigel!!!

Le echare un vistazo a las advertencias, tienes razon, vale la pena.

El doctype:

Código:

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

, jejejeje pensaba que era de lo mas corriente

Y los caracteres especiales creo que no son necesarios sustituirlos por sus codificacion html, ya que uso:
charset=ISO-8859-1
( Ojo cualquier correccion en lo que te digo me vendria genial XD)

Tienes razon, a mi tampoco me gusta usar el espacio en blanco &nbsp, pero en ese caso lo que esta separando son ENLACES, y que exista un caracter imprimible para separar enlaces es una premisa de algunos validadores.
Si alguien conoce algun otro, le estaria muy agradecido.

Nigel · #4 (**permalink**) 17/08/2006, 05:10

Pues lo de la codificación yo tampoco lo tengo muy claro (es uno de esos temas que siempre tengo pendiente de mirar

), pero si el validador no dice nada al respecto, supongo que será correcto

siempre que todos los agentes de usuario que visualicen la página, sean compatibles.

En cuanto al doctype, ya se ha hablado mucho de ello. Bien es cierto que hay que tender, con el paso del tiempo, a usar la última versión, y de la forma más estricta (para tender a que el documento sea auténtico XML), pero no es una obligación ni se es "más mejor" :P Simplemente hay que usar el que más convenga (que para eso existen

): Por ejemplo, XHTML 1.0 strict no permite el atributo "target" en los enlaces, pero el transitional sí. Eso no quiere decir que uno sea mejor o peor que el otro, depende de tus necesidades actuales.

Bueno, y ya por último, lo del   ... No me había fijado que era para separar los enlaces. Supongo que en ese caso se puede dar por bueno, ya que aunque visualmente se pueden emplear márgenes, eso no se toma como caracteres imprimibles, aunque otra solución es emplear listas sin numerar, formateadas correctamente con CSS, ya que es la forma más común de agrupar enlaces... bueno, eso ya va a gusto del consumidor

Un saludo!

frijolerou · #5 (**permalink**) 19/08/2006, 00:33

El tema de la separación de links adyacentes está mencionado en la directriz 10.5 (Prioridad 3) de las pautas de accesibilidad WAI. Cito de la herramienta HERA:

Cita:

Algunas aplicaciones de usuario, incluidas algunas ayudas técnicas, no son capaces de diferenciar los enlaces si se encuentran uno junto a otro sin ningún marcado o caracter imprimible que los separe.

Enllave · #6 (**permalink**) 08/09/2006, 05:52

Permite que el usuario pueda ir directamente a las diferentes secciones de la página, por ejemplo al contenido (en modo texto), fíjate en la de Sidar.

Te recomiento el uso de los link
Ejemplo:
<TITLE>Discapacidades</TITLE>
<LINK rel="prev" href="home.html">
<LINK rel="next" href="eventos.html">
</HEAD>

Anarko · #7 (**permalink**) 14/10/2006, 17:49

Hola NIGEL me parece super interesante todo lo que hablan aqui, me fui a http://colorfilter.wickline.org/ y no entendi cómo interpretar la salida.

Alguien sabe como es eso ?

Me salio un float a la derecha con esta info:

Código PHP:

  Color Blindness:  Normal   Protan   Deutan   Tritan
Anomalous Forms: Mono Protan Deutan Tritan
Coverage Testing: Monochrome Black White Gray
Toggle: Scripts [nonGIF] Images [invalid] CSS
go to: This page ColorFilter ColorLab AWARE

Que carambnas es eso ?

marce_str · #8 (**permalink**) 16/10/2006, 07:03

Además de lo que te dijo Enllave, agrega el atributo "title" en tus links, sobre todo en los de tu menu.

PatomaS · #9 (**permalink**) 16/10/2006, 11:03

Hola

Un par de cosillas, el tema de los vínculos separados por espacio, como ya te menciona, no deben estar separados por espacios, la manera más fácil y más lógica de separarlos, al menos en caso como este de los iconos de validez, es que uses una lista y modifiques sus propiedades con css, tienes varias alternativas para hacerlo, desde usar floats, display: inline o table-cell, es solo cosa de jugar con ello, al final lograrás lo que deseas, que es la separación y la maqueta será correcta.

Otro detalle, es que agregues un textilo breve en la parte superio del tipo "saltar al contenido", el cual esté vinculado a donde empieza el contenido, de esta manera, quienes "escuchan" la página, no tienen porque escuchar el menú en cada una de ellas.

Veo que en la página se mencionan dos correos, uno que supongo es el tuyo como creador, y uno de la empresa, este debería estar vinculado y tener un accesskey asignado a fin de cuentas, siendo este un metodo de contacto, debe estar accesible, nunca mejor dicho.

Del resto, parece esar todo en orden... cosa final, cuando pongas el /nbsp, no olvides terminarlo con ";".

Felicidad