Skip to main content

Implementation of Controls for Insertion of Accessible Images in Open Online Editors Based on WCAG Guidelines. Case Studies: TinyMCE and Summernote

  • Conference paper
  • First Online:
Advances in Human Factors and Systems Interaction (AHFE 2019)

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

Subscribe and save

Springer+ Basic
EUR 32.99 /Month
  • Get 10 units per month
  • Download Article/Chapter or eBook
  • 1 Unit = 1 Article or 1 Chapter
  • Cancel anytime
Subscribe now

Buy Now

Chapter
USD 29.95
Price excludes VAT (USA)
  • Available as PDF
  • Read on any device
  • Instant download
  • Own it forever
eBook
USD 139.00
Price excludes VAT (USA)
  • Available as EPUB and PDF
  • Read on any device
  • Instant download
  • Own it forever
Softcover Book
USD 179.99
Price excludes VAT (USA)
  • Compact, lightweight edition
  • Dispatched in 3 to 5 business days
  • Free shipping worldwide - see info

Tax calculation will be finalised at checkout

Purchases are for personal use only

Institutional subscriptions

Similar content being viewed by others

References

  1. W3C: Accessibility (2018). https://www.w3.org/standards/webdesign/accessibility

  2. WAI: Introduction to Web Accessibility (2018). https://www.w3.org/WAI/fundamentals/accessibility-intro/

  3. 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)

    Google Scholar 

  4. Tiny: TinyMCE (2019). https://www.tiny.cloud/

  5. Summernote: Summernote Super Simple WYSIWYG Editor in Bootstrap (2019). https://summernote.org/

  6. W3C: Web Content Accessibility Guidelines (WCAG) Overview (2018). https://www.w3.org/WAI/standards-guidelines/wcag/

  7. W3C: Authoring Tool Accessibility Guidelines (ATAG) 2.0 (2015). https://www.w3.org/TR/ATAG20/

  8. 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

  9. W3C: Web Content Accessibility Guidelines 1.0 (1999). https://www.w3.org/TR/WCAG10/

  10. W3C: Web Content Accessibility Guidelines (WCAG) 2.0 (2008). https://www.w3.org/TR/WCAG20/

  11. ISO: ISO/IEC 40500:2012 (W3C) Information technology - W3C Web Content Accessibility Guidelines (WCAG) 2.0 (2012). https://www.iso.org/standard/58625.html

  12. W3C: Web Content Accessibility Guidelines (WCAG) 2.1 (2018)

    Google Scholar 

  13. 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)

    Google Scholar 

  14. 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)

    Google Scholar 

  15. 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)

    Google Scholar 

  16. 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)

    Google Scholar 

  17. 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)

    Google Scholar 

Download references

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

Authors

Corresponding author

Correspondence to Sandra Sanchez-Gordon .

Editor information

Editors and Affiliations

Rights and permissions

Reprints and permissions

Copyright information

© 2020 Springer Nature Switzerland AG

About this paper

Check for updates. Verify currency and authenticity via CrossMark

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)

Publish with us

Policies and ethics