Re: [WSG] accessibility: images as navigation
If you put the link text inside the CSS background image I think that solves the problem? Have a look at this page and enlarge the text. It works well for two enlargements up to 150%. http://www.hereticpress.com/index.html On 24/01/2007, at 6:21 PM, cara williams wrote: If the title attribute is ignored by screen readers, still, it would read the alt attribute of the image which would include a meaningful description of where the link is taking them to. Is this an annoying hurdle for screen reader users - having an alt attribute to go by rather than a plain text link description? Also, you're right about using CSS to display the imagery, though that wouldn't solve the last scenario of the user who enlarges their text via their browser settings? Cheers, Cara. On 1/24/07, Tim [EMAIL PROTECTED] wrote: attribute, A research paper by Vision Australia ex staff member last year. Why not put the image in the CSS background-image: url(Pics/Thispic.jpg); You can add onfocus or hover events to change the pic and the page is still clean for text readers. tim On 24/01/2007, at 5:41 PM, cara williams wrote: Hello! Here's an issue that's been bugging me for a while and I'd really love some clarification. There's been a bit of discussion at my work about where we use an image as a link that we must also provide a text link beneath the image as an alternative. The text alternative is usually mirroring what is included in the graphically designed element. So for sighted people it's a bit odd and sometimes confusing reading both. We never use images for main navigation, but occasionally like to add a graphically styled element for something we're promoting on our home page. I believe the justification is broadly for accessibility reasons, though specifically in which situation is this helping? My understanding is that: • screen readers have no problems reading alt attributes (title attributes in an a are a different story though - I've heard mixed reviews - if someone could clarify?) • a text only browser will usually read both title and alt attributes (please correct me if I'm wrong on this!) • a screen magnifier will enlarge the image as well as the text • in the case of a user enlarging the text through their browser settings, the image won't be enlarged and the text alternative will - the only real scenario that I can see where this technique may possibly be of use. So is this really best practice? Cheers, Cara. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** The Editor Heretic Press http://www.hereticpress.com Email [EMAIL PROTECTED] *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** The Editor Heretic Press http://www.hereticpress.com Email [EMAIL PROTECTED] *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] accessibility: images as navigation
On Wed, Jan 24, 2007 at 04:41:20PM +1000, cara williams wrote: * a text only browser will usually read both title and alt attributes (please correct me if I'm wrong on this!) I don't think I've ever seen a title attribute exposed by a text browser. -- David Dorward http://dorward.me.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] accessibility: images as navigation
A simple approach to this dilemma (really simple in fact) a href=my_link title=my_link_descriptionimg src=my_image alt=my_link_description //a If images are 'on' its works as you'd expect. If not, the alt text is shown as a link. Hurray! -- Joseph R. B. Taylor *Sites by Joe, LLC* /Custom Web Design Development/ http://sitesbyjoe.com (609) 335-3076 [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***begin:vcard fn:Joseph R. B. Taylor n:Taylor;Joseph org:Sites by Joe, LLC adr:;;408 Route 47 South;Cape May Court House;NJ;08210;USA email;internet:[EMAIL PROTECTED] tel;work:609-335-3076 tel;cell:609-335-3076 x-mozilla-html:FALSE url:http://sitesbyjoe.com version:2.1 end:vcard
Re: [WSG] accessibility: images as navigation
Joseph R. B. Taylor wrote: A simple approach to this dilemma (really simple in fact) a href=my_link title=my_link_descriptionimg src=my_image alt=my_link_description //a This is a JS approach that keeps the markup *clean* (no IMG elements, pure text). http://tjkdesign.com/articles/TJK_tipMenu_demo.asp Using IMGs in the markup and keeping the CSS styles works as well and makes it JS free. --- Regards, Thierry | www.TJKDesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] accessibility: images as navigation
There's also the empty span/span after the text in the link approach. You can use CSS to make the span show your image over the text real easy. Do a google search on the technique and you'll find plenty of examples. I don't remember who came up with it originally, but besides the extra empty element, its squeaky clean. Thierry Koblentz wrote: Joseph R. B. Taylor wrote: A simple approach to this dilemma (really simple in fact) a href=my_link title=my_link_descriptionimg src=my_image alt=my_link_description //a This is a JS approach that keeps the markup *clean* (no IMG elements, pure text). http://tjkdesign.com/articles/TJK_tipMenu_demo.asp Using IMGs in the markup and keeping the CSS styles works as well and makes it JS free. --- Regards, Thierry | www.TJKDesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Joseph R. B. Taylor *Sites by Joe, LLC* /Custom Web Design Development/ http://sitesbyjoe.com (609) 335-3076 [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***begin:vcard fn:Joseph R. B. Taylor n:Taylor;Joseph org:Sites by Joe, LLC adr:;;408 Route 47 South;Cape May Court House;NJ;08210;USA email;internet:[EMAIL PROTECTED] tel;work:609-335-3076 tel;cell:609-335-3076 x-mozilla-html:FALSE url:http://sitesbyjoe.com version:2.1 end:vcard
Re: [WSG] accessibility: images as navigation
Joseph R. B. Taylor wrote: There's also the empty span/span after the text in the link approach. You can use CSS to make the span show your image over the text real easy. Do a google search on the technique and you'll find plenty of examples. I don't remember who came up with it originally, but besides the extra empty element, its squeaky clean. IMHO, an IMG element is better than a SPAN as it comes with the following advantages: - it's semantic - it can be printed - it comes with an ALT attribute and it can scale: http://tjkdesign.com/articles/tip_5.asp --- Regards, Thierry | www.TJKDesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] accessibility: images as navigation
If the title attribute is ignored by screen readers, still, it would read the alt attribute of the image which would include a meaningful description of where the link is taking them to. Is this an annoying hurdle for screen reader users - having an alt attribute to go by rather than a plain text link description? Also, you're right about using CSS to display the imagery, though that wouldn't solve the last scenario of the user who enlarges their text via their browser settings? Cheers, Cara. On 1/24/07, Tim [EMAIL PROTECTED] wrote: I thought from memory that most text readers ignored the title attribute, A research paper by Vision Australia ex staff member last year. Why not put the image in the CSS background-image: url(Pics/Thispic.jpg); You can add onfocus or hover events to change the pic and the page is still clean for text readers. tim On 24/01/2007, at 5:41 PM, cara williams wrote: Hello! Here's an issue that's been bugging me for a while and I'd really love some clarification. There's been a bit of discussion at my work about where we use an image as a link that we must also provide a text link beneath the image as an alternative. The text alternative is usually mirroring what is included in the graphically designed element. So for sighted people it's a bit odd and sometimes confusing reading both. We never use images for main navigation, but occasionally like to add a graphically styled element for something we're promoting on our home page. I believe the justification is broadly for accessibility reasons, though specifically in which situation is this helping? My understanding is that: • screen readers have no problems reading alt attributes (title attributes in an a are a different story though - I've heard mixed reviews - if someone could clarify?) • a text only browser will usually read both title and alt attributes (please correct me if I'm wrong on this!) • a screen magnifier will enlarge the image as well as the text • in the case of a user enlarging the text through their browser settings, the image won't be enlarged and the text alternative will - the only real scenario that I can see where this technique may possibly be of use. So is this really best practice? Cheers, Cara. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** The Editor Heretic Press http://www.hereticpress.com Email [EMAIL PROTECTED] *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
