Suggestions please (Full Version)

All Forums >> [Web Development] >> Accessibility



Message

Kitka -> Suggestions please (1/28/2007 12:53:31)

A client wants to advertise a special on their website and this is the basic code and text I am using - but it fails WAI: 

<div id="promo">
<p><a href="special.htm" title="More information and order form">Trial our Product <br />
Save 25%<br />
Click here to<br />
<img src="images/order-now.gif" alt="Order Now" title="Order Now" width="86" height="20" /></a></p>
</div>


The error is this:
quote:

13.1 Clearly identify the target of each link.

* Rule: 13.1.1 - All Anchor elements are required not to use any of the defined link phrases in the link text.
o Failure - Anchor Element at Line: 38, Column: 4


It is complaining about the "Click here to" text. Originally I didn't have it there, but both the site owner and my colleague observed that there was no overt indication the visitor needs to click on the ad (div) to find out how to get the special.

Bearing in mind that the div is only 150px wide, how can I clearly indicate that the button/whole div needs to be clicked and also pass WAI?



Tailslide -> RE: Suggestions please (1/28/2007 13:41:20)

Yeah the whole "click here" thing is a bit of a no-no accessibility-wise (we've all done them though!). I had a similar issue recently on a site which was selling vehicles. It had a listing with the vehicle name, price, size etc and a "more details" link through to, well.. more details. But I knew I couldn't just have 20+ links that all just said "more details" so what I did was have: 

<a href='vehiclepage.html?id=78'>More Details <span class="more">about this Fiat Swift Kontiki 615</span></a>


And I used the span to position the about this etc etc bit off screen. That way it passes the checkpoint and it makes more sense to screenreaders.



Kitka -> RE: Suggestions please (1/28/2007 23:36:35)

Thanks Tailslide! That technique looks very useful, but unless I am more confuzzled than normal [&:] it won't help in this situation.

I can remove the whole line that says "Click here to" and the page will both pass WAI and still be semantically correct for screen readers.

However, my difficulty is visually alerting the 99% of visitors who don't use a screen reader.

As I mentioned, originally I didn't have that line in the ad, but included it after the client and my colleague independently observed that there is no visual cue for people to know that they need to click on the div/button to go to the specials page.

Substituting "More details" for "Click here to" seems to me to be semantically incorrect.

I have attached a pic of the div as it is difficult to explain in a few words what I am working with. I have changed the top line of text to obfuscate the actual brand.

Maybe I should just make the whole thing into a graphic rather than just the background?

[image]local://upfiles/4513/E16510A0C740458499932486CDC0220D.jpg[/image]



rubyaim -> RE: Suggestions please (1/29/2007 0:43:22)

quote:

However, my difficulty is visually alerting the 99% of visitors who don't use a screen reader.

I've struggled with that at times as well - sometimes 'click here' does seem to be the best option for alerting visitors (as is 'read more' and 'more info' etc). Let's face it, we are all used to seeing it and know what it means [:)]

Placing the entire thing in an image would work I think, that way sighted users do see the 'click here' your client would like.

Another option might be to change the button to read 'Click here to Order Now' (over two lines) and place the link around the button only. That way the button will be a little larger and perhaps more obvious to users yet not really increase the space of the div.




Tailslide -> RE: Suggestions please (1/29/2007 2:39:38)

You could use an image - as long as it's still fairly clear with images off etc then I can't see an issue offhand (allowing that the text size should be reasonable as people won't be able to resize it).



Kitka -> RE: Suggestions please (1/29/2007 22:49:33)

quote:

(allowing that the text size should be reasonable as people won't be able to resize it).


That's the main problem with making it an image. [8|]



jaybee -> RE: Suggestions please (1/30/2007 7:35:34)

Why not just make it an obvious button with a hover state that says Special Offers?



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.09375