Artículo de revisión
Development of an accessible website for the Human Computer Interaction Laboratory of the Catholic University of Cuenca
Desenvolvimento de um portal web acessível para o Laboratório de Interação Humano-Computador da Universidade Católica de Cuenca
Jacqueline Mishel Reina-Alvarado I
mishel98reina@gmail.com
https://orcid.org/0000-0002-1402-4666
Milton Campoverde-Molina II
https://orcid.org/0000-0001-5647-5150
Correspondencia: mishel98reina@gmail.com
*Recibido: 20 de agosto de 2020 *Aceptado: 25 de septiembre de 2020 * Publicado: 30 de octubre de 2020
I. Estudiante de la Carrera de Ingeniería en Sistemas, Universidad Católica de Cuenca, Cuenca, Ecuador.
II. Ingeniero de Sistemas, Docente de la Unidad Académica de Tecnologías de la Información y Comunicación (TIC), Jefatura de Posgrados, Universidad Católica de Cuenca, Cuenca, Ecuador.
Resumen
El Laboratorio Human Computer Interaction (HCI) de la Unidad Académica de TIC de la Universidad Católica de Cuenca ha llevado a cabo una serie de investigaciones, desarrollos y estudios con el trabajo conjunto del responsable del laboratorio, el profesorado colaborador y los estudiantes. El objetivo de la presente investigación es desarrollar una página web accesible para la difusión de los resultados de los proyectos de investigación ejecutados en el Laboratorio HCI; cumpliendo con las recomendaciones de las WCAG 2.1; para que los prototipos de software desarrollados como parte de los proyectos de investigación puedan ser descargados y utilizados libremente por la comunidad educativa. La metodología utilizada es una adaptación de la metodología SCRUM (para la gestión y control del proceso de desarrollo) que se compone de 3 fases: Planificación, Desarrollo y Entrega. En los resultados se establecieron parámetros manuales, utilizando las recomendaciones de las WCAG 2.1 como: definir texto alternativo en cada imagen, estructura de título, contraste de color, los títulos de las páginas, ARIA, caption en tablas, formulario de contacto accesible, etiquetas, categorías de entradas, etc. y plugins. En conclusión, el portal web permite que personas con discapacidad puedan interactuar con su contenido ya sea utilizando lectores de pantalla o haciendo uso de los estilos o tamaños de la letra. Además, la maquetación del portal web se puede adaptar a cualquier dispositivo tecnológico.
Palabras clave: Accesibilidad Web; Laboratorio Human Computer Interaction; Portal Web; WCAG 2.1.
Abstract
The Human Computer Interaction (HCI) Laboratory of the ICT Academic Unit of the Catholic University of Cuenca has carried out a series of researches, developments and studies with the joint work of the head of the laboratory, the collaborating professors and the students. The objective of this research is to develop an accessible web page for the dissemination of the results of the research projects carried out in the HCI Laboratory; complying with the recommendations of the WCAG 2.1; so that the software prototypes developed as part of the research projects can be downloaded and used freely by the educational community. The methodology used is an adaptation of the SCRUM methodology (for the management and control of the development process) which consists of 3 phases: Planning, Development and Delivery. In the results, manual parameters were established, using the recommendations of the WCAG 2.1 such as: defining alternative text in each image, title structure, color contrast, page titles, ARIA, caption in tables, accessible contact form, labels, input categories, etc. and plugins. In conclusion, the web portal allows people with disabilities to interact with its content either by using screen readers or by making use of the font styles or sizes. In addition, the layout of the web portal can be adapted to any technological device
Keywords: Web Accessibility; Human Computer Interaction Laboratory; Web Portal; WCAG 2.1.
Resumo
O Laboratório de Interação Humano-Computador (IHC) da Unidade Acadêmica de TIC da Universidade Católica de Cuenca tem realizado uma série de investigações, desenvolvimentos e estudos com o trabalho conjunto do chefe do laboratório, do corpo docente colaborador e dos alunos. O objetivo desta pesquisa é desenvolver uma página web acessível para a divulgação dos resultados dos projetos de investigação realizados no Laboratório de IHC; cumprir as recomendações das WCAG 2.1; para que os protótipos de software desenvolvidos como parte dos projetos de pesquisa possam ser baixados gratuitamente e utilizados pela comunidade educacional. A metodologia utilizada é uma adaptação da metodologia SCRUM (para a gestão e controle do processo de desenvolvimento) que é composta por 3 fases: Planejamento, Desenvolvimento e Entrega. Parâmetros manuais foram estabelecidos nos resultados, utilizando as recomendações das WCAG 2.1 como: definir texto alternativo em cada imagem, estrutura do título, contraste de cores, títulos das páginas, ARIA, legenda nas tabelas, formulário de contato acessível, rótulos , categorias de ingressos, etc. e plugins. Em conclusão, o portal permite que pessoas com deficiência interajam com seus
conteúdo usando leitores de tela ou fazendo uso de estilos ou tamanhos de fonte. Além disso, o layout do portal pode ser adaptado a qualquer dispositivo tecnológico.
Palavras-chave: Accesibilidad Web; Laboratorio Human Computer Interaction; Portal Web; WCAG 2.1.
Introducción
Hoy en día todos somos usuarios y creadores de contenidos TIC de alguna forma, y debemos asumir la responsabilidad de crear contenidos que puedan ser usados por todos (incluidas las personas con discapacidad) (Moreno, Martínez, & González, 2014). La Web hoy en día sin duda es indispensable en muchos aspectos de nuestra vida como: educación, empleo, gobierno, negocios, atención médica, entretenimiento, etc. Por lo tanto, todo sitio web debe ser accesible para brindar un acceso universal con igualdad de oportunidades para personas con diferentes capacidades (Committee on the Rights of Persons with Disabilities, 2008). Cuando se habla de accesibilidad web, se refiere a un diseño web que permita a personas con y sin discapacidad percibir, comprender, navegar e interactuar con la web (Henry, 2019).
Las Pautas de Accesibilidad al Contenido Web 2.0 (WCAG 2.0) también declaradas como ISO/IEC 40500: 2012, es un estándar mundial en donde se establecen las directrices para un diseño accesible. Las recomendaciones de las WCAG 2.0 hacen que el contenido web sea más accesible para las personas con discapacidades. Al cumplir estas recomendaciones una amplia gama de personas con discapacidades podrá hacer uso de la web como: personas con discapacidades visuales, auditivas, físicas, del habla, cognitivas, del lenguaje, del aprendizaje y neurológicas. Las WCAG 2.0 está organizada en 4 principios (perceptible (P), operable (O), comprensible (C) y robusto (R)), 12 directrices, 61 criterios de éxito, 3 niveles de conformidad (A, AA y AAA) y también técnicas suficientes y recomendables para desarrollar y evaluar los contenidos web (Chisholm, y otros, 2008).
El Ecuador al igual que otros países en el año 2014 adopta la norma ISO/IEC 40500:2012 y para su cumplimiento se crea el reglamento técnico RTE INEN 288 “Accesibilidad para el contenido web”, que entró en vigencia el 8 de agosto de 2016 (Instituto Ecuatoriano de Normalización, 2016). Este reglamento establece: 1) aplica a los contenidos web publicados en los sitios web del sector público y privado que presten servicios públicos; 2) se debe satisfacer por completo el nivel de conformidad AA, establecido en la Norma NTE INEN-ISO/IEC 40500 hasta agosto de 2020. Esta norma es una traducción exacta de WCAG 2.0 (Instituto Ecuatoriano de Normalización, 2016).
Por otro lado, según el Consejo Nacional para la Igualdad de Discapacidades en el Ecuador existen 481.392 personas con discapacidad registradas en el Ministerio de Salud Pública (Consejo Nacional para la Igualdad de Discapacidades, 2020). Estas estadísticas permiten concienciar sobre la importancia que conlleva un acceso universal a los contenidos de la web. La Web brinda oportunidades para que las personas puedan interactuar, intercambiar información, investigar acceder a recursos en línea, etc. Por consiguiente, una Web accesible mejora la eficiencia, muestra responsabilidad social, cumple las disposiciones legislativas, aumenta la audiencia, mayor indización en los motores de búsqueda, cumplimiento de estándares web, brinda un aporte social, entre otros.
En un mundo donde la tecnología e Internet se utilizan como medios de difusión de información el Laboratorio Human Computer Interaction (HCI) de la Unidad Académica de TIC de la Universidad Católica de Cuenca ha llevado a cabo una serie de investigaciones, desarrollos y estudios. Sin embargo, el Laboratorio HCI no cuenta con un sitio web para la difusión de los resultados de los proyectos de investigaciones ejecutados y en ejecución. Además, el Laboratorio HCI no tiene un repositorio para la publicación de los prototipos de software que han sido resultados de algunos objetivos de los proyectos de investigación, para que la comunidad haga uso y puedan beneficiarse con estos recursos.
El objetivo de esta investigación es desarrollar una página web accesible para la difusión de los resultados de los proyectos de investigación ejecutados en el Laboratorio HCI; cumpliendo con las recomendaciones de las WCAG 2.1; para que los prototipos de software desarrollados como parte de los proyectos de investigación puedan ser descargados y utilizados libremente por la comunidad educativa. Para lo cual, se ha definido la siguiente pregunta de investigación:
- ¿El portal web desarrollado para el Laboratorio HCI cumple con la norma NTE INEN-ISO/IEC 40500:2012 WCAG 2.1 con un nivel de conformidad AA?
En la estructura del contenido de este artículo se presenta lo siguiente: Sección 2 conceptos relacionados de la investigación, Sección 3 se describen los resultados de trabajos de investigación relacionados. En la Sección 4 se detalla la metodología utilizada para realizar esta investigación. En la Sección 5 se presentan los resultados de accesibilidad del portal web desarrollado para el Laboratorio HCI de la Universidad Católica de Cuenca. En la Sección 6 se plantean las conclusiones de acuerdo a los resultados obtenidos.
Desarrollo
Conceptos Relacionados
Normativa de accesibilidad web en el Ecuador
El 28 de enero de 2014 se publicó en el Registro Oficial N.º 171 la aprobación de la norma NTE INEN-ISO/IEC 40500 “Tecnología de la información - Directrices de accesibilidad para el
contenido web del W3C (WCAG) 2.0 (ISO/IEC 40500:2012, IDT)” (Instituto Ecuatoriano de Normalización, 2014). El 10 de febrero de 2016, el Servicio Ecuatoriano de Normalización publicó el Reglamento Técnico Ecuatoriano RTE INEN 288 “Accesibilidad para el contenido web” (Instituto Ecuatoriano de Normalización, 2016). Este reglamento entró en vigor el 8 de agosto de 2016 y establece dos disposiciones transitorias sobre el plazo para cumplir con el reglamento y la norma:
- TRANSITORIA PRIMERA. Hasta el 8 de agosto de 2018, todos los sitios web ecuatorianos que presten un servicio público debían ser accesibles WCAG 2.0 nivel A.
- TRANSITORIA SEGUNDA. Hasta el 8 de agosto de 2020, todos los sitios web ecuatorianos que presten un servicio público deben ser accesibles WCAG 2.0 nivel AA.
Además, el Reglamento Técnico Ecuatoriano RTE INEN 288 “Accesibilidad para el contenido web” emite un Régimen de Sanciones: “el propietario del sitio web que incumpla con lo establecido en este reglamento técnico recibirá las sanciones previstas en la Ley No. 2007- 76 del Sistema Ecuatoriano de la Calidad, Ley Orgánica de Comunicación y demás leyes vigentes”.
La Figura 1 muestra los criterios de éxito y el grado de cumplimiento de cada principio WCAG 2.1. Para que el sitio web cumpla con WCAG 2.1, se deben cumplir todos los requisitos de cumplimiento.
Figura 1. Mapa de las WCAG 2.1.
Fuente: (Campoverde-Molina, Luján-Mora, & Valverde García, 2020)
WCAG 2.1 amplía WCAG 2.0 al agregar 17 nuevos criterios de éxito, 1 directriz y un par de adiciones a la sección de cumplimiento. Este enfoque aditivo ayuda a dejar en claro que los sitios que cumplen con WCAG 2.1 también cumplen con WCAG 2.0 (Kirkpatrick, Connor, Campbell,
Cooper , 2018). Se ha tomado en consideración la WCAG 2.1, ya que se puede considerar como un superconjunto que integra a las WCAG 2.0, así cumpliendo con la normativa NTE INEN-ISO/IEC 40500:2012 del Ecuador.
Sistemas de Gestión de Contenido – WordPress
CMS son las siglas de Content Management System, es un software desarrollado y diseñado para proporcionar una plataforma para facilitar la administración y gestión de contenido de cualquier sitio web. WordPress con el tiempo se ha convertido en un CMS, que se puede utilizar para crear casi cualquier tipo de proyecto (WP Avanzado, 2020). Además, nos ayuda a crear sitios web accesibles para que todas las personas puedan acceder en igualdad de condiciones a los contenidos. Afortunadamente, la red y la comunidad de WordPress proporcionan una gran diversidad de herramientas que puede usar para responder a las necesidades de las personas discapacitadas, como temas, Plugins y widgets (Tellado, 2014).
Herramientas de evaluación de la accesibilidad web
Estas herramientas comprueban si el contenido publicado en la Web cumple con los estándares de accesibilidad; las cuales son programas de software o servicios en línea. Además, ayudan a determinar los problemas de accesibilidad de forma preliminar. Por lo tanto, se puede usar en todas las fases del diseño y desarrollo de un sitio web para ir corrigiendo errores de accesibilidad (Abou-Zahra, Steenhout, & Keen, 2017). Sin embargo, una herramienta de este tipo nunca puede sustituir la revisión que realiza un experto en accesibilidad web, por lo que se deben emplear como un primer paso, pero no el único (Abou-Zahra, Steenhout, & Keen, 2017). Existen múltiples herramientas de revisión (o evaluación) de la accesibilidad web (Eggert & Abou-Zahra, 2014). A continuación, se definen las herramientas de evaluación automática de la accesibilidad web utilizadas en esta investigación:
WAVE. Esta herramienta identifica los errores de accesibilidad con las pautas de accesibilidad para el contenido web (WCAG). También, ayuda en la evaluación manual del contenido web (WebAIM, 2001). Además, usa las pautas de la Sección 508 y WCAG 2.1 con un nivel de conformidad A y AA.
- En WAVE, en la barra lateral se indican los errores de accesibilidad detectados mediante iconos rojos que deben ser corregidos. Los iconos amarillos son denominados como alertas, ya que se debe verificar y en ciertos casos resolver. Los íconos verdes indican características de accesibilidad, estas permitirían mejorar la accesibilidad. Otros iconos como azules, identifican elementos de estructura como niveles de encabezado, listas navegación entre otros. Por último, donde reconoce ARIA, son los iconos morados, se utiliza para presentar información relevante de accesibilidad.
- ACCESSMONITOR. Esta herramienta permite revisar una página web publicada en internet o subir o pegar directamente su código HTML. Además, revisa los puntos de verificación uno a uno y ofrece una puntuación del 1 al 10 (Fundación para la Ciencia y la Tecnología, 2011). También, evalúa con las WCAG 2.1 y sus niveles de conformidad A, AA, AAA. Los resultados son presentados en una tabla que especifica los errores en 3 categorías: aceptable, revisar manualmente y no aceptable por cada nivel de conformidad A, AA y AAA.
- TAW. Es una herramienta automática en línea para analizar la accesibilidad de los sitios web. Esta herramienta fue creada teniendo como referencia las pautas de accesibilidad para el contenido web (WCAG 2.0) del W3C. Luego de la revisión genera un informe resumido de los errores y advertencias del sitio web analizado (Fundación CTIC Technology Center, 2000).
- CSS Validator Service. Es una herramienta online que permite validar mediante URL las Hojas de Estilo en Cascada (CSS) y documentos (X)HTML con hojas de estilo (Le Hégaret & Smeman, 2001).
- Markup Validation Service. Es una herramienta online, en inglés, que permite validar mediante URL, upload de fichero o inclusión directa de código (Oskoboiny, 1997). Como resultado de la evaluación presenta las advertencias y errores de accesibilidad encontrados.
SCRUM
SCRUM es un marco de proceso que es utilizado para gestionar el trabajo en productos complejos.
SCRUM no es un proceso, técnica o método definitivo. Más bien, es un marco dentro del cual puede emplear varios procesos y técnicas. El marco de SCRUM consta de SCRUM Teams y sus roles, eventos, artefactos y reglas asociados. Cada componente dentro del marco tiene un propósito específico y es esencial para el éxito y el uso de SCRUM. SCRUM demostró ser especialmente eficaz en la transferencia de conocimiento iterativa e incremental. SCRUM ahora se usa ampliamente para productos, servicios y la administración de una organización (Schwaber & Sutherland, 2017).
Trabajos Relacionados
En el año 2019 (Campoverde-Molina & Salas-Paucar, 2019), realizaron el análisis de accesibilidad de los sitios web empresariales de la provincia de Loja con las WCAG 2.0 con un nivel de conformidad AA. Los autores evaluaron 46 portales web empresariales que usan el dominio .com y el dominio .com.ec. De cada portal web se seleccionó las 4 páginas más representativas evaluando un total de 184 páginas web. La evaluación de la accesibilidad web de las páginas de inicio se realizó con las herramientas en línea TAW y AccessMonitor. La evaluación de las 138 páginas web restantes fueron analizadas con TAW, WAVE, CSS Validation Services y Markup Validation Service. En los resultados se determina que el nivel de accesibilidad de las páginas web es bajo y requiere corregir errores para cumplir con el reglamento técnico ecuatoriano RTE INEN 288. Los autores concluyen que los sitios web deben ser reestructurados considerando las recomendaciones de las WCAG 2.0 con un nivel de conformidad AA.
En el artículo publicado por Campoverde-Molina, Luján-Mora y Valverde (2019) se revela el análisis de accesibilidad de 55 portales web de las universidades y escuelas politécnicas del Ecuador. El objetivo de esta investigación fue evaluar la accesibilidad de los portales web de las universidades y escuelas politécnicas del Ecuador con la norma NTE INEN-ISO/IEC 40500:2012, con un nivel de conformidad AA y analizar su cumplimiento normativo. El análisis se realizó con las herramientas de evaluación de la accesibilidad web en línea Examinator, AccessMonitor, TAW y TENON. Los autores analizaron una muestra de 220 páginas web. En los resultados determinaron que los sitios web analizados no cumplen con la norma NTE INEN-ISO/ IEC 40500:2012. Concluyendo que las universidades deben emprender proyectos de accesibilidad web para su cumplimiento normativo.
En el artículo publicado por Campoverde-Molina, Luján-Mora y Valverde (2019) se realizó el análisis de accesibilidad de los documentos electrónicos (PDF, Word, Excel y PowerPoint) publicados en los portales web de una muestra de instituciones educativas de las ciudades de Cuenca, Guayaquil y Quito, Ecuador. El propósito de esta investigación fue identificar los errores de accesibilidad en los documentos electrónicos publicados en los portales web de las instituciones educativas. El análisis de los documentos PDF se realizó con Adobe Acrobat XI y el análisis de los documentos de Word, Excel y PowerPoint con el Comprobador de accesibilidad de Microsoft Office 2016. Los autores analizaron una muestra de 463 documentos PDF (442), Word (14), Excel (3) y PowerPoint (4). En los resultados determinaron que los documentos electrónicos analizados tienen problemas de accesibilidad. Los autores concluyeron que los documentos electrónicos analizados no cumplen con la ISO/IEC 40500: 2012. Por lo tanto, no se cumple con la normativa de accesibilidad en el Ecuador que requiere que los contenidos publicados en los sitios web del sector público y privado sean accesibles.
En el artículo publicado por Naranjo Villota, Guaña Moya, Acosta Varga y Muirragui Irrazábal, (2020), tiene como objetivo analizar la accesibilidad de los sitios web de los Institutos de Educación Superior acreditados en Ecuador e identificar los errores más frecuentes a los cuales se enfrentan las personas con algún tipo de discapacidad utilizando las WCAG 2.1. La evaluación fue realizada a 45 portales web de Institutos de Educación Superior. El análisis se realizó con 12 herramientas de evaluación Color Oracle, Photosensitive Epilepsy Analysis Tool, AccessMonitor, Achecker, Color Contrast Analyzer for Sketch, Examinator, TAW, Tenon, NoCoffe, Proof Setup in Adobe, Analizador web, WAVE. Como resultado del estudio se observa que existen serios problemas de accesibilidad en la mayoría de los sitios web evaluados. Lo que dificulta a la interacción de la web con los usuarios especialmente para las personas con discapacidad y de edad avanzada. Concluyendo que es necesario concienciar a los diseñadores y desarrolladores web que la accesibilidad web no depende de la legislación de un país, sino de la experiencia del usuario en el espacio digital.
Metodología
Esta metodología es una adaptación de la metodología ágil SCRUM que se compone de 3 fases: Planificación, Desarrollo y Entrega. En la Figura 2 se observa el marco de trabajo ágil utilizado para gestionar y controlar el proceso de desarrollo de software y cumplimiento de la accesibilidad.
Figura 2. SCRUM adaptado a la metodología de 3 fases.
Fuente: Elaboración propia.
A continuación, se describen las fases implementadas en esta investigación:
- Fase de Planificación. En esta fase se determinan los roles de SCRUM, se presentan los requerimientos de los usuarios y se especifica las tareas para cada requerimiento denominado Sprint Backlog (pila de tareas), con su estimación y prioridad.
- Fase de Desarrollo. En esta fase se determina la estructura de la página web, el desarrollo de los Sprints (iteraciones) e implementación de las mismas.
- Fase de Entrega. En esta fase se realiza la evaluación de accesibilidad, la retrospectiva y los entregables del proyecto de desarrollo.
Resultados
Fase de Planificación
El Laboratorio HCI de la Universidad Católica de Cuenca, se encuentra ubicado en la Vargas Machuca 6-50 y Juan Jaramillo, en ciudad de Cuenca – Ecuador. El objetivo de esta investigación es desarrollar una página web accesible para la difusión de los resultados investigativos realizados en el Laboratorio HCI. Los actores que intervienen en la fase de planificación son descritos en la Tabla 1 y los requisitos del proyecto en la Tabla 2.
Roles de SCRUM
Product Owner. Es el usuario que comprende la lógica de negocio y analiza las relaciones costo-beneficio. Además, determina el nivel de aceptación del producto que se entregará, los requisitos del proyecto y asigna las prioridades a la lista de tareas. En esta investigación el Product Owner es el responsable del Laboratorio HCI de la Universidad Católica de Cuenca.
SCRUM Master y equipo de desarrollo. El SCRUM Master es el responsable del proceso SCRUM y lidera el equipo de desarrollo. Además, asiste a las reuniones y se asegura de que los objetivos y tareas se logren dentro del tiempo establecido. El equipo de desarrollo es el responsable del diseño, implementación y verificación del sistema. En la Tabla 1 se determinan los roles de los integrantes del equipo SCRUM.
Tabla 1. Roles de SCRUM.
Fuente: Elaboración propia.
Product Backlog
El product backlog detalla los requerimientos funcionales y no funcionales en el desarrollo del portal web accesible para la ejecución de cada sprint. Cada elemento del product backlog tiene una cantidad estimada de esfuerzo necesaria para completar cada actividad y estas se ejecutan de acuerdo a las prioridades definidas por el propietario del producto. Los rangos de prioridad y estimación son definidos a continuación:
- Prioridad: Alta, Media y Baja
- Estimación: entre 1 y 2 semanas
En la Tabla 2 se presentan los requerimientos para el desarrollo de la página web accesible como historias de usuario, número de Sprints, período de tiempo para la creación, además se especifican las tareas de acuerdo a su prioridad y estimación.
Tabla 2: Product Backlog.
|
ID. HU |
Historias de usuario (HU) |
Tarea |
Prioridad |
Estimación |
||
|
|
|
|
Definición del alcance |
Alta |
|
|
|
|
|
Gestión de |
Levantamiento de |
Alta |
|
|
|
|
01 |
Requerimientos |
|
|||
|
|
Requerimientos |
|
|
|||
|
1 |
|
Negociación de los |
Alta |
1 semana |
||
|
|
|
|||||
|
|
|
Requerimientos |
||||
|
|
|
|
|
|
||
|
|
|
Gestión de |
Definir la maquetación |
Alta |
|
|
|
|
02 |
Arquitectura de software |
Alta |
|
||
|
|
Componentes |
|
||||
|
|
|
Diseño |
Alta |
|
||
|
|
|
|
|
|||
|
|
|
|
Implementar la Capa de |
Alta |
|
|
|
|
|
|
presentación: Diseñar la interfaz |
|
||
|
|
|
|
|
|
||
|
2 |
03 |
Gestión de Proyectos |
Implementar la Capa de Negocio: |
Alta |
2 semanas |
|
|
Construcción de funcionalidad |
||||||
|
|
|
|
|
|
||
|
|
|
|
Ejecución de pruebas del prototipo |
Media |
|
|
|
|
|
|
Corrección de errores |
Baja |
|
|
|
|
|
|
Implementar la Capa de presentación: |
Alta |
|
|
|
|
|
|
Diseñar la interfaz |
|
||
|
|
|
Gestión del |
|
|
||
|
3 |
04 |
Implementar la Capa de Negocio: |
Alta |
1 semana |
||
|
Repositorio |
Construcción de funcionalidad |
|||||
|
|
|
|
|
|||
|
|
|
|
Ejecución de pruebas del prototipo |
Media |
|
|
|
|
|
|
Corrección de errores |
Baja |
|
|
|
|
|
|
Implementar la Capa de presentación: |
Alta |
|
|
|
|
|
|
Diseñar la interfaz |
|
||
|
|
|
Gestión de |
|
|
||
|
4 |
05 |
Implementar la Capa de Negocio: |
Alta |
1 semana |
||
|
Publicaciones |
Construcción de funcionalidad |
|||||
|
|
|
|
|
|||
|
|
|
|
Ejecución de pruebas del prototipo |
Media |
|
|
|
|
|
|
Corrección de errores |
Baja |
|
|
|
|
|
|
Implementar la Capa de presentación: |
Alta |
|
|
|
|
|
|
Diseñar la interfaz |
|
||
|
|
|
|
|
|
||
|
5 |
06 |
Página de Contacto |
Implementar la Capa de Negocio: |
Alta |
1 semana |
|
|
Construcción de funcionalidad |
||||||
|
|
|
|
|
|
||
|
|
|
|
Ejecución de pruebas del prototipo |
Media |
|
|
|
|
|
|
Corrección de errores |
Baja |
|
|
|
|
|
|
Implementar la Capa de presentación: |
Alta |
|
|
|
|
|
|
Diseñar la interfaz |
|
||
|
|
|
|
|
|
||
|
6 |
07 |
Página Inicio |
Implementar la Capa de Negocio: |
Alta |
1 semana |
|
|
Construcción de funcionalidad |
||||||
|
|
|
|
|
|
||
|
|
|
|
Ejecución de pruebas del prototipo |
Media |
|
|
|
|
|
|
Corrección de errores |
Baja |
|
|
|
|
|
|
Implementar la Capa de presentación: |
Alta |
|
|
|
|
|
|
Diseñar la interfaz |
|
||
|
|
|
|
|
|
||
|
7 |
08 |
Página Nosotros |
Implementar la Capa de Negocio: |
Alta |
|
|
|
Construcción de funcionalidad |
|
|||||
|
|
|
|
|
|
||
|
|
|
|
Ejecución de pruebas del prototipo |
Media |
|
|
|
|
|
|
Corrección de errores |
Baja |
1 semana |
|
|
|
|
|
Implementar la Capa de presentación: |
Alta |
||
|
|
|
|
|
|||
|
|
|
|
Diseñar la interfaz |
|
||
|
|
|
|
|
|
||
|
8 |
09 |
Página Personas |
Implementar la Capa de Negocio: |
Alta |
|
|
|
Construcción de funcionalidad |
|
|||||
|
|
|
|
|
|
||
|
|
|
|
Ejecución de pruebas del prototipo |
Media |
|
|
|
|
|
|
Corrección de errores |
Baja |
|
|
|
|
|
|
Implementar la Capa de presentación: |
Alta |
|
|
|
|
|
|
Diseñar la interfaz |
|
||
|
|
|
|
|
|
||
|
9 |
10 |
Página Eventos |
Implementar la Capa de Negocio: |
Alta |
1 semana |
|
|
Construcción de funcionalidad |
||||||
|
|
|
|
|
|
||
|
|
|
|
Ejecución de pruebas del prototipo |
Media |
|
|
|
|
|
|
Corrección de errores |
Baja |
|
|
|
|
|
Gestión de Plugins |
Implementar |
Alta |
|
|
|
10 |
11 |
Configurar |
Media |
3 semanas |
||
|
Accesible |
||||||
|
|
|
Ejecución de pruebas |
Media |
|
||
|
|
|
|
|
Fuente: Elaboración propia.
Fase de Desarrollo
En esta fase se determina la estructura y organización del contenido de la página web accesible.
En la Figura 3 se muestra la estructura del menú de navegación de la página web.
Figura
3.
Estructura Portal Web Accesible - Laboratorio HCI.
Fuente: Elaboración propia.
Definir la maquetación
La maquetación del portal web fue definida a través de la evaluación de la accesibilidad de las 5 páginas inicio de las universidades más ranqueadas en la página de la Webometrics. Teniendo en cuenta, que las páginas de inicio son las más importantes en un portal web, ya que permite navegar a los usuarios hacia el resto de sus sitios. A continuación, se enlistan las universidades con sus links de acceso de las páginas de inicio para la evaluación:
- Harvard: https://www.harvard.edu/
- Stanford: https://www.stanford.edu/
- Massachusetts Institute of Technology: https://www.mit.edu/
- University of California Berkeley: https://www.berkeley.edu/
- University of Washington: https://www.washington.edu/
Las páginas de inicio de las universidades seleccionadas fueron evaluadas utilizando herramientas de evaluación automáticas. Las herramientas automáticas que se utilizaron para la evaluación de la accesibilidad web son: WAVE (WCAG 2.1 nivel A y AA), CSS Validation Service (CSS level 3 + SVG) y Markup Validation Service (HTML) con un formato de codificación de caracteres utf-8. En la Tabla 3 se presentan los errores y advertencias de accesibilidad encontrados en las páginas de inicio de las universidades seleccionadas.
Tabla 3. Análisis de accesibilidad de las páginas principales de los 5 mejores rankings web.
|
|
WAVE |
CSS Validation Service |
Markup Validation |
|
||||
|
Universidad |
Service (HTML) |
TOTA |
||||||
|
|
|
|
|
|||||
|
Errore |
Advertenci |
Errore |
Advertencia |
Errores |
Advertencias |
L |
||
|
|
||||||||
|
|
s |
a |
s |
s |
|
|||
|
|
|
|
|
|||||
|
California |
5 |
8 |
11 |
389 |
13 |
15 |
441 |
|
|
Berkeley |
||||||||
|
|
|
|
|
|
|
|
||
|
Harvard |
0 |
18 |
15 |
134 |
20 |
18 |
205 |
|
|
Massachusetts |
|
|
|
|
|
|
1800 |
|
|
Institute of |
0 |
3 |
758 |
981 |
37 |
21 |
||
|
Technology |
|
|
|
|
|
|
|
|
|
Stanford |
5 |
24 |
3 |
202 |
40 |
35 |
309 |
|
|
Washington |
1 |
66 |
7 |
521 |
10 |
19 |
624 |
|
Fuente: Elaboración propia.
Según los resultados obtenidos, los portales web analizados no cumplen con las WCAG y sus niveles de conformidad. Sin embargo, para la maquetación del sitio web accesible se tomó como referencia a la universidad de Harvard que tiene menos errores y advertencias en la evaluación de la accesibilidad web con herramientas automáticas seleccionadas.
Arquitectura de software
Esta investigación utiliza la arquitectura de desarrollo de software en 3 capas: 1) capa de presentación, 2) capa de negocio y 3) capa de datos. El sitio web es desarrollado utilizando WordPress, el cual usa un lenguaje de programación PHP para procesar páginas dinámicas. En la Figura 4 se describe la interacción de cada uno de los componentes de la arquitectura de software.
Figura 4. Arquitectura de software.
Fuente: Elaboración propia
Diseño
CMS. Considerando el analizador de W3Techs en donde se determina que WordPress encabeza la categoría con un 38,6% de uso, consecutivamente Shopify con un 3,0% y Joomla con 2,2 % (Q-Success DI Gelbmann GmbH, 2009). Por tal razón para el desarrollo del portal web accesible se utiliza WordPress.
Componentes. WordPress tiene 3 componentes esenciales que potencian el desarrollo de un sitio web: temas, plugins y widgets. Además, algunos de sus plugins o temas ya traen incorporados mecanismos de accesibilidad.
Tema. Los temas permiten mejorar la apariencia de un sitio web, además contienen una estructura predeterminada que se usa como plantilla inicial. En sí un tema, es un conjunto de archivos que producen una interfaz gráfica con un diseño unificado de un sitio web. El tema que se utilizó en el sitio web propuesto es Eimear (WebMan Design, 2020), el cual es flexible, semántico y de fácil uso. Además, es un tema que incluye los mecanismos de accesibilidad e inclusión, según su documentación pasa los requisitos de la WCAG 2.1 nivel AA y la Sección También, el área de contenido y tipografía optimiza la legibilidad y responsive que se adapta a cualquier dispositivo, es multilingüe (idioma RTL) y compatible para la navegación con el teclado.
Plugins. Un plugin es un fragmento de código o extensión que puede transformar y perfeccionar las principales características de un sitio web en WordPress. También, puede proporcionar funciones personalizadas a los desarrolladores de sitios web para cumplir con las necesidades de los usuarios. Los Plugins utilizados en el desarrollo del portal web son:
- Elementor permite crear y editar un sitio web mediante la técnica de arrastrar y soltar en los bloques de contenido.
- Flamingo permite el almacenamiento de los mensajes a través del formulario de contactos.
- reCaptcha permite diferenciar a los seres humanos de las computadoras para evitar que robots envíen spam mediante los formularios de contacto.
Widget. Esta herramienta ayuda a integrar ciertas funcionalidades avanzadas en determinados espacios de una página web, la diferencia entre plugin y widget es que son módulos que reservan
espacios en el sitio web para ser implementados. En el sitio web se utilizó widgets para la Galería que muestran un conjunto de imágenes con ciertas animaciones, Google Maps para referenciar la ubicación, Icon que permite la representación de ciertos símbolos de un texto o palabra y Social Icons son iconos de redes sociales para acceder con un click a ellos.
Finalmente, el sitio web fue construido utilizando cada uno de los elementos descritos en el diseño. En el sitio web se implementaron los 11 Sprints para el cumplimiento de los requisitos funcionales y no funcionales. En cuanto a la accesibilidad se establecieron parámetros manuales, utilizando las recomendaciones de las WCAG 2.1 como: definir texto alternativo en cada imagen, estructura de título, contraste de color, los títulos de las páginas, ARIA, caption en tablas, formulario de contacto accesible, etiquetas, categorías de entradas y un plugin denominado “WP Accessibility Helper (WAH)” para expandir la lista desplegable de herramientas de cambios; el aumento y disminución del tamaño de fuente, restablecer el estilo, modo contraste: rojo, blanco, verde, celeste, rojo, naranja, amarillo o morado, imágenes grises, sin estilo, cursor grande, monocromático, eliminar animaciones, espacio entre letras, modo sepia, resaltar enlaces y descripción de imágenes. El sitio también tiene implementado la traducción de texto a voz para usuarios con discapacidad visual. Todos estos criterios ayudan a las personas con y sin discapacidad a interactuar con el sitio web. En la Figura 5 se puede ver una captura de pantalla del sitio web implementado para el Laboratorio HCI de la Universidad Católica de Cuenca
Figura 5. Página principal del portal web del Laboratorio HCI.
Fuente: Elaboración propia.
El portal web del Laboratorio HCI podrá ser utilizado por estudiantes, personal docente y administrativo de la Universidad Católica de Cuenca, instituciones anexas, públicas o privadas. Este portal debe ser alimentado constantemente con nueva información, la misma que antes de ser publicada en el sitio web debe cumplir con criterios de accesibilidad. Por lo tanto, con esto se busca siempre mantener la accesibilidad en los contenidos publicados en el portal web.
Fase de Entrega
- Evaluación de la accesibilidad del sitio web desarrollado del Laboratorio HCI
Luego del desarrollo del sitio web accesible se procedió a evaluar la accesibilidad de cada una de sus páginas web. En necesario aclarar que, las WCAG 2.1 han absorbido a las WCAG 2.0, por lo tanto, al cumplir con las WCAG 2.1 se está cumpliendo también con las WCAG 2.0. La evaluación de la accesibilidad de las páginas web se realizó con las herramientas en línea AccessMonitor, CSS Validation Services, TAW, WAVE y Markup Validation Service. En la Tabla 4 se representan los resultados de la evaluación de accesibilidad utilizando la herramienta automática WAVE.
Tabla 4. Resultados de la evaluación de la accesibilidad utilizando WAVE con las WCAG 2.1 y los niveles de conformidad A y AA.
 |
