Stanmx

Buscando la accesibilidad

La estructura de tu sitio sin CSS

Publicado en accesibilidad el 08/07/05 a las 03:12 am

Como ocurre con los hogares cuando se va la luz, que pasar?a con tu sitio si se fuera el CSS, ?Seria navegable?, ?Entendible?, ?Accesible?

Que es lo primero que vez cuando a tu sitio le desactivas la hoja de estilo en tu Firefox, ?El men??, ?El titulo?, ?El contenido o alguna publicidad de adsense?

Lo mas probable es que te encuentres con algo mas o menos ordenado o con algo completamente fuera de lugar, que inmediatamente querr?s volver a activarle la hoja de estilo y olvidar ese mal sue?o.

Pero la realidad es que debe de haber un orden, pero ?cual es el orden que debe llevar un sitio en su estructura XHTML/HTML? ?Existe alg?n orden oficial como por ejemplo:

Ejemplo 1:

  1. Titulo
  2. Menu
  3. Contenido

Ejemplo 2:

  1. Menu
  2. Titulo
  3. Contenido

Ejemplo 3:

  1. Contenido
  2. Titulo
  3. Men?

Y pueden existir mas combinaciones, pero lo cierto es que son estas las que mas he visto, ahora bien, ?Cual de los 3 ejemplos es mas accesible? los 3, el primero, el segundo o ninguno.

Siempre que se habla de accesibilidad se habla de los accesos a las opciones con el teclado, de la letra legible, de los colores, si es valido esto, si no es valido aquello, pero muchas veces se olvidan de lo que es en si la estructura sola del sitio.

Hay sitios que se acreditan etiquetas y mas etiquetas de validaci?n, sin embargo en cuanto les quitas la hoja de estilo, son como un rompecabezas reci?n vaciado de su caja.

Desde mi punto de vista la estructura mas recomendable es la del ejemplo 1. ?Por que?

  • Lo primero que vemos para identificar una revista, un articulo o en nuestro sitio es el Titulo, pues este nos dir? en un rengl?n de que va la revista o el articulo (existen t?tulos que no tienen nada que ver con el articulo, sin embargo esa ya es otra cuesti?n de accesibilidad) o el nombre y slogan del sitio.
  • Lo segundo en un sitio, es el Men?, que opciones tiene, donde esta el men? si me pierdo, suele suceder (y me ha ocurrido varias veces que hay sitios plagados de tanta publicidad, que no sabes si lo que sigue enseguida del Titulo es el men? o un anuncio publicitario) en este punto tambi?n es recomendable un mapa del sitio si este es muy extenso.
  • Por ultimo y el vital de todo sitio, el Contenido, que es lo que realmente nos interesa leer y opinar.

Que otros detalles le puedes agregar a cada uno de estos, pues bien, si en tu hoja de estilo, lo primero que aparece es el men?, bien puedes esconder el titulo al principio, para que sea el men? el que ocupe ese lugar, y con un background posterior resaltar el nombre del titulo en imagen, esto para no perder la identidad de tu sitio al momento de visualizarlo sin CSS.

Al men? puedes agregar las ya recomendados por todos, accesos directos con el teclado, para permitir una forma mas r?pida de acceder a tus opciones a los usuarios de tu sitio.

El contenido, simplemente utilizar las etiquetas adecuadas y no hacer un mal uso de ellas. Llenar los title de tus enlaces y los alt de tus im?genes.

As? que en conclusi?n: Es importante el orden que le demos a nuestro sitio con las hojas de estilo, sin embargo es igual de importante el orden que le demos a nuestra estructura XHTML/HTML.

Post relacionados

10 comentarios

Pablo Viojo

dijo el 08/07/05 a las 01:44 pm

Dentro del contenido tambien es importante si tengo alguna columna con agregados, secciones, etc, como es habitual en los blogs, colocarla bien dentro del XHTML independientemente de la posici?n relativa en el dise?o de la p?gina

Mc

dijo el 08/07/05 a las 01:55 pm

Muy buena reflexi?n sobre la estructuraci?n de la informaci?n de los sitios web.

Yo uso un esquema diferente de los que presentas.
1)Titulo
2)Contenido
3)Men?

