non-image accessibility
Posted March 4th, 2009 by WilliamCarrier
Log from IRC server Freenode (IPv6) channel #CSS.
| <me> | I'm using a visual element (div with background) to facilitate the graphic aspect and it doesn't have any structural relevance thus I'd like to warn those with text-based browser but div doesn't seem to have longdesc, is there another way beside putting an invisible image ? |
| <lukeW> | me; the answer is 'rel |
| <aerocode> | me, what warning would text-browser users need? |
| <jedimindows> | me actually not rel |
| <lukeW> | 'rel' |
| <jedimindows> | title |
| <jedimindows> | <div title="something" /> |
| <jedimindows> | rel is applicable to anchors |
| <lukeW> | true |
| <jedimindows> | and discribes a relationship of the anchor to the current page |
| <lukeW> | oops |
| <jedimindows> | describes |
| <jedimindows> | tsk tsk lukeW |
| <jedimindows> | TSK |
| <lukeW> | :) |
| <lukeW> | i was thinking anchor for some reason |
| <aerocode> | yeh, wha he sai'. |
| <me> | jedimindows: it's like 2-300 chars long, it's ok with title ? |
| <jedimindows> | me you can always have it inside the div |
| <jedimindows> | and use an image replacement technique |
| <jedimindows> | to hide the text and display the bg image |
| <aerocode> | ^^ good idea. |
| <jedimindows> | div { width: [something]; height: [something]; overflow: hidden; text-indent: -1000em; } |
| <me> | jedimindows: oh yes ! and have the CSS hide it, nice |
| <jedimindows> | and background: url(...) obv |
| <aerocode> | but again I ask, what warning will text-based users need? What's the point? |
| <jedimindows> | aerocode maybe he's got text in the image that he wants screen readers to pick up |
| <jedimindows> | ]ir @ me |
| <_ZofBot4> | me, ir: www.mezzoblue.com/tests/revised-image-replacement/ |
| <jedimindows> | for a few other techniques aside from the one i just gave you |
| <aerocode> | jedimindows, I always forget about screen readers... |
| <lukeW> | but you can always use a negative text-indent... |
| <lukeW> | do screen readers pick up on the title attrib in real life? |
| <jedimindows> | no only in fantasy land |
| <lukeW> | it sounds like wishful thinking to me |
| <lukeW> | yeah |
| <lukeW> | just put the text in the div and shunt it out of view |
| <lukeW> | however, it might be logical to use title to store a text for a tooltip, say |
| <me> | thank you for your accessibility tips :) |
