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

Orange, te debo una cena... ;)

Yo creo que esta vez si que nos ha quedado clarisimo. La verdad es que yo estaba haciendo una cosa mal, ya que ha algunos tipos de letra le estaba dando 0.9 em's; y esta claro que es mejor hacerlo en ese caso con palabras clave.

Simplemente genial.

Gracias, de nuevo... :P

Saludos,
eRNieB

Bueno, veo que casi os las sabéis todas
:)

Por resumir:

Las unidades expresadas en EMs o pocentajes se heredan, de forma que si tienes body 0.5em y table 0.5m, lo que tendrá el table en realidad es la mitad que body.

Esto hace que tengamos que ser MUY meticulosos a la hora de programar, lo que no siempre es posible, sobre todo en equipos grandes de desarrollo. Además estos temas de herencia son proclives a errores, aunque estés tú sólo pero con prisa.

PERO además pasa una cosa, y enlazo con lo que preguntábais de que si era posible definir un tamaño para las palabras clave.

Todas las unidades relativas (EMs, %, keywords,...) están referidas al tamaño de la letra por defecto (que son aprox 16px). ¿Por qué?, porque si un usuario ve mal, con que redefina una vez su tamaño de letra por defecto en el navegador (y ponga 30px en lugar de 16px), todas las webs con unidades relativas se verán automáticamente más grandes sin que el usuario tenga que hacer nada.

Es decir que si el usuario no ha tocado su tamaño por defecto, de primeras dadas 1em = 100% = medium = 16px.

En este escenario yo recomiendo poner body font-size: x-small, porque x-small se corresponde con un tamaño de 10px, que es algo bastante corriente y además tendremos que 1em = 10px. Es decir que nos es muy fácil calcular las medidas para aplicarlas (¿quiero un menu de 300px? pues son 30em, ¿quiero un borde de 1px? pues le meto 0.1em. Sencillo).

Pero OJO (y aqui viene otro tanto para las palabras clave). Las palabras clave siempre medirán como mínimo 9px (es decir que xx-small siempre va a medir como mínimo 9px), pero eso no funciona con los EMs o porcentajes.

Es decir que si un tipo por las razones X reduce el tamaño de letra por defecto de su navegador ("me he metido así a lo loco en las opciones y un tamaño por defecto de 16px me parece muy grande") y le pone verdana de 10px, un tamaño de letra de 0.5em le va a medir 5px, y el navegador así lo representará y la web será totalmente ilegible (podéis hacer la prueba). Pero por mucho que reduzca el tamaño por defecto un usuario, utilizando palabras clave, ninguna de ellas medirá nunca jamás menos de 9px, lo que es un seguro contra usuarios torpes y garantiza la legilibilidad del site, y su accesibilidad.

Hay gente que dice que 7 tamaños de palabras clave le parecen pocos, y yo puedo estar de acuerdo, entonces la recomendación es:

- Definir un tamaño para el body con una palabra clave, lo que nos asegura que el tamaño mínimo por defecto para nuestro documento es de 9px (o más, dependiendo de la que escojamos).

- A partir de ahí se pueden usar EMs, pero recordad que siempre son delicados.

- Si nos decidimos a usar EMs, yo lo haría sólo para medidas superiores a 1em (ahí podemos jugar con lo que sea, porque si hay errores de herencia simpre serán "hacia arriba" con lo que la accesibilidad está garantizada).

- De 1em para abajo yo pondría siempre palabras clave, total no creo que tengamos que poner nada mucho más pequeño que 9px o 10px.

No sé si os queda alguna duda

Gracias Pseudo. Más o menos lo entiendo.

De todas formas esto es probar. Lo que pasa es que cada uno te lo pinta de una manera diferente, por lo que me temo que lo mejor es hacer pruebas a punta pala, y buscar la mejor opción.

Siempre lo he dicho: tanto la accesibilidad y la usabilidad son en tanto subjetivas. Es como diseño fijo frente a diseño liquido: en función del proyecto es mejor una u otra opción. Esa es mi opinión, la verdad... pero estoy convencido de que son muchos los profesionales que opinan igual.

Saludotes,
eRNieB

