1. Objetivos

• Aprender a emplear estilos alternativos en una página web.
• Aprender a crear un estilo para la versión impresa de una página web.
• Aprender a crear un estilo que mejore la accesibilidad de un sitio web.

2. Recursos

¿Cómo puedo seleccionar un estilo alternativo?

• Alternative Style Sheets¹: explicación sobre los estilos alternativos y su sintaxis en CSS.
• Alternative Style: Working With Alternate Style Sheets²: no todos los navegadores poseen una opción de menú que permite seleccionar un estilo alternativo, en esta página se explica cómo hacerlo mediante JavaScript.

¿Cómo puedo hacer un estilo para que se use cuando se imprime una página web? ¿Qué cambios tengo que realizar respecto a un estilo en pantalla?

• What is a Printer-Friendly Web Page?³: proporciona algunos consejos para crear la versión impresa de un sitio web.
• I totally forgot about print style sheets⁴: consejos para crear una hoja de estilo CSS para la versión impresa de una página web.
• CSS Media Types Create Print-Friendly Pages⁵: explica como implementar una hoja de estilo CSS para la versión impresa de una página web.
• CSS Design: Going to Print⁶: explica cómo crear una hoja de estilo CSS para la versión impresa de un sitio web y ofrece algunos consejos.

¿Qué es la accesibilidad web?

• Accesibilidad Web⁷: información sobre la accesibilidad web de la Universidad de Alicante.
• Introducción a la Accesibilidad Web⁸: introducción a la accesibilidad web del W3C.

¿Cómo se puede mejorar la accesibilidad con CSS?

• 25 reglas para hacer CSS accesibles⁹: 25 consejos para hacer una página web más accesible con CSS.
• CSS Techniques for Web Content Accessibility Guidelines 1.0¹⁰: recomendaciones del W3C para mejorar la accesibilidad a través de CSS.
• Writing CSS with Accessibility in Mind¹¹: consejos para mejorar la accesibilidad a través de CSS.

3. ¿Qué tengo que hacer?

En esta práctica tienes que crear cuatro estilos nuevos para tu sitio web:

• Un estilo para la versión impresa.
• Un estilo que mejore la accesibilidad para personas con baja visión que necesiten alto contraste.
• Un estilo que mejore la accesibilidad para personas con baja visión que necesiten un tipo de letra mayor¹².
• Un estilo que mejore la accesibilidad para personas con baja visión que necesiten tanto alto contraste como un tipo de letra mayor.

Tienes que lograr que el sitio web se imprima correctamente. Para ello no tienes que crear una versión imprimible (una versión especial que genera el servidor web para que sea impresa), sino que tienes que crear una hoja de estilo para impresión para que sea usada cuando se quiera imprimir el sitio web.

También tienes que crear tres hojas de estilo que mejoren la accesibilidad del sitio web para ciertos grupos de usuarios. La accesibilidad web tiene como objetivo lograr que las páginas web sean utilizables por el máximo número de personas, independientemente de sus conocimientos o capacidades personales e independientemente de las características técnicas del equipo utilizado para acceder a la Web.

Si una página web no tiene en cuenta la accesibilidad web, ciertos grupos de usuarios con discapacidad pueden tener dificultades en el uso de algunos elementos de las páginas web:

• Discapacidad visual: las imágenes y los elementos multimedia sin texto alternativo; el tamaño del texto muy reducido; la información transmitida exclusivamente a través del color.
• Discapacidad auditiva: la ausencia de transcripciones y descripciones textuales del audio o de la banda sonora de los vídeos; los textos largos y complejos.
• Discapacidad física: las interfaces de usuario que sólo se pueden utilizar con ratón; los enlaces y controles de formulario muy pequeños.
• Discapacidad cognitiva y neurológica: los textos largos y complejos; la ausencia de imágenes que complementen la información textual; las inconsistencias entre distintas páginas de un mismo sitio web.

