back to blog post

flip box web component demos

Using the flipbox web component to display rich text alternatives for images.

2 examples from the alt text guidance in the HTML spec have been modified to make use of the flipbox web component

Note: concept demo ONLY - needs work - added ARIA 17/04/14

Pressing the flip button displays rich text alternatives for the images


example 1

flow chart: trying to fix a broken lamp.

Dealing with a broken lamp

  1. Check if it's plugged in, if not, plug it in.
  2. If it still doesn't work; check if the bulb is burned out. If it is, replace the bulb.
  3. If it still doesn't work; buy a new lamp.

example 2

Bar chart: Average rainfall in millimetres by Country and Season.

Rainfall in millimetres by Country and Season.
UK JapanAustralia
Spring 5.5 (highest)2.4 2 (lowest)
Summer 4.5 (highest)3.42 (lowest)
Autumn 3.5 (highest) 1.8 1.5 (lowest)
Winter 1.5 (highest) 1.2 1 (lowest)