Editor for Accessible Images in e-Learning Platforms Sandra Sanchez-Gordon
Juan Estevez
Sergio Luján-Mora
Escuela Politecnica Nacional Quito, Ecuador
Escuela Politecnica Nacional Quito, Ecuador
University of Alicante Alicante, Spain
[email protected]
[email protected]
[email protected]
ABSTRACT In this paper, we present a set of twenty features for managing accessible images when generating educational content. With this set of features, we assessed a sample of eight e-Learning platforms and found that, regarding image accessibility, Moodle and Sakai are the most accessible e-Learning platforms, whereas edX and Udemy are the least accessible. We also present an HTML visual text editor for accessible images designed to be a base component across e-Learning platforms. As future work, we plan to propose additional sets of accessibility features regarding other formats, e.g. text, audio, video.
2. 3. 4. 5. 6. 7. 8. 9.
CCS Concepts
10.
• Human-centered computing➝ Accessibility➝ Accessibility design and evaluation methods • Applied computing➝ Education➝ E-learning • Social and professional topics➝ User characteristics➝ People with disabilities
11.
Keywords
13.
12.
e-Learning, Accessibility, Accessible Images, WCAG, HTML.
1. INTRODUCTION Over the period 2012-2016, e-Learning have had a 7.6% annual worldwide growth rate, including K-12, post-secondary, corporate, and lifelong learning [1]. In U.S., 28% of students have taken at least one online course [2]. Unfortunately, students with disabilities cannot take full advantage of online education since eLearning platforms are not accessible enough. In 2012, WebAIM made a survey with almost 2,000 screen reader users, where images with missing or improper descriptions were qualified as one of the most problematic items [3]. Educational content authors and students make extensive use of images for learning purposes, e.g. line diagrams, graphs, charts, flow diagrams. Image accessibility means that the information conveyed by an image can be perceived by blind and visually impaired students, as well as students that turn off images on their browsers to speed up downloads or to avoid bandwidth charges. Image accessibility also improves the searchability, since the alternative text information associated to images is visible to search engines.
2. FEATURES We identified a set of desirable features in an HTML visual text editor for embedding accessible images by reviewing relevant published research on the topic of accessible images [4] and accessibility standards and guidelines, e.g. ISO/IEC 24751, IMS Access for All 3.0, WCAG 2.0, and ATAG 2.0. The proposed set includes twenty features: 1. Allows inserting alternative text from the user interface, i.e.
alt attribute. Permission to make digital or hard copies of part or all of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. Copyrights for third-party components of this work must be honored. For all other uses, contact the Owner/Author. Copyright is held by the owner/author(s). W4A'16, April 11-13, 2016, Montreal, Canada ACM 978-1-4503-4138-7/16/04. http://dx.doi.org/10.1145/2899475.2899513
14. 15. 16. 17. 18. 19. 20.
Allows editing the alternative text from the user interface. Allows editing the alternative text in the HTML code. The name of the input field for the alternative text represents its function. Provides help about how to use the alternative text to improve accessibility. Warns if alternative text has not been provided. Does not generate alternative text automatically. Gives an indication after the insertion that the alternative text should properly describe the image. Keeps the alternative text associated with an image when it was added to the media library and allows editing it. Allows inserting a URL for a long description if the image is complex from the user interface, i.e.
longdesc attribute. Allows editing the URL for the long description from the user interface. Allows editing the URL for the long description in the HTML code. The name of the input field for the URL of the long description represents its function. Provides help about how to use the long description to improve accessibility of complex images. Gives a suggestion about using the long description when the length of the alternative text exceeds 140 characters. Allows inserting a title for the image from the user interface, i.e. HTML title attribute. Allows editing the title from the user interface. Allows editing the title in the HTML code. The name of the input field for the title of the image represents its function. Provides help about how to use the title of the image to improve accessibility.
3. ASSESMENT We used the set of features to assess a sample of eight open or free access e-learning platforms. Table 1 shows the results. Table 1. Image accessibility assessment # 1 2 3 4 5 6 7 8
Platform Moodle Sakai ATutor MiriadaX BrightSpace Canvas edX Udemy
Features 15 13 12 12 9 7 6 6
We found that, regarding image accessibility, the most accessible platforms from the sample were Moodle and Sakai, whereas the least accessible platforms were edX and Udemy. It is interesting to note that Moodle and ATutor use the same base component for their HTML visual text editor. Similarly, Sakai and MiriadaX use
the same base component for their HTML visual text editor. In both cases, differences in assessed features are due to the use of different versions and individual customizations of the base components. Nonetheless, this hints that it would be possible to design and implement a fully accessible HTML visual text editor to use across multiple e-Learning platforms.
4. USAGE SCENARIO The goal is to prototype an HTML visual text editor for eLearning platforms that enables content authors, e.g. teachers and students, to manage accessible images in different usage scenarios, such as creating educational content or posting in forums.
Figure 3. Interface featuring the image type input field If the image type is Complex, the interface requests a long description, as shown in Figure 4. This interface is also in verbose mode; hence help about the use of long description is displayed.
The HTML visual text editor toolbar have three buttons to check the level of accessibility. Content authors could choose among WCAG 2.0 conformance levels A, AA, or AAA, as shown in Figure 1, to obtain a report of issues.
Figure 4. Interface featuring long description input field Figure 1. Editor toolbar featuring WCAG check buttons Figure 2 shows the section of the Insert/edit image interface that presents the input fields for source default image and alternative text. This interface display help for understanding the correct use of the alternative text that appears only when the interface is operating in verbose mode. Once the content author does not need the help, they could de-active it switching to advanced mode.
For the usage scenario described in this section, Figure 5 shows the HTML code snippet generated.
Figure 5. Generated HTML code snippet
5. CONCLUSION
Figure 2. Interface featuring source default image and alternative text input fields The Insert/edit image interface also issues warnings whenever it detects conditions potentially wrong regarding the alternative text. Table 2 describes some possible warning conditions. Table 2. Alternative text warnings #
1
2
3
Warning description Suspicious alternative text. Alternative text is the image file name, e.g. alt=”file.jpg”, or contains generic words such as “photo”, “image of”, and “logo”. Redundant alternative text. Alternative text that is the same as nearby alternative text will be rendered multiple times to screen reader users. Long alternative text. Alternative text should be succinct, yet descriptive of the content of an image. Lengthy alternative text might imply a long description is needed.
Figure 3 shows the section of the Insert/edit image interface for selecting the image type. If the type is Link/Button, the interface instructs the content author to use the specific toolbar button.
When a content author generates educational content that includes images, the HTML visual text editor provides them with the features necessary to make those images accessible. Images that are purely decorative, i.e. do not convey information, should be implemented as CSS backgrounds. Other than that, all images, including linked images, form image buttons and image map hot spots, must have adequate alternative text. Long descriptions for complex images must also be provided. Title is also important, since it complements the alternative text and provides additional information about the image, e.g. author, data sources. For future work, we plan to propose additional sets of accessibility features for other formats, e.g. text, audio, video; to improve the prototype accordingly; and to evaluate it with content authors.
6. ACKNOWLEDGEMENT This research is partially supported by the Prometeo Project by SENESCYT, Ecuadorian Government.
7. REFERENCES [1] Docebo, 2014. E-Learning market trends and forecast 2014 – 2016 report. https://goo.gl/Rkc9sn [2] Babson, 2016. Tracking Online Education in the United States. https://goo.gl/8wjna7 [3] WebAIM, 2012. Screen Reader User Survey #4 Results. http://goo.gl/tbEWyw [4] Madugalla A. 2015. Accessible on-line graphics. In Proceedings of the 12th Web for All Conference (W4A '15). DOI=http://dx.doi.org/10.1145/2578726.2746672