Añade a tu sitio web un página web con la declaración de accesibilidad, algo similar a la declaración de accesibilidad de la Universidad de Alicante¹³, de La Moncloa¹⁴ o de AENOR¹⁵. Por ejemplo, la declaración debe incluir una explicación sobre:

• El etiquetado semántico de la página.
• El texto alternativo de las imágenes.
• El correcto uso de los colores.
• La forma de activar la hoja de estilo accesible.
• Y el resto de características de accesibilidad implementadas.

Tienes que hacer que todos los estilos desarrollados para tu sitio web se puedan seleccionar como estilos alternativos desde el navegador web, sin tener que modificar el código fuente de la página.

4. ¿Cómo lo hago?

4.1. Estilo alternativo

Para indicar que se está usando un fichero CSS en una página web se emplea la etiqueta <link />. En una misma página web se pueden indicar varios ficheros CSS que se combinan todos ellos o también se puede indicar de forma que definan estilos alternativos. Los estilos alternativos se pueden definir para un mismo dispositivo o se pueden definir para distintos dispositivos (ordenador, impresora, teléfono móvil y otros). Para definir un dispositivo concreto se emplea el atributo media; si no se indica un dispositivo, el estilo CSS se aplica a todos los dispositivos (equivale a media="all").

Por ejemplo, en el siguiente código se define un estilo CSS que se debe emplear cuando se imprima una página web (media="print") y un estilo que se debe emplear cuando se visualiza en pantalla:

El navegador selecciona automáticamente el estilo definido para la impresora cuando mandamos a imprimir una página web.

Cuando se definen estilos alternativos (rel="alternate stylesheet") para un mismo dispositivo, es necesario indicar un nombre para cada estilo con el atributo title. Pueden existir varias hojas de estilo con el mismo nombre, en cuyo caso se aplicarán todas ellas en conjunto al elegir el nombre que las identifica. Por ejemplo:

En la Figura 1 se muestra como seleccionar un estilo alternativo en Mozilla Firefox a través del menú Ver, Estilo de página.

En la Figura 2 se muestra como seleccionar un estilo alternativo en Microsoft Internet Explorer a través del menú Ver, Estilo.

En CSS existen tres tipos de hojas de estilo:

• Persistente: el atributo rel toma el valor stylesheet y el atributo title no tiene valor. La hoja de estilo se aplica en todas las situaciones.
• Preferida: el atributo rel toma el valor stylesheet y el atributo title tiene un valor. La hoja de estilo se aplica a menos que el usuario elija una hoja de estilo alternativa.
• Alternativa: el atributo rel toma el valor alternate stylesheet y el atributo title tiene un valor. La hoja de estilo se aplica cuando el usuario la selecciona explícitamente; las hojas de estilo alternativas son excluyentes entre sí: sólo se puede aplicar una.

Mucho cuidado: cuando se emplean diferentes hojas de estilo de diferente tipo (persistente, preferida, alternativa), el orden de aparición en el código puede influir en el resultado final de visualización.

4.2. Estilo para impresión

Al crear un estilo para impresión se tienen que tener en cuenta las diferencias que existen entre una pantalla y una hoja de papel:

• La pantalla normalmente es en color, la impresión normalmente es en blanco y negro (escala de grises).
• La página web en la pantalla existe en un contexto (se ha llegado a ella a través de un proceso de navegación), la página web impresa existe de forma independiente.
• La pantalla permite interactuar con la página web, la hoja de papel no permite interactuar.
• La pantalla puede tener diferentes tamaño, la hoja de papel suele tener un único tamaño (A4).

Algunos consejos para crear una versión impresa correcta de un sitio web son:

