Storybook Comic Book Builder demonstrates a design for an Accessible Content Management System that in turn creates accessible documents, some of which may be thinly disguised as web comic books. The front end for Storybook is nominally a gallery of web comic books as shown here.
This screen shows that the Storybook gallery itself successfully passes the WebAIM test for Web Content Accessibility Guidelines (WCAG) accessibilty standards. Note that the older comics in the gallery were used in modeling development and may not themselves all be compliant.
The WebAIM evaluation is a good starting point to judge accessibility.
To invoke Storybook from the gallery landing page you can click the menu icon on the header bar and then chhose Run the Storybook Comic Builder from the buttons list. In addition to launching Storybook the menu offers a few other choices, some of which may have a small entertainment value.
Storybook uses Facebook to perform user authentication and logins. Here we have also asked the user to give Storybook a "Like" on Facebook.
This screen shows the WebAIM evaluation of the user authentication portal.
If our Facebook logon is successful that success is shown by this screen. We can continue from here by clicking "Next" in the Footer.
This is the main landing screen for the builder function proper. As it states, users are requested to provide information about the Comic they wish to create.
Here we can see that the Storybook Comic Book Builder application landing page satisfies the webAIM evaluation.
At the bottom of the Storybook Comic Book Builder page there is a dialog which now shows that, since we have not done anything, Storybook also has nothing to do.
This screen along with the three following illustrate the process of selecting and uploading two of the images used by Storybook to create the comic. One image is optional, that being a background image which will appear behind each panel or page in the comic. The other image is required, that being the image used on the gallery card which will be displayed in the Comic Book Gallery. After each upload completes, click "Next" in the footer at the bottom of that dialog to return to the Comic Book builder page.
We can also see that these two dialogs used by the Storybook application satisfy the WebAIM evaluation for accessibility.
Now if we look at the page bottom dialog we are presented with options to save our inputs.
Let's assume that we have given responses to all of the requests presented here on the Storybook Comic Book Builder and that we then save our configuration information and check the box to preserve the content we presently have. If this is a new comic, that content will include the two images we provided thus far. When we have done that, we can click "Next" in the footer.
Now we have a sequence of dialogs which will let you select and upload the comic contents proper.
This first dialog, the Comic Image Files Upload page, gathers the images that comprise each page in the comic. Following are two screens that show the progress of some uploads followed by a third screen that shows the dialog itself satisfies the WebAIM evaluation for WCAG compliance.
If we wish to show only an optional caption text with NO image we use a special image of 1 pixel by 1 pixel in size. This allows us to create documents that are largely text panels without images.
In order for Storybook Comic Book Builder to include "alt text" with a Comic image, a text file must be uploaded for each image. The alt text filename must match the associated image filename.
Storybook Comic Builder suggests the inclusion of alt text for the images displayed in a Comic. Including this alternate text helps to provide information about the images to the audience, and greatly improves accessibility. Text content is also important for SEO or Search Engine Optimization. The best alt text for search engines and viewers alike provides meaningful content about the associated image.
The alt text dialog also satisfies the WebAIM evaluation.
Each page or image in the comic may have an alternate image to display if the page image or a "play arrow" is clicked. In the example comic the alternate images are GIF slideshow animations. In addition to an alternate image, each panel or page may have an associated audio soundtrack, and the audio may be muted or unmuted by viewer choice. (Note that while audio is supported the dialog to select and upload that content is not yet included in the Builder.)
In order for the comic to be accessible it should also provide meaningful alt text for each of the alternate images, and the alt text presented to the user should reflect the text for that image. So the accessibility should track the content.
Each panel may have an optional Caption Text panel.
To share the comic on Facebook it is best to have a specified "preview image" that Facebook will use in the display of the link.
This is the last dialog in the content gathering sequence, and clicking "Next" in this dialog will set us up to actually create the comic.
This page, the Storybook Comic Book Creator, allows us to review our information and then actually invoke the builder with a click.
After a short delay the Creator will reload and display this dialog page to allow the user to easily share their comic to Facebook and also to allow them to optionally download a ZIP archive of their comic. There is a timeout counter which is reset by cursor movements (eg a mouse motion) but after 30 seconds of inactivity the user is redirected to their new comic.
The WebAIM evaluation tool does not interact well with the Creator dialog, so for example trying to use the eval tool to test the creator page results in this display where we can see that the Creator would not accept requests from WebAIM. Actually it demonstrates some security for the Storybook application. Meanwhile, we can see that even in refusal the Creator satisfies the WebAIM evaluation.
Now we have an addition to our Storybook Comic Books Gallery, our newly created comic which was titled "BMG Enhanced".
The new addition to the gallery satisfies the WebAIM evaluation test, altough the eval test flags the card image alternate text as being lengthy. However, the image being described by the alt text is a complex animation which justifies a longer text.
(Most screen readers truncate this alt text to 125 characters.)
If we select the new comic from the gallery it opens for reading as seen here.
The newly created comic satisfies the WebAIM evaluation for WCAG. Because the comic has three animations that use a longer than 125 character description the eval warns us about those captions as alerts.
That summarizes the process of creating a Storybook Comic Book. What we have is an accessible application that creates and hosts accessible content.
At this time Storybook allows only one comic book per user, so if you already have a comic hosted and logon to the Builder you will be presented with this dialog.
