Accesibilidad: CSS líquido, elástico, fijo

Decadente, esto seria mejor que fuese en "Usabilidad, AI, Accesibilidad, Buscadores". En cualquier caso, yo creo que en un diseño de este tipo (doble A) lo importante es el que las unidades de medida no sean pixel (sino em o tanto por ciento) y cuidar la semantica, asi como desarrollarla en base a estándares, validar tanto el código como el html, etc.

Tambien comprobarlo con herramientas de validación automatica, como Hera (ojea sidar.org) o Examinator (http://www.accesible.com.ar/examinator/).

De todas formas, lo dicho: mucho mejor en el otro hilo del foro, el de Usabilidad...

Saludos,
eRNieB

ok eRNieB, muchas gracias.
Probaré en el otro foro.
salu2

¡¡¡Que existazo!!! Hehehehe...

Bueno, algunos consejos. Entra en la siguiente URL:

http://www.carm.es/ctra/cendoc/publicaciones/

Es una colección de publicaciones gratuitas, entre la que se encuentra la siguiente: Diseño de páginas web accesibles. Esta bastante bien...

Ojea habitualmente:

http://www.alistapart.com/
http://www.456bereastreet.com/

Y visita de vez en cuando H2o Magazine:
http://www.h2omagazine.com/

Esta última sugerencia es a modo AutoBombo, pero hay un par de entrevistas cuya lectura te recomiendo (cuando la visites sabras de lo que hablo).

Espero haber sido de ayuda...

Saludos,
eRNieB

Muchas gracias eRNieB,
Alistapart si que la conocía, pero los otros enlaces no.
Al blog de Buriel Torres si que que había llegado despues de navegar bastante y la verdad es que resulta muy util. ;)
Le tengo que dar un buen repaso también a Ovillo porque parece muy completo.
En fin muchas gracias por tu tiempo, salu2

Empiezo por el final ...

decadente

En fin estoy algo perdido entre tanta normativa. Me gustaria estructurarlo bien desde un principio, si podeis aconsejarme o darme algun link interesante ( en español si puede ser) os lo agradecería.
un saludo y mil gracias

Pues siento remitirte a una normativa, pero lo mejor que puedes hacer es mirarte los puntos de accesibilidad separados por niveles (SIDAR los tiene traducidos al castellano -> URL) y leerte lo que tienes que cumplir para el nivel 2.

Una vez hecho esto te vienes aqui y preguntas las dudas que tengas, que serán bastantes (porque hay puntos ciértamente crípticos y algunos bastante opinables) y entre todos te explicamos los que no comprendas.

Y una vez tengas claro lo que te están pidiendo te pones a programar.

decadente

la primera es que tipo de layout utilizar: liquido, elástico o fijo. He estado navegando pero no he encontrado nada muy claro al respecto.

Una vez que sigas mi primera recomendación lo tendrás superclaro:

WACG

Puntos de verificación Prioridad 2:
3.4 Utilice unidades relativas en lugar de absolutas al especificar los valores en los atributos de los marcadores de lenguaje y en los valores de las propiedades de las hojas de estilo.

Es decir que debes utilizar medidas relativas (ems, porcentajes, exs o palabras clave para el texto) es decir layout líquido o elástico, y que todas (y aqui ya hay muchos métodos e incluso muchas opiniones) las medidas deben ir así.

Hay muchos tutoriales para ello en internet. Y aqui te podemos echar una mano (una lástima porque de esto había 2 o 3 temas clave que se han perdido con "el apagón" de Domestika).

WACG

la segunda es utilizar css modulable o modular (emplear varios css para segun que apartados).

A nivel de accesibilidad esto te da absolutamente igual. Te vendrá mejor o peor para organizarte tú las CSS.

Yo personalmente, a no ser que haya una cantidad de código brutal, no creo sea muy necesario (hablando de optimización de la CSS en sí, otra cosa es si quieres diferenciar navegadores con CSS específicas).

Hey Orange, ¿que tal?

La Normativa aparece en el libro que le he recomendado, que además te puedes descargar gratuitamente... ;)

Yo creo que lo más complicado, sobre todo la primera vez, es el asunto de las unidades relativas.

Eso si, hazle caso a Orange porque en este campo (y muchos otros) es una autentica maquinita. :)

Saludos,
eRNieB

eRNieB

La Normativa aparece en el libro que le he recomendado, que además te puedes descargar gratuitamente... ;)

Pues no conocía este libro y está bastante bien. No es más que la normativa con pequeños toques de redacción y diseño, pero es justo lo que le falta en muchas ocasciones a las recomendaciones.

