SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Mar 2004
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is FLIR image replacement accessible to people with visual impairment?

    Hello, a quick question about facelift image replacement An alternative to sIFR: Facelift Image Replacement | Breathe new life into your web pages. Would be great if someone could take a look and comment.

    I need to know how the experience is for people with visual impairment. Here is what's being sent to the user:

    Code:
    <span id="breath" class=" flir-replaced">
    <img class="flir-image" alt="Breathe new life into your web pages." src="/js/facelift/generate.php?text=Breathe%20new%20life%20into%20your%20web%20pages.&h=41&w=644&fstyle=%7B%22mode%22%3A%22%22%2C%22output%22%3A%22auto%22%2C%22cSize%22%3A%2236%22%2C%22cColor%22%3A%22rgb%2831%2C%2031%2C%2031%29%22%2C%22cFont%22%3A%22decorative2%22%2C%22realFontHeight%22%3A%22false%22%2C%22dpi%22%3A%2296%22%2C%22cBackground%22%3A%22transparent%22%2C%22cSpacing%22%3A%22%22%2C%22cLine%22%3A%220.6222%22%2C%22cAlign%22%3A%22start%22%2C%22cTransform%22%3A%22none%22%7D" style="border: medium none;">
    </span>
    There is an ALT tag which repeats what is being shown as image text. So far so good. But if used as a headline, for example, will the user realise that this is a headline? e.g.

    Code:
    <h1 class="pagetitle flir-replaced">
    <img alt="Where we work" src="/behaviour/facelift1.2/generate.php?text=Where%20we%20work&h=41&w=956&fstyle=%7B%22mode%22%3A%22wrap%22%2C%22cSize%22%3A%2226%22%2C%22cColor%22%3A%22rgb%28132%2C%20127%2C%20128%29%22%2C%22cFont%22%3A%22verdana%22%2C%22cAlign%22%3A%22start%22%2C%22cTransform%22%3A%22none%22%2C%22cLine%22%3A%221.1538461538461537%22%2C%22cSpacing%22%3A%22%22%2C%22cOpacity%22%3A%221%22%2C%22realFontHeight%22%3A%22true%22%2C%22dpi%22%3A%2296%22%7D" style="border: medium none;">
    </h1>
    I'm not sure what experience a person will have who isn't able to see the context visually on screen.

    Should a different font-replacement solution be used?

    Many thanks.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    The ideal is to have the text there and place the image over the top of it, like here:

    Header replacement

    However, testing your current setup on Mac with Safari's VoceOver screen reader: it reads out the alt text, and then tells the user that the element is empty and has just a gif image instead. Kind of annoying and handy at the same time.

  3. #3
    SitePoint Addict
    Join Date
    Mar 2010
    Location
    UK
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem that I have with this sort of thing is that the replacement text is not going to be any bigger on my screen (using a larger base font size) than it would be on yours: so, if the text is not already big enough for me to see clearly, it's going to stay that way. On balance, if I must have a fancy font pushed at me, I would prefer to see @fontface, rather than image replacement, despite its own (more minor) issues.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by adh32 View Post
    if the text is not already big enough for me to see clearly, it's going to stay that way.
    Yes, most trickery on the web reduces usability to some extent.

  5. #5
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    First I had to go "what the devil does Forward Looking Infrared have to do with image replacement?" -- then I find out it's a SiFR alternative, something I'd never use in the first place... then I find out it's nothing more than a overglorified and PISS POOR per request IMG tag -- meaning it has NOTHING TO DO with image replacement?!?

    Do yourself a favor, and either use webfonts, or use a classical image replacement method like the one Ralph.m linked to. That is presentation applied to text, as such an IMG tag has NO BLOODY BUSINESS in the markup in the first place!!!

  6. #6
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,692
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Not to mention, of course, the fact that generating an image every time the user views the page can seriously inflate server load.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by C. Ankerstjerne View Post
    the fact that generating an image every time the user views the page can seriously SERIOUSLY SERIOUSLY inflate server load.
    There, fixed.


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
  •