Es que si usas palabras clave es pensando en el usuario... y no haces daño a nadie por usar ems bien usadas para salirte de las limitaciones de las palabras clave. La opción que creo es la "estandar de las cosas bien hechas" es dar una palabra clave para el texto por defecto (body) y ajustar las tipos más grandes en ems (y si necesitas más pequeñas de nuevo en palabras clave, que te aseguran que la fuente no se reducirá por debajo de unos píxeles mínimos salvo que lo decida el usuario).

De hecho creo recordar que Orange dio una fórmula para poder calcular en píxeles lo que estás haciendo si empiezas con keyword en body y sigues con ems.

Correcto: asi es Pseudo, lo has explicado de lujo. Eso ya me queda más claro que el agua.

A lo que me refiero, es: venga, vamos a hacerlo con palabras clave (hasta aqui todo correcto). ¿Le puedo definir yo a esas palabras clave un determinado tamaño, o tienen que ser por narices las predefinidas?

En el caso de que la respuesta es afirmativa: deduzco que si lo hago con em's, voy por mal camino, ¿no? Es mejor por lo tanto %... :-¿?

Lo que dices Pseudo, es asi porque lo he probado esta misma mañana. Ahora mismo, tal y como lo tengo com em's funciona bastante bien, pero lo quiero hacer de maravilla (aprendiendo a todo ritmo, esta claro) ;)

Gracie mil Mr. Pseudo

Saludos,
eRNieB

Te lo explico un poco a mi manera y que me corrijan si cometo alguna imprecisión o me equivoco (me da que Orange ya estará aburrido de explicar esto):

Si "body" tiene 0.8em definido en la CSS y "table" también tiene 0.8em definido, quiere decir que table tiene 0.8em respecto a los 0.8em de body. (en este punto viene Orange y te dice que no uses ems :P)
Las palabra clave se heredan pero no se calculan respecto a sus padres sino siempre respecto a los tamaños por defecto del usuario. Es decir si tengo "small" en body y "small" en table, en los dos casos tengo el mismo tamaño de texto.

Me contesto a mi mismo: efectivamente, los em's se heredan. No me explico bien: a lo que me refiero es que si, por ejemplo, <body> contiene una tipografia small, <div> tambien y <table> tambien, y table esta contenida en div, y div en body se lee, sin embargo con el tema de los em's, según como esten especificados tan solo se leera en body, ya que en div y en table se reducen.

Espero que esta afirmación sea correcta por que es lo que me esta ocurriendo: sin embargo, con lo de small no me ocurre.

Alguien puede arrojar un poco de luz, please...

Saludotes,
eRNieB

Que lio es esto... :)

A ver, dos preguntas más (hmmmm... mejor tres) sobre el tema este de las tipografias en Web.

- ¿Es factible combinar ems y tantos por ciento?
- Esta pregunta es para Orange: cuando te refieres a emplear tan solo palabras claves, ¿te refieres a emplear <code>xx-small, x-small, small... xx-large</code>? Se les podra aplicar mediante CSS otro tamaño con ems o %, o eso no es lo más correcto. :-¿? No lo termino de entender.
- ¿Los ems se heredan? Es que me pasa una cosa un tanto rara, que si no soluciono ya comentare.

Gracias mil... Se que lo conseguire... 8)

De todas formas, una cosa que me deja como muy perplejo, es que incluso algunas webs de accesibilidad y usabilidad muy conocidas, cuando vas a Explorer y especificas fuente grande se descuadran cosa mala. Asi es complicado aprender... :D

Saludotes,
eRNieB

P.D. cbp... ¿porque te complicas tanto la vida? Me refiero al tema de usar png's. Me temo que hay que tirar de JS para Explorer, y sinceramente, no le encuentro el sentido a no ser de que sea para algo muy especifico. ;)

orange

Yo sigo el que propone Shea al final de todo, que parece el mismo de WellStyled.

¿y si necesito que la imagen de fondo sea transparente? al estar el span encima del texto, tapándolo, si es un png con transparencia se ve lo que hay detrás

eso era lo que tenía entendido (que he leído lo de Owen Briggs y el de ALA :P), pero no me funciona, no sé por qué... :P

Al contrario (y mira que te tengo recomendado el capítulo de tipografía de Zeldman).

No me voy a extender en el por qué, pero los Explroer 5.x interpretan 1 palabra clave por encima de lo que deberían. Para ellos small tiene un tamaño de medium para los navegadores que siguen los estándares.

