Introducción

Es imperativo que para el rediseño del Bachillerato a distancia de la Universidad Nacional Autónoma de México (B@UNAM) se consideren los parámetros de accesibilidad para poner este programa al alcance de todos: todos los países, todos los bolsillos, todas las edades y todas las capacidades.

La Organización Mundial de la Salud (2021), en su informe mundial sobre la discapacidad, señala que cerca de 15 % de la población mundial cuenta con alguna discapacidad y esta cifra va al alza debido al envejecimiento de la población. Un problema importante es que su acceso a las TIC se reduce, debido a la falta de accesibilidad web.

Hoy en día, en el contexto de distanciamiento social, la brecha digital acentúa las desigualdades sociales y margina a quienes están fuera de la red y su diseño convencional. La accesibilidad web, más allá de ser un requerimiento en la creación de nuestras asignaturas, es una extensión de nuestra visión para mejorar y garantizar el acceso a la educación.

El propósito de este artículo es describir los aspectos considerados para el diseño accesible de la nueva generación de asignaturas B21 de B@UNAM, con base en los parámetros de accesibilidad de la W3C (2020).

Desarrollo

¿En qué consiste la accesibilidad en sitios web?

La tecnología de Inclusión o tiflotecnología permite que cualquier persona, con o sin discapacidad navegue sin equipo adicional, donde quiera que esté, ya sea en una computadora o un dispositivo móvil, con solo el uso del teclado y de un asistente de voz (Collado & Giménez, 2017).

Uso de tipografías y colores accesibles en asignaturas de B@UNAM 2021

En total se han diseñado 12 asignaturas. Sin embargo, a lo largo de este artículo se presentan dos ejemplos puntuales: Evolución y biodiversidad y Apreciación estética, para demostrar cómo es que se aplicaron los parámetros de accesibilidad web de la W3C (2020) y hablar sobre el proceso creativo y la aplicación final.

Tipografía

Para la elección de las familias tipográficas, se consideró el aspecto más importante de todos: la legibilidad. Se usaron fuentes consistentes en su estructura serif y san serif: Poppins, Roboto Slab, PT Sans. Estas pueden apreciarse en la Tabla 1.

Tabla 1. Tipografías accesibles

El puntaje mínimo para ser accesible son 18 pts y, en pixeles, 14 px (Contrast Checker, 2017), por lo que se manejaron esos tamaños. El objetivo principal de la elección de las familias tipográficas fue evitar al máximo el ruido visual y mantener un estilo sencillo y minimalista, ya que Fisher (2018) afirma que deben evitarse las tipografías “de especialidad”. Estas son caligráficas, cursivas o demasiado saturadas de detalles o adornos.

Estructura y navegación

La maquetación de las asignaturas se realizó priorizando la sencillez y el orden, con el fin de que la navegación fuese intuitiva y visualmente atractiva. Por ello se juega con los ritmos, dejando algunas partes del texto a una columna y otras a dos, lo cual aporta dinamismo visual y nos evita tener un bloque de texto visualmente pesado o complicado de leer. La dimensión de las imágenes y videos sigue esa misma lógica: los recursos multimedia se manejan en tamaños preferentemente grandes (a 80 % de la pantalla), con el fin de que sean mejor percibidos y jueguen un papel importante en la maquetación. Esto se puede observar en las imágenes 2, 3, 4, 5, 6, 7 y 9.

Tratamiento del color

Rudolf Arnheim (2002) comenta diversas teorías sobre la relación forma-color y concluye que la forma se refiere al control intelectual, mientras que el color genera una experiencia esencialmente emocional.

Al momento de pensar en las paletas de color, es justo eso lo que nos preguntamos: ¿qué experiencia emocional es deseable que experimente el usuario-alumno? Parte de esa experiencia se construye por la forma, sí, pero es el color el que le dará ese “toque”, la personalidad a cada asignatura, para despertar el interés del usuario. Albers (1996) habla sobre cómo su interacción incide en nuestra percepción, por lo que un mismo color puede percibirse de maneras diferentes de acuerdo con los colores que lo rodean. Por ejemplo: un amarillo puede verse cálido junto a un azul y verse frío junto a un anaranjado. Por ello, se seleccionaron los colores para las paletas de color tomando en cuenta la interacción que se daría entre ellos, ya que este aspecto también influirá en la experiencia del usuario: puede ser molesto o incómodo navegar en un sitio que tiene colores que se repelen entre sí, en vez de contrastar armónicamente. Más allá de considerar la relación emocional o conceptual de las paletas de color con respecto a la asignatura, también se pensó en la experiencia en sí. La experiencia de usuario al momento de navegar por la asignatura, es decir, la funcionalidad. Aquí es donde entra en juego la accesibilidad.

Cada asignatura tiene su propia paleta de color, tomando en cuenta los ratios de contraste accesibles (Campoverde Molina, 2019), consultados en WebAIM (2021a). Además se consideró la pauta 2.3 de la W3C (2020) para la selección de colores.

