Money mark up

html css

16 Oct 2009

• HTML
• CSS
• Test page
• Question

I recently came across a tweet from a friend of mine Roy with an interesting take on marking up discounted product.

How do you guys feel about using - from <del>€ 27,70</del> for <ins> € 25,00</ins> for discounted products?

As I agree upon his approach, I had an extra option for it. In dutch we differ in writing and speaking of currency. In writing the € symbol comes before the amount, in speaking it comes after. So I thought about screen readers and came up with a solution.

Let's always put the € in full, so not as a symbol, after the amount and use CSS to present it in a proper manner.

So I propose we do this:

HTML

<p>
	from
	<del class="money">
		25.99
		<span>euro</span>
	</del>
	for
	<ins class="money">
		15.99
		<span>euro</span>
	</ins>
</p>

CSS

del {
	color: #666;font-style:italic;
}
ins {
	font-weight: bold;
}
.money {
	position: relative;margin: 0 6px;text-decoration: none;
}
.money:before {
	content: '€ ';
}
.money span {
	position: absolute;
	left: -9999em;
}

Test

I made a small example page for you to check out. Yes I know some things a quirky in IE, but for this example I don't care.

It looks quit nice and is in semantically correct, or so I think.

Question

What I am wondering is, is there anybody that reads this that can tell me what my proposed solution does to screen readers and the like. Is this more or less accessible, I think so, but I don't know. My knowledge of assistive techniques is not as good, as I would like it to be.

So please, let me know if I am right or wrong in the comments. I would love to hear your comments, here or on twitter.

← Home