DOI:
https://doi.org/10.14483/23448350.16633Publicado:
05/01/2021Número:
Vol. 41 Núm. 2 (2021): Mayo-Agosto 2021Sección:
Ciencia y TecnologíaGuías prácticas y herramienta para apoyar el desarrollo de sitios web accesibles
Practical Guides and Tool to support the Development of Accessible Websites
Palabras clave:
Web Accessibility, Accessible Develop, Accessible Code, Accessibility Guidelines, Accessibility Tool. (en).Palabras clave:
Accesibilidad Web, Desarrollo Accesible, Código Accesible, Guías de Accesibilidad, Herramienta de Accesibilidad (es).Descargas
Referencias
Abuaddous, H. Y., Jali, M. Z., Basir, N. (2016). Web Accessibility Challenges. (IJACSA) International Journal of Advanced Computer Science and Applications, 7(10), 172-181. https://doi.org/10.14569/ijacsa.2016.071023
Agangiba, M. A., Nketiah, E. B., Agangiba, W. A. (2017). Web Accessibility for the Visually Impaired: A Case of Higher Education Institutions’ Websites in Ghana. International Conference on Web-Based Learning ICWL, 2, 147-153. https://doi.org/10.1007/978-3-319-66733-1_16
Agüero, D. R., Perea, A. A. (2009). Diseño de sitios web accesibles.
Akpinar, M. E. E., Yeşilada, Y. (2017). Discovering Visual Elements of Web Pages and Their Roles: Users’ Perception. Interacting with Computers, 29(6), 845-867. https://doi.org/10.1093/iwc/iwx015
Al-Khalifa, H. S., Baazeem, I., Alamer, R. (2017). Revisiting the Accessibility of Saudi Arabia Government Websites. Universal Access in the Information Society, 16(4), 1027-1039. https://doi.org/10.1007/s10209-016-0495-7
Ali, S., Al-Balushi, T., Al-Badi, A. (2017). Guidelines and Deployment of Accessibility-Aware Framework Approach. International Journal of Web Information Systems, 13(2), 114-139. https://doi.org/10.1108/IJWIS-08-2016-0043
Antonelli, H. L., de Mattos Fortes, R. P. (2015). A Support for Developers Implement the Accessibility Guidelines Regarding to Web Menus. En Proceedings of the 21st Brazilian Symposium on Multimedia and the Web (pp. 33-40). https://doi.org/10.1145/2820426.2820445
Bittar, T. J., do Amaral, L. A., Lobato, L. L., de Mattos Fortes, R. P. (2013). Applying an Approach to Develop Web Applications Considering Accessibility Practices Using Design Rationale. Communications in Computer and Information Science (pp. 206-210). Springer. https://doi.org/10.1007/978-3-642-39473-7_42
Brajnik, G., Vigo, M., Yesilada, Y., Harper, S. (2016). Group vs Individual Web Accessibility Evaluations: Effects with Novice Evaluators. Interacting with Computers, 28(6), 843-861. https://doi.org/10.1093/iwc/iww006
Brophy, P., Craven, J. (2007). Web Accessibility. Library Trends, 55(4), 950-972. https://doi.org/10.1353/lib.2007.0029
Casasola, L., Guerra, J., Casasola, M., Pérez, V. (2017). La accesibilidad de los portales web de las universidades públicas andaluzas. Revista Española de Documentación Científica, 40(2), e169. https://doi.org/10.3989/redc.2017.2.1372
Debevc, M., Kosec, P., Holzinger, A. (2011). Improving Multimodal Web Accessibility for Deaf People: Sign Language Interpreter Module. Multimedia Tools and Applications, 54(1), 181-199. https://doi.org/10.1007/s11042-010-0529-8
Duque, N., Ospina, A., Londoño, L. F., Tabares, V. (2015). Evaluación de accesibilidad de recursos educativos digitales multimedia. Revista Ingeniería e Innovación, 3(1), 54-61.
eMAG. (2017). Práticas web acessíveis. http://emag.governoeletronico.gov.br/cursodesenvolvedor/desenvolvimento-web/praticas-web-acessivel.html
González, C. H. (2009). Herramientas web 2.0 y accesibilidad a sitios web para la apropiación social de conocimiento en una ciudad educadora. Universidad Eafit, 45(153), 26-37.
Hernández, S., Quejada, O., Díaz, G. (2016). Guía metodológica para el desarrollo de ambientes educativos virtuales accesibles: una visión desde un enfoque sistémico. Digital Education Review, 29, 166-180
Hilera, J. R., Fernández, L., Suárez, E., Vilar, E. T. (2013). Evaluación de la accesibilidad de páginas web de universidades españolas y extranjeras incluidas en rankings universitarios internacionales. Revista Española de Documentación Científica, 36(1), 1-16. https://doi.org/10.3989/redc.2013.1.913
Inayatillah, F. (2018). Media and Information Literacy (MIL) in Journalistic Learning: Strategies for Accurately Engaging with Information and Reporting News. IOP Conference Series: Materials Science and Engineering, 296(1), e012007. https://doi.org/10.1088/1757-899X/296/1/012007
Iniesto, F., Covadonga, R. (2014). Evaluación de la accesibilidad en las plataformas MOOC en español: UNED COMA, Colmenia y Miriada X. En Actas del XVI Simposio Internacional de Informática Educativa.
Ismail, A., Kuppusamy, K. S., Paiva, S. (2019). Accessibility Analysis of Higher Education Institution Websites of Portugal. Universal Access in the Information Society, 19, 685-700. https://doi.org/10.1007/s10209-019-00653-2
Jaeger, P. T. (2004). Beyond Section 508: The Spectrum of Legal Requirements for accessible E-Government Web Sites in the United States. Journal of Government Information, 30(4), 518-533. https://doi.org/10.1016/j.jgi.2004.09.010
Karaim, N. A., Yavuz, I. (2019). Usability and Accessibility Evaluation of Libyan Government Websites. Universal Access in the Information Society, 18(1), 207-216. https://doi.org/10.1007/s10209-017-0575-3
Kimmons, R. (2017). Open to All? Nationwide Evaluation of High-Priority Web Accessibility Considerations among Higher Education Websites. Journal of Computing in Higher Education, 29(3), 434-450. https://doi.org/10.1007/s12528-017-9151-3
Kirkpatrick, A., O’Connor, J., Campbell, A., Cooper, M. (2018). Web Content Accessibility Guidelines (WCAG) 2.1. https://www.w3.org/TR/WCAG21/
Krepp, B. (2014). Development of Section 508-Compliant Document Production Protocols and Websites. Transportation Research Record, 2469(1), 100-107. https://doi.org/10.3141/2469-11
Lara, P., Martínez, J. (2006). La accesibilidad de los contenidos web. UOC.
Laufer Nir, H., Rimmerman, A. (2018). Evaluation of Web Content Accessibility in an Israeli Institution of Higher Education. Universal Access in the Information Society, 17(3), 663-673. https://doi.org/10.1007/s10209-018-0615-7
Li, S.-H., Yen, D. C., Lu, W.-H., Lin, T.-L. (2012). Migrating from WCAG 1.0 to WCAG 2.0: A Comparative Study Based on Web Content Accessibility Guidelines in Taiwan. Computers in Human Behavior, 28(1), 87-96. https://doi.org/10.1016/j.chb.2011.08.014
Londoño, L., Tabares, V., Bez, M., Duque, N. (2018). Análisis comparativo de guías para el desarrollo web accesible. Ciencia e Ingeniería Neogranadina, 28(1), 101-115. https://doi.org/10.18359/rcin.2683
Lum, A. S. L., Chiew, T. K., Ng, C. J., Lee, Y. K., Lee, P. Y., Teo, C. H. (2017). Development of a Web-Based Insulin Decision Aid for the Elderly: Usability Barriers and Guidelines. Universal Access in the Information Society, 16(3), 775-791. https://doi.org/10.1007/s10209-016-0503-y
Microsoft. (2017). Developing Accessible Web Applications. https://msdn.microsoft.com/en-us/library/gg701991(v=vs.85).aspx#name_forms
Ministerio de Educación Nacional de Colombia. (2006). Documento de orientaciones técnicas, administrativas y pedagógicas para la atención educativa a estudiantes con discapacidad en el marco de la educación inclusiva.
Miñón, R., Moreno, L., Martínez, P., Abascal, J. (2014). An Approach to the Integration of Accessibility Requirements into a User Interface Development Method. Science of Computer Programming, 86, 58-73. https://doi.org/10.1016/j.scico.2013.04.005
Montes, J. A., Londoño, L. F., Duque, N. D., Tabares, V. (2017). Análisis del impacto de la herramienta GPCA en el desarrollo de sitios web accesibles. En Congreso Colombiano de Computación.
Nogueira, T. C., Ferreira, D. J., Carvalho, S. T., Berreta, L. O. (2017). Evaluating Responsive Web Design’s Impact on Blind Users. IEEE Multimedia, 24(2), 86-95. https://doi.org/10.1109/MMUL.2017.21
Oliveira, R. C. de, Pimenta, A., Barroso, D., Cagnin, M., Rubinsztejn, H. (2014). A Framework to Facilitate the Implementation of Technical Aspects of Web Accessibility, 3-13. Universal Access in Human-Computer Interaction. Design for All and Accessibility Practice. (pp. 3-13). Springer. https://doi.org/10.1007/978-3-319-07509-9_1
Pagnoni, V., Mariño, S. (2019). Calidad de contenidos en dominios de educación. Evaluación de la accesibilidad web mediada por validadores automáticos. Edmetic, 8(1), 107-127. https://doi.org/10.21071/edmetic.v8i1.10221
Persson, H., Åhman, H., Yngling, A. A., Gulliksen, J. (2015). Universal Design, Inclusive Design, Accessible Design, Design for All: Different Concepts-One Goal? On the Concept of Accessibility-Historical, Methodological and Philosophical Aspects. Universal Access in the Information Society, 14, 505-526. https://doi.org/10.1007/s10209-014-0358-z
Powell, L. M., Rebman, C. M., Abdula, C., Hendon, M. (2019). Web Accessible Adoption of Instructional Website, Application and Online Material Development. International Journal of E-Adoption, 11(2), 41-46. https://doi.org/10.4018/IJEA.2019070104
Rau, P.-L. P., Zhou, L., Sun, N., Zhong, R. (2016). Evaluation of Web Accessibility in China: Changes from 2009 to 2013. Universal Access in the Information Society, 15(2), 297-303. https://doi.org/10.1007/s10209-014-0385-9
Sappa, M. V., Alfonzo, P. L., Mariño, S. I., Godoy, M. V. (2014). Evaluación de la accesibilidad en dos sitios bancarios nacionales dependientes de la administración pública. Revista Latinoamericana de Ingeniería de Software, 2(3), 144-148. https://doi.org/10.18294/relais.2014.144-148
Stable-Rodríguez, Y., Sam-Anlas, C. A. (2018). Bibliotecas nacionales y accesibilidad web. Situación en América Latina. Revista Interamericana de Bibliotecología, 41(3), 253-265. https://doi.org/10.17533/udea.rib.v41n3a04
United States Access Board. (2000). Section 508 Standards for Electronic and Information Technology.
University of Washington. (2017). Accessible Technology. http://www.washington.edu/accessibility/web/
Velleman, E. M., Nahuis, I., van der Geest, T. (2017). Factors Explaining Adoption and Implementation Processes for Web Accessibility Standards within eGovernment Systems and Organizations. Universal Access in the Information Society, 16(1), 173-190. https://doi.org/10.1007/s10209-015-0449-5
Verdú, E., Pelayo, B. C., Martínez, M. Á., González, R. (2017). A System to Generate SignWriting for Video Tracks Enhancing Accessibility of Deaf People. International Journal of Interactive Multimedia and Artificial Intelligence, 4(6), 109-115. https://doi.org/10.9781/ijimai.2017.09.002
Vieritz, H., Jeschke, S., Pfeiffer, O. (2011). Using Web Accessibility Patterns for Web Application Development. Proceedings of the 24th Annual ACM Symposium on Applied Computing, (pp. 579-594).
W3C. (2013). WCAG 2.0. Web Content Accessibility Guidelines (WCAG) 2.0 2008, 1-24.
W3C. (2020). WAI-ARIA. https://www.w3.org/TR/wai-aria/
Youngblood, S. A. (2012). Communicating Web Accessibility to the Novice Developer: From User Experience to Application. Journal of Business and Technical Communication, 27(2), 209-232. https://doi.org/10.1177/1050651912458924
Cómo citar
APA
ACM
ACS
ABNT
Chicago
Harvard
IEEE
MLA
Turabian
Vancouver
Descargar cita
Recibido: de septiembre de 2020; Aceptado: de enero de 2021
Resumen
El desarrollo masivo de sitios web y de manejo de la información desde la web ha generado un problema de exclusión para muchas personas, especialmente las que presentan algún tipo de discapacidad. Esto se debe, por lo general, a que los sitios web no son accesibles desde el código fuente, ya que los desarrolladores no tienen conocimiento de los estándares y las pautas para desarrollo accesible o no se facilita su comprensión a la hora de aplicarlos, lo cual impide el correcto funcionamiento de las herramientas asistidas usadas por las personas en situación de discapacidad para navegar por los sitios web. Este trabajo propone un conjunto de guías prácticas de código accesible que busca ofrecer una alternativa a los desarrolladores, en la que a través de ejemplos prácticos e interactivos se busca facilitar la implementación de características de accesibilidad. Con el fin de garantizar la disponibilidad y validar las guías propuestas, se desarrolló la herramienta GPCA, que presenta las guías propuestas y los elementos de apoyo a los desarrolladores.
Palabras clave:
accesibilidad web, código accesible, desarrollo accesible, guías de accesibilidad, herramienta de accesibilidad..Abstract
The massive development of websites and management of the information on the web has generated an exclusion problem for many people, especially those with some type of disability. This is generally due to the fact that websites are not accessible from the source code, as developers are not aware of the norms and standards for their development or their understanding is not facilitated during their application. This hinders the correct functioning of assistive tools for people with disabilities to navigate these websites. This work presents a series of practical guidelines for accessible coding to offer an alternative to developers, aimed to facilitate the implementation of accessibility features by using practical and interactive examples. To guarantee availability and validate the proposed guidelines, the GPCA tool was developed, which presents the proposed guidelines and support elements for developers.
Keywords:
ccessible coding, accessible development, accessibility guidelines, accessibility tool, web accessibility.Resumo
O desenvolvimento maciço de websites e gerenciamento de informações a partir da web gerou um problema de exclusão para muitas pessoas, especialmente pessoas com algum tipo de deficiência. Geralmente, isso ocorre porque os websites não são acessíveis a partir do código-fonte, os desenvolvedores desconhecem os padrões e diretrizes para o desenvolvimento acessível ou não são facilmente entendidos ao aplicá-los, o que impede o bom funcionamento das ferramentas assistivas usadas por pessoas com deficiência para navegar nos websites. Este trabalho propõe um conjunto de guias práticos de códigos acessíveis que buscam oferecer uma alternativa aos desenvolvedores, onde exemplos práticos e interativos buscam facilitar a implementação de recursos de acessibilidade. Para garantir a disponibilidade e validar os guias propostos, foi desenvolvida a ferramenta GPCA que apresenta os guias propostos e os elementos de suporte aos desenvolvedores.
Palavras-chaves:
acessibilidade web, código acessível, guias de acessibilidade, desenvolvimento acessível, ferramenta de acessibilidade..Introducción
La accesibilidad web hace referencia al conjunto de elementos que permite que una persona, sin importar sus condiciones, pueda acceder a los contenidos ofrecidos en la web (Abuaddous, Jali y Basir, 2016; Lara y Martínez, 2006). En la actualidad las personas que tienen acceso a internet diariamente ingresan a sitios web para realizar, entre otras, actividades de alfabetización mediática e informacional AMI (Inayatillah, 2018); sin embargo, no todas pueden acceder a sus contenidos, ya que existen barreras de accesibilidad que dificultan la navegación y el uso de ellos, tanto a personas que presentan algún tipo de discapacidad como a las que no (Miñón, Moreno, Martínez y Abascal, 2014). Un sitio web es accesible cuando desde su diseño se han tenido en cuenta las diferencias existentes a nivel de habilidades y tecnologías de los usuarios. Se deben considerar las características físicas y cognitivas de los usuarios para evitar barreras que sean un factor de exclusión para quienes presenten algún problema visual, auditivo, cognitivo o motriz (Akpinar y Yesilada, 2017; Brajnik, Vigo, Yesilada y Harper, 2016; González, 2009).
Como alternativa para solucionar dificultades de accesibilidad surgieron las WCAG (Web Content Accessibility Guidelines), que son un conjunto de recomendaciones y pautas de accesibilidad para promover el desarrollo de sitios web accesibles que el W3C (World Wide Web Consortium) creó (Li, Yen, Lu, Lin, 2012; W3C, 2013). Basados en las WCAG definieron normativas y leyes de accesibilidad web como la Section 508 de los Estados Unidos de América, la cual forma parte de la Federal Acquisition Regulation (FAR) (Jaeger, 2004; Krepp, 2014; United States Access Board, 2000).
A pesar de los esfuerzos para mejorar la accesibilidad en los sitios web, en la actualidad se siguen encontrando sitios web poco accesibles y con gran cantidad de barreras que impiden el acceso a la información para personas en situación de discapacidad (Al-Khalifa, Baazeem y Alamer, 2017; Duque, Ospina, Londoño y Tabares, 2015; Sappa, Alfonzo, Mariño y Godoy, 2014; Hilera, Fernández, Suárez y Vilar, 2013; Iniesto y Covadonga, 2014; Rau, Zhou, Sun y Zhong, 2016; Verdú, Pelayo, Martínez y González, 2017). Uno de los factores por los que se da esta problemática es porque los desarrolladores desconocen estos lineamientos para desarrollo accesible, o en el caso de que se conozcan, se dificulta su aplicación en términos prácticos debido a la complejidad con que se expresan.
En este trabajo se propone un conjunto de guías prácticas de código accesible que sirvan de ayuda a los desarrolladores para crear sitios web accesibles, facilitando su comprensión a través de ejemplos prácticos. Con el fin de que las guías propuestas estén disponibles se creó la herramienta GPCA (Guías Practica de Código Accesible), que además cuenta con elementos de apoyo adicionales para que los desarrolladores creen sitios web accesibles.
Este artículo presenta en la sección 1 algunos conceptos relevantes en las temáticas abordadas; en la sección 2 se encuentran trabajos relacionados; mientras que en la sección 3 se muestran detalladamente los elementos que componen la propuesta; en la sección 4 se presentan la validación de las guías propuestas y la herramienta que las implementa; finalmente, en la sección 6 se muestran las conclusiones y los trabajos futuros.
Conceptos relacionados
La accesibilidad es una característica que representa la facilidad que se ofrece para que una persona pueda acceder a cualquier producto o servicio sin importar sus condiciones físicas, sociales, psicológicas, educativas o culturales (Persson, Åhman, Yngling y Gulliksen, 2015; Ministerio de Educación Nacional de Colombia, 2006). Por lo tanto, accesibilidad web es un concepto que hace referencia al conjunto de elementos que permite que una persona, sin importar sus condiciones, pueda acceder a los contenidos ofrecidos en la web (Abuaddous et al., 2016; Brophy y Craven, 2007; Lara y Martínez, 2006). A continuación son presentados algunos estándares internacionales e iniciativas de accesibilidad web.
WCAG (Web Content Accessibility Guidelines)
Es el documento que contiene las pautas de accesibilidad para mejorar el desarrollo de sitios web accesibles. Fue creado por el W3C y en la actualidad se encuentra en su versión 2.1, la cual se publicó como la beta de la versión 3.0. Estas guías son usadas como base para la creación de normas y estándares de accesibilidad web nacionales e internacionales (Kirkpatrick, O’Connor, Campbell y Cooper, 2018; Li et al., 2012; W3C, 2013).
ARIA (Accessible Rich Internet Applications)
Es un proyecto del W3C que se creó en el marco de la iniciativa de accesibilidad web WAI (Web Accessibility Initiative). Este proyecto tiene como objetivo mejorar la accesibilidad de los contenidos dinámicos de las interfaces desarrolladas con Ajax, HTML, JavaScript y otras tecnologías relacionadas (W3C, 2020).
ATAG (Authoring Tool Accessibility Guidelines) y UAAG (User Agent Accessibility Guidelines)
Son dos documentos creados por el W3C para mejorar la accesibilidad de las tecnologías emergentes, como lo son las herramientas de autor y los sistemas multi-agente. Ambas se encuentran en su versión 2.0 (Agüero y Perea, 2009).
Section 508
Es la norma de accesibilidad de los Estados Unidos de América. La norma tiene definido que todos los productos deben cumplir con requerimientos funcionales que permitan su uso por parte de cualquier usuario sin importar sus condiciones (Jaeger, 2004; Krepp, 2014; United States Access Board, 2000).
Trabajos relacionados
Con el fin de identificar trabajos relacionados con alternativas para el desarrollo de sitios web accesibles, se realizó un proceso de revisión sistemática de literatura, utilizando las bases de datos especializadas Web of Sciencie y Scopus y siguiendo la ecuación de búsqueda que se presenta a continuación:
((accessib*) AND (code* OR develop* OR programming) AND (guidelines OR standard OR tool OR application)) AND IDIOMA: (English) AND TIPOS DE DOCUMENTOS: (Article)).
De los resultados obtenidos en el proceso de revisión sistemática se destacan los siguientes, por tener una relación directa con el objetivo del presente trabajo:
En Powell, Rebman, Abdula y Hendon (2019) se lleva a cabo un análisis de demandas y políticas que existen con respecto a la creación de contenidos web accesibles, con el propósito de que los docentes utilicen herramientas de evaluación y de desarrollo accesible que podrían dar lugar a materiales digitales mejores y más accesibles.
En Miñón et al. (2014) se desarrollan métodos para la integración de la accesibilidad dentro de las interfaces de usuario, asociando los requerimientos de accesibilidad web definidos en los estándares y los requerimientos de la interfaz de usuario, haciendo uso del framework UsiXML.
En Oliveira et al. (2014) se propone el framework Homero para apoyar el desarrollo de interfaces accesibles en aplicaciones web. Homero utiliza el lenguaje PHP para generar automáticamente páginas web de acuerdo con las pautas de las WCAG.
En Vieritz, Jeschke y Pfeiffer (2011) se demuestra el potencial del desarrollo basado en modelos y centrado en el usuario, en el cual se propone el uso de patrones para simplificar el proceso de desarrollo de sitios web accesibles. Se identifican patrones de accesibilidad web de diferentes guías como WCAG (Web Content Accessibility Guidelines), UUAG (User Agent Accessibility Guidelines) y ATAG (Authoring Tool Accessibility Guidelines).
En el trabajo de Bittar et al. (2013) se muestra un enfoque para desarrollo de aplicaciones web, teniendo en cuenta pautas y prácticas de accesibilidad de la WCAG, mediante el uso del diseño racional, mientras que en Antonelli y de Mattos Fortes (2015) se presenta un método para la creación de menús accesibles para aplicaciones web y el desarrollo de una herramienta llamada AMeG que usa el lenguaje AMenu. Incluye diferentes detalles técnicos de accesibilidad y fue implementado para apoyar a los desarrolladores en la creación de menús accesibles.
Por otro lado, se identificaron trabajos enfocados en mejorar la accesibilidad web para personas con un tipo de discapacidad específico como en Debevc, Kosec y Holzinger (2011), donde se diseña y desarrolla un sistema para permitir la incorporación de elementos interactivos en el texto original, los cuales actúan como disparadores para la traducción de videos a lenguaje de señas. Esto con el fin de mejorar la accesibilidad en la web de personas con discapacidad auditiva.
En Hernández, Quejada y Díaz (2016) se propone una guía para el desarrollo de ambientes educativos virtuales accesibles, esto con el fin de mejorar la inclusión educativa de personas con alguna condición de discapacidad a través de las tecnologías. Este trabajo, al igual que el aquí propuesto, busca presentar una serie de guías para que se desarrolle accesiblemente. Sin embargo, su alcance se limita solo a los ambientes virtuales educativos.
En el trabajo de Youngblood (2012) se identifica la necesidad de que los desarrolladores aprendan a crear sitios accesibles a partir de las pautas de los estándares de accesibilidad. Por esta razón proponen un enfoque recursivo en cinco etapas para enseñar a los desarrolladores a crear sitios web accesibles para personas con discapacidad visual.
En el trabajo de Velleman, Nahuis y van der Geest (2017) se realiza un análisis de características, costo de implementación y complejidad de los estándares de accesibilidad para diseñar un modelo para la adopción de guías y pautas de accesibilidad dentro de los sitios gubernamentales de Arabia Saudita.
Finalmente, en Ali, Al-Balushi y Al-Badi (2017) se propone un framework basado en guías, estándares e iniciativas de accesibilidad, esto con el fin de mostrar a los usuarios los elementos de una página web de tal forma que sin importar sus condiciones puedan acceder y usar los contenidos presentados en el sitio.
Después de realizar la revisión de estos trabajos, se concluye que existe un creciente interés y una necesidad de que se generen propuestas orientadas al desarrollo de sitios web accesibles.
Las herramientas existentes se enfocan en elementos específicos que mejoran la accesibilidad para un caso determinado. Sin embargo, son pocos los trabajos que intentan abarcar la mayor cantidad de elementos de un sitio que repercutan en una mejora de la accesibilidad.
Además, generalmente se aborda la construcción de sitio web accesible desde el seguimiento de las normas y estándares de accesibilidad, pero no se aborda desde una perspectiva orientada al desarrollador, en la que se le explique cómo debe ser la implementación de estos.
Por esto, en el presente trabajo se crea un conjunto de guías que reúne los diferentes elementos de otras propuestas para ofrecer a los desarrolladores una herramienta con una cantidad mayor de guías y ayudas que lo apoyen en la construcción de sitios web accesibles.
Metodología
Actualmente se cuenta con diferentes pautas y estándares orientados a la accesibilidad. Sin embargo, la forma como se presentan estas normas no facilita el entendimiento por parte del desarrollador, por lo cual se han impulsado algunas iniciativas que presentan estos contenidos de forma más simple, con el fin de que puedan ser aplicadas en el proceso de desarrollo.
En este trabajo se propone un conjunto de guías que apoyan el proceso de desarrollo de sitios web accesibles. Estas guías se basan en diferentes normas e iniciativas que promueven la accesibilidad, reuniendo los principales aspectos a tener en cuenta. También fue desarrollada la herramienta GPCA (Guías Prácticas de Código Accesible) en la que se facilita el acceso a las guías, se presentan ejemplos prácticos y apoyos que facilitan su comprensión por parte de desarrolladores sin conocimiento previo en la temática de accesibilidad. En la Figura 1 se esquematizan los elementos que integran la propuesta y a continuación se detalla cada uno de ellos.
Figura 1: Esquematización de la propuesta.
Guías para desarrollo accesible
Como se puede observar, uno de los principales elementos tenidos en cuenta para esta propuesta es el conjunto de guías para desarrollo accesible existentes. En Londoño, Tabares, Bez y Duque (2018) se realizó revisión y análisis de ocho guías de accesibilidad existentes, evaluándolas bajo diferentes criterios, de las cuales fueron seleccionadas cuatro. Esta propuesta se basa en las guías seleccionadas que se presentan a continuación:
-
Web Accessibility Tutorials - W3C: se presenta en forma de tutorial e incluye diferentes pautas para el desarrollo accesible. Se considera que sus contenidos son claros, ofrece ejemplos prácticos y brinda ayudas desde la parte conceptual para comprender la accesibilidad web. Dentro de las categorías de guías de accesibilidad no consideran los encabezados (headings) y dado que estos elementos son importantes en la construcción de un sitio accesible, deben ser considerados en las guías propuestas en este trabajo (W3C, 2013).
-
Developing Accessible Web Applications - Microsoft: presenta un conjunto de guías de código accesible con características similares a la guía anterior. Cuenta con la categoría de encabezados, pero no con la categoría de menús, que también es de gran importancia. No obstante, presenta ejemplos prácticos y contenidos conceptuales; su único inconveniente es que las pautas son cortas y con pocos ejemplos (Microsoft, 2017).
-
Prácticas de accesibilidad web - eMAG gobierno de Brasil: desarrolladas por el gobierno brasilero en el marco de la normativa eMAG para la creación de sitios web inclusivos. Contienen diferentes categorías de guías prácticas de accesibilidad, pero no contempla opciones como listas, encabezados y menús, que son elementos que permiten una mayor accesibilidad en los sitios web. Se resalta que contiene opciones de ayuda para el desarrollador como validadores, normas y pautas de accesibilidad web (eMAG, 2017).
-
Developing Accessible Websites - Universidad de Washington: contiene varias categorías de guías prácticas de desarrollo accesible, se resalta que se enfocan en el uso de ARIA. Dentro de las categorías no se consideran los elementos de listas y enlaces, los cuales son elementos que ayudan a las herramientas de asistencia para mejorar la navegabilidad por los sitios web (University of Washington, 2017).
Un inconveniente que se presenta con estas guías para desarrollo accesible está asociado a que ninguna abarca todos los elementos con amplias descripciones y ejemplos prácticos. Por ejemplo, la herramienta Web Accessibility Tutorials - W3C contempla todos los elementos evaluados, pero para encabezados no presenta ejemplos prácticos de código accesible y para listas su contenido es corto. La Tabla 1 presenta una comparación entre las guías seleccionadas, identificando los elementos que contempla cada una con una X, si la forma en la que se aborda la guía es textual y práctica se señala con color verde, si es solo textual se indica con color naranja y en caso de no existir una guía se indica con color rojo.
Fuente: elaboración propia.
Tabla 1: Comparación de guías prácticas para desarrollo accesible
En general se observa que las herramientas evaluadas no cubren algunos elementos o la guía que los contempla no tiene un contenido que pueda ayudar al desarrollador a crear sitios web accesibles. Se resalta que ninguna tiene una guía que contemple y explique al desarrollador como crear listas y encabezados accesibles.
A partir de estos problemas se decide reunir componentes de todas las guías, de tal forma que se integren las guías de estas cuatro herramientas en una sola, con el fin de abarcar una mayor cantidad de elementos de páginas web y ofrecer más apoyo al desarrollador.
Guías prácticas de código accesible
A partir de las guías seleccionadas, se propuso un conjunto de 18 guías prácticas de código accesible clasificadas en siete categorías que corresponden a menús, formularios, tablas, listas, enlaces, encabezados e imágenes, considerados como los elementos más importantes para la accesibilidad.
Las guías prácticas creadas para apoyar el proceso de desarrollo de sitios web accesibles cuentan en sus contenidos con una parte conceptual en la que se explica la importancia de los elementos de HTML para garantizar la accesibilidad de un sitio web, y una parte práctica en la cual se muestran los ejemplos de cómo aplicarlas. A continuación se describe cada una de las categorías definidas en las guías prácticas propuestas:
Menús: los menús son utilizados para facilitar la navegación de los sitios web o para efectuar acciones dentro de la página web. Corresponden a un tipo de elemento que puede mejorar la accesibilidad de un sitio web, ya que, si están bien estructurados, permiten las siguientes facilidades:
-
Que los lectores de pantalla utilizados por personas con discapacidad visual detecten todas las opciones del menú y así facilitar el acceso y navegación por los contenidos del sitio web.
-
Que el menú pueda ser operado por comandos de teclado para disminuir la cantidad de movimientos que una persona debe hacer para llegar al contenido que desea ver. Esto con el fin de mejorar la navegación por el sitio web a personas con discapacidad motriz.
-
Si el menú tiene un tamaño adecuado, permite a las personas que usan una pantalla táctil o a personas con discapacidad visual hacer clic en la opción que deseaban abrir, disminuyendo la probabilidad de que abran otra opción que no querían.
-
Que los menús no desaparezcan ya que las personas con enfermedades como Parkinson o de manos temblorosas necesitan navegar fuera de los menús y submenús sin que estos se oculten después de que el mouse ha dejado de estar en el menú.
-
Que el menú muestre donde se encuentra el foco, es decir, en qué parte del menú se encuentra actualmente el usuario. Esta característica ayuda a que las personas con memoria a corto plazo u enfermedades como Alzheimer sepan dónde están en cada momento.
Formularios: los formularios son usados comúnmente para proporcionar la interacción de los usuarios con el sitio web. Los formularios se utilizan para registro, inicio de sesión, comentarios, calificaciones, búsquedas y otras actividades en las cuales se precisa de la interacción del usuario.
Para crear un formulario en línea accesible, debe asegurarse que todos los campos de formulario tengan etiquetas o avisos precisos para que los usuarios del lector de pantalla sepan lo que solicita cada campo. Dado que los lectores de pantalla no tienen acceso a las señales visuales que tienen las personas videntes, las etiquetas y los avisos deben asociarse explícitamente con los campos de formulario dentro del HTML (Agangiba, Nketiah y Agangiba, 2017; Casasola, Guerra, Casasola y Pérez, 2017; Kimmons, 2017; Lum et al., 2017; Nogueira, Ferreira, Carvalho y Berreta, 2017).
Para que sean accesibles, los formularios deben garantizar las siguientes características:
-
Deben ser cortos y claros. Esto permite a una persona con una discapacidad no tener que desplazarse mucho por el sitio.
-
No deben estar sujetos a tiempo, ya que las personas quieren completar el formulario a su ritmo y si el sistema lo restringe puede ocasionar que la persona jamás vuelva a usar la página o a llenar el formulario de nuevo.
-
Todos los elementos del formulario deben tener un nombre que los identifique, dado que un elemento sin nombre puede generar confusión en las personas que usan herramientas de asistencia.
-
Los formularios permiten ser llenados por comandos de voz, por esto se recomienda hacer uso de este mecanismo para incluir más personas al uso de sitios que presenten materiales en formularios.
Tablas: las tablas se deben utilizar con el propósito de proporcionar datos tabulares, o para organizar la información en filas y columnas, y no deben ser utilizados para la disposición de los elementos visuales de la página (diseño). El uso de tablas con el propósito de diagramas no solo influye en el nivel de accesibilidad de un sitio, sino también en la velocidad y el rendimiento al cargar sus páginas. Así que para estilizar y organizar los aspectos visuales de las páginas se recomienda usar hojas de estilo (CSS).
Algunas etiquetas HTML específicas son necesarias para garantizar que las tablas de datos sean accesibles a los usuarios de lectores de pantalla. Las etiquetas específicas requeridas dependen de si la tabla es simple o compleja. Sin estas etiquetas, los usuarios que no pueden ver la tabla, no tienen la posibilidad de encontrarla, ni entender las relaciones entre los encabezados de tabla y las celdas dentro de su ámbito (Ismail, Kuppusamy y Paiva, 2019; Laufer Nir y Rimmerman, 2018; Stable-Rodríguez y Sam-Anlas, 2018).
Listas: las listas son agrupaciones HTML bastante comunes y útiles. Las listas ayudan a las tecnologías de asistencia para anunciar cuántos elementos hay en un menú y también ofrecen la posibilidad para adaptarse a las necesidades del usuario, ya que desde su estructura no compleja permite que se puedan efectuar cambios.
Enlaces: los enlaces son un elemento interactivo común en los sitios web, permiten que los usuarios puedan navegar de una página a otra haciendo clic en una imagen o un texto. Dada su importancia dentro de los sitios web, los enlaces, al igual que un encabezado u otros elementos de texto, deben tener su nombre implícitamente en su texto, debido a muchos dispositivos de asistencia tecnológica, presentan las listas de enlaces en un documento aparte, lo cual permite que las personas con discapacidad visual naveguen por estos enlaces. Los nombres de los enlaces deben ser cortos y claros para que los lectores de pantalla los lean más fácil, además los usuarios que trabajan con reconocimiento de voz pueden acceder a los enlaces diciendo la palabra “clic” y después el nombre del enlace al cual van a acceder (Karaim y Yavuz, 2019; Ismail et al., 2019; Laufer Nir y Rimmerman, 2018; Pagnoni y Mariño, 2019).
Encabezados: los encabezados demarcan e identifican secciones de un documento o aplicación. Para los usuarios videntes, los encabezados son un medio crítico para escanear rápidamente las secciones principales de un documento, tal vez localizar una sección específica de interés y saltar a ella rápidamente, sin tener que leer todo el documento.
El lenguaje HTML proporciona los elementos h1 a h6, en que cada número indica un nivel de jerarquía. Al igual que los usuarios visuales tienen indicaciones visuales como el tamaño de fuente y el color para identificar los encabezados, los usuarios de tecnología de apoyo se basan en el HTML semántico para hacer lo mismo.
Muchos dispositivos de tecnología asistencial proporcionan una lista de encabezados navegables, ya sea en un árbol o en un formato plano, para que los usuarios puedan escanear rápidamente el documento o la aplicación y saltar a una sección (Karaim y Yavuz, 2019; Ismail et al., 2019; Laufer Nir y Rimmerman, 2018; Pagnoni y Mariño, 2019).
Además, los encabezados proporcionan objetivos para que los usuarios puedan saltar de un encabezado a otro solo con oprimir una tecla.
Los encabezados semánticos son tan útiles que muchos motores de búsqueda los usan para listar los resultados.
Imágenes: son un elemento dentro de los sitios web que puede mejorar la accesibilidad, así como disminuirla. Esto se debe a que las imágenes y los gráficos hacen que el contenido sea más agradable y fácil de entender para muchas personas, y en particular para aquellos con discapacidades cognitivas y de aprendizaje. Estas, a su vez, deben contar con un texto alternativo o una descripción que permitan que también puedan ser accedidas por personas con discapacidad visual. Dentro de una página web es común ver tres tipos de imágenes: imágenes informativas, imágenes complejas e imágenes decorativas (Ismail et al., 2019; Laufer Nir y Rimmerman, 2018; Pagnoni y Mariño, 2019; Stable-Rodríguez y Sam-Anlas, 2018).
Elementos de apoyo: con el fin de ofrecer un mayor apoyo a los desarrolladores, se consideraron otros elementos que pudieran apoyar en el proceso de construcción de sitios web accesibles. Se tuvieron en cuenta los siguientes elementos:
-
Lista con todos los elementos HTML que son accesibles implícitamente y que no requieren ningún tipo de uso especial para ser accesibles.
-
Conjunto de validadores de accesibilidad web que el desarrollador puede usar para evaluar el nivel de accesibilidad con el que está quedando el sitio en desarrollo.
-
Selección de algunas normas y algunos estándares de accesibilidad que existen en el mundo para consulta por parte del desarrollador.
-
Validador de accesibilidad de pequeñas porciones de código fuente, que ofrece como retroalimentación las indicaciones de cómo debe quedar para que sea accesible.
Herramienta GPCA
Una vez definidas las guías prácticas de código accesible y los elementos de apoyo, se procedió al desarrollo de una herramienta web que facilitara el acceso a estos contenidos y donde se pudiera implementar con mayor facilidad los ejemplos prácticos de las guías. Esta herramienta se encuentra disponible en http://gaia.manizales.unal.edu.co/gpca/ y se denominó GPCA. En la Figura 2 se puede visualizar su página inicial.
Figura 2: Página principal de la herramienta GPCA
La herramienta GPCA presenta las guías prácticas con código accesible propuestas de acuerdo con las siete categorías mencionadas anteriormente. Algunas de estas categorías cuentan con subcategorías para una mayor organización.
En total se cuenta con 18 guías de accesibilidad con ejemplos prácticos e interactivos como el que se observa en la Figura 3. Para cada ejemplo se presenta cómo debe hacerse la implementación desde el código fuente y el efecto que tiene a nivel de visualización de la interfaz, permitiéndole al desarrollador interactuar con estos elementos para promover su comprensión.
Figura 3: Ejemplo de visualización de las guías prácticas
Adicional a las guías prácticas, la herramienta GPCA ofrece elementos adicionales para ayudar a los desarrolladores de sitios web en la incorporación de características de accesibilidad.
En una de las secciones se listan los elementos HTML cuyas características son accesibles y no tienen restricciones o condiciones de uso para mejorar la accesibilidad.
Se presentan los enlaces a algunas de las herramientas de evaluación de accesibilidad que existen en la actualidad, además a guías y normativas de accesibilidad nacionales e internacionales que existen.
Retomando la comparación presentada en la Tabla 1, se incluye la herramienta GPCA, obteniendo como resultado la Tabla 2, en la cual se evidencia que la propuesta realizada contiene un conjunto de guías que contemplan una cantidad mayor de elementos de las páginas web que las guías estudiadas, ofreciendo un mayor apoyo al desarrollador además de la descripción conceptual de la guía y también un ejemplo práctico.
Tabla 2: Comparación GPCA y otras guías de desarrollo accesible
Resultados
Con el fin de realizar la validación de las guías prácticas de código accesible propuestas, se llevaron a cabo dos etapas.
En la primera etapa, aprovechando que se tenía planeado el desarrollo de la herramienta GPCA, su proceso de construcción se realizó siguiendo las guías propuestas. Al finalizar su implementación, la herramienta fue evaluada con tres validadores de accesibilidad diferentes, para determinar en qué nivel cumplía con características de accesibilidad.
Como se puede observar en la Figura 4, con el validador WAVE se obtiene que la herramienta GPCA presenta en su página inicial cero errores de accesibilidad y cero errores de contraste, lo cual muestra que la herramienta se construyó bajo las pautas de accesibilidad definidas por las guías prácticas.
Figura 4: Evaluación de accesibilidad de GPCA usando el validador wave
En la Figura 5 se muestra que al evaluar la herramienta GPCA con el validador eXaminator, se obtiene en una escala del 0-10 un 7.5 de accesibilidad, esto como resultado de ocho pruebas que hizo el validador, de las cuales dos fueron malas, ya que el validador no detectó enlaces que permitieran al usuario saltar entre los contenidos de la página y tampoco detectó un enlace directo a la página principal. A pesar de esto, se cumple con el objetivo de hacer una página que cumpla los requisitos mínimos de accesibilidad.
Figura 5: Evaluación de accesibilidad de GPCA usando el validador eXaminator
En la Figura 6 se presenta la evaluación de la herramienta GPCA con el validador de accesibilidad web T.A.W., el cual dentro de su análisis diagnostica que la herramienta GPCA está en un nivel AA según la escala de la WCAG 2.0.
Figura 6: Evaluación de accesibilidad de GPCA usando el validador T.A.W
De esta validación se puede ver que la herramienta solo cuenta con tres problemas, pero tiene una gran cantidad de advertencias. Esto se debe a que son criterios del principio de robustez y están asociados al manejo de los CSS, por lo que sería importante agregar guías prácticas que estén asociadas con este aspecto.
Como segunda etapa del proceso de validación de las guías prácticas de código accesible propuestas, en el trabajo de Montes, Londoño, Duque y Tabares (2017) se llevó a cabo un caso de estudio en el que se seleccionó un grupo de desarrolladores sin conocimientos ni experiencia en el área de accesibilidad para que crearan dos sitios web. En primera instancia se les solicitó a los desarrolladores la creación de un primer sitio (A) de acuerdo con requerimientos establecidos sin tener en cuenta características de accesibilidad. Una vez finalizado este sitio, se les presentaron las guías prácticas a través de la herramienta GPCA con el objetivo de que crearan el segundo sitio web (B) siguiendo estos lineamientos. Finalmente fue evaluado y comparado el nivel de accesibilidad de ambos sitios. Las Tablas 3 y 4 muestran los resultados de la evaluación de accesibilidad.
Fuente: Montes et al. (2017)
Tabla 3: Resultados validador T.A.W.
Fuente: Montes et al. (2017)
Tabla 4: Resultados validador WAVE
Este experimento permitió concluir que la herramienta GPCA aporta en el desarrollo de sitios web accesibles, ya que tras las evaluaciones, el segundo sitio (B) para el cual se utilizó la herramienta GPCA obtuvo un nivel más alto de accesibilidad respecto al primero (A).
Conclusiones
Las guías de desarrollo accesible en las que se basa este trabajo cuentan con las pautas básicas de desarrollo de sitios web accesibles y su adopción permite alcanzar un nivel medio de accesibilidad (AA), convirtiéndose en un aporte para lograr cada vez una web más inclusiva.
En este trabajo no se definieron guías para cumplir con un nivel AAA de accesibilidad, dado que de acuerdo con las WCAG 2.1, para alcanzar un nivel AAA se requiere de la implementación de mecanismos que permitan la adaptación de los contenidos de acuerdo a las necesidades del usuario, lo que dificulta establecer guías generales desde el código fuente. Sin embargo, la herramienta GPCA contribuye a que se alcance un nivel de accesibilidad AA, lo que facilita un posterior alcance del nivel AAA, ya que todos los elementos del código tendrán las características requeridas para implementar los diferentes mecanismos de adaptación.
Las guías propuestas y el sitio web desarrollado se pueden consolidar como una herramienta fácil y de gran utilidad para desarrolladores, generando conciencia de la importancia de incluir estas pautas. La construcción de la herramienta presentada es prueba de ello, en esta se siguieron todos los lineamientos necesarios para que fuera un sitio web accesible cumpliendo con un nivel AA de acuerdo con las WCAG.
Los resultados de la evaluación de la accesibilidad de la herramienta GPCA y el experimento realizado con el grupo de desarrolladores validan que la creación de un sitio web con base en las guías prácticas propuestas en la herramienta GPCA mejora la posibilidad de lograr un resultado con buenos niveles de accesibilidad.
Como trabajo futuro se incorporarán más guías de desarrollo accesible que permitan la construcción de mecanismos que mejoren la accesibilidad de los sitios web orientados a alcanzar un nivel AAA.
Teniendo en cuenta que estas guías son para el desarrollo accesible, un trabajo futuro a realizar es la evaluación de accesibilidad web de los sitios en los que sean aplicadas, con el fin de validar si se logra mejorar el nivel de accesibilidad al seguir las guías. Además, se espera que desarrolladores continúen realizando pruebas y comparen con otras guías para desarrollo accesible.
Acknowledgements
Agradecimientos
Este artículo es el resultado del trabajo desarrollado a través del Programa de Investigación Reconstrucción del Tejido Social en Zonas de Posconflicto en Colombia Código SIGP: 57579 con el Proyecto de investigación “Fortalecimiento docente desde la alfabetización mediática informacional y la CTel, como estrategia didáctico-pedagógica y soporte para la recuperación de la confianza del tejido social afectado por el conflicto” Código SIGP: 58950. Financiado en el marco de la convocatoria Colombia Científica, Contrato No FP44842-213-2018.
Referencias
Licencia
Derechos de autor 2021 Luis-Felipe Londoño-Rojas, Valentina Tabares-Morales, Marta-Rosecler Bez, Néstor-Darío Duque-Méndez
Esta obra está bajo una licencia internacional Creative Commons Atribución-NoComercial-CompartirIgual 4.0.
El (los) autor(es) al enviar su artículo a la Revista Científica certifica que su manuscrito no ha sido, ni será presentado ni publicado en ninguna otra revista científica.
Dentro de las políticas editoriales establecidas para la Revista Científica en ninguna etapa del proceso editorial se establecen costos, el envío de artículos, la edición, publicación y posterior descarga de los contenidos es de manera gratuita dado que la revista es una publicación académica sin ánimo de lucro.