Está bien, sobre todo que al ser PDF puedes hacer búsquedas por términos que te interesen.

Gracias por el enlace.

precisamente lo de las unidades relativas me lo estoy mirando para un proyecto de doble A. sabía que en los tamaños de fuentes es así ¿pero hasta qué punto hace falta, por ejemplo, para el ancho del contenedor principal? si se hace la retícula de manera que permita crecer en vertical cada zona por si se aumenta el tamaño de letra ¿el único problema que quedaría sería el extremo en que no quepa en ese ancho siquiera una palabra? es que este comentario de las WCAG me hace dudar...
<fieldset>

3.4 Use relative rather than absolute units in markup language attribute values and style sheet property values. [Priority 2] For example, in CSS, use 'em' or percentage lengths rather than 'pt' or 'cm', which are absolute units. If absolute units are used, validate that the rendered content is usable (refer to the section on validation).

</fieldset>

Si nos ceñimos a la pauta lo mejor es que TODAS las medidas fueran relativas... Luego la realidad es que entre los propios auditores de accesibilidad hay posiciones al respecto. En la mayoría de los casos con meter esas unidades para el texto se puede dar la pauta por cumplida (a no ser que tengas un layout super estrechito y no quepa nada).

La manera de auditar esto no suele ser darle 20 veces al CTRL+ hasta que se joroba el diseño. Se suele pillar Explorer y le aplican Tipo de letra -&gt; Grande, etc... y si el diseño aguanta pues bien.

Pero si en lugar de pensar únicamente en validar el punto pensamos en las pesonas que lo utilizan, veremos que hacer un diseño "elástico" es lo mejor.

Mira, ¿quien va a aumentar el tamaño de la letra?. Los ciegos no, porque les es indiferente, los que la aumentan son los que tienen deficiencias visuales y necesitan hacer el texto enorme o tienen aplicada al windows una hoja de estilo de alto contraste.

Estos sí que le pegan muchas veces al CTRL+, y en estas situaciones se agradece enormemente el que tu diseño sea elástico, porque si no no hay quien se aclare.

Si te tomas esto en serio, pensando en los usuarios, yo lo haría elástico. Las primeras veces es un jaleo, pero luego le pillas el truco y es bastante sencillo.

Ojo con una cosa de los diseños elásticos, los titulares como imágenes, porque esos "crecen" mucho peor que los textos del sistema y no se les puede aplicar estilos de alto contraste, ni nada de nada. Por eso se dice que no es buena idea meter texto como imagen, a los ciegos les da igual (siempre que se proporcionen alternativas) el problema son las personas con deficiencias visuales que no utilizan un lector de pantalla, sino un navegador normal y corriente, pero aumentando el tipo de letra.

Además, para hacer "crecer" las imágenes éstas tienen que estar metidas como contenido en el HTML y con sus medidas expresadas en unidades relativas (que puede ser fuente de problemas porque estas medidas varían ligeramente entre plataformas, por ejemplo en mac los EMs son ligeramente más pequeños). Una imagen de fondo nunca crecerá.

En este punto los que mejor funcionan son Opera9 y Explorer7 (toma!), ya que hacen un "zoom" real sobre las imáegnes, y aunque se ven pixeladas al menos se ven más grandes.

pero qué pedazo de respuesta, 'chas gracias :)

por lo de los titulares no hay problema, el diseñador está convencido para jugar con tipos de sistema y en tamaño grande, teniendo en cuenta el contraste con el fondo también. aunque es bueno saberlo para otros proyectos.

lo de validar el punto o no me da igual, quiero lo que mejor funcione en la realidad. si dices que la prueba que se suele hacer es esa miraré con tamaño fijo a ver qué tal resulta, aunque me huele que antes de la vigésima pulsación se ha descuadrado. creo que optaré por el elástico, parece lo más sensato

No hay de que Orange. Ya te digo que fue un acierto el encontrarlo...

Coincido plenamente con lo que dices (si bien, a fecha de hoy me falta mucho por aprender). ;)

Saludos,
eRNieB

cbp

creo que optaré por el elástico, parece lo más sensato

Recomendación personal: utiliza palabras clave en lugar de EMs. Si tienes a mano el libro de estándares de Zeldman échale un ojo al capítulo de tipografía.

Si defines la tipo para el body como x-small, tendrás que el tipo de letra por defecto es 10 (un tamaño bastante común), pero sobre todo que 1em = 10px. Esto facilita enormemente la tarea, ya que si tienes un componente de 350px podrás ponerlo como 35em clavao. Si tienes un borde de 1px = 0.1em. Y así con todo.

