Money mark up
html css
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.