• Usa unidades de medida absolutas como cm, mm, in, pt o pc.
• Cambia los colores a negro sobre un fondo blanco.
• Usa un tipo de letra serif para el texto principal.
• Cambia el tamaño del texto (mínimo 12pt).
• Destaca los enlaces: utiliza el subrayado y un color diferente.
• Muestra el URL de los enlaces con content y attr().
• Elimina los elementos que no sean esenciales, como las imágenes. Pero a veces las imágenes sí que son muy importantes: elimina las imágenes que sean meramente decorativas, pero las imágenes que transmitan información importante o sean el contenido principal hay que mantenerlas.
• Elimina los elementos de navegación (por ejemplo, la barra de navegación).
• Elimina los elementos dinámicos generados por JavaScript, Java o Flash.
• Incluye el URL de la página.
• Incluye un aviso sobre los derechos de uso (copyright).
• Usa las reglas específicas para impresión, como @page, page-break-before, widows y orphans.
• Y otras cosas que se pueden hacer que debes pensarlas.

4.3. Estilo accesible

CSS ayuda a mejorar la accesibilidad web porque permite separar la estructura y contenido de un documento de su presentación. Esto permite que los documentos estén mejor etiquetados y evita el empleo de ciertas técnicas de diseño que afectan de forma negativa en la accesibilidad de una página web.

Además, la separación de la presentación permite que se puedan ofrecer múltiples presentaciones para un mismo contenido. Un sitio web puede ofrecer varios estilos alternativos diseñados para mejorar la accesibilidad.

Algunos consejos para crear una presentación accesible de un sitio web:

• Desactiva las hojas de estilo: la página web debería tener sentido y debería ser totalmente accesible sin las hojas de estilo.
• No utilices solo el color para transmitir información importante.
• Emplea combinaciones de colores de alto contraste.
• Emplea colores que no supongan un problema para los usuarios con ceguera al color (daltonismo).
• Emplea un tamaño de letra más grande de lo normal.
• Limita la longitud del texto a 80 caracteres por línea.
• Define una separación entre líneas apropiada.
• Define una separación entre párrafos apropiada.
• Alinea el texto a la izquierda o a la derecha, pero no lo justifiques.
• Emplea una maquetación con un orden de lectura apropiado. Asegúrate de que la página tiene sentido cuando se lee de forma lineal.
• Asegura que los enlaces y otros elementos de interacción de una página son claramente distinguibles en todos sus estados: cuando se sitúa el cursor del ratón encima de un enlace, cuando un enlace recibe el foco, etc. Para ello puedes emplear diferentes tipos de letra, diferentes colores u otros mecanismos visuales.
• Elimina las imágenes que sean meramente decorativas del HTML e inclúyelas como imágenes de fondo mediante CSS.
• Añade contenido oculto, por ejemplo enlaces del tipo “salta a”, sólo disponible para los lectores de pantalla.
• Y otras cosas que se pueden hacer que debes pensarlas.

Por ejemplo, el sitio web OER Commons¹⁶ ofrece un panel de opciones que permite cambiar la presentación del sitio web. En la Figura 3 se puede ver la presentación por defecto y en la Figura 4 la presentación accesible en la que se ha mejorado el contraste al utilizar el color blanco sobre negro y se ha aumentado el tamaño del texto un 20 %.

Otro ejemplo de sitio web es mi antigua página personal¹⁷ que ofrece una lista desplegable para seleccionar diferentes estilos alternativos, como se puede ver en la Figura 5 que muestra la presentación por defecto. En Mozilla Firefox se puede visualizar la lista de estilos alternativos, como se puede ver en la Figura 6. Al activar la presentación accesible se aumenta el tamaño del texto y se mejora el contraste de la página al utilizar el color blanco sobre negro; además, también se cambia el color de los enlaces y se destacan mediante una línea de subrayado, como se puede ver en la Figura 7.

Algunas lecturas con consejos para crear un estilo accesible:

