"Hiding" <del> tag content?
Hello again,
I'm re-HTMLing an online store, and replacing the <strike>old prices and <font color="red"> new prices with <del> and <ins>, being proper tags for showing things like price updates and the such.
However, I've been reading on support for <del> and notice in my own copy of JAWS that del stuff is just read out. That's a problem because the old prices are no longer valid, just the new prices. Hearing two prices makes no sense.
So since aural stylesheets do little, is there something I can assign to del in my CSS to make it not read out, yet somehow visible to all sighted users? The owner does insist on keeping the original prices displayed with a strikethrough, especially when the new prices are often temporary (seasonal discounts or whatever).
So far the only idea I've come up with for now is adding titles for each tag: "original price" and "new discount price".
Anyone got anything clever to try?
Thanks,
poes
Share: 
The speak property has been available since CSS 2.1. Unfortunately, support for aural CSS is poor, so it is best to assume that any visible content will be spoken aloud.
I'd say that screenreader users might still be interested in and persuaded by the original values of your products. A simple way of clarifying to such users would be to include a few words to contextualize the figures, then hiding the additional content from visual UAs. I usually have a generic class "skip" defined in my stylesheets that I keep handy for just such occasions:
| Code: |
| <del><span class="skip">Was</span> £38.00</del>
<ins><span class="skip">now</skip> <strong>£32.00</strong></ins> |
| Code: |
| .skip {
height: 0; list-style: none; overflow: hidden; position: absolute; text-indent: -9999em; } |
Not all of those properties are required for this specific case; this is a handy all-purpose fix for those times that you need to add some content that your designer doesn't approve of.
Share:
Thanks.
I do already have a handy class for things like hidden headers, hidden labels, etc.
.access {
position: absolute;
left: -999em;
}
If you're position: absoluting stuff, you can just either left: -999em (I don't go higher because Opera and Konqueror get squirrelly with higher numbers as this can cross their height/width limits of 32k pixels) or margin-left: -999em. IE has issues with text-align (esp if the parent is aligned right, center or justified) so I just move the whole thing instead of the text.
I'll have to test to see whether title is a better option or actual separate tags (title seems always safe in forms but not sure outside of them... since I can choose titles on or off in my JAWS).
Share:
| Stomme_poes wrote: |
| If you're position: absoluting stuff, you can just either left: -999em (I don't go higher because Opera and Konqueror get squirrelly with higher numbers as this can cross their height/width limits of 32k pixels) or margin-left: -999em. IE has issues with text-align (esp if the parent is aligned right, center or justified) so I just move the whole thing instead of the text. |
Annoyingly, I remember actually having a reason for doing it the way I did, but can't for the life of me recall what that was! Your method is plenty elegant and well thought-out, so unless I can recollect the method to my madness you've made a convert.
Share:
| Code: |
| <del title="Old price from OLD_DATE">£38.00</del>
<strong title="New price until NEW_DATE">£32.00</strong> |
Share:
| Ben wrote: |
| [T]he OLD_DATE is a legal requirement or guideline, afaict. |
That's new to me—thanks for mentioning it.
Share:
I don't know the dates. I can't comply with that part. So far as I know, it's on my boss' whim. They scan in a barcode, enter some hand-made admin-type panel thing, and type in stuff. So when they offer discount on stuff, it's kinda like, they look around the warehouse and decide there's too much of X. Though if time in general were built into the admin-panel thing, then the date-of-entry could be automatically entered as OLD-DATE... but I don't do PHP.
I am eagerly awaiting the Dutch WCAG2 updates though. I guess they're almost done with them. There are no legal requirements at this point, though it does disappoint me that webmasters and businesses in general seem to only move forward with legal prodding. This company I'm at wouldn't have any accessible sites if I hadn't ended up such an a11y-nazi as developer. I'm hoping this gives us some edge over our national competitors... we'll see.
Again I'm worried about relying on title attributes outside of form controls. My reader does not always read titles. How many others offer the option of skipping titles? So far I'm keeping with the pulled-off-screen text inside the del tags 'cause then I can access with Lynx too (yay).
Thanks for the input, I came here to bounce ideas off others.
| Jordan Gray wrote: |
|
Annoyingly, I remember actually having a reason for doing it the way I did, but can't for the life of me recall what that was! |
All I know is when I've got images off and CSS on, negative text-indent gives me fits of rage (even though in this case it really wouldn't matter either way). Since IE conveniently has a text-indent retardo bug, I can pretty much avoid using it entirely : ) I hate people using it in menus for buttons though.
Share:
Commenting scripts in JavaScript
The JavaScript engine allows the string "<!--" to occur at the start of a SCRIPT element, and ignores further characters until the end of the line. JavaScript interprets "//" as starting a comment extending to the end of the current line. This is needed to hide the string "-->" from the JavaScript parser
| Quote: |
| <SCRIPT type="text/javascript">
<!-- to hide script contents from old browsers function square(i) { document.write("The call passed ", i ," to the function.","<BR>") return i * i } document.write("The function returned ",square(5),".") // end hiding contents from old browsers --> </SCRIPT> |
Share: