SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    question for visually impaired users

    I'm sure this question has been asked many times before, but what do I do if I want to create an image file with the title of my website, and yet be able to have the title be read by screen reader programs for the visually impaired?

  2. #2
    SitePoint Zealot
    Join Date
    Mar 2009
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can try the technique that I use on two of my sites:

    Write a normal <h1> header for your site. Then with CSS, use your site's header graphic as a background image for the h1 element, and then also style h1 to have a large negative text-indent, pushing the real text way off the page. Screen readers should still "see" this properly and will read it out.

    This is also how they do it at Slashdot.
    Learn all about diamonds,
    Check out some period-drama movies and TV series,
    Or get festive with The Wonder of Christmas.

  3. #3
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    What a weird technique, surely it makes more sense if the image has genuine meaning (such as a logo) that you would embed the image into the HTML and simply provide alt text to describe it for people whom visit the site.

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dmehling View Post
    I'm sure this question has been asked many times before, but what do I do if I want to create an image file with the title of my website, and yet be able to have the title be read by screen reader programs for the visually impaired?
    Code HTML4Strict:
    <img src="logo.png" alt="My Website Title">
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code HTML4Strict:
    <div id="branding"><a href="#" title=""><img src="" width="" height="" alt="website title"> Website Title</a></div>

    Code CSS:
    #branding {
        position: relative;
        width: 200px;
        height: 50px;
        background: #fff;
        color: #000;
        font-size: 1.17em;
    }
    #branding a, #branding img {
        display: block;/* #branding img does not need this, but it can't hurt it */
        width: 100%;
        height: 100%;
    }
    #branding img { 
        position: absolute; 
        top: 0;
        left: 0;
    }

  6. #6
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,266
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    If you want the header text styled for those without images (since they are also coming to your site) you could do this:

    <h1>Welcome to Company X!<a href="/" title="homepage"></a></h1>

    h1 {
    all teh styles;
    set height and width, not in %;
    position: relative;
    }

    h1 a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(tehlogo.gif) 0 0 no-repeat;
    }

    The advantage to this is when the image doesn't load, you can have your text styled. If I could style Alt text (heck, if I could freakin center it vertically) this wouldn't be needed. I want bolds, colours, spacings, and centering on my company text whether the image appears or not.

    For some reason my browser likes to make alt text 9px tall. : (

  7. #7
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Don't get me wrong, I like the idea there but having an anchor with no value, it seems like the same annoying thing we have with empty div’s to clear floats.

  8. #8
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,266
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Alex:

    The anchor is in place of what usually an empty span is... and since often the logo's are wanted to be clickable I thought, span, anchor, both inline... use the anchor, Luke...

    That it's empty is a disadvatage for those with something like Lynx. Because without CSS there's no space the anchor can take up, there's no real "clickable area" in any CSS-less browsers and I think I remember that in Lynx the header didn't become a link? Not sure actually, would have to check.

    But using Gilder Levin, you'll always have some sort of empty element holding the image... if it contains any text, you'll see it covering your image.

    How it usually is
    <h1>Blah Blah <span></span></h1>

    Since I'm using empty HTML elements to get the effect anyway, I don't see a difference with
    <h1>Blah Blah <a href="home" title="home page"></a></h1>

    Though yesh it would be nice to not have to have that.

    And it's more code than just using an image... which is why I use this above technique when styling that text underneath bugs me : )

  9. #9
    SitePoint Zealot
    Join Date
    Mar 2009
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The reason that I chose the "massive negative text-indent" technique for image replacement is that Slashdot use it, and these guys are super Internet geeks, and their current CSS-based design was the winner in a big competition that they had to redesign the site with CSS.

    There are of course several techniques; have a look at this page for a nice comparison.
    Learn all about diamonds,
    Check out some period-drama movies and TV series,
    Or get festive with The Wonder of Christmas.

  10. #10
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,266
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    The reason that I chose the "massive negative text-indent" technique for image replacement is that Slashdot use it...
    The only issue with it:

    http://stommepoes.nl/textindent.gif

    The invisible clickable areas are the only problem with the text-indent-- however I have no idea how many surf to such a tech-savvy site with images off (but anyone stuck on dial-up will likely do this).

    The alt text for the category (Earth) appears though. So I can quickly and easily see which category the story belongs to.

  11. #11
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Dr. Stavros View Post
    The reason that I chose the "massive negative text-indent" technique for image replacement is that Slashdot use it, and these guys are super Internet geeks, and their current CSS-based design was the winner in a big competition that they had to redesign the site with CSS.
    Don't get me wrong, I do enjoy reading Slashdot but they are not really known for their web design skills. The problem with Slashdot’s background indent logo is that if style is disabled from the browser window, the end user will not be able to see the logo they can click upon making it an almost invisible link.

  12. #12
    SitePoint Zealot
    Join Date
    Mar 2009
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    Don't get me wrong, I do enjoy reading Slashdot but they are not really known for their web design skills. The problem with Slashdot’s background indent logo is that if style is disabled from the browser window, the end user will not be able to see the logo they can click upon making it an almost invisible link.
    That's not quite right. With styles on, the <h1> text is indented off the page, and the logo is a background image for that section. If styles are disabled, the background logo won't appear, but the <h1> text won't be indented off the page, so the user can click the "Slashdot" <h1> text to go to the homepage.

    But the point made by Stomme poes (groetjes!) is a good one.
    Learn all about diamonds,
    Check out some period-drama movies and TV series,
    Or get festive with The Wonder of Christmas.

  13. #13
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,266
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Dave Shea's (no longer updated) image replacement page here uses images-off/css-on as one of the criteria in testing image replacement. Slashdot's technique is fine images and css on, and screen-reader/Lynx friendly. It's just not dial-up-in-the-middle-of-nowhere friendly : )

  14. #14
    SitePoint Zealot
    Join Date
    Mar 2009
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep, it's certainly true that every image-replacement technique has its pros and cons. It's a real shame that there is no ideal solution.

    I've heard people mention that the next standard of CSS should include some "proper" way of doing this sort ot thing, such as having an "alternate image" property for block-level elements.
    Learn all about diamonds,
    Check out some period-drama movies and TV series,
    Or get festive with The Wonder of Christmas.

  15. #15
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dr. Stavros View Post
    I've heard people mention that the next standard of CSS should include some "proper" way of doing this sort ot thing, such as having an "alternate image" property for block-level elements.
    That would be utterly silly, since there is already a perfectly accessible way to use an image with rich alternative content. The only problem is that IE doesn't support it, but that should be blamed on Microsoft, not on HTML or CSS.
    Code HTML4Strict:
    <object type="image/png" data="replace-batteries.png">
      <h2>How to Replace Batteries</h2>
      <ol>
        <li>Remove the battery compartment cover.</li>
        <li>Remove the old batteries.</li>
        <li>Insert fresh batteries (note the correct polarity).</li>
        <li>Replace the battery compartment cover.</li>
      </ol>
    </object>
    Birnam wood is come to Dunsinane

  16. #16
    SitePoint Zealot
    Join Date
    Mar 2009
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    That would be utterly silly, since there is already a perfectly accessible way to use an image with rich alternative content. The only problem is that IE doesn't support it, but that should be blamed on Microsoft, not on HTML or CSS.
    Aha, I see you know what you're talking about, unlike me (and the "people" that I quote).
    Learn all about diamonds,
    Check out some period-drama movies and TV series,
    Or get festive with The Wonder of Christmas.

  17. #17
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,266
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Soooo many times I've been tempted to use object's full potential, only to stop because the browser everyone in my country uses has issues with multiple children : ( I've also been tempted by the SWFObject version where IE CC's basically give on object to IE and another to everyone else.

    Then again, until recently I could not get children to show in an object at all except in Opera and Konqueror. Firefox was not properly showing my text pages until version 3 : (


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
  •