An Accessible Modal Box

Attached to this post is an example of how to add an accessible modal box to a Lectora title. If you add this object at the title level, you can simply add a modal box (or several) on any page within the title. The object consists of a group of HTML Extension objects (undefined

Bill

Discussion (2)

I've updated the modal box files. These files (attached here as a group) can be added to the Title level, so that a modal box can be added to any page in a title. This is an alternative to the lame "lightbox" provided in Lectora. Of course, if you want to produce accessible content, you have the web accessibility option checked because the "lightboxes" are not accessible. The Lectora developer have chosen not to make the "lightboxes" accessible, but fall back to a native dialog box from decades past. I don't call that a commitment to accessibility.

undefined

showMB("A list|Here is a list of items:|Item 1~Item 2~Item 3");

undefined

showMB("A list|Here is a list of items:|Item 1+Item 2+Item 3");

undefined

Bill

Here is a variation on the theme of an accessible modal box. This one is a tabbed modal box, so when you press the tabs within the modal box, the content changes.

If you add the attached group to the title level, you can add a tabbed modal box to any page in the title. You use the showTMB(text) to display the modal box. The text parameter is the content of the box.

For example,

showTMB("Modal Box Header|Tab 1=This is the content of tab 1.|Tab 2=This is the content of tab 2.|Tab 3=This is the content of tab 3.");

You can add additional paragraphs and/or lists to a tab by placing the text in additional vertical bar segments immediately after the segment defining the tab in which they should appear (see the previous post for more details).

undefined

Bill

Discussions have been disabled for this post