es cierto es cierto, recuerdo que una vez hablásteis de que era mejor utilizar palabras clave que EMs. no tengo el libro de Zeldman, pero con lo que me has dicho ya parece que me puedo apañar. muchas gracias :)

Uff pedazo de respuestas gracias a todos;)
Tienes razón orange ya me había metido con las normativas antes de postear esto, la base teórica la tengo ( creo :) ),sobre todo buscaba mas que nada consejos de gente que se haya visto en la misma situación, para empezar con buen pie el proyecto.
gracias por vuestro tiempo a todos

orange

<div class="quote">
eRNieB

<blockquote>La Normativa aparece en el libro que le he recomendado, que además te puedes descargar gratuitamente... ;)</blockquote>
</div>

Pues no conocía este libro y está bastante bien. No es más que la normativa con pequeños toques de redacción y diseño, pero es justo lo que le falta en muchas ocasciones a las recomendaciones.

Está bien, sobre todo que al ser PDF puedes hacer búsquedas por términos que te interesen.

Gracias por el enlace.

Que enlace es el de carm.es? es que no me funciona asi que si alguien me lo enviase se lo agradecería que ando con esto tb chicos me lo podeis mandar a diegoms(at)gmail.com

gracias de antemano

demssite... me temo que lamentablemente el enlace no funciona (raro es, ya que hace un par de días funcionaba; al parecer es un problema interno). También es mala suerte la tuya... ;)

Voy a ver si lo tengo por aqui y te lo mando.

[NeW] Pues has tenido suerte... Te lo acabo de mandar a tu mail. :P :D

Saludos,
eRNieB

como parece tener relación retomo el hilo para comentar una cosa: haciendo ya el proyecto que comentaba antes me he encontrado con la situación de la que hablaba orange sobre las imágenes como fondos o presentes el html, y cómo se comportan cuando se amplía el tamaño de fuente ¿qué solución es mejor? por una parte me parece bien que todo el mundo vea más grandes las imágenes si hace zoom, pero por otro creo que meterlas en el código en lugar de en la hoja de estilos disminuye la accesibilidad y hace el código menos semántico ¿antes dos males, cual elegir?

¿Son imágenes en las que hay texto?

sí, son el h1 y el h2 de la página, dos logos con algo de texto. hay gente que dice que tendrían que ser imágenes en el código con su "alt" correspondiente, pero no estoy de acuerdo.

Yo tampoco. A las malas pudiera ser la imagen del logo + un texto (si no forma parte del logo).

Es un tema complejo, en el que siempre hay que sacrificar algo.

Si para el cliente es VITAL mantener el logo a toda costa (y en todas las situaciones, luego lo explico) y es VITAL que aumente de tamaño, no te queda otra que meterlo como contenido y darle dimensiones en EMs

De todas formas en ese comportamiento hay excepciones. Explorer 7 y Opera 9 hacen un zoom real sobre la página (es decir que aumentarán las imágenes aunque sean fondos). En Mac tienes mecanismos genéricos para hacer eso con toda la interfaz. Es decir que eso de que las imágenes no "crecen" si son fondos también es rebatible.

Una opción es meter una CSS alternativa de mayor tamaño, alto contraste o lo que queráis. Y que la gente que tenga problemaas tire por esa, donde deshabilitáis las imágenes que no son contenidos.

De todas formas lo de meter un logo como contenido no es un crimen. Hace poco hablábamos aqui de Ferrovial, auditada por la Fundación ONCE, y donde como ves meten logo y texto (aunque yo hubiera metido la imagen dentro del H1). Y dicen que es Doble A.
Nota: aqui el logo es contenido pero NO tiene medidas declaradas en EMs

sí, estoy de acuerdo contigo, hay que elegir y sacrificar algo, y para mí creo que son las imágenes en los usuarios de IE6 o inferiores y Firefox (aunque me duela). el comportamiento del Opera es una gozada, amplía de maravilla. he logrado incluso ampliar en todos el Flash, así que porque pierdan el par de logos no quiero empobrecer el código.

en cuanto a lo de Ferrovial... no sé, eso de que le hayan dado la doble A me da un poco igual. el código ni siquiera valida y encima al ampliar se desmorona, por mucha ONCE que lo audite.

Recuerda que una auditoría se pasa de tanto en tanto y luego la empresa puede cometer alguna tropelía. Pero bueno, el código tampoco es que sea ninguna maravilla, te lo ponía como ejemplo en el que han metido las 2 cosas.

Respecto al tema en cuestión, el zoom que hace Opera es lo mejor, debería ser todo así y dejarse de leches, pero FireFox sigue la especificación y no se si cambiará la cosa hasta que no lo diga San W3C.

