Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a hablar de la importancia de ofrecer estilos alternativos en una página web.
Si se les pregunta a los usuarios de la Web cómo es una página web “buena”, probablemente la mayoría pensará en un diseño visual atractivo, con colores armónicos, tipografías modernas y animaciones, muchas animaciones. Y no les faltaría razón. Pero ¿qué pasa cuando este diseño, pensado para la mayoría, no funciona para todos?
A las páginas web acceden miles de millones de usuarios, muchos de ellos con necesidades, preferencias y contextos de uso diferentes. En especial, las personas con discapacidad muchas veces experimentan problemas, barreras, al navegar por las páginas web.
Por ejemplo, este artículo del prestigioso periódico The New York Times tiene un importante problema de contraste en el título del artículo y en la entradilla. [P] Una persona sin discapacidad seguramente leerá con algunos problemas el título y la entradilla. Pero una persona con discapacidad visual o discapacidad cognitiva quizás sea incapaz de leerlo y entenderlo.
Este problema es muy fácil de resolver.
Los diseñadores web del periódico The New York Times podrían simplemente añadir un fondo semitransparente al título y a la entradilla que aumentase el contraste entre el texto y la fotografía de fondo.
¿Y esto cómo se hace? Seguramente pensarás que es difícil o requiere mucho tiempo y por eso no lo han hecho. Bueno, en realidad, en lo que he tardado en sacarme un moco de la nariz he añadido el código necesario para resolver este problema.
Y entonces, ¿por qué no lo han hecho? Bueno, podemos pensar en muchas razones, pero por mi experiencia, normalmente, el propietario o el diseñador del sitio quiere que su sitio web se vea exactamente de una forma concreta, aunque eso sea negativo para muchos usuarios.
La solución a esta situación es sencilla, podemos diseñar nuestro sitio web con un estilo principal y con todas las mierdas que queramos, aunque nos estemos pegando un tiro en el pie.
Pero a la vez, también debemos ofrecer estilos alternativos para desarrollar una web verdaderamente universal y robusta.
Los estilos alternativos son versiones de nuestra hoja de estilos principal que ofrecen una experiencia de usuario diferente. No son un sitio web nuevo, sino una adaptación del mismo contenido. Los más comunes son:
Estilo oscuro: para reducir la fatiga visual en entornos con poca luz o por preferencia personal.
Estilo de alto contraste: para usuarios con baja visión.
Estilo texto grande: para usuarios con baja visión.
Estilo daltonismo: que ajusta la paleta de colores para garantizar que la información se perciba correctamente.
Estilo de lectura: que elimina elementos superfluos como menús y publicidad para concentrarse en el contenido principal.
Estilo para impresión: elimina elementos superfluos como menús y adapta el contenido al tamaño de una hoja de papel.
Hoy en día, muchos sitios web ofrecen algunos de estos estilos alternativos. Por ejemplo, en mi sitio web sobre accesibilidad web ofrezco una opción de configuración que permite que el usuario seleccione un estilo que se adapte mejor a sus necesidades: el estilo principal, dos estilos de alto contraste (amarillo sobre negro y verde sobre negro), colores de bajo contrate y estilos con diferentes tipos de letra.
Aquí tenemos otro ejemplo, la web de La Moncloa, que por defecto aparece con el modo claro, pero que tiene una opción para cambiar al modo oscuro.
¿Y cómo se ofrecen los estilos alternativos en un sitio web? Existen varias formas, en el vídeo “CSS: definición y uso de estilos alternativos” te explico una forma que se puede emplear en Mozilla Firefox, de forma nativa, y en otros navegadores web con alguna extensión. Pero en la mayoría de los casos, tendrás que proporciona un selector de estilos como el que hemos visto en la web de La Moncloa.
Sobre el estilo para impresión te recomiendo los siguientes vídeos. Por un lado, te recomiendo que veas el vídeo “CSS: hoja de estilo para impresión”, del estudiante Samuel López Brufal. En este vídeo se enseña a crear un CSS correcto para imprimir las páginas web.
Muchos diseñadores no optimizan las páginas web para impresión, lo que genera confusión al imprimir.
Samuel propone los siguientes consejos para una correcta hoja de estilo para impresión:
Diseño adaptativo para impresión.
Uso de tonos blancos y negros (o colores originales si es necesario).
Incluir las URLs visibles para referencia posterior.
Y aplicar filtros CSS para mejorar los resultados.
En el vídeo de Samuel también se explica que se deben evitar las divisiones en tablas y listas con las siguientes propiedades de CSS: page-break-inside, page-break-before y page-break-after.
En realidad, estas propiedades de CSS están obsoletas y en su lugar se deben emplear las propiedades break-after, break-before y break-inside.
El tema de evitar las divisiones en tablas y listas lo tienes desarrollado con más profundidad en los siguientes vídeos. “CSS: cómo controlar los puntos de corte cuando se imprime una página”, parte 1 y parte 2. Y con esto finaliza este vídeo en el que te he explicado la importancia de los estilos alternativos en las páginas web.
Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.
Muchas gracias por tu atención.