Fuente: Elaboración propia.
De igual forma, se realizó la evaluación de las páginas web utilizando TAW con las WCAG 2.0 y un nivel de conformidad A, AA y AAA. También, se ha evaluado el código CSS con CSS Validator Service y el código HTML con Markup Validation Service. En la Tabla 5 se presentan los resultados de la evaluación.
Tabla 5. Resultados de la evaluación de accesibilidad utilizando TAW con las WCAG 2.0 y los niveles de conformidad A, AAyAAA
 |
Fuente: Elaboración propia.
Finalmente, se realizó la evaluación con AccessMonitor para determinar el nivel de accesibilidad del sitio web en una escala del 1 al 10 con las WCAG 2.1 y los niveles de conformidad A, AA, AAA. En los resultados se evidenció que se tiene un valor promedio de 7 sobre 10 del portal web.
Luego de haber realizado la retrospectiva con los ajustes correspondientes de cada sprint determinado en el análisis, se tiene como entregable del proyecto el sitio web implementado, en la Figura 6 se presenta una captura de pantalla de las tablas de los resultados de cada proyecto de investigación publicados en el sitio web.
Figura 6. Página de publicaciones del portal web del Laboratorio HCI.
Fuente: Elaboración propia.
Conclusiones
Cumpliendo con el objetivo de la investigación se diseñó y desarrolló un portal web accesible utilizando el CMS WordPress y las recomendaciones de la WCAG 2.1 con un nivel de conformidad AAA. Este portal web tiene como propósito difundir los resultados de los proyectos de investigaciones ejecutados y en ejecución del Laboratorio HCI de la Unidad Académica de Tecnologías de la Información y la Comunicación de la Universidad Católica de Cuenca. Además, publicar los prototipos de software desarrollados para que puedan ser descargados y utilizados libremente.
El sitio web permite que las personas con y sin discapacidad puedan acceder e interactuar con su contenido. Las personas con discapacidad visual podrán seleccionar un párrafo o palabra con el cursor del mouse automáticamente se activa un lector de pantalla, es compatible con el software NVDA y lectores de pantalla que son predeterminados en el navegador. Las personas con baja visión podrán aumentar o disminuir el tamaño de letra, cambios de contraste, tiene modos monocromáticos o sepia. Las personas con discapacidad auditiva pueden tener una visibilidad legible y entendible de las letras y textos concretos.
La evaluación de accesibilidad del sitio web utilizando herramientas automáticas con las recomendaciones de las WCAG 2.1 con un nivel de conformidad A, AA y AAA, se obtiene una calificación de 7 sobre 10. Sin embargo, hay que considerar que “no podemos comprobar todos los aspectos de accesibilidad automáticamente. También, se requiere juicio humano” (Abou-Zahra, Steenhout, & Keen, 2017)
Referencias
1. Abou-Zahra, S., Steenhout, N., & Keen, L. (2017). Selección de herramientas de evaluación de accesibilidad web. Recuperado el 03 de 09 de 2020, de https://cutt.ly/tglufF0
2. Campoverde-Molina, M., & Salas-Paucar, D. (2019). Accesibilidad en los sitios web empresariales de la provincia de Loja. Análisis preliminar. Dominio de las Ciencias, 5(3), 212-237.
3. Campoverde-Molina, M., Luján-Mora, S., & Valverde García, L. (2020). Empirical studies on web accessibility of educational websites: A systematic literature review. IEEE Access, 91676 - 91700.
4. Campoverde-Molina, M., Luján-Mora, S., & Valverde-García, L. (2019). Accessibility analysis of electronic documents published in educational web portals: the Ecuadorian case. EDULEARN19 Procedimientos, 4686-4696.
5. Campoverde-Molina, M., Luján-Mora, S., & Valverde-García, L. (2019). Análisis de accesibilidad web de las universidades y escuelas politécnicas del Ecuador aplicando la norma NTE INEN ISO/IEC 40500:2012. RISTI, 53-68.
6. Chisholm, W., Slatin, J., White, J., Caldwell, B., Cooper, M., Vanderheiden, G., & Guarino Reid, L. (2008). Web content accessibility guidelines (WCAG) 2.0. Recuperado el 07 de 09 de 2020, de https://cutt.ly/GgluhRS
7. Committee on the Rights of Persons with Disabilities. (2008). Convención sobre los derechos de las personas. Recuperado el 22 de 08 de 2020, de https://cutt.ly/Jgly6Qv
8. Consejo Nacional para la Igualdad de Discapacidades. (2020). Estadísticas de discapacidad. Recuperado el 23 de 08 de 2020, de https://cutt.ly/ugly9Dn
9. Eggert , E., & Abou-Zahra, S. (2014). Recuperado el 21 de 08 de 2020, de https://cutt.ly/RgxLUiy
10. Fundación CTIC Technology Center. (2000). TAW. Recuperado el 09 de 10 de 2020, de https://cutt.ly/mglugsa
11. Fundación para la Ciencia y la Tecnología. (2011). AccessMonitor. Recuperado el 05 de 10 de 2020, de https://cutt.ly/cgly5xJ
12. Henry, S. (2019). Introduction to Web Accessibility. Recuperado el 21 de 08 de 2020, de https://cutt.ly/8gluuFw
13. Instituto Ecuatoriano de Normalización. (2014). Tecnología de la información - Directrices de accesibilidad para el contenido web del W3C (WCAG) 2.0. Recuperado el 07 de 09 de 2020, de https://cutt.ly/fglugPr
14. Instituto Ecuatoriano de Normalización. (2016). Reglamento técnico ecuatoriano RTE INEN 288 “accesibilidad para el contenido web”. Recuperado el 03 de 09 de 2020, de https://cutt.ly/8glud6m
15. Kirkpatrick, A., Connor, J., Campbell, A., & Cooper , M. (2018). Pautas de accesibilidad al contenido web (WCAG) 2.1. Recuperado el 02 de 09 de 2020, de https://cutt.ly/Fgludni
16. Le Hégaret, P., & Smeman, S. (2001). CSS Validation Service. Recuperado el 06 de 10 de 2020, de https://cutt.ly/NgluraJ
17. Moreno, L., Martínez, P., & González, Y. (2014). Guía para elaborar documentación digital accesible. Recomendaciones para Word, PowerPoint y Excel de Microsoft office 2010 (Vol. 5). CENTAC. Recuperado el 23 de 08 de 2020, de https://cutt.ly/eglut9a
18. Naranjo-Villota, D., Guaña-Moya, J., Acosta-Varga, P., & Muirragui-Irrazábal, V. (2020). Evaluación de la accesibilidad web en institutos acreditados de educación superior del Ecuador. Espacios, 41(04), 5-15.
19. Oskoboiny, G. (1997). Markup Validation Service. Recuperado el 08 de 10 de 2020, de https://cutt.ly/Agluijp
20. Q-Success DI Gelbmann GmbH. (2009). W3Techs - Encuestas sobre tecnología World Wide Web. Recuperado el 22 de 10 de 2020, de https://cutt.ly/pgcXzCn
21. Schwaber, K., & Sutherland, J. (2017). The SCRUM guide. Recuperado el 07 de 09 de 2020, de https://cutt.ly/Bglug6O
22. Tellado, F. (2014). Accesibilidad web en WordPress. Recuperado el 21 de 08 de 2020, de https://cutt.ly/Vgly7w0
23. WebAIM. (2001). Herramienta de evaluación de accesibilidad web WAVE. (POPETECH) Recuperado el 07 de 10 de 2020, de https://cutt.ly/egluy76
24. WP Avanzado. (2020). ¿Qué es WordPress? Explicación a detalle y guía para comenzar. Recuperado el 21 de 08 de 2020, de https://cutt.ly/tgly7JD
©2020 por los autores. Este artículo es de acceso abierto y distribuido según los términos y condiciones de la licencia Creative Commons Atribución-NoComercial-CompartirIgual 4.0 Internacional (CC BY-NC-SA 4.0) (https://creativecommons.org/licenses/by-nc-sa/4.0/).