Implementation of controls for insertion of accessible images in open online editors based on WCAG guidelines. Case studies: Tinymce and summernote

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. © Springer Nature Switzerland AG 2020.