[uf-discuss] Putting microformats on the BBC iPlayer

[Adam Craven - Four Shapes]

Hi fellers,

We're working on the next version of the BBC iPlayer and would love to  
put some microformats in there.

Below is what I've gotten so far. In this particular instance there's  
a single box (206x115) with an image attached. When hovered over,  
using JavaScript, the idea is to retrieve the last 7 days of shows for  
that particular program. I've opted to use the vevent pattern as it's  
the most widely supported currently - this is open to change in the  
future.

I have a concern though. At the moment the spec's datatime pattern is  
<abbr>. Unfortunately screen readers are going to mangle this, which  
is unacceptable naturally, so I've reverted to hiding the abbr with  
{display:none} (this will cover the majority of screen readers) and  
filled the field with with extra text, date;

<h4><abbr class="dtstart dtstamp" title="2008-03-04T00:00:00Z">Date:</ 
abbr>Mon 8pm - Radio 2</h4>

That way the information can still be parsed. I understand this is an  
incorrect implementation, but currently unsure how to work around this.

Does anyone have suggestions how this can be worked around whilst  
still keeping relatively good screen reader support?



	<li class="programme">
					<div class="feature">
						<a id="uid-9121211" href="#9121211" class="image uid url">
							<img src="img/_dev/206x115.jpg" width="206" height="115"  
alt="206x115" />
						</a>
						<div class="details">
							<a class="play-tv" href="#9121211">
								<span>Play TV</span>
							</a>
							<h3 id="summary-9121211" class="summary">
								<a href="#9121211">Two pints of Juergen and a ...</a>
							</h3>
						</div>
					</div>
					<ul>
						<li class="vevent featured">
							<a href="#summary-9121211" class="include"></a>
							<a href="#uid-9121211" class="include"></a>
							<h4><abbr class="dtstart dtstamp"  
title="2008-03-04T00:00:00Z">Date:</abbr>Mon 8pm - Radio 2</h4>
							<div class="description">
								<p>Short description of episode lies here. It can be up-to 90  
characters long.</p>
								<p>Expires in 3 days</p>
							</div>
							<p><a href="#downbaby">More episodes >></a></p>
						</li>
						<li class="vevent">
							<a href="#summary-9121211" class="include"></a>
							<a href="#uid-9121211" class="include"></a>
							<h4><abbr class="dtstart dtstamp"  
title="2008-03-04T00:00:00Z">Date:</abbr>Mon 8pm - Radio 2</h4>
							<div class="description">
								<p>Short description of episode lies here. It can be up-to 90  
characters long.</p>
								<p>Expires in 3 days</p>
							</div>
							<p><a href="#downbaby">More episodes >></a></p>
						</li>
						<li class="vevent">
							<a href="#summary-9121211" class="include"></a>
							<a href="#uid-9121211" class="include"></a>
							<h4><abbr class="dtstart dtstamp"  
title="2008-03-04T00:00:00Z">Date:</abbr>Mon 8pm - Radio 2</h4>
							<div class="description">
								<p>Short description of episode lies here. It can be up-to 90  
characters long.</p>
								<p>Expires in 3 days</p>
							</div>
							<p><a href="#downbaby">More episodes >></a></p>
						</li>
					</ul>

					
				</li>
</li>