SitePoint Sponsor |
|
User Tag List
Results 26 to 50 of 80
Thread: wrapping text around image
-
Jan 30, 2008, 11:56 #26
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
That's why I said 'might be' in the text you quoted.
If the text equivalent of the image constitutes a paragraph, then wrapping the img element inside a p element is correct. If it's not a paragraph, but a part of a paragraph (or empty), then including it in the paragraph to which it belongs is correct. If it's neither, then it might be appropriate to wrap the image in a div (if there is no semantically correct element type to use).Birnam wood is come to Dunsinane
-
Jan 30, 2008, 14:35 #27
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Originally Posted by Dan
This is what you just said with images turned off.
Code:<div> <p>This is a Picture of my pet cat</p> <p>This is more conversation about me or possibly my cat</p> <p>I also had a hamster - would you like to see another picture</p> </div>
Code:<div>This is a Picture of my pet cat <p>This is more conversation about me or possibly my cat</p> <p>I also had a hamster - would you like to see another picture</p> </div>
Even if its a diagram relating to some prose then it is part of that prose and should be in a p tag., The more I think of it I can't see any good reason to do anything otherwise
Remember a picture conveys a 1000 words and words go in paragraphs most of the time
Also, as far as IE's bugs are concerned, just setting the display of all the images in a Web page to block avoids the bugs as well
Of course everyones free to bend the rules to save a couple of bytes and it's still valid, but is it really worth it? We're arguing here about something that's very easy to do right
-
Jan 30, 2008, 15:15 #28
- Join Date
- Mar 2002
- Location
- northern MI
- Posts
- 1,392
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
If everyone could agree what this 'right' is, it wouldn't be a problem
I still think adding an image with the text in a paragraph sabotages the whole integrity of the content inside the paragraph. If I can't be sure that the content of a paragraph is text, what semantical value do the tag have for me? And the alt text does not suffice, it's an image not a piece of text. Maybe the dilemma of the img tag is a weakness of the current standard, no one's perfect. Did anyone propose 'display: image' yet? I know you guys keep up with the work on new standards.
-
Jan 30, 2008, 15:19 #29
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Paul, in your example, I would not be using a full sentence as the alt text. It would be a snippet, or a "span of text" at the very most. Since it is not a full sentence, it would be wrong to start the paragraph with a span of text, would it not?
Let me give you an example.
"The Golden Gate Bridge" One of California's historical landmarks, the Golden Gate Bridge, (blah blah blah...).
Would you SERIOUSLY put that at the start of a paragraph?Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Jan 30, 2008, 16:27 #30
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Originally Posted by dan
Code:<dl> <dt>"The Golden Gate Bridge"</dt> <dd>One of California's historical landmarks, the Golden Gate Bridge, (blah blah blah...).</dd> </dl>
I really can't see what other obvious conclusion you could make . The more examples you give me the stronger my case gets
The alt attribute text is just a placeholder for only when the image is not displayed but the title attribute should be used to describe what the image is about for screenreaders and the like.
If you place images on the page without informing the user what they are then you are causing accessibility issues as not everyone will be looking at the screen.
What ever way you look at it images are content (assuming they are not for decoration) and should be placed in the container that best serves the purpose at the time. Almost always this will not be a div and should never be an anonymous box either. It can be a list, or a pragraph or a data list as Dan's example fits perfectly.
You need to forget the fact that its an image and imagine that its some text describing something because that's what an image does.
I love these semantic discussions
-
Jan 30, 2008, 16:48 #31
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Funny. "The Golden Gate Bridge" was the alt="" text for the hypothetical image.
So you're now saying that this would be semantic?
HTML Code:<dd> <dt><img src="images/golden-gate-bridge.jpg" width="300" height="220" alt="The Golden Gate Bridge" title="The Golden Gate Bridge on a beautiful Sunday morning"></dt> <dd> One of California's historical landmarks, the Golden Gate Bridge, (blah blah blah...). </dd> </dd>
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Jan 31, 2008, 00:54 #32
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Not at all. You just have to make sure that the text equivalent that conveys the same information as the image fits in with the surrounding text.
It's not like a given image has one single alt text that is 'right'. The text equivalent for an image is totally dependent on the context where the image is used.
The content of a paragraph is always text (until HTML5 is unleashed, at least). You seem to be thinking that images and text are two different creatures. They're not. They're just two separate ways to convey the same information.
Don't think of the alt attribute as something annoying that you have to put in to shut up the validator. Think of it as the real meaning, which you decide to make more aesthetically pleasing by replacing it with an image conveying the same information.
The only problem with the img element type is that the text equivalent is specified in an attribute. That doesn't give us an opportunity to mark up the text equivalent semantically, or to format it properly. The object element type is far superior, which is why W3C has tried to deprecate the former in favour of the latter. Microsoft's inability to include proper support for object has put a stop to that, though.
I don't understand your intended behaviour of that, but it's a moot point in this discussion anyway. It only affects presentation, not semantics.Birnam wood is come to Dunsinane
-
Jan 31, 2008, 02:47 #33
- Join Date
- Aug 2007
- Location
- Netherlands
- Posts
- 10,287
- Mentioned
- 51 Post(s)
- Tagged
- 2 Thread(s)
Originally Posted by Paul
(I've started putting the words "photo" "drawing" "painting" and "logo" with my alt text cause if the browser doesn't outline the boxes or when JAWS is running along in Say All there's just this meaningless text floating around in the middle of the page that really just get in the way of the real paragraphs anyway.)
You can use a group of text to describe an image, sure. You can use a group of words to describe anything: a flavour, a scent, a sound. But it is not those things, and just as a sound on a website is meaningless to those who don't hear/have no speakers, an image is also meaningless unless you can see it. Having text around describing it is fine, but then it is a group of words and is a <p>.
You can sit in the dark and you know there's a Mergatroidian in the room too cause you can hear it. If I tell you it's gorgeous and has slimmery bladingians, it means nothing because you can't see what those things are. Information? I guess. Content? Not really.
This discussion is starting to make me think ALL my images are presentational. I used to think, hey, here's this newspaper story about Suharto, and here's his photo, they're all content aren't they? But if I could only read the text and don't know the photo even exists because, for instance, someone's reading it to me, am I losing content? No, not even if someone says "There's a photo of Suharto with this text." That tells me nothing. The photo merely IS. If they could add the guy's personal body odour to the paper, sure, it tells me something different about the guy, but it still is not the text. Colour is meaningless to the blind; smells cannot be part of a newspaper story or a webpage (not yet... I hear the Japanese have been working on this one).
I think I'm moving all my images to the background for now...
*Edit, by complete accident (I was looking up selectors) I discovered that there are actually "anonymous boxes" but I was using the term wrong. Each word inside a <p> is an anonymous (inline) box inside a known (named) block box. A <span> and the text inside is not considered anonymous. Weird.
-
Jan 31, 2008, 03:51 #34
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
That's an indication that you are not writing good text equivalents. The text shouldn't be 'meaningless'; it should convey the same information that the image does – in that very context.
If the image is purely decorative, i.e., doesn't convey any information, the text equivalent should be empty. It should not be 'photo of cat' or similar, because that is meaningless.
Not every word, but there's an anonymous inline box generated to encompass text content when text and inline elements (non-anonymous boxes) are mixed.
Similarly, in a block-level element containing a mix of inline and block boxes (as in your case where the img is left on the outside), anonymous block boxes will be generated if necessary so that the container contains block boxes only.Birnam wood is come to Dunsinane
-
Jan 31, 2008, 04:46 #35
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Originally Posted by Dan
Code:<dd> <dt><img src="images/golden-gate-bridge.jpg" width="300" height="220" alt="The Golden Gate Bridge" title="The Golden Gate Bridge on a beautiful Sunday morning"></dt> <dd> One of California's historical landmarks, the Golden Gate Bridge, (blah blah blah...). </dd> </dd>
I'm surprised you cannot grasp this concept Dan as I would have though you would have been the first to agree.
You have an image of the Golden Gate and then you go on to describe it or talk about it. I can't think of a clearer example. Thank You
In most cases though you would present it with a caption also like this:
Code:<dd> <dt><img src="images/golden-gate-bridge.jpg" width="300" height="220" alt="The Golden Gate Bridge" title="The Golden Gate Bridge on a beautiful Sunday morning"><br />The Golden Gate Bridge</dt> <dd> One of California's historical landmarks, the Golden Gate Bridge, (blah blah blah...). </dd> </dd>
Once we have established that it's content then it must go in the best structure that best suits its purpose. You have to ask yourself some simple questions.
What is the purpose of the image?
What meaning is conveyed by the image?
Once you have answered those questions then you know exactly where it must go. One of the main accessibility guidelines is that you provide text equivalents of images so you must think of your image as text in that it is conveying meaning but in picture form. Treat it like the text equivalent and you won't go wrong.
As I said earlier you wouldn't just leave stray text hanging around the page or a stray span outside of a parent, so afford an image the same respect please.
Originally Posted by Stomme Poes
Just read what you have written and think about the consequences. .........
Have you thought about it yet?
How an earth can someone who can't see the world around them understand it if we don't describe it to them. Just because they can't see the picture of the cat doesn't mean they don't want to know all about it.
In fact, just go and take a few minutes and browse the web and see what the blind really want from the web. The first thing you'll find is that they want the same thing that we all want. "They want to know what things look like, they want to know what is going on".
This is repeated time and time again by partially sighted web surfers (and there are over a million of them alone in the UK). Don't take my word for it go to any "blind run" website and they all say the same thing.
This is what they want, and what they need and you should understand this before making blanket statements that have no basis in truth and are almost quite inflammatory in nature. This is the attitude that we need to change, and forgive me for laboring the point, but it is a common misconception by people who either don't care or can't be bothered to find out.
Originally Posted by stomme poes
I have no idea what a "slimmery bladingians" is and it would mean nothing to me even if you showed me a picture of it. You'd need to describe it to me first so I could understand what you were talking about. The same applies to the blind also. Following, your example it seems that we should not bother teaching the blind any language at all. After all they don't know what anything looks like so why bother. Do you see where this is leading?
Nearly all your comments are excuses for not doing things the right way.They have no basis in truth, other than coders being lazy and not understanding how html works and how the web is accessed.
Back to the original point in question, the point I made about IE not liking anonymous boxes is that it has to recognize them and cater for them as Tommy said:
anonymous block boxes will be generated if necessary so that the container contains block boxes only
This is such a "no-brainer" that I can't believe we are still discussing it
-
Jan 31, 2008, 04:54 #36
- Join Date
- Aug 2007
- Location
- Netherlands
- Posts
- 10,287
- Mentioned
- 51 Post(s)
- Tagged
- 2 Thread(s)
Originally Posted by Cuckoo
If it's doing something, I can see that-- jumping on a mouse for instance. alt="Dan's cat jumping on a mouse." But what if it's just the cat? Then what??
Originally Posted by Paul
*Edit You might be getting flustered with this thread Paul but I think I'm learning a lot from it...
-
Jan 31, 2008, 05:27 #37
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
You know, it's arguements like this about semantics that really make me want to have a deathshadow moment - reach for a dictionary and HIT someone with it. A paragraph is defined as a group of related sentences that pertain to a singular topic, idea, or other point of discourse. That means TEXT.
In the context of HTML, an image is not text (it's a graphical element). Yes, it is content, but so is text. Since an image is not text, what place does it have INSIDE a paragraph? Especially since images (when used as content) tend to reinforce and support the text they are referencing while being separate entities in the first place?Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Jan 31, 2008, 05:36 #38
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Edit You might be getting flustered with this thread Paul but I think I'm learning a lot from it...
Then why would I be relying on an image to tell that? Shouldn't ALL the information be in the text??
There is no need to dilute the content by removing images because images are an important part of the world. You just have to consider that some people cannot see the image so it is a courtesy to tell them what the purpose of the image is.
We don't ban all staircases because the disabled can't climb them. We just add alternative methods to make it easier for them such as ramps and lifts. You just have to follow the same logic in your pages.
Most blind people will know what a cat is and so you don't really have to do into miles of detail and if you did then you would possibly use the long description.
In most cases your alt text would convey the purpose of the image rather than its appearance. Your following text should then discuss the appearance of the image if it was important to the context. Most times well constructed content will describe what the image is about if it is necessary to the content. Therefore the alt text would just define the purpose of the image.
A lot of images are also links and used for navigation and if you don't define the purpose then a blind user won't know why they should click the link.
In the end it's a matter of common sense and how it relates to the task in hand. There is no need to go overboard on this but just put a little thought behind what you want to say. As you say above "Picture of Cat" may be enough in that context because I assume that the normal text would be describing why we were looking at an image of a cat anyway. There is no need to duplicate information so just define the purpose.
If the image of the cat was a link to to a site about cats then you'd need to inform the visitor that this was its purpose.
Hope that makes sense
-
Jan 31, 2008, 05:42 #39
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Originally Posted by Dan
I therefore withdraw from the discussion as my time here is obviously wasted.
-
Jan 31, 2008, 06:03 #40
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I can't tell you that, because it depends on the image and on the surrounding text. What information does the image convey in that context? Is it simply to illustrate what the kitty looks like? In that case, perhaps something like,
Code HTML4Strict:<p><img src="cat.jpg" alt="I've got a grey and white cat."> My cat's name is Fluffy and she's 2 years old.</p>
Disable images (Shift+I in Opera) and you'll see that the text equivalent makes sense. Provided that Fluffy really is grey and white, of course.
The important thing to remember is that it depends on the context. An image can convey very different information (or none at all) in different contexts. In an article about the cat, the image where it's jumping on a mouse could have a text equivalent along the lines of, 'Fluffy is very good at catching mice'. If the same image is used in an article about mice, the text equivalent might be, 'domestic cats are the single largest threat to urban mice'.
If it 's 'just the cat', it still depends on the context. Why did you put that image there? What information is your intention to convey with it?
As Paul said, everyone seems to be missing the real point here. Let me try to put it in another format:
- A 'normal' web page contains information.
- Most of this information is usually textual.
- Some information benefits from an alternate representation, such as an image. It's just another way to convey the same information.
- Many web pages also contain design elements that do not convey essential information about the topic at hand. Some of those are images, and their text equivalent is 'nothing', because they are not an alternative representation of some information.
A recommended, but rarely used, method for semantic markup is to write the content first, ignoring the images. Then you replace parts of the text with images, using the replaced text as the text equivalents for those images.
An an image with a proper alt attribute is just an alternative representation of that text. You're confusing presentation with content. Like Paul, I'm surprised to hear this from you, who usually advocate semantics as fervently as I do.
You use Opera, like me, right? Disabling images is just one keystroke away. Hit Shift+I and you'll see that the image within the paragraph is replaced with its text equivalent. The paragraph contains nothing but text, just like you wanted it. I think it's quite clear that the image is nothing but another representation of that text.Birnam wood is come to Dunsinane
-
Jan 31, 2008, 06:05 #41
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Off Topic:
Who said I'd resort to violence, Paul? Expressing an emotion via words does not indicate a desire to actually do so. Unlike some people, I actually control my emotions (which is why my previous posts were short and rather blunt). Just because someone feels a certain way doesn't mean they're going to actually do so, unless they have a history of doing it in the first place.
And besides, how would I even be able to throw a book at someone I disagreed with online? Chances are very good I'd hit the monitor if I did.
And then where would I be?Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Jan 31, 2008, 06:10 #42
- Join Date
- Aug 2007
- Location
- Netherlands
- Posts
- 10,287
- Mentioned
- 51 Post(s)
- Tagged
- 2 Thread(s)
Erm, I'm stilll going through all the sites I've built so far and I'm still seeing ALL of them as not-content. Mostly: logos (where it's almost always a span carrying it as a background image while the <h1> contains the Name Of Company</h1>), links (on my the sites, there are never just clickable images-- they always have a strip of text along with them, and the <a> wraps everything including the image), and background images that remain background images.
One site which is finished-enough that I probably cannot move the images to the background has the "Shutterstock effect" where the boss wants an image on each page because insurance is boring but the images themselves are still meaningless: professional woman smiling, ducks sitting in a bowl, woman on couch, a road with traffic-- they still have nothing to do with the text or the site and are merely there because the boss doesn't want a text-only page cause he thinks they're ugly. So the removing-ugliness thing is purely for the sighted. You see this on almost every web template and every bank/insurance/medical site: professional images used prominantly and meaning absolutely nothing.
And yet... I still don't see where the meaning is with the photo of Suharto in the newspaper article about him. I need to know, because right now the photo has become Not-Content in my mind. In an article about Suharto's death, what does a blind person want to know about the photo of him the paper shows?
-----------------------------------------
What I meant about all the information being in the text wasn't to mean removing images, but merely that whatever is actually important about the image (if there is any importance) should also be in the text--- I thought I was doing the right thing by repeating myself or being redundant as far as any images and corresponding text.
I did think earlier of long description but back when I first read about it, it seemd to be more made for, bv, a How-To site where there is text, and an illustrating image-- esp sites with images of a computer screen while setting up a programme and showing what the screen looks like.
I'd been to a few sites for the blind before, mostly to figure out where to get a screen reader and magnifyer. Now on your advice I've gone back to the ones I remember having images to see what they do ...and looking to see what they do with alt text (confuses me!). Like, Lion's Club (*edit-- it was Lion's World) seems to have the description of the image as the name of the image file, like with spaces between the words and stuff, instead of alt text. Does this work? I'd never seen such long filenames that weren't made of numbers. example:
<a href="blah/Jennifer and Larry at the Shopping Mall.jpg" rel="Holiday Visions 2006"><img src="blah/Jennifer and Larry at the Shopping Mall.jpg" width="50" border="0" /></a> Clicking on the link brings you a non-replaced image (you can't see html code).
If you (or anyone here) knows a forum or the such where (partially)/blind web surfers discuss web pages and what they want/hate/love/works, I would like to lurk there. Most of the emailing lists out there are for activities people do in person and often you have to be a (blind or family) member to join.
I doubt I have a single blind visitor to any of my sites, but all my sites are for a business which wants customers, and I don't want to remove a potential customer because my site doesn't work.
Lastly, I still can't make myself put an image (or a smell or a sound or a taste) in paragraph tags. I'll describe them there-- I do that already. Maybe my problem is I'm confusing <p> with "paragraph" when really it means "content." But whatever I am in my personal life (), not putting <p> around images is NOT laziness-- if I were lazy I would just fool the validators with alt="" or, better yet, not even bother chekcing my pages on validators, or in more than IE and maybe FF, nor would I try testing all my pages and forms-on-forms with JAWS and can I make it through my sites with MAGic or is it just too confusing? And they would be written like the pages I'm replacing, which often don't even have opening <html> tags and they LOOK fine to the boss and everyone else so I only do all this, actually, for myself. I scour forums looking for new things to implement in web pages, I torture myself trying to read the jargonese on the W3C pages, and I really do try to do things the right way. If I'm doing stuff wrong (and I surely am cause I always have) it's not because I'm making excuses for laziness but because I don't know any better or have some other (sounds good to me) reason.
Anyway, thanks for still working with me. I easily piss people off.
-
Jan 31, 2008, 06:56 #43
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
And yet... I still don't see where the meaning is with the photo of Suharto in the newspaper article about him. I need to know, because right now the photo has become Not-Content in my mind. In an article about Suharto's death, what does a blind person want to know about the photo of him the paper shows?
My point earlier was that it is not a sentence or a direct part of the paragraph, and thus should not be marked up inside the paragraph (which is used to mark up related sentences - which means plain text, something that an attribute value simply is not).
As has been said earlier though, just make sure it's not a direct descendent of the BODY element (which I'm sure you're already taking measures to avoid). HTML isn't perfect, it doesn't define EVERY single possible application of it, and there are bound to be times when even the best of friends will agree vehemently with each other over the interpretation of the specification. If this thread isn't enough evidence of that, take a look at the HTML 5 Working Group. (Sorry Simon.)Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Jan 31, 2008, 07:06 #44
- Join Date
- Aug 2007
- Location
- Netherlands
- Posts
- 10,287
- Mentioned
- 51 Post(s)
- Tagged
- 2 Thread(s)
Thx Dan, I did discover that (on this forum!) an inline cannot simply sit in the body without a block of some sort around it.
Under my way of thinking until today, yes, the Suharto photo within an article about hin was content, but now, thinking of the alt text, it would be something stupid like "Photo of Indonesian dictator Suharto" which the same meaninglessness I'm wrestling with. It tells those with images off that there IS an image, but the image says nothing (Chinese proverbs aside). I think Tommy has given me a little better idea of what to use though.
-
Jan 31, 2008, 07:23 #45
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
A screen reader will tell the user that the image is an image, so wouldn't you think that adding "Photo of" would be redundant?
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Jan 31, 2008, 07:43 #46
- Join Date
- Aug 2007
- Location
- Netherlands
- Posts
- 10,287
- Mentioned
- 51 Post(s)
- Tagged
- 2 Thread(s)
JAWS does, just as it says Link before every link (tho you can turn that off) but text-only browsing when it's a browser that doesn't make a little box or anything looks really weird. It looks like this:
Easter (header)
by Molly Jones
a bunny and a chicklet on fake plastic grass
Easter is a Christian holiday about Jesus paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph ...
jesus christ and his disciples
Yet another paragraph next to a floated image... paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph.
The End.
The lower-case text is alt text, which many people (including myself up until a few months ago) do not write as complete sentences but as quick descriptions of what the photo is. Also, if I'm curious about what the thing was...
Van Gogh
starry night
Paragraph paragraph paragraph paragraph paragraph...
Vincent van Gogh sitting in a chair
Paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph.
The End.
I may be curious to know if the second image was a painting of his or a photograph (as unlikely as that is in this case). So for when the alt text looks like just normal text, I say Vincent van Gogh's famous painting, "Starry Night" or Painting: self-portrait of Vincent van Gogh.
For the bunnies then, I say Photo of a bunny and a chicklet on fake plastic grass
and for the Jesus I'd say Painting of Jesus Christ and his disciples by (name of painter).
I've also found alt text to be a nice place to give photo credits when I'm not allowed to have that text hanging out below a photograph.
-
Jan 31, 2008, 07:56 #47
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Screen readers are not the only things that you need to think about. While graphical browsers may render text equivalents in some distinct fashion (e.g., with inset borders) when images are disabled, text browsers like Lynx may not.
In Lynx, you can't see that a piece of text is a text equivalent for an image (without checking the source code).
Having said that, 'Photo of' is a bad idea for an alt text anyway. This attribute should contain a text equivalent of the information conveyed by the image; not a description of the image (unless those two things coincide).Birnam wood is come to Dunsinane
-
Jan 31, 2008, 07:59 #48
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
You see folks, this is what I get when I forget to include the word "usually".
(It's ok.)Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Jan 31, 2008, 08:02 #49
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Jan 31, 2008, 09:14 #50
- Join Date
- Mar 2002
- Location
- northern MI
- Posts
- 1,392
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Ah Finally down to the nitty gritty.
I think visualization and writing are different on a principal level. How can Picasso's Guernica have an equal text equivalent? Images are not automatically equal to text, or the other way around.
I beg your pardon? The alt attribute is used to guide user agents, that should be elementary for anyone advocating web standards. Why are you implying that I use the alt attribute to shut up a validator?
Revealing.. We simply disagree on a principal level on what images are. It's a true semantical disagreement I guess. Sometimes peoples backgrounds are too different to see things the same way. My background is not entirely technical, but heavily influenced by the arts as well. If you really think an image is just a visual equivalent of some text, I can understand why you think it's o.k. to use it inside the paragraph tag. But images are used for more than just displaying some cool text in Photoshop, they are justified in their own right. They're not simply another way of presenting text.
Like Paul said I love these discussionsThanks for making me think twice about my markup Tommy, an I'm looking forward to the CSS reference book you guys put together.
Bookmarks