Creating the Learn My Way EPUB and Reader
A step-by-step guide to creating the 'Learn My Way' EPUB UDL textbook
- Available in:
- English
- Español
Lessons we learned from creating the 'Learn My Way' reader.
1. Consider the technology
Before starting the process of converting a textbook to a Universal Design for Learning (UDL) digital textbook, consider the technology distribution platforms, target devices and content types. If the content is to be consumed on all device types, screen sizes and orientations, you must consider the ways your publication will be presented on these screens. In many cases, this calls for reflowable layout or web-based layout styles.
The target devices for the ‘Learn My Way’ pilot were Android tablets (4:3) and, taking into account the target demographic (early grade learners), a fixed-layout EPUB in landscape orientation was chosen to make best use of the tablet screen layout dimensions and to offer the learners an engaging experience. Consult technology experts to determine any constraints that could prevent features, such as sign language video and interactivity, from displaying correctly in your digital publication due to software compatibility issues or other factors.
In addition, you must consider what reader application provides support for the most optimal experience – some readers do not support all features of a UDL EPUB. In the pilot, the Android Readium 1 project was modified by updating the interface for early grade learners and users with disabilities, and support was built in for synchronized language video powered by SMIL (Synchronized Multimedia Integration Language) and the native video window.
To view the ‘Learn My Way’ code base, click here.
To view the Readium open-source project (now version 2), click here.
2. Select the content
As a publisher or content creator, being strategic about which content is best suited to a UDL-style adaptation can yield optimal results. Content that is particularly well suited to this style of adaptation features multiple learning styles (visual, auditory, kinesthetic and read-writing), such as image content, text content and exercises, and covers topics that are figurative or representative of core concepts in early childhood education.
The Brazilian Grade 1 textbook Porta Aberta was chosen as the pilot textbook as it represents a balance of visual and text-based material, and the many exercises present challenges for accessible adaptation. The goal in choosing this book was to convert these activities and content to an accessible format using the tools available. The content also presents such challenges as how to realize the activities as interactive content (HTML5 and JavaScript) and include sign language video and audio media overlays in the same package.
The sample below shows some of the pages that were adapted.
3. Adapt the content - scripting and storyboarding
Once the media type was selected, the concept, script and storyboard for the textbook were prepared using UDL principles and taking into account the learning styles and inclusion of all learners and learner groups. One example concerns the instruction to "look outside the classroom and tell us what you see" and changing it slightly to "go outside the classroom and describe what you see, hear or feel".
In the pilot, the underlying Porta Aberta content was preserved but the exercises were modified to make use of the UDL framework with multiple methods of representation and stimulation and with engaging ways to present the content. Consideration was given to providing ways for learners to express what they know through interactivity.
As part of this scripting process, all the instructions, confirmations, encouragements and steps in the interactive exercises were prepared and standardized across the app experience (including the use of recognizable sounds) so the users receive feedback in both visual and auditory forms to better track their progress.
During the scripting process, 'image descriptions' were also drafted for all the image content to be used in the authoring phase.
4. Digitize and manage the assets
Depending on the original format of your content (whether it be a PDF, EPUB, Word document) there are multiple ways of extracting the image, text and audio elements to be used in your accessible digital textbook. It is paramount that you preserve the quality of the images and the fidelity of the text. Use a tool like Adobe Acrobat, which will allow you to export text and images from PDF, or one of many other online tools.
If these methods do not produce accurate results, it is also possible to use 'desktop screenshot' to capture the content and save it to your hard-drive. In the Porta Aberta pilot, image and text export tools and screenshots were necessary to capture the high-fidelity image files. In one instance, the image file of a farm happened to fall over a page boundary, which caused image content to be lost. To repair the image, Adobe Photoshop and the Content Aware Fill tool were used to restore the missing parts of the image so it could be used in the book.
In addition, the original PDF featured some stencilled black and white images made available for the child to colour in. The black and white stencils were cropped out using the Photoshop Lasso Tool and then colour versions were created to be used as part of the interactive ‘finding activity’.
5. Record voice-over & sign language video (optional)
If you are planning to add media overlays or embedded/synchronized sign language video, you will need to record them. This can be a time-consuming and costly step as you will need to book voice actors and a recording studio for voice-over. For the sign language video, you will need to book a deaf signer, an interpreter, possibly additional experts and a video recording studio with proper lighting and production conditions.
For a guide on recording voice-over, see the relevant section in the guidelines.
For a guide on recording sign language video, please visit this page.
6. Start the authoring process
When starting the authoring process, choose the authoring tool based on the type of experience and accessibility features it provides. This will make the process and final result much more effective. In general, such authoring tools as PubCoder and Adobe InDesign add a great deal of additional and often unnecessary code that can 'bloat' your codebase, and can make it difficult to edit the source-code for accessibility after they have been generated, so you must be prepared to work with less than optimal EPUB files that do not conform to the established standard.
See our list of authoring tools here.
As part of the authoring process, important decisions must be made regarding the design and font choice. Design includes such aspects as colourful backgrounds, the use of images as mnemonic markers or the use of specialized fonts designed for specific learner groups, such as the iDyslexic font used in the EPUB pilot.
Remember to include a glossary at the end of the textbook with key words and concepts you want the learner to remember or understand.
When creating the Porta Aberta UDL textbook, the PubCoder tool was used to lay out the content and storyboard the pages before editing the code for accessibility. This provided a useful WYSIWYG (‘what you see is what you get’) editor, allowing greater focus on getting the layout and structure of the book right and on embedding certain interactivity features, such as the interactive sign language videos in the ‘finding activity’.
7. Export the EPUB from the authoring tool
When you are ready to export your EPUB from your authoring tool, export it as an EPUB 3 package that will be unzipped in the next step. In PubCoder, select EPUB 3 -> All Pages -> EPUB File on the top left-hand side and press ‘play’ to generate the EPUB file. Follow the prompts and your EPUB will be saved to your computer.
8. Adding interactivity using PubCoder - (optional)
For the Porta Aberta pilot textbook, PubCoder was used as an initial layout tool to generate a fixed layout book with interactivity designed to fit tablet screens. One exercise (tapping on images on a farm) was easily created using PubCoder's hotspot interactivity action function where actions (show, hide, play a sound, etc.) can be specified by touching a specific object on the screen. This is useful for creating simple interactivity without the need for code. It also allowed launching videos from interactive hotspots, which provided a way to synchronize sign language video with interactive onscreen objects.
Authoring tools like PubCoder also include templated interactive activities, such as the 'memory activity' and 'true-or-false' activities, that can be added directly in the authoring tool. This provides a quick way to include interactivity in your EPUB, but custom modification will be required to ensure these activities are accessible to all users.
The trade-off of using interactive objects as part of these authoring tools is the difficulty to create any type of interactivity and their inability to conform to accessibility guidelines without custom modification. If an activity with interactivity excludes a specific disability (for example, for the ‘finding activity’, users tap on images on the screen, which may exclude users who are blind or have low vision), an alternative activity must be provided (the ‘listening activity’) to address the exercise’s concepts.
9. Edit the EPUB code
To access the EPUB code and make changes, use the eCanCrusher or Calibre tools to unzip the contents of the EPUB package so they can be edited. A code editing tool well suited to the task is Sublime Text. It allows you to make edits to the code and structure of the EPUB, including accessibility updates to the metadata, image descriptions, table of contents, semantic HTML and RER tags. After modifying the EPUB to suit your needs, you can repackage it as an EPUB using eCanCrusher or Calibre.
To finalize the process, validate the EPUB by using an EPUB checker, such as Pagina or Daisy-Ace. After completing the UDL book, test it with target users to identify if you have any missing links or gaps in navigation.
10. Create accessible interactive activities (optional)
Additional interactivity, such as the ‘sorting activity’, ‘listening activity’ and ‘spelling activity’, can be created from scratch using JavaScript and embedded into the textbook after the fact. For the Porta Aberta pilot textbook, the UDL principles were created by making use of all learning styles in the design and implementation. The activities all feature consistent layout, with questions on the left-hand side and answers on the right side.
For more information, see the Accessible Interactive Activity Templates page.
11. Add image descriptions
Image descriptions can be added in one of two ways:
- Using an authoring tool; or
- For custom HTML, adding tags.
For guidance on adding image descriptions, refer to the Poet Image Description Tool.
In the Porta Aberta EPUB, the HTML was modified and the tags were added manually. In the newest version of PubCoder, however, you can add image descriptions directly within the application as you are working.
12. Add media overlays
Media overlays are an EPUB 3 feature that allows the real audio to be synchronized with text. This greatly enhances text by adding real audio narration that can make content more engaging to early childhood learners.
The method used for adding media overlaps in the Porta Aberta EPUB involved PubCoder's easy automated tool for generating SMIL from audio files and keystrokes. This method can greatly improve content creators’ ease of access to media overlaps and is recommended as a good technique for learning how to make best use of this technology. To use this tool:
- Press ‘Read Aloud’ in the top menu toolbar (or Edit > Read Aloud).
- Choose the text content you wish to add your media overlays to.
- Import or generate an audio file.
- Edit the breakdown of phrases for highlights.
- Click to start, the voice over will play, and you must press space to move the media overlay highlight to the correct sentence corresponding with the voice-over.
You can test your ‘Read Aloud’ in PubCoder by pressing ‘Preview’.
Watch our video demo on how to add media overlays to your EPUB 3 using PubCoder.
You can further edit the media overlay implementation by editing the XHTML id tags to match the SMIL files.
13. Add sign language video
Sign language video is perhaps the heaviest and most demanding element in the EPUB repertoire as its size not only affects the package size of the book itself, but also the space on the page. It can conflict with the layout of the book and the content creators’ publishing intentions. The two ways to include sign language video in your EPUB are to:
- Embed the video in the page using HTML or an authoring tool, which will save the video file with the textbook when it is published. If the book has sign language on every page, aim to position the sign language video in the same spot on each page to aid in consistency and reduce confusion. Take liberties to lightly rearrange the underlying content to create space for the sign language video window.
- Send video events to a floating video window in the native reading application and download the video files into a folder in the reader application. This technique is more technical and requires a software developer. These events can be linked to video files using JavaScript (for interactive activities) or modified SMIL files (in the case of synchronized text). Since the reader application processes the sign language video files, the video window is flexible and can be resized and moved around the screen at the user's convenience.
14. Customize the reader application
Although a UDL textbook should be able to function independently in any reading environment, the optimal way to consume the book is in a reader application that supports all the accessibility features required. The 'Learn My Way' reader includes toggles, sign language video, voice-over, text-resizing, and easy and friendly navigation for early childhood learners. The introduction of the application was actually extended to add a 'settings' on-boarding process that ultimately customizes users’ reading experiences based on the selections they make.
The reader application must also conform to accessibility principles, as must the EPUB, and thus audio descriptions for all onscreen images and buttons are needed. This way, all learners can access the reader and navigate through the interface regardless of their disability type or learning style. Examples include the option buttons to turn on and off voice-over that reads out loud, and a bookshelf of content that will animate and make a sound when a user taps to access content. This visual animation and audio cue improves usability for all users including those with visual or auditory disabilities.
15. Test and distribute
After the completion of the EPUB, it must be tested and validated in a reader application, such as Readium for Chrome or VitalSource Bookshelf. The 'Learn My Way' reader application itself is based on the Readium 1 open-source code base and is designed to run any EPUB opened in it. You may freely and without restriction use the 'Learn My Way' reader application as a basis for your project, or simply learn and use the techniques and processes outlined here that served to create this initiative’s proof-of-concept, the pilot textbook Porta Aberta.
