Re: [WSG] Re: Alt text for purely aesthetic images
I have two questions regarding images added via CSS.
1) I added an image for each bullet via CSS .box ul li. How do I specify alt
text in this situation? Do I add alt text in the HTML...even though there
would be no image if CSS was disabled?
Since it adds no meaning/information, it doesn't need alt text.
Think of it this way: what would there be to include as alt text? Each
list item has already been identified by the markup as being a list
item. The bullet image is just a prettier version of the default
bullet. Adding alt text would just be annoying to anyone who really
needs it.
2) What is the implication (what do I need to do) for purely
presenation/aesthetic images?
Either insert them via CSS or use alt=.
WCAG Samurai Errata for WCAG 1.0 cover this too -
http://wcagsamurai.org/errata/errata.html
Corrections to Guideline 1.1
You can leave a text equivalent blank (e.g., null alt text, alt=) if
immediately-
preceding or -following text has the same function as a text equivalent.
...
If images must be used for list bullets, do so only using CSS, as with
ul { list-style: url(arrow.gif) disc }
cheers,
Ben
--
--- http://weblog.200ok.com.au/
--- The future has arrived; it's just not
--- evenly distributed. - William Gibson
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Re: Alt text for purely aesthetic images
There is really no hard and fast rule that states all presentational images should be background images, there are plenty of situations where is is not practical or inappropriate, as others have stated if an images is purely for presentation than an empty alt attribute (alt=) is appropriate. Not all content images require alt text in the alt attribute, if the surrounding content provides the relevant alternative text than an empty alt attribute is appropriate. Here is a good article on the appropriate use of alt text. http://www.webaim.org/techniques/alttext/ - Mel On 10/26/07, John Faulds [EMAIL PROTECTED] wrote: If the images are in the CSS, then there's no need for alt attributes. Conversely, if you believe an image should have alt text, then it shouldn't be in the CSS as a bg-image. On Fri, 26 Oct 2007 20:20:23 +1000, Simon Cockayne [EMAIL PROTECTED] wrote: Hi again... Whoops...butterfingers I unwittingly hit send before completing my email. Anywise...here is what it should have said: Hi, WCAG 1.0 (http://www.w3.org/TR/WCAG10/) states: Guideline 1. Provide equivalent alternatives to auditory and visual content Provide content that, when presented to the user, conveys essentially the same function or purpose as auditory or visual content 1.1 Provide a text equivalent for every non-text element (e.g., via alt, longdesc, or in element content). *This includes*: images, graphical representations of text (including symbols), image map regions, animations ( e.g., animated GIFs), applets and programmatic objects, ascii art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video. [Priority 1] I have two questions regarding images added via CSS. 1) I added an image for each bullet via CSS .box ul li. How do I specify alt text in this situation? Do I add alt text in the HTML...even though there would be no image if CSS was disabled? 2) What is the implication (what do I need to do) for purely presenation/aesthetic images? For example on my wife's microsite (that I built) http://phd.london.edu/ygrushkacockayne/ what do I need to do, if anything, for the gifs that form rounded corners on the boxes, via CCS on .box, box2 et cetera? Cheers, Simon *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** 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] ***
Re: [WSG] Re: Alt text for purely aesthetic images
If the images are in the CSS, then there's no need for alt attributes. Conversely, if you believe an image should have alt text, then it shouldn't be in the CSS as a bg-image. On Fri, 26 Oct 2007 20:20:23 +1000, Simon Cockayne [EMAIL PROTECTED] wrote: Hi again... Whoops...butterfingers I unwittingly hit send before completing my email. Anywise...here is what it should have said: Hi, WCAG 1.0 (http://www.w3.org/TR/WCAG10/) states: Guideline 1. Provide equivalent alternatives to auditory and visual content Provide content that, when presented to the user, conveys essentially the same function or purpose as auditory or visual content 1.1 Provide a text equivalent for every non-text element (e.g., via alt, longdesc, or in element content). *This includes*: images, graphical representations of text (including symbols), image map regions, animations ( e.g., animated GIFs), applets and programmatic objects, ascii art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video. [Priority 1] I have two questions regarding images added via CSS. 1) I added an image for each bullet via CSS .box ul li. How do I specify alt text in this situation? Do I add alt text in the HTML...even though there would be no image if CSS was disabled? 2) What is the implication (what do I need to do) for purely presenation/aesthetic images? For example on my wife's microsite (that I built) http://phd.london.edu/ygrushkacockayne/ what do I need to do, if anything, for the gifs that form rounded corners on the boxes, via CCS on .box, box2 et cetera? Cheers, Simon *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] Re: Alt text for purely aesthetic images
Hi again... Whoops...butterfingers I unwittingly hit send before completing my email. Anywise...here is what it should have said: Hi, WCAG 1.0 (http://www.w3.org/TR/WCAG10/) states: Guideline 1. Provide equivalent alternatives to auditory and visual content Provide content that, when presented to the user, conveys essentially the same function or purpose as auditory or visual content 1.1 Provide a text equivalent for every non-text element (e.g., via alt, longdesc, or in element content). *This includes*: images, graphical representations of text (including symbols), image map regions, animations ( e.g., animated GIFs), applets and programmatic objects, ascii art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video. [Priority 1] I have two questions regarding images added via CSS. 1) I added an image for each bullet via CSS .box ul li. How do I specify alt text in this situation? Do I add alt text in the HTML...even though there would be no image if CSS was disabled? 2) What is the implication (what do I need to do) for purely presenation/aesthetic images? For example on my wife's microsite (that I built) http://phd.london.edu/ygrushkacockayne/ what do I need to do, if anything, for the gifs that form rounded corners on the boxes, via CCS on .box, box2 et cetera? Cheers, Simon *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Re: Alt text for purely aesthetic images
As a general rule, any images that add to the content or are required for navigation should be applied as a foreground image using the img tag and an alt attribute should be applied. If an image is purely for presentation then use CSS and apply it as a background image. Obviously there are exceptions to this where you may be using image replacement and in this situation you should provide text within the page that provides an alternative for the image. Looking at the page you've provided, it looks perfectly fine in the way you've applied the rounded corners although as a side issue I would suggest running it through http://validator.w3.org as you've got a few errors (you're using an XHTML doctype so don't forget to close img tags as well as escaping ampersands). ;o) Hope that helps. Dave http://www.dave-woods.co.uk On 26/10/2007, Simon Cockayne [EMAIL PROTECTED] wrote: Hi again... Whoops...butterfingers I unwittingly hit send before completing my email. Anywise...here is what it should have said: Hi, WCAG 1.0 ( http://www.w3.org/TR/WCAG10/) states: Guideline 1. Provide equivalent alternatives to auditory and visual content Provide content that, when presented to the user, conveys essentially the same function or purpose as auditory or visual content. ... 1.1 Provide a text equivalent for every non-text element (e.g., via alt, longdesc, or in element content). This includes: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ascii art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video. [Priority 1] I have two questions regarding images added via CSS. 1) I added an image for each bullet via CSS .box ul li. How do I specify alt text in this situation? Do I add alt text in the HTML...even though there would be no image if CSS was disabled? 2) What is the implication (what do I need to do) for purely presenation/aesthetic images? For example on my wife's microsite (that I built) http://phd.london.edu/ygrushkacockayne/ what do I need to do, if anything, for the gifs that form rounded corners on the boxes, via CCS on .box, box2 et cetera? Cheers, Simon *** 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] ***
Re: [WSG] Re: Alt text for purely aesthetic images
If an image is purely for presentation then use CSS and apply it as a background image. I personally don't think of this as some hard-and-fast rule, or even a rule-of-thumb since it's often impractical. I will often apply a decorative or supporting image for visual purposes, but if I have to add classed mark-up (to style it) and a CSS entry for every decorative image on my sites it'd seriously get out-of-hand quicky. I feel it is best to first assess the image which then tells me what to do with it. I did make a blog entry [1] year about this assessment protocol, and I have addressed the topic more generally this year in another entry [2]. Not everyone will agree with these, but it's what I've managed to sort out for myself. To me it makes sense. [1] The Alt and Accessibility http://green-beast.com/blog/?p=81 [2] Adding Embedded Images to a Web Page http://green-beast.com/blog/?p=203 Cheers. Mike Cherim *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Re: Alt text for purely aesthetic images
This is my view. If an image is for aesthetic purposes, it should be in with the CSS. If an image is to be used as part of the content, for example, the image of your wife, then it should be within img tags. I would say that is common sense to be honest. If you turn of the CSS would you want your users to see images that make no sense in relation to the content, because without the positioning of these images they will displayed in normal flow and leave users scratching their heads. Or lets say a blind person coming across empty alt attributes, or alt attributes that say alt=Rounded corner for the top left header. The WAI have laid out these guidelines for good reason, follow them. Unless there is damn good reason to go against them. Ps. your wife is pretty, she looks like a high achiever James On 10/26/07, Mike at Green-Beast.com [EMAIL PROTECTED] wrote: If an image is purely for presentation then use CSS and apply it as a background image. I personally don't think of this as some hard-and-fast rule, or even a rule-of-thumb since it's often impractical. I will often apply a decorative or supporting image for visual purposes, but if I have to add classed mark-up (to style it) and a CSS entry for every decorative image on my sites it'd seriously get out-of-hand quicky. I feel it is best to first assess the image which then tells me what to do with it. I did make a blog entry [1] year about this assessment protocol, and I have addressed the topic more generally this year in another entry [2]. Not everyone will agree with these, but it's what I've managed to sort out for myself. To me it makes sense. [1] The Alt and Accessibility http://green-beast.com/blog/?p=81 [2] Adding Embedded Images to a Web Page http://green-beast.com/blog/?p=203 Cheers. Mike Cherim *** 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] ***
Re: [WSG] Re: Alt text for purely aesthetic images
James Jeffery wrote: This is my view. If an image is for aesthetic purposes, it should be in with the CSS. If an image is to be used as part of the content, for example, the image of your wife, then it should be within img tags. I would say that is common sense to be honest. If you turn of the CSS would you want your users to see images that make no sense in relation to the content, because without the positioning of these images they will displayed in normal flow and leave users scratching their heads. Or lets say a blind person coming across empty alt attributes, or alt attributes that say alt=Rounded corner for the top left header. The WAI have laid out these guidelines for good reason, follow them. Unless there is damn good reason to go against them. Ps. your wife is pretty, she looks like a high achiever James Except, James, that folk who make elastic layouts very often want the aesthetics (graphics) to expand along with the text etc. This is not a problem if you size the graphics in em units, but of course you can't do that with backgrounds. ?? Bob *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Re: Alt text for purely aesthetic images
Except, James, that folk who make elastic layouts very often want the aesthetics (graphics) to expand along with the text etc. This is not a problem if you size the graphics in em units, but of course you can't do that with backgrounds. ?? Bob backgrounds can be positioned using relative units. you can't set the size, but you can set the size of whatever element in the html you attach them to. what i think you're talking about i would handle by making a larger image, then i would choose what part i want to show normally, what the focus would be. i would then set the height and/or width of the element i am attaching the background image to using ems, and then specify the background position using percentages. that way, as the text is expanding, so is the canvas that the image is on, so you see more image, but the focus of the image remains at whatever i initially chose because i used the percentages to keep it there despite resizing the box. play around with it and see what you get. i think it is discussed in a few different books as well. take care, jm *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