• Revisa el artículo “Colorblind Accessibility on the Web - Fail and Success Cases”¹⁸ que muestra diferentes ejemplos que te ayudarán a entender en qué consiste la ceguera al color.
• Utiliza una herramienta como Color Oracle¹⁹ o NoCoffee²⁰ para simular cómo ven tu sitio web los usuarios con diferentes tipos de ceguera al color.
• Revisa el artículo “A guide to color accessibility in product design”²¹ que te explica cómo debes usar el color para mejorar la accesibilidad de una página web.
• Utiliza las herramientas WebAIM Color Contrast Checker²² y WebAIM Link Contrast Checker²³ para verificar que las combinaciones de colores tienen el suficiente contraste.

5. Recomendaciones

La selección del estilo alternativo se tiene que realizar a través de la opción correspondiente en el navegador. En aquellos navegadores que no dispongan de dicha opción no se podrá realizar dicha selección. Una alternativa es utilizar JavaScript para que funcione en cualquier navegador, pero no lo vamos a hacer en esta práctica.

No todos los navegadores ofrecen la opción de seleccionar un estilo alternativo. Por ejemplo, Google Chrome no dispone de esta opción, pero se puede instalar una extensión como Alt CSS²⁴ que añade la opción de seleccionar un estilo alternativo, pero esta opción no funciona cuando se visualiza una página local (file://), sin usar un servidor web (http://). Por tanto, para comprobar la existencia y el uso de los estilos alternativos se recomienda usar el navegador Mozilla Firefox²⁵, que tiene la opción incluida en el propio navegador.

La selección de un estilo alternativo no se conserva al pasar de página. En una próxima práctica veremos cómo mantener el estilo seleccionado con el uso de las cookies.

¿Cómo se puede comprobar el estilo desarrollado para impresión sin tener que imprimir la página web? Hay cinco posibilidades:

1. Puedes añadir un estilo alternativo para la pantalla que haga uso del estilo para impresión. Por ejemplo:
   <link rel="alternate stylesheet" type="text/css" href="print.css" media="screen" 
   title="Estilo para impresión" />
2. Puedes utilizar la opción de Vista preliminar o Vista previa de impresión que ofrecen los navegadores para visualizar en pantalla la forma de imprimir la página web.
3. Puedes imprimir la página a un PDF.
4. Puedes utilizar alguna opción de las herramientas para el desarrollador que incluyen los navegadores web. Por ejemplo, en la Figura 8 se muestra la opción “Emulate CSS media” que permite visualizar cómo se imprime una página web directamente en la pantalla.
5. Puedes utilizar la opción Display Print Styles de la extensión Web Developer²⁶.

¿Cómo debe ser el estilo para impresión? Estudia cómo se comporta la impresión de una página de un periódico como El País. Por ejemplo, el artículo “La web se encuentra bajo amenaza”²⁷ se visualiza en la pantalla del ordenador como se puede ver en la Figura 9 y cuando se imprime como se puede ver en la Figura 10. Al imprimirse el artículo, las barras de navegación, los botones de redes sociales y las barras laterales con información adicional han desaparecido.

Presta atención a las opciones de impresión cuando imprimas una página web. En la Figura 11 se muestran las opciones de impresión en Google Chrome, que incluye la opción de imprimir los gráficos de fondo. En algunos navegadores también existe la opción para imprimir los colores de fondo.

No te olvides de @import²⁸, a veces puede ser muy útil.

Y recuerda: evita la divitis²⁹, la spanmania y la classitis³⁰.

Importante:

• Antes de añadir una etiqueta <div> porque quieres aplicar un estilo desde CSS, párate a pensar si puedes usar alguna de las etiquetas que ya tiene tu página.
• Se recomienda usar el juego de caracteres UTF-8. En las hojas de estilo también se puede indicar el juego de caracteres usado con la instrucción @charset³¹.
• Ten cuidado con los nombres de los ficheros, utiliza únicamente letras del alfabeto inglés y números, no uses espacios en blanco y emplea únicamente minúsculas.
• Ten cuidado con la caché del navegador, consulta una explicación sobre los problemas y soluciones en el artículo “Ayuda:Cómo limpiar la cach锳². Recuerda esto durante toda la asignatura.