Asignatura 1. Evolución y biodiversidad

El color es unos de los aspectos más relativos cuando estamos diseñando. No solo en la forma en que aparece según los diferentes dispositivos debido a la calidad de la pantalla, su resolución o la gestión, sino que también porque cada persona percibe el color de forma diferente, algo que realmente debemos tener más en cuenta al diseñar, ya que es un tema fundamental si queremos cuidar la accesibilidad de nuestra web. Cuando decimos que cada persona ve el color de una forma diferente, no nos referimos al hecho de que algunas personas son capaces de distinguir más tonalidades de color que otras o si sabemos distinguir el verdadero color de un objeto. Nos referimos a que existe un porcentaje de la población que tiene una alteración de origen genético, que les hace distinguir de una forma diferente los colores, en comparación a lo que podríamos considerar como usual (W3C, 2010).

Para esta asignatura en particular aplicamos una gama de colores fríos combinados con tonalidades claras: el contraste de los colores fríos está relacionado con las actitudes de introspección, seriedad, y al mismo tiempo originan sensaciones de relajación y tranquilidad. Según la cromoterapia, los colores cálidos son estimulantes y los colores fríos son calmantes (Padrini & Lucheroni, 2016).

Decidimos usar estos colores (Figura 1) ya que la asignatura habla acerca de la biodiversidad, el planeta, ecosistemas, la Tierra, evolución. Los colores verdes (#AAFCCE, #69A1A) evocan a la naturaleza, las plantas, flores, flora, mismos que combinados con los colores azules (#436E99, #03284F) que representan los mares, el cielo, las nubes, el agua, hacen una fusión perfecta dando como resultado una paleta de colores que sea representativa de Evolución y biodiversidad, tomando en cuenta los parámetros de evaluación de contraste de colores accesibles de la Web Content Accessibility Guidelines (W3C, 2020).

Asignatura 2. Apreciación estética

Edwards (2006) en su libro El color señala lo complicado que resulta hablar del color desde su significado simbólico, ya que varía en diferentes culturas. En la creación de esta paleta se tomó como punto de partida el color rojo por su carga simbólica hacia lo pasional y dejando de lado su connotación violenta (cosa que también menciona Edwards en su análisis simbólico del color rojo). Se tuvo como resultado una paleta de tonalidades análogas del rojo. La intención de estos matices era acercarse a lo pictórico: inspirado en la imaginería de los retratos de la realeza, específicamente en la obra de Franz Xaver Winterhalter (1864) y los interiores del palacio de Versalles, recordando el impacto que puede producir la contemplación de estas obras. La referencia a “lo pasional” se da por el aspecto emocional y sensible implícito en el acto de la creación y la apreciación artística y estética.

Los colores utilizados son tres (Figura 8), y se utilizan en mayor o menor medida de acuerdo con su jerarquía como primario, secundario o terciario:

1. #B94B4D es el color primario, un color rojo grisáceo para que no sea demasiado agresivo a la vista. Este color representa lo pasional y la belleza (Edwards, 2006).
2. #740856 es el color secundario, un violeta que se vira a los tonos rojizos, es análogo al color primario y contrasta ligeramente con él por su temperatura más fría. Este color representa la élite y el poder (Edwards, 2006). Recordemos que el arte siempre ha estado a merced del poder, esto es algo que Gombrich (1997) resalta cuando dice que el arte siempre sirve a un fin en específico.
3. #BD5200 es el color terciario, un naranja oscuro, es análogo al color primario y a diferencia del secundario, éste es un contraste cálido. Este color representa la percepción, lo corpóreo y la frivolidad o lo dionisiaco (Edwards, 2006).

Conclusiones

Estamos viviendo una situación crítica. El coronavirus cambió abruptamente nuestras vidas: estar en línea es ya una necesidad para todos. Si dejamos fuera, aunque sea a algunos, estaríamos reproduciendo las barreras de aprendizaje que nuestra sociedad ya tenía. Esta no es solo una necesidad surgida a partir de esta crisis sanitaria: la pandemia solo dejó en evidencia los problemas que ya estaban ahí. Nuestra convicción por incluir a todos responde a una necesidad de compartir y acceder al conocimiento en nuestra sociedad del conocimiento (Krüger, 2006) y es también el deber que tenemos como institución educativa. El uso de los principios y pautas de accesibilidad en conjunto con la teoría, psicología e interacción del color, permitieron la creación de asignaturas con personalidad propia.

El diseño web trata sobre solucionar problemas de funcionalidad para el usuario (W3C, 2021a). Se amplía el panorama de necesidades y dificultades cuando se toman en cuenta las de aquellos que tienen problemas visuales o capacidades diferentes, pero esto no debe ser visto por nosotros como otro requisito más que cumplir, sino como un reto por mantener interesante nuestro sitio web, al tiempo de abrir las puertas a todo el mundo.