Abstract
It is important to raise awareness among people who create web content about barriers that exist for people with visual disabilities to perceive images. This study had for purpose the implementation of features and controls for insertion of accessible images in two open online editors: TinyMCE and Summernote. TinyMCE is used in content management systems such as WordPress, Joomla and Drupal. Summernote is an open online editor distributed under an open MIT license. The accessibility of TinyMCE was improved in the insertion of images by adding entry fields for the type of image to be inserted, long description and title. As for Summernote, in the option to insert images, entry fields were added for the type of image to be inserted, alternative text, long description and title. Controls were implemented to validate mandatory and optional fields according to the type of image. The purpose is that open online editors comply with Part B of the Authoring Tool Accessibility Guidelines. A discussion is presented about how the original code of the two open online editors was written, how image accessibility was improved and how evaluation was performed via test scenarios, automated tools and usability surveys to both content authors and blind users. The HTML code generated with both editors showed compliance with the Web Content Accessibility Guidelines. Blind users stated that they were able to perceive the images when interacting with web pages created with both editors.
This is a preview of subscription content, log in via an institution to check access.
Access this chapter
Tax calculation will be finalised at checkout
Purchases are for personal use only
Similar content being viewed by others
References
W3C: Accessibility (2018). https://www.w3.org/standards/webdesign/accessibility
WAI: Introduction to Web Accessibility (2018). https://www.w3.org/WAI/fundamentals/accessibility-intro/
Villarroel-Ramos, J., Sanchez-Gordon, S., Luján-Mora, S.: Architectural metamodel for requirements of images accessibility in online editors. In: Proceeding of International Conference on Information Systems and Computer Science (INCISCOS), pp. 312–319. IEEE (2018)
Tiny: TinyMCE (2019). https://www.tiny.cloud/
Summernote: Summernote Super Simple WYSIWYG Editor in Bootstrap (2019). https://summernote.org/
W3C: Web Content Accessibility Guidelines (WCAG) Overview (2018). https://www.w3.org/WAI/standards-guidelines/wcag/
W3C: Authoring Tool Accessibility Guidelines (ATAG) 2.0 (2015). https://www.w3.org/TR/ATAG20/
Sanchez-Gordon, S., Estevez, J., Luján-Mora, S.: Editor for accessible images in e-Learning platforms. In: Proceedings of Web for All Conference (W4A), pp. 1–2. ACM (2016). https://doi.org/10.1145/2899475.2899513
W3C: Web Content Accessibility Guidelines 1.0 (1999). https://www.w3.org/TR/WCAG10/
W3C: Web Content Accessibility Guidelines (WCAG) 2.0 (2008). https://www.w3.org/TR/WCAG20/
ISO: ISO/IEC 40500:2012 (W3C) Information technology - W3C Web Content Accessibility Guidelines (WCAG) 2.0 (2012). https://www.iso.org/standard/58625.html
W3C: Web Content Accessibility Guidelines (WCAG) 2.1 (2018)
Calle-Jimenez, T., Sanchez-Gordon, S., Rybarczyk, Y., Jadán, J., Villarreal, S., Esparza, W., Acosta-Vargas, P., Guevara, C., Nunes, I.: Analysis and improvement of the web accessibility of a tele-rehabilitation platform for hip arthroplasty patients. In: Nunes, I. (ed.) Advances in Human Factors and Systems Interaction, AHFE 2018. AISC, vol. 781, pp. 233–245. Springer, Cham (2019)
Acosta, T., Acosta-Vargas, P., Salvador-Ullauri, L., Luján-Mora, S.: Method for accessibility assessment of online content editors. In: Proceedings of International Conference on Information Theoretic Security, pp. 538–551. Springer, Cham (2018)
Thapa, R.B., Ferati, M., Giannoumis, G.A.: Using non-speech sounds to increase web image accessibility for screen-reader users. In: Proceedings of the 35th ACM International Conference on the Design of Communication. ACM (2017)
Sánchez Morales, D.V., Tabares Morales, V., Londoño Rojas, L.F., Duque Méndez, N.D.: Comparison of authoring tools based on accessibility evaluations. J. Virtu@lmente 5(1), 7–23 (2017)
Sanchez-Gordon, S., Luján-Mora, S.: How could MOOCs become accessible? The case of edX and the future of inclusive online learning. J. Univ. Comput. Sci. (J. UCS) 22(1), 55–81 (2016)
Acknowledgments
The authors thank Jenny Quiguango and Christian Chiguano for developing and testing the code to implement the improvements in both open online editors.
Author information
Authors and Affiliations
Corresponding author
Editor information
Editors and Affiliations
Rights and permissions
Copyright information
© 2020 Springer Nature Switzerland AG
About this paper
Cite this paper
Sanchez-Gordon, S. et al. (2020). Implementation of Controls for Insertion of Accessible Images in Open Online Editors Based on WCAG Guidelines. Case Studies: TinyMCE and Summernote. In: Nunes, I. (eds) Advances in Human Factors and Systems Interaction. AHFE 2019. Advances in Intelligent Systems and Computing, vol 959. Springer, Cham. https://doi.org/10.1007/978-3-030-20040-4_29
Download citation
DOI: https://doi.org/10.1007/978-3-030-20040-4_29
Published:
Publisher Name: Springer, Cham
Print ISBN: 978-3-030-20039-8
Online ISBN: 978-3-030-20040-4
eBook Packages: EngineeringEngineering (R0)