Mete esto en la CSS para explorer

<code>body {
font-size: xx-small; /* IE5.x */
fon\t-size: x-small; /* Estandares */
}</code>

¿sabéis si las versiones standalone del IE5 tienen algún problema con la definición de tamaños con palabras clave? es que me están saliendo bastante más grandes de lo normal, y no tendría que ser así ¿no?

para lo del parpadeo existen soluciones en función del servidor, hombre, no se me agobie

zigotica

uy, de hecho habia un post con mas de 15 paginas sobre esto ...... suscribo mucho de lo que dice orange, aunque no todo.

Pues menudas peleítas teníamos, al final me habéis arrastrado entre todos al lado del "estructuralismo", con lo felíz que era su defendiendo mi "significalismo"
XDDDD

cbp

orange, te lo preguntaba por saber cómo lo resolvías, si metiendo un span vacío o un span con el texto del enlace.

Yo sigo el que propone Shea al final de todo, que parece el mismo de WellStyled. pero OJO!!, esto:

<code>&lt;a&gt;&lt;span&gt;&lt;/span&gt;Texto&lt;/a&gt;</code>

Puede producir flickeos en Explorer 6 si está activada la opción de recargar imágenes en cada visita (no me voy a extender mucho sobre esto, quizá en otro post).

Es mejor utilizar esto:

<code>&lt;contenedor&gt;&lt;span&gt;&lt;/span&gt;&lt;a&gt;Texto&lt;/a&gt;&lt;/contenedor&gt;</code>

O un script JS que hay por ahi, pero que no funciona con los Explorer 5.x

PD: Esto ya parecen 3 hilos distintos.

orange, te lo preguntaba por saber cómo lo resolvías, si metiendo un span vacío o un span con el texto del enlace, cómo proponen en wellstyled.

<fieldset>Pero lo cierto es que las discusiones no suelen versar sobre si debe o no haber H1, que yo creo que sí, sino de si los titulares deben representar estructura o importancia. Pero bueno, esta discusión daría lugar a un tema entero. </fieldset>

uy, de hecho habia un post con mas de 15 paginas sobre esto ... :(

txuma, ¿donde te metes? este tema es para ti! :)

suscribo mucho de lo que dice orange, aunque no todo. pena que no pueda explicarme, igual mas tarde.

¿Y qué pasa con ella en los enlaces?. Que ves el texto del fondo y haces clic en el area definida de la CSS para la imagen.

ya lo sé, ya lo sé, sólo lo ponía como una posible solución a un determinado grupo de navegadores. para los demás se pueden plantear otras.

y que conste que la tuya, la del span, cuando hay enlaces ¿qué pasa con ella en CSS On / Images Off? que todo son pegas, hombre :P

De nada hombre
:)

EDITO: cbp, no me ponga usted cosas que no funcionan en los navegadores antiguos alma de dios, que eso también es accesibilidad. En el mundo hay más usuarios de Explorer 5.x que ciegos ;)

EDITO2: Esa técnica no soluciona el problema de Css ON / Images OFF :P

hay otra manera de reemplazar texto por imágenes y no necesita span.

pones esto:

<code>
&lt;h1&gt;Titulo web&lt;/h1&gt;
</code>

y en la css:

<code>
h1 {
overflow: hidden;
width: 100px;
height: 0;
padding-top: 30px;
background: url(fondoH1.gif) left top no-repeat;
}
</code>

lo malo de esto es que no funciona en IE5.5 e inferiores, pero en el resto va de maravilla.

Orange, ya no te molesto más. Creo que me ha quedado ya la cosa muy, pero que muy clara... :)

Poquito a poquito voy aprendiendo, y le voy cogiendo gustillo al tema este de la accesibilidad. Y una cosa que esta muy clara: la experiencia es un grado.

Se agradece muchisimo... :)

Saludos,
eRNieB

Aqui estamos para ayudarnos hombre
;)

<code>&lt;h1&gt;&lt;img src="logotipo.gif" alt="Logotipo de Harakiri" /&gt;&lt;/h1&gt;</code>

Esto es válido, aunque a mi no me parece lo mejor

