SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,934
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Proper way to markup Images

    I could use some help on determining the proper way to mark up images...

    This topic came up in the past, and I chose to do things a certain way, but I know in another recent thread of mine, Paul O' mentioned that I should make some changes (of which I don't remember).

    Here is some sample code...
    HTML Code:
    	<!-- ARTICLE LISTING -->
    	<div id="boxArticleIndex">
    		<h2>Small-Business Articles</h2>
    
    		<!-- Summary #1 -->
    		<div class="articleSummary">
    			<h3>Postage Meters Can Save You Money</h3>
    			<div class="image">
    				<a href="<?php echo BASE_URL; ?>articles/postage-meters-can-save-you-money">
    					<img src="<?php echo BASE_URL; ?>images/PostageMeter.png" width="170"
    						alt="Picture: Postage Meter.  Credit: John Doe, Wikimedia Commons."
    						title="Picture: Postage Meter.  Credit: John Doe, Wikimedia Commons." />
    				</a>
    			</div>
    I think Paul O' was saying to drop the word "Picture" and maybe even the whole alt tag?

    This much I do know, however...

    Because I am using pictures from Wikimedia Commons, I need to give credit to the author of the image. However, I do NOT want to have to "advertise" this information below the picture, because 1.) It takes up precious space, and 2.) People may perceive using open-source pictures as "cheap" or "unprofessional".

    It seems to me I used what is above, because it would give due credit to the author when someone hovers over the image OR for visually impaired users, screen readers would announce the Author.

    Hopefully there is a solution that meets my needs, is accessible, and give due credit to the generous authors sharing their work with me?!

    Thanks,


    Debbie

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Definitely remove the word "picture" from the alt/title text, as a screen reader will announce it as a picture anyway. As for hiding the credit in the alt/title text, it doesn't seem like a proper way to credit to me. If accreditation needs to be given, it's best to have it visible. Personally, it doesn't make the site seem cheaper to me if the image comes from a free source—just like I don't see some big company as a bunch of cheapskates for using WordPress. Accreditation of an image source is quite a dignified thing (in my mind anyway) and suggests integrity to me, so I think it works well for a site.

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,934
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Definitely remove the word "picture" from the alt/title text, as a screen reader will announce it as a picture anyway. As for hiding the credit in the alt/title text, it doesn't seem like a proper way to credit to me. If accreditation needs to be given, it's best to have it visible. Personally, it doesn't make the site seem cheaper to me if the image comes from a free source—just like I don't see some big company as a bunch of cheapskates for using WordPress. Accreditation of an image source is quite a dignified thing (in my mind anyway) and suggests integrity to me, so I think it works well for a site.
    So, Ralph, let's take your reasoning farther...

    If you don't think it is a big deal, then how would you display the info that I have?

    - Relationship to picture?
    - Size?
    - Etc.


    And does anyone else have any thoughts on what I've been doing?


    Debbie

  4. #4
    Non-Member Max Height's Avatar
    Join Date
    Dec 2011
    Posts
    303
    Mentioned
    6 Post(s)
    Tagged
    1 Thread(s)
    I would change the word 'Picture' to something like Image or Photo rather than remove it alltogether. If for some reason the image is not available resulting in that ugly looking small icon with a red cross, or whatever, in it appearing then it could be useful for some users (with or without screen readers) to be informed that an image/photo is missing.

    If using xhtml strict (not sure with html strict) then the alt tag is a required attribute to pass w3c validation.

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,934
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Attached are two screenshots to give you some context of what my pages currently look like.

    Attachment 58715Attachment 58716

    Thanks,


    Debbie

  6. #6
    SitePoint Guru bronze trophy TheRaptor's Avatar
    Join Date
    Jul 2011
    Location
    New York
    Posts
    710
    Mentioned
    40 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Max Height View Post
    I would change the word 'Picture' to something like Image or Photo rather than remove it alltogether. If for some reason the image is not available resulting in that ugly looking small icon with a red cross, or whatever, in it appearing then it could be useful for some users (with or without screen readers) to be informed that an image/photo is missing.
    Wouldn't that ugly icon represent a missing picture and the alt tell what the picture was/is? I agree with Ralph, seems a bit redundant to include the word "picture", "photo" or "image".

    Your accreditation text doesn't need to be huge. In fact I think it should be quite small and [as most commonly is done] placed under the picture.
    TheRaptor - Joe

  7. #7
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,194
    Mentioned
    17 Post(s)
    Tagged
    4 Thread(s)
    Good thing your entering this all yourself because if you had to sit and explain to a none-technical person the reason they need to include alt and title text when entering images you would most likely get a blank stare followed by useless if any at all alt or title information. Even worst when consuming data from an external source.

    Also, I don't mean to go deathshadow on you or anything but using divs for a list is not semantic. That is what that will be – a list of articles with titles and teasers. Also, there is probably very little reason to be using so many divisions considering your writing all the HTML and CSS yourself. All you really need is probably a heading tag followed by a list element depending on whether order has any significance.

    HTML Code:
    <h2>Small-Business Articles</h2>
    <ul>
      <li>
        <h3><a href="#">Postage Meters Can Save You Money</a></h3>
        <img src="da_image_src" alt="whatever">
      </li>
    </ul>
    Maybe also wrapping it in a div but that depends on the context which it is used – by itself or with other lists.

    HTML Code:
    <div class="small-business-articles">
      <h2>Small-Business Articles</h2>
      <ul>
        <li>
          <h3><a href="#">Postage Meters Can Save You Money</a></h3>
          <img src="da_image_src" alt="whatever">
        </li>
      </ul>
    </div>
    if you want people to be able to click on the image and go to the article I would handle that with JavaScript using progressive enhancement. You could even do it for the entire list item.

    This is also something else to think about will all images be the same orientation and size? If you work in the real world probably not. If that is the case you can apply the image as a background to a div and use the handy backgrounds-size: contain; property/value to have the browser constrain ANY size image to the area allocated by the div. Especially useful when mixing different orientation types.

    HTML Code:
    <div class="small-business-articles">
      <h2>Small-Business Articles</h2>
      <ul>
        <li>
          <h3><a href="#">Postage Meters Can Save You Money</a></h3>
          <img src="da_image_src" alt="whatever"> <!-- hide this with CSS -->
          <div style="background-image: url(da_image_url);"></div>
        </li>
      </ul>
    </div>
    For the low cost of creating an extra div you can have *most* browsers these days take care of fitting the image within a specified area using background-size: contain. There is an additional downfall considering the inline style but you can't have everything. So with those two sacrifices the browser can take care of partially resizing the image… well most modern browsers. In theory you could show the normal image for browsers unable to resize and the div for those that are. I might get slapped for mentioning this but I think it is way to powerful to ignore. Designs always cater to a consistent dimension/proportion of image and when dealing with user input rarely is that desired image dimension used. So when someone enters a vertical image that would throw the entire layout off without some wacky JavaScript. This way it all just works and without an JS!!! Additionally if you use background-size: center center; the image will be centered in the allocated space made up by the div.
    The only code I hate more than my own is everyone else's.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by TheRaptor View Post
    Your accreditation text doesn't need to be huge. In fact I think it should be quite small and [as most commonly is done] placed under the picture.
    +1

    Mind you, there are icons sets available for free that you might consider using. If they require accreditation, I'm not sure if it's acceptable to put that statement in one place on the site rather than under each image.

    Or you could consider using stock images that can be very cheap and which don't require accreditation.

  9. #9
    Non-Member Max Height's Avatar
    Join Date
    Dec 2011
    Posts
    303
    Mentioned
    6 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by TheRaptor View Post
    Wouldn't that ugly icon represent a missing picture and the alt tell what the picture was/is?
    Yes to me and tech/web savvy people it would represent a missing picture but there are a lot of elderly and not so tech/web savvy people out there that would not necessarily be aware the icon represents a missing picture.

    So if I had an image of the Eiffel Tower on a page, I would typically have an alt attribute something like "Photo of Eiffel Tower". Obviously you can put whatever description you like in an alt attribute.

  10. #10
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,934
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oddz View Post
    Good thing your entering this all yourself because if you had to sit and explain to a none-technical person the reason they need to include alt and title text when entering images you would most likely get a blank stare followed by useless if any at all alt or title information. Even worst when consuming data from an external source.
    Well, I am doing things the right way - less my HTML approach maybe - right?


    Also, I don't mean to go deathshadow on you or anything but using divs for a list is not semantic.
    Would love to discuss this more, but don't want to hi-jack my own thread...

    Should I create another thread?

    Take offline?

    Suggestions?

    First priority, of course, is this pesky attribution issue.

    Thanks,


    Debbie

  11. #11
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,194
    Mentioned
    17 Post(s)
    Tagged
    4 Thread(s)
    off topic: I think I'm going to start using that – going deathshadow on you. Not only here but when correcting people for unrelated topics as well.
    The only code I hate more than my own is everyone else's.

  12. #12
    Non-Member Max Height's Avatar
    Join Date
    Dec 2011
    Posts
    303
    Mentioned
    6 Post(s)
    Tagged
    1 Thread(s)
    Off Topic:

    Quote Originally Posted by oddz View Post
    off topic: I think I'm going to start using that – going deathshadow on you. Not only here but when correcting people for unrelated topics as well.
    Then shouldn't you be using the ot tags

  13. #13
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,194
    Mentioned
    17 Post(s)
    Tagged
    4 Thread(s)
    There is an off topic tag?
    The only code I hate more than my own is everyone else's.

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by oddz View Post
    There is an off topic tag?
    Wrap your post (or off topic part thereof) it these tags:

    [ot] ... [/ot]

    That wraps a box around the comments with the "Off Topic" heading. The older site used to reduce the font size, too, which I preferred.

  15. #15
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,934
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Or create a new thread called Is this worthy of an Unordered List or a Div??

    Thanks,


    Debbie

  16. #16
    Non-Member Max Height's Avatar
    Join Date
    Dec 2011
    Posts
    303
    Mentioned
    6 Post(s)
    Tagged
    1 Thread(s)
    Off Topic:

    Quote Originally Posted by oddz View Post
    There is an off topic tag?
    That's where the red box around the post comes from


  17. #17
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,934
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TheRaptor View Post
    Your accreditation text doesn't need to be huge. In fact I think it should be quite small and [as most commonly is done] placed under the picture.
    Okay, so how do I position this text so that it stays perfectly below the images in either of my screenshots...
    Picture: S-Corp. Credit: John Doe, Wikimedia Commons.

    My Article Listing would be tricky because the "teaser" may be less height than the image and so a float: left wouldn't really work.

    And for the article itself, who knows how the body text and image will fall.


    Debbie

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    the "teaser" may be less height than the image
    I would still say wrap image and subtitle in a div with a set width and float it all left. If you are likely to have images too tall, then if makes me question the layout. Perhaps in those situations you should just use a short image. (I am kind of over decorative images anyhow, so I might be a bit negative about all this.)

  19. #19
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,934
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I would still say wrap image and subtitle in a div with a set width and float it all left. If you are likely to have images too tall, then if makes me question the layout. Perhaps in those situations you should just use a short image. (I am kind of over decorative images anyhow, so I might be a bit negative about all this.)
    Well, presumably you have seen my screenshots above.

    What did you think about how things looked on my Articles Listing page?


    Debbie

  20. #20
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Well, I guess they are ok, although I think the page would look better with that sort of image the same size (or at least width) for each post. But with my current dislike of unnecessary things, decorative images just look like an object in the way to me. I guess I'm not speaking for many people, though.

  21. #21
    SitePoint Guru bronze trophy TheRaptor's Avatar
    Join Date
    Jul 2011
    Location
    New York
    Posts
    710
    Mentioned
    40 Post(s)
    Tagged
    0 Thread(s)
    Another option would be to place the accreditation at the end of the article like freelanceswitch does.
    TheRaptor - Joe

  22. #22
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,448
    Mentioned
    274 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    This topic came up in the past, and I chose to do things a certain way, but I know in another recent thread of mine, Paul O' mentioned that I should make some changes (of which I don't remember)...

    I think Paul O' was saying to drop the word "Picture" and maybe even the whole alt tag?
    I remember that discussion. It was here and the relevant bit was
    Quote Originally Posted by Paul O'B View Post
    Don't use the same alt and title text in the image as that will annoy screen readers greatly as they read out the same information twice. Also do not include the word picture or imafe in the alt text because screenreaders announce that it is an image before the text is read out so users don;t want to hear "Image", "Image of .....".

    More info here.
    And I agree with @ralph.m - (a) if accreditation is required, it should be clearly visible, and (b) it would not adversely affect my impression of a site.

  23. #23
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,934
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    I remember that discussion. It was here and the relevant bit was

    And I agree with @ralph.m - (a) if accreditation is required, it should be clearly visible, and (b) it would not adversely affect my impression of a site.
    So would you put it beneath the images?

    And would you wrap the image and the attribution text with a <div> as Ralph mentioned to keep things unified?

    And then what would you do with the ALT and TITLE attrbutes?


    Debbie

  24. #24
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,448
    Mentioned
    274 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    So would you put it beneath the images?
    Probably. It would depend on the context and the overall layout. If all the images shared the same attribution, I might just state it once, perhaps in the footer.

    Quote Originally Posted by DoubleDee View Post
    And would you wrap the image and the attribution text with a <div> as Ralph mentioned to keep things unified?
    Assuming I've decided to put the attribution under the image, then yes.

    Quote Originally Posted by DoubleDee View Post
    And then what would you do with the ALT and TITLE attrbutes?
    Put proper alt text in the alt attribute and not use title at all.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •