The web is primarily a visual medium with a little audio here and there. HTML5 supports the video and audio tags but our other senses have been shamefully neglected. Until now.
The W3C will shortly announce three new HTML5 elements which support alternative sensory interfaces:
<texture>for touch<aroma>for smell, and<flavor>for taste
HTML Usage
The new elements will normally be used as wrappers for other items. For example, you might want to apply a fresh grass odor to an image of a field, e.g.
<aroma fresh="50%" sweet="20%" warm="35%">
<img src="myfield.jpg" alt="field" />
</aroma>
The categorization attributes will vary depending on the tag, e.g.
- texture: smoothness, firmness, flaccidity, temperature
- aroma: sweet, pungent, acrid, fragrant, warm, dry, sour
- flavor: sweetness, sourness, saltiness
The volume and muted attributes are also supported to indicate the strength of odors and flavors.
However, unless you’re a chemical expert, defining these attributes isn’t easy. For that reason, all tags can use the src and type attributes to point to sensory definition files which contain one or more textures, aromas or flavors, e.g.
<aroma src="cheese.odor" type="stilton">
<img src="stilton.jpg" alt="stilton cheese" />
</aroma>
Vendors will provide several pre-defined sensory packs within their browsers. However, Chrome’s representation of Roquefort is likely to differ from IE’s; it may be several years before we reach agreed sensory standards. Fortunately, it will be possible to develop your own definition files if compatibility issues arise.
CSS Properties
Textures, odors and flavors can also be applied from CSS. For example, our online cheese shop could link to a Stinking Bishop page:
<a id="stinking" href="stinking-bishop.html">
<img src="stinking-bishop.jpg" alt="stinking bishop cheese" />
</a>
CSS could apply an appropriate aroma, flavor and texture as the user hovers over or focuses on the link. Sensory definition files or classifications can be used:
a#stinking:hover, a#stinking:focus {
aroma: url("cheese.odor") stinkingbishop 50%; /* pack, type, volume */
flavor: url("cheese.taste") stinkingbishop 98%; /* pack, type, volume */
texture: 25% 30% 20; /* smoothness, hardness, temperature (degrees C) */
}
JavaScript APIs
JavaScript APIs will be available for the new sensory elements. For example, you could mute or change the volume (strength) of a sensory tag, e.g.
var cheese = document.getElementById("stinking");
var c = 0;
Pungent();
function Pungent() {
cheese.aroma.volume = c + "%";
c += 5;
if (c < 100) setTimeout(arguments.callee, 500);
}
This example increases the cheese odor over time. Note that aroma-generating devices are likely to have slower response times than screen output: thorough testing will be required to ensure aromas and flavors don’t clash.
Hardware Support
Hardware devices which support these sense elements will be introduced during the next year. One of the first is a multi-sensory mouse by Ollofipra, the Scandinavian PC manufacturer. It uses a patented rubber mesh to change shape, texture and temperature. It also emits a range of smells and the central wheel generates different flavors. The company hopes to add the technology to touch-sensitive monitors so they become lick-able.
Please note that the W3C specifications for the sensory elements are at an early daft stage and implementation changes are inevitable. However, the future looks promising and the tags have potential to revolutionize web interfaces. You should certainly discuss it with your colleagues today.
Learn Responsive Web Design
- SitePoint's ebook: Jump Start Responsive Web Design
- Responsive Web Design: Key Concepts online course
- Unlimited access to SitePoint Premium Content
Join Learnable $29 Includes all SitePoint books