<code>&lt;h1&gt;&lt;img src="logotipo.gif" alt="Logotipo de Harakiri Estudios" /&gt;&lt;span&gt;Harakiri Estudios&lt;/span&gt;&lt;/h1&gt; Y ocultar el span. :-¿?</code>

Esto es mejor que lo anterior, pero te faltaría otro paso lógico

<code>&lt;h1&gt;&lt;span&gt;&lt;/span&gt;Titulo web&lt;/h1&gt;</code>

Y metes el logo como fondo del span. Echa un ojo aqui Revised Image Replacement

Como pega te pueden poner que ese logo NO se imprime por defecto (lo que para algunos es un problema). Y ahi puedes tratar de utilizar esto, aunque ya te aviso que no rula en Explorers antiguos.

Si la impresión es algo imprescindible y quieres i a por todas con el crrossbrwosing, yo optaría por meter el logo en el contenido y ocultar el texto (como has metido tú en la primera opción).

Orange, creo que me ha quedado bastante claro.

Una cosa más (ya para terminar, y porfavor, no me pegues): ¿seria valido por lo tanto algo como?

<code>&lt;h1&gt;&lt;img src="logotipo.gif" alt="Logotipo de Harakiri" /&gt;&lt;/h1&gt;</code>

O seria más correcto algo como:

<code>&lt;h1&gt;&lt;img src="logotipo.gif" alt="Logotipo de Harakiri Estudios" /&gt;&lt;span&gt;Harakiri Estudios&lt;/span&gt;&lt;/h1&gt;</code>

Y ocultar el span. :-¿?

Y posteriormente en las demás paginas que los titulares de las mismas sean &lt;h2&gt;

Gracias por tu tiempo. Un día de estos te mando un mail (me vas a odiar). :(

Saludos,
eRNieB

eRNieB

Yo, cuando me refiero a que no haya un &lt;h1&gt; (y repito: estoy deacuerdo en la importacia de h1) es en la homepage....
Otra cosa es cuando entras en una sección: ahi si que le veo una mayor importancia.

Estoy de acuerdo, pero eso es porque tú tienes en mente un significado de IMPORTANCIA en los titulares. Pero el W3C tiene un significado de ESTRUCTURA. Y ahí es donde la cosa no cuadra.

Para ti un H1 debería ser un título de una sección (pej), y si no hay título de una sección pues no hay H1. Pero según la especificación un H1 es el principal titular de una página, así que debería estar en algún sitio.

eRNieB

Por ejemplo (y a modo de curiosidad): en Google, ¿que pondriais vosotros como h1? ¿El logotipo tal vez? Yo he visto que en muchos casos se pone entre &lt;h1&gt; y &lt;/h1&gt; la imagén del logotipo de la Empresa. Con todos mis respetos: ni lo entiendo ni lo comparto.

Yo lo que suelo hacer es meter el título de la web como único H1, en texto, y luego, dependiendo de la web, reemplazo por CSS ese título por un logo.

eRNieB

Lo de display: none; ya lo sabia, pero se agradece el recordatorio. Yo, según tengo entendido, hacerlo con el position:absolute; y desplazarlo a lo cafre es lo mejor (vamos, lo más compatible con lectores de voz). Corrigeme si me equivoco... ;)

No hace flata que lo posiciones a lo cafre position:absolute; width:0; height:0 suele valer.

eRNieB

Lo que no entiendo Orange, es esto: Veamos, yo no lo escondería "a pelo", es decir que si tiene que estar está y si no no lo ponemos. Me estas diciendo por lo tanto que en casos muy concretos es valido, y cumpliria la especificación Doble A del WAI. :-¿?

¿Es válido el qué? ¿Meter un H1 que no apareciera por ningún lado? Yo lo dudo, creo que cualquier auditor te pegaría un toque, a no ser que le dieras una equivalencia de alguna forma (logo o lo que fuere, y alternativas para los que no ven).

Gracias a ambos...

Yo, cuando me refiero a que no haya un &lt;h1&gt; (y repito: estoy deacuerdo en la importacia de h1) es en la homepage. Por ejemplo (y a modo de curiosidad): en Google, ¿que pondriais vosotros como h1? ¿El logotipo tal vez? Yo he visto que en muchos casos se pone entre &lt;h1&gt; y &lt;/h1&gt; la imagén del logotipo de la Empresa. Con todos mis respetos: ni lo entiendo ni lo comparto.