Porqu? uso esta estructura?
Pues tras reflexionar personalmente sobre el tema, consider? que la estructura "habitual" de Titulo,Men?,Contenido, ten?a algunos problemas de Accesibilidad, sobretodo con el uso de navegodres hablados.
En primer lugar, si no se dipone de saltos de navegaci?n, en cada cambio de p?gina el usuario es obligado a releer todo el men? para llegar hasta el Contenido que supuestamente est? buscando (de ah? que haya tenido que recargar la p?gina).
La opcion de "paginar" el Contenido, para esta estructuraci?n, ser?a muy ?til, pero casi que imposible de realizar.
Si pensamos en un blog, y en una estructuraci?n T-M-C(titulo,menu,contenido) con saltos de navegaci?n al contenido, el usuario podr? saltar al contenido tan pronto como se cargara la p?gina, sin tener que leer obligatoriamente el men?.
Ahora bien, en la mayor?a de los casos, estaremos obligando al usuario a saltar el men? porque realmente lo que busca es el contenido.
Por esta raz?n opt? por implementar una estructuraci?n (T-C-M) en mi blog, y reforzar el men? con saltos de contenido, de tal manera que el usuario pudiera saltar en cualquier momento del contenido al men?, que supuestamente es un salto que se realizar? en menor numero de ocasiones que el anteriormente explicado.

Esta estructuraci?n que uso es reflexi?n m?a y no se si es utilizada en otros lugares, pero supongo que el razonamiento que segu? es v?lido y por tanto la opci?n es ?ptima.

Un saludo enorme a todos!

Gonzalo

dijo el 08/07/05 a las 06:48 pm

La opci?n no. 1 es la que utilizo para estructurar mi sitio y la que considero m?s accesible; la ?nica diferencia es que, adem?s del t?tulo, tambi?n le agrego la descripci?n, de manera que queda as?:
1. T?tulo
2. Descripci?n
3. Men?
4. Contenido

[NiRVaNa]

dijo el 08/07/05 a las 09:46 pm

Yo creo que es algo a lo que se le da muy poca importancia, ya que siempre se le pone enfasis en la parte visual y dejamos mucho de lado la parte estructural del sitio.

Creo que les habr? pasado (al igual que a mi), que cuando empezaron a crear paginas webs los hacian con algun editor grafico y usando tablas, y metiamos cualquier combinaci?n con tal de que quede bien, es casi lo mismo.

Lo que pasa con algunas personas que recien se estan metiendo en el tema del CSS, es que para armar cajas usan float: y asi tiene que estar muy limitado el armado estructural del sitio, en cambio usando position:absolute se puede organizar de distintas maneras el contenido. Por ejemplo en mi blog, yo lo tengo: Titular - Menu - Contenido - Opciones varias (Blogroll, Ult. Com., etc.)

Suerte, medio largo el comentario, no?

Diego

dijo el 09/07/05 a las 01:28 pm

A lo dicho por Mc, agregaria un parrafo invisible al cargar el CSS (display: none;) que informe de porque se est? viendo el documento sin estilos, como por ejemplo:

Esta viendo este sitio sin su dise?o porque tu navegador no lo soporta o lo tiene desactivado, sin embargo el contenido es accesible desde cualquier dispositivo. Si es posible, te recomiendo que analices actualizar tu navegador.

Ademas, el no lo dijo pero supongo que esta implicito, el link al menu, seria muy util que tenga una access key (esto lo aprendi de aquella semana que use lynx muy seguido).

Rodrigo

dijo el 13/07/05 a las 03:10 am

Agregando a lo que dijo Diego, yo generalmente adem?s de poner una leyenda (oculta), tambi?n agrego un enlace que hace "saltar" directamente al contenido del sitio. Es ideal cuando primero se despliega la botonera (en formato de listas) y el contenido despu?s. De esta manera, con un solo click o un golpe de teclado el usuario puede leer el contenido directamente.

Stan

dijo el 13/07/05 a las 03:17 am

Interesantes comentarios se han generado en esto post, lo que principalmente me ha llado la atencion son las sugerencias que se han realizado a lo largo de los comentarios.

Creo que es vital como desarrollador llevar a la practica este tipo de desarrollo para asi acostumbrarnos a aplicarlo a nuestros proyectos.

Espero en unos meses mas tener este sitio al 100% con estas recomendaciones.

Lamentablemente existen aun muchos desarrolladores que no tienen idea de este tipo de desarrollo.

Kolin

dijo el 14/12/05 a las 09:32 am

Justin

dijo el 26/11/06 a las 12:30 pm

Hi again people , thank you for this completely cool page - We have found precisely the things we were looking for. Thanks! http://www.liveactiondvd.info

Ulya

dijo el 26/11/06 a las 04:01 pm

Hi
Just wanted to thank you guys for uploading such a smooth loading, informative site.
http://www.myfavouritemusic.info

Aporta tu comentario

Tu Email no sera publicado.

Opcional.