¿Por qué no metes una CSS alternativa sin imágenes y que todo el mundo pueda ampliar si realmente lo necesita? Tampoco creo que tengas que cambiar muchas reglas.

ah vale vale, creía que lo ponías como ejemplo de cómo resolverlo y no me parecía muy allá. es que estoy un poco susceptible con la ONCE porque no me parece que ofrezcan mucha ayuda para los desarrolladores que quieran cuidar la accesibilidad.

a veces habría que pegar una patada en el culo al W3C para espabilarlos, que parecen la RAe, joder.

¿y a quién se la asigno la CSS, o cómo? es que no veo la relación entre ampliar y cargar una CSS distinta, a no ser que te refieras a un enlace con "versión accesible" o algo así.

Para cerrar el offtopic, ellos suelen diferenciar bastante entre la ONCE y la Fundación ONCE, que son cosas distintas. Pero bueno, dejémoslo.

Lo que te decía del CSS, mete una hoja de estilos preferida con el logo como imagen de fondo y una alternativa sin el logo (y lo explicas en la página de accesibilidad y les poporcionas un sistema para cambiar entre ellas).

Si alguien realmente necesita amplicar las cosas, y no puede hacerlo con tus imágenes, que se pille la CSS sin ellas.

la cosa es que no quería hacer una página distinta para usuarios con discapacidad, quería hacer todo en la misma y hacer lo que fuera posible para que todo el mundo pueda acceder a la misma información. quizá poner una función de JavaScript que las intercambie ¿te refieres a eso? aún así se quedaría gente fuera, aquellos que no lo tengan habilitado y quieran ampliar, pero sería un porcentaje muy muy pequeño, seguramente.

jo, con las ganas que tenía de encontrar una solución universal... :P

Yo no creo que estés dando una página distinta a aquellos usuarios con discapacidades. Les estás adaptando la presentación de la página a su deficiencia, que es muy distinto. Para eso se inventaron las hojas de estilo.

Respecto a las hojas de estilos alternativas, los usuarios pueden activarlas a través de los menús del navegador. El que tú les proporciones una alternativa Javascript para hacerles la vida más fácil es un "añadido". Es decir que todo el mundo podrá activarlas (siempre que su navegador se lo permita, que son todos los actuales).

Échale un ojo a este tutorial anda: Working With Alternate Style Sheets

fuera del funcionamiento de JavaScript, no termino de entender cómo podrá el usuario cambiar de la hoja de estilos por defecto, con las imágenes como fondos, a otra sin el logo ¿a qué te referías entonces con "proporcionar un sistema para cambiar entre ellas"?

además, esto no solucionaría el problema, simplemente haría que la gente que amplíe vea un texto en lugar del logo ¿no?

perdón si no me estoy enterando bien de lo que quieres decir...

muchas gracias por el enlace de ALA, que tiene muy buena pinta :)

editado: empiezo a entender lo que querías decir leyendo el tutorial...

Veamos, que igual el que no se entera soy yo...

Tú tienes un logo metido como una imagen de fondo, que un usuario con deficiencias visuales no puede ver.

El tipo le da a CTRL+ y tu imagen no se amplía, con lo que sigue sin verla.

Solución: le proporcionas una CSS "normal" y otra "alternativa" en la que puedes hacer 2 cosas:

- Eliminas el logo, de forma que al menos el tipo al hacer CTRL+ vea el nombre del site más grande

- Le metes por CSS un logo más grande (esto último le estoy haciendo yo ahora mismo con un menú principal). Seguirá sin poder hacer CTRL+, pero al menos partirá de una base mejor.

El tipo puede irse a su menú del navegador y seleccionar la CSS que quiera (y se lo explicas convenientemente en la página de accesibilidad). O utilizar un sistema de cambio por JS que tú amablemente implementas, inlcuso con una cookie para recordar las preferencias del tipo.

¿Te queda claro?

como el agua, muchas gracias por la explicación, el que no se enteraba era yo.

Orange, una pregunta a ver si me puedes sacar de dudas... :)

¿Es obligatorio que todos los documentos de una web dispongan de un h1?. Y si es asi... si el contenido del h1 se oculta con un visibility:hidden, display:none o con un position: absolute y un left o top exagerado.

Me refiero sobre todo a nivel de accesibilidad, y desde luego, para cumplir el Doble A.

Pienso que son un tanto subjetivo algunos de los temas referentes a accesibilidad, y porque no decirlo, tambien en cuanto a usabilidad.

Se agradece la respuesta (si alguien más lo sabe, por supuesto, que conteste). Que siga el hilo... ;)

Saludos,
eRNieB