SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Adding an Image that's not Important for a Screen Reader to look into.

    I'm putting in a gif in an <img> element, and I want to know what attribute would I use inside the element to tell the browser it's not important to read anything, or that it's not related page content.



    guess: it is just
    Code:
    <img src="style/someimage.gif" alt="/">

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Either do alt="" or, perhaps better still, serve the image as a background image via CSS.

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    As ralph said, alt="" is even encouraged if you can't manage to stuff the decorational image into a CSS background.

    With alt="/" you'd get people hearing "slash" or "forward slash" everywhere
    Leaving the alt out entirely means the url is very likely to be read out (depends on the reader but the most popular ones do this as a desperate attempt to give the user something that might be useful).

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    As mentioned, I suspect CSS is the answer -- if it's something a screen reader shouldnt' read out, it probably has no business in the HTML in the first place.

    Though we're all guessing wildly here -- do you have an example page online we could look at to say for certain?

    Remember, IMG is for CONTENT images, not for presentation (decorations). If it's content, the screen reader should be aware of it -- if it isn't, what's it doing in the HTML in the first place?

  5. #5
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    How would I do it as a CSS decorational image?

  6. #6
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Depends, what's it attached to? Again, we'd have to see what it is you are actually trying to do as there are dozens if not hundreds of different ways of handling an image or marking up content.

    There are no "one size fits all" answers.

  7. #7
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Cool

    I would like to illustrate a metal bar between the menu drop downs at Atlanta Review Groupô using a .gif image or .jpg. I believe that if I can do that in CSS, I would like to learn how.


  8. #8
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    "illustrate"? If you mean insert, I'd probably pad the bottom of an existing element and add it there... Though honestly your markup makes NO SENSE whatsoever... headings on non-heading elements, images for text with no content backing them up, non-breaking space in an element that shouldn't need one... Though I'm STARTING to understand what you are trying to do in the menu... I just wouldn't have MOST of that HTML in there as those aren't true "sections" warranting heading tags -- it's a cascading list.

    I'll try to revisit this when I get up -- bedtime...

  9. #9
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    There is really no content on that site, lest the drop down menu and the goofy-sounding welcome statement that i've now changed 3 times. The drop down menu <a> tags have been changed to put an underline under the link on focus, active, and hover. Stomme Poes, a mentor, is the one that helped me with this drop down markup.

    I just wanted to learn how to put an image behind this menu.

  10. #10
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Pardon me... but I still didn't get an answer.

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by etidd View Post
    I just wanted to learn how to put an image behind this menu.
    For that you would use a background image. There is another thread on this topic currently running:

    http://www.sitepoint.com/forums/css-...es-770903.html

    Is that similar to what you are doing?

  12. #12
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes, I believe that's a relevant thread. It's just going to be there, and not anything on hover over.

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Just place the bg image on the drop down ULs then:

    Code:
    ul {background: url(image.gif)}
    etc.


Tags for this Thread

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
  •