Accesibilidad en el rediseño de las asignaturas de B@UNAM

Revista mexicana de bachillerato a distancia

Experiencias

Accesibilidad en el rediseño de las asignaturas de B@UNAM

Ana María Romero, Claudia Elizabeth Torres Aguirre

Accessibility in the redesign of B@UNAM courses

Resumen

Cuando los sitios y herramientas web están bien diseñados y codificados, las personas con discapacidad pueden utilizarlos. Según la Organización Mundial de la Salud (Organización Mundial de la Salud [OMS], 2021) hay más de mil millones de personas viven en todo el mundo que viven con alguna forma de discapacidad. Sin embargo, en la actualidad muchos sitios y herramientas están desarrollados de tal manera que presentan diversas barreras de accesibilidad que dificultan o imposibilitan su uso por parte de algunas personas.

El Bachillerato a distancia de la Universidad Nacional Autónoma de México (B@UNAM) asume el compromiso y el deber de llevar la educación y conocimiento a todos sin distinción. A través de su Laboratorio de arte y tecnología, se ha dado a la tarea de diseñar sitios web accesibles considerando aspectos técnico-gráficos como la diagramación de contenidos, el uso de tipografías legibles, así como colores y formas para lograr una composición visual armónica y legible.

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 Bachillerato a Distancia UNAM, con base en los parámetros de accesibilidad de la W3C (2019). Como ejemplo, se describe el proceso creativo detrás de dos asignaturas: Evolución y biodiversidad y Apreciación estética.

Palabras clave: accesibilidad web, interacción, funcionalidad, usuario, color, B@UNAM.

Abstract

When web sites and tools are well designed and coded, people with disabilities can use them. According to the World Health Organization (OMS, 2021) more than a billion people live with some kind of disability in the world. However, today many sites and tools are developed in such a way that they present various accessibility barriers that make their use difficult or impossible for some people.

B@UNAM, the online high school of Universidad Nacional Autónoma de México, is committed to bringing education and knowledge to all, without distinction. Through its art and technology lab, it designs accessible websites by considering technical and graphic aspects such as content layout, the use of legible fonts, as well as colors and shapes, in order to achieve a harmonious and legible visual composition.

The purpose of this article is to describe the aspects that were considered in order to achieve the accessible design of the new generation of B@UNAM courses, following W3C accessibility parameters. As an example, we describe the creative process of two courses: Evolution and biodiversity and Aesthetic appreciation.

Keywords: web accessibility, interaction, functionality, user, color, B@UNAM.

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.

Poppins Roboto Slab PT Sans
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).

Figura 1. Paleta de colores de la asignatura Evolución y biodiversidad
Figura 2. Página principal de la asignatura Evolución y biodiversidad
Figura 2. Página principal de la asignatura Evolución y biodiversidad
Figura 3. Tablas, check box de la asignatura Evolución y biodiversidad
Figura 3. Tablas, check box de la asignatura Evolución y biodiversidad
Figura 4. Evaluación
Figura 4. Evaluación
Figura 5. Acordeón
Figura 5. Acordeón
Figura 6. Tabla de contenido
Figura 6. Tabla de contenido
Figura 7. Cards
Figura 7. Cards

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).
Figura 8. Paleta de colores de la asignatura Apreciación estética
Figura 8. Paleta de colores de la asignatura Apreciación estética
Figura 9. Paleta de colores aplicada a diferentes elementos de la asignatura Apreciación estética
Figura 9. Paleta de colores aplicada a diferentes elementos de la asignatura Apreciación estética

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.

Referencias

Albers, J. (1996). Interacción del color. Alianza Forma.

Arnheim, R. (Segunda edición 2002.) Arte y percepción visual. Alianza Forma.

Campoverde Molina, M. A. (2019). La accesibilidad web. Un reto en el entorno educativo ecuatoriano. Revista Científica y Tecnológica UPSE. #2016, 3(3), 90-98.

Center for Persons with Disabilities Utah State University. (s. f.). Contrast Checker. Web Accessibility in mind. https://webaim.org/resources/contrastchecker

Collado, S., &; Giménez, J. A. (2017). Tiflotecnología. https://bit.ly/3kuTYpS

Contrast Checker. (2017) Acart Communications. https://contrastchecker.com

Edwards, B. (2006). El color. Ediciones Urano.

Fisher, C. (2018, Octubre.) Diseño Contenido Accesible: Tipografía, Estilo de Fuente y Estructura. Envatotuts. https://bit.ly/3b3QHuw

Gombrich, E. H. (1997) La historia del arte. Phaidon.

Krüger, K. (2006). El concepto de “Sociedad del Conocimiento”. Revista Bibliográfica de Geografía y Ciencias Sociales. http://www.ub.edu/geocrit/b3w-683.htm

Organización mundial de la Salud. (2021). Informe mundial sobre la discapacidad. https://bit.ly/37RO0dG

Padrini, F., Lucheroni, M. (2016). Cromoterapia: Cómo curarse con los colores. De Vecchi.

W3C. (2021a). Web Accessibility Initiative. [WAI]. https://bit.ly/3r4AgnB

W3C. (2021b, 13 marzo). Resumen de los estándares de accesibilidad de W3C. https://bit.ly/3q1ORih

W3C. (2020, octubre 2020). Introducción a las Pautas de Accesibilidad para el Contenido Web. (WCAG). https://bit.ly/3bOvWm0

W3C. (2010). Convulsiones, Comprender la Pauta 2.3. Contenido Web. WCAG. https://bit.ly/2MDYsyc

WebAIM [web accessibility in mind]. (2021) Contrast Checker. https://bit.ly/3r1Tn1q

Winterhalter, F. X. (1864). Retrato de Carlota de Bélgica. Wikiart, Visual Art Encyclopedia. https://bit.ly/2MwAEfp

Winterhalter, F. X. (1841) Louise of Orléans. Wikimedia Commons. https://bit.ly/3dTaFKm

Enlaces refback

  • No hay ningún enlace refback.


Revista Mexicana de Bachillerato a Distancia, año 13, núm. 25, septiembre-febrero de 2021, revista semestral, editada por la Universidad Nacional Autónoma de México, domicilio: Ciudad Universitaria, Alcaldía Coyoacán, C.P. 04510, Ciudad de México, México, a través de la Coordinación de Universidad Abierta, Innovación Educativa y Educación a Distancia (CUAIEED) y la Dirección de B@UNAM & MOOC, domicilio: edificio de la CUAIEED, primer piso, Circuito Exterior, Ciudad Universitaria, Alcaldía Coyoacán, C.P. 04510, Ciudad de México, México, teléfono 5556 228808, correo electrónico: gvadillo@unam.mx. Editora responsable: Guadalupe Vadillo Bueno, Reserva de Derechos al Uso Exclusivo núm. 04-2010- 120613024600-203, ISSN 2395-9800, ISSN-E 2007-4751. Responsable de la última actualización de este número: Víctor Manuel Martínez López, Coordinación de Universidad Abierta, Innovación Educativa y Educación a Distancia (CUAIEED), edificio CUAIEED, primer piso, Circuito Exterior, Ciudad Universitaria, Alcaldía Coyoacán, C. P. 04510, Ciudad de México, México. Fecha de última modificación: 28 de febrero de 2021. Los artículos de este portal solo pueden reproducirse con fines no lucrativos, sin mutilaciones, citando la fuente completa y la dirección electrónica. Los artículos firmados son responsabilidad exclusiva de los autores.