Otra cosa es cuando entras en una sección: ahi si que le veo una mayor importancia.

Sin embargo esta claro... parece ser que si es obligatorio.

Lo de display: none; ya lo sabia, pero se agradece el recordatorio. Yo, según tengo entendido, hacerlo con el position:absolute; y desplazarlo a lo cafre es lo mejor (vamos, lo más compatible con lectores de voz). Corrigeme si me equivoco... ;)

Respecto a lo de la "estructuración de titulares", efectivamente: yo he leido opiniones de todo tipo (incluso algunas que aseguran que poner más de un &lt;h1&gt; es valido). Personalmente pienso que un solo &lt;h1&gt; es lo mejor, pero tampoco tengo tantisima experiencia en este campo como para asegurarlo. Lo importante es ir aprendiendo... :)

Lo que no entiendo Orange, es esto: Veamos, yo no lo escondería "a pelo", es decir que si tiene que estar está y si no no lo ponemos. Me estas diciendo por lo tanto que en casos muy concretos es valido, y cumpliria la especificación Doble A del WAI. :-¿?

Gracias a ambos por vuestro tiempo
eRNieB

JEJE, con los titulares nos hemos topado... La verdad es que la estructuración de titulares en una página es fruto de contoversia y siempre caben opiniones.

Pero lo cierto es que las discusiones no suelen versar sobre si debe o no haber H1, que yo creo que sí, sino de si los titulares deben representar estructura o importancia. Pero bueno, esta discusión daría lugar a un tema entero.

Tratando de centrarme en lo que preguntas:

eRNieB

¿Es obligatorio que todos los documentos de una web dispongan de un h1?.

Yo diría que sí, el punto 3.5 dice "Utilice elementos de encabezado para transmitir la estructura lógica y utilícelos de acuerdo con la especificación. [Prioridad 2]"

Y la especificación dice (extracto): "Las secciones deberían iniciarse con los elementos de encabezamiento HTML (H1-H6)."

Si nos atenemos a que en la especificación se precisa H1 y a que - si se entienden los titulares como estructura - NO debería haber un H2 si no hay un H1 (y así sucesivamente). La respuesta es que es obligatorio poner un H1.

Y si nos pasamos la especificación por el forro y sacamos el sentido común... ¿tú no crees necesario un H1?. Jo, yo lo veo claro, de hecho a mi lo que me jode es NO poder poner más de un H1 si ya has utilizado el H1 para el título de la web.

Toda estás discusiones se acabarán según el borrador de XHTML 2.0, en el que los números de los encabezados se eliminan y sólo queda la etiqueta &lt;H&gt;, y ya se encargará el navegador de otorgarle la importancia (y lo hará dependiendo de la estructura de la página).

eRNieB

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.

Veamos, yo no lo escondería "a pelo", es decir que si tiene que estar está y si no no lo ponemos.

Y si lo escondes para utilizar alguna técnica de reemplazo de imágenes CUIDADO!! ... visibility:hidden SIEMPRE. Con display:none JAWS no leerá el encabezado y se puede perder su contenido.

bueno, perdona por lo críptico de la respuesta, no podía entretenerme más :)

no soy capaz de imaginarme ninguna página en la que no haga falta al menos un encabezado con el nombre del site o la sección en que estás, creo que es el mínimo que hay que ofrecer. el que haya páginas auditadas sin él... pues eso, lo mismo que hablábamos antes sobre las auditorías y lo fiables que son.

en cuanto a oacultarlo hay maneras de hacerlo que no vayan en detrimento de la accesibilidad, como jugar con la altura y el padding o sacarlo fuera del viewport.

cbp

WCAG 1.0, punto 3.5

Correcto caballero. Sin embargo, ¿y si no quieres ponerle titulo? Por ejemplo porque es un portal vertical, o incluso por exigencias del cliente (y referiendonos en este caso a la home page tan solo). ¿Si se oculta si que es accesible, ¿o no?

De todas formas yo creo haber visto alguna web auditada que no tenia H1 en la homepage, si en las otras.

Es lo que comentaba: encuentro ciertas cosas un tanto subjetivas.

Se agradece CBP ;)

Saludos,
eRNieB

WCAG 1.0, punto 3.5

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