Previous Page | Next Page | Table of Contents | Diagram Center Home
Making This Image Accessible
This image can be made accessible using haptic technology. Haptic technology uses force, vibration, or other physical effects to convey information to a user via the sense of touch. A common mainstream example of this is a cell phone that vibrates with an incoming message or call. Haptics would be used here to make the image accessible by causing the outline of the shape to vibrate when the reader runs their finger over it. This allows them to sense the size and shape of the object. To experience how it works please visit the Educational Testing Service (ETS) created sample book with a haptic enabled device. To test if a device is haptics compatible visit the Haptics test site.
While using haptic technology for accessible images is still in the initial phases of development and is currently best suited to lines and basic shapes like the one in this example, many groups are experimenting with different haptic feedback devices. For example, some groups are experimenting with electrostatic haptics to create different sensations by varying the perceived “friction” as a finger moves across a tablet screen. Developers of the GraVVITAS device out of Monash University in Australia, are experimenting with haptic feedback devices that can allow a user to feel the outline of common shapes by exploring a touchscreen using a haptic glove. ETS is working to implement haptic feedback for STEM eBooks with graphic content. To read more on their research please visit Integrating Haptic Feedback for Image-based STEM Content within HTML and eTextBooks
How to Add a Haptic SVG to an EPUB 3 File
1. Create or open an existing EPUB XHTML content file. Add the SVG image to the original file. Below is a sample XHTML file with the SVG—in this case, a square shape is included
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<meta charset="utf-8"></meta>
<title>Haptic SVG Test</title>
<link rel="stylesheet" type="text/css" href="epub.css"/>
</head>
<body>
<section id="ch1">
<h1>Haptic SVG Test</h1>
<div id="haptic-svg-test">
<p>The SVG image, a square, has been added below.</p>
<!-- SVG Head -->
<svg baseProfile="full" height="400" version="1.1" width="100%" viewBox="0.0 0.0 371.0 363.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- SVG Content -->
<clipPath id="p.0">
<path d="m0 0l371.0 0l0 363.0l-371.0 0l0 -363.0z" clip-rule="nonzero"></path>
</clipPath>
<g clip-path="url(#p.0)">
<!--id values, such as p1, f1 and l1 are used to indicate portions of the SVG image that will generate different vibration effects when touched -->
<path id="p1" fill="#000000" fill-opacity="0.0" d="m0 0l371.53543 0l0 363.03412l-371.53543 0z" fill-rule="nonzero"></path>
<path id="f1" fill="#ea9999" d="m112.0 96.0l160.0 0l0 160.0l-160.0 0z" fill-rule="nonzero"></path>
<path id="l1" stroke="#ff0000" stroke-width="8.0" stroke-linejoin="round" stroke-linecap="butt" d="m112.0 96.0l160.0 0l0 160.0l-160.0 0z" fill-rule="nonzero"></path>
</g>
</svg>
<p>The text continues here . . .</p>
</div>
</section>
</body>
</html>2. Create a JavaScript file to add vibration to the SVG. Below is code from a sample file called, “vibrate.js.”
// Haptic Effects while Touching elements in the page, with effect determined by id values
// This approach uses the W3C Vibration API, supported in Android browsers such as Chrome and Firefox
var curVibe = 0;
var tmint;
function initHaptics() {
// Listen for touchmove and touchend.
document.body.addEventListener(“touchmove", buzzPos, false);
document.body.addEventListener(“touchend", buzzStop, false);
tmint = window.setInterval(buzzTime, 100);
}
function buzzTime() {
window.navigator.vibrate(curVibe);
}
function buzzPos(event) {
// This makes vibration work in Chrome Beta for Android (although it can cause other issues).
event.preventDefault();
// Find the element where the touch occurs.
e = document.elementFromPoint(event.touches.item(0).clientX, event.touches.item(0).clientY);
curVibe = 0;
// If the element is part of the SVG we wish to have vibrate, make it so.
if (e.id == “f1") { window.navigator.vibrate(75); curVibe = 75; }
if (e.id == “li") { window.navigator.vibrate(75); curVibe = 75; }
}
function buzzStop() {
// This makes vibration work in Chrome Beta for Android (although it can cause other issues).
event.preventDefault();
// Stop vibration.
window.navigator.vibrate(0);
curVibe = 0;
}3. Add a link to the JavaScript file in the <head> section of the .xhtml file as shown.
<head>
<meta charset="utf-8"></meta>
<title>Haptic SVG Test</title>
<link rel="stylesheet" type="text/css" href="epub.css"/>
<script type="text/javascript" src="test.js"></script>
</head>4. Modify the .xhtml file to call the appropriate JavaScript function on page load, as shown.
<body onload="initHaptics()">5. Make sure EPUB3 will support the JavaScript file by adding an “item” for it to the “manifest” in the package.opf file as shown.
<manifest>
. . .
<!-- Javascript files -->
<item id="js" href="test.js" media-type="text/javascript"/>
. . .
</manifest>6. Make sure the .xhtml file is set to support both SVG and scripting by adding a “properties” attribute to its “item” entry in the “manifest” of the package.opf file as shown.
<manifest>
. . .
<item id="t1" href="text.xhtml" media-type="application/xhtml+xml" properties="svg scripted"/>
. . .
</manifest>7. The book is now ready. Open this publication in Readium (web version) in Chrome or FireFox on an Android tablet with vibration capabilities. Go to the page of the EPUB containing the SVG image and explore the images with a single finger. As the finger passes over the shape a vibration should be felt.
Previous Page | Next Page | Table of Contents | Diagram Center Home
