Hi Guys,
I’ve been interested in Accessibility on websites, I have been looking at http://www.pluss.org.uk/ and each word rollover has an image presenting the meaning. Now I am all new to this, would this just be achieved with rollover images or another way?
I am new to web design and don;t have an understanding of this area, I understand it is a specialist area but any help would really be appreciated
Thanks in advance
I think you are referring to the Tool Tip that appears when you hover over a link in the main navigation. These are generated by the title attribute.
<a href="xxx.com" title="Tool Tip Text">Link</a>
The images on that site are displayed using JavaScript (disable JS and you’ll see they don’t work). It’s using a script from here: http://www.widgit.com/ The same kind of thing can be done in pure CSS, although I’m not sure how practical it would be to use for multiple instances on a page. (I’ve never tried.)
However, you should never rely on a hover effect to convey anything important. It doesn’t work on touch-screens, and it doesn’t work for those who navigate by keyboard, rather than mouse. Nor am I sure how screen readers cope with such pop-ups (@Stomme_poes?), although if you’re inserting images, presumably these are aimed at assisting sighted users. Certainly use it for enhancements; just don’t rely on your visitors being able to access them.
With screen readers it depends at the least on the settings the user set up, but mine defaulted to not reading out titles.
I’ve been playing with ZoomText recently, a screen magnifyer for Windows. It has a Reader option which is a sort of screen-reader-lite. There, it depends on the browser: in IE titles are read out and in Firefox they are not. This means that if for example there’s a control with only a title stating what it does, Firefox users won’t hear anything… and if an icon was used instead of text, or a text icon-font thing was used, then users who can’t distinguish those icons lose out.
The way I like my tooltips best is a hidden child element who comes out/becomes visible when the parent is hovered or focussed on. The child can be styled like a tooltip if you want, or not.
[ot]Without wishing to disparage the efforts that have been put in to the site in your link, it seems to me that they’ve made a couple of fairly basic accessibility mistakes (and this is just from my first impressions; I haven’t looked at the site in any detail.
I have my browser set to a minimum font size of 16px. Not huge, but a size I can comfortably read. I can’t read this site without zooming the text, because they have set the base font size to 75%. Why? If I wanted a 12px font size, I’d have set it to that. If somebody sets a font size which suits them, what’s to be gained by trying to over-ride that? Either they won’t know how to zoom in on the site and won’t be able to use it, or (like me) they’ll know perfectly well how to do so, and resent the fact that the site is forcing them to do so.
And the other thing is this link:
There is so little contrast between the foreground and background colours there, that even somebody with pretty good eyesight is going to struggle to see that, especially at so small a size.[/ot]
I noticed some of the same things myself. The site doesn’t necessarily seem to be follow any type of accessibility standards. There’s even a page suggesting the user download some third party software to view their site better…
[ot]The setting of font sizes to a % lower than 100 seems popular and I do blame the original guy who came up with the whole 62.5% “trick” for “converting” em’s to px.
The original guy, however, always had a wrapper containing the whole page (first and only child of the body) which re-set the font size back up to the 100%, but that part of his article never seemed to be found by people using his technique…[/ot]