SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot DaisyChain's Avatar
    Join Date
    Aug 2002
    Location
    Manchester, England
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Accessible solution to using image as submit button?

    Just wondering if anyone knows of an accessible way to use an image as a submit button? I know you can add an image to the background of the input using CSS but you're still left with the text value showing. Fine if the image is some sort of icon but doesn't work where the image has words on it. Any ideas?

  2. #2
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <input type="image" name="submit" id="submit" src="go.gif" alt="Go" value="Go" />

  3. #3
    SitePoint Zealot DaisyChain's Avatar
    Join Date
    Aug 2002
    Location
    Manchester, England
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And does the form submit from clicking on that or do you need something extra to do that?

    (thanks for replying so quickly by the way!)

  4. #4
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Yep, that works like the normal button. You'll probably want to load up a transparent .gif in the html code, then specify the graphical background in the CSS.

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just remember to use the alt attribute. The value attribute is not used if the image cannot be displayed.
    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Zealot DaisyChain's Avatar
    Join Date
    Aug 2002
    Location
    Manchester, England
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fantastic! Thanks for the help. I had a look after disabling images (what did we do before Firefox's web developer toolbar!) and sure enough up pop's the alt text. Out of interest is their any way users with screenreaders know that the alt text is actually a button because in my case it just looks like normal text?

  7. #7
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo
    Just remember to use the alt attribute. The value attribute is not used if the image cannot be displayed.
    I add 'value' for when the form is submited to pass along certain information to the server.

  8. #8
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A quick test reveals that JAWS indicates that it's a button by saying 'button'. I don't know about other screen readers, but I think it's a reasonable assumption to believe that they will communicate this somehow.

    The value is useful even for type="image". I just wanted to emphasise that it is the alt attribute that is displayed if the image is not. Even some very good developers are unaware of this (no names ).
    Birnam wood is come to Dunsinane

  9. #9
    SitePoint Zealot DaisyChain's Avatar
    Join Date
    Aug 2002
    Location
    Manchester, England
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats great - thanks all for your help, much appreciated.


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
  •