10 Replies Latest reply on Nov 10, 2008 6:09 PM by Newsgroup_User

    Accessibility Issues

    Rockyjd
      Hello everyone,
      I am a newbie to web design and am having difficulty with the accessibility of my page. I have 2 questions:

      1. I created my website fully in CSS using DW CS4. I used the 'set text of container' behavior to have my images pop up in my main Div when mousing over the thumbnails. I have the design exactly how I want it and the mousing behaviors are all working perfectly.
      The problem is I want to make my design accessible and add keyboard commands but using the behaviors for the keyboard commands doesn't seem to work. I know I am not understanding something.

      Also, although you can TAB through the CSS navigation in IE, it doesn't work in FF, Safari or Opera.

      So, how do I add code so that someone can use just the keyboard to access both my navigation bars and to have the images pop up properly like the mouseover.

      2. Is there any way to have the large image show up in my main Div after clicking the thumbnails without using Javascript? (for those users with Javascript disabled.)

      Any help would be appreciated. Thank you!

      Here's the link to the page:
      http://www.luminatii.org/rachellefox.html

      and here's the code I used to create the mouseover effect in the 'set text of container' box:
        • 1. Re: Accessibility Issues
          Level 7

          "Rockyjd" <webforumsuser@macromedia.com> wrote in message
          news:gevq68$p5n$1@forums.macromedia.com...
          > Hello everyone,
          > I am a newbie to web design and am having difficulty with the
          > accessibility of
          > my page. I have 2 questions:
          >
          > 1. I created my website fully in CSS using DW CS4. I used the 'set text of
          > container' behavior to have my images pop up in my main Div when mousing
          > over
          > the thumbnails. I have the design exactly how I want it and the mousing
          > behaviors are all working perfectly.
          > The problem is I want to make my design accessible and add keyboard
          > commands
          > but using the behaviors for the keyboard commands doesn't seem to work. I
          > know
          > I am not understanding something.
          >
          > Also, although you can TAB through the CSS navigation in IE, it doesn't
          > work
          > in FF, Safari or Opera.
          >
          > So, how do I add code so that someone can use just the keyboard to access
          > both
          > my navigation bars and to have the images pop up properly like the
          > mouseover.
          >
          > 2. Is there any way to have the large image show up in my main Div after
          > clicking the thumbnails without using Javascript? (for those users with
          > Javascript disabled.)
          >

          well, using images is probably not the best route to take if you have to be
          Accessible. Why not give the URL of the page/site so people can see what's
          really going on?


          • 2. Re: Accessibility Issues
            Rockyjd Level 1
            Hi Hunter Elliott:
            I did provide the URL. I'm not sure why you aren't seeing it.
            Anyway here it is again:
            http://www.luminatii.org/rachellefox.html

            Also it's a photography gallery, so I have to use images.

            Thanks!


            • 3. Re: Accessibility Issues
              Rockyjd Level 1
              Hi again,

              Could someone please help me? I'm pulling my hair out.

              I added "#" links to the images and in IE (mac) I can TAB through them but the keyboard behaviors still won't work and I can't get any keyboard behaviors to work in FF or Safari.

              I have read reams of information on accessibility and all they say is to make sure you add OnFocus and OnBlur to activate the keyboard but it doesn't work.

              I would really like to make the site accessible but with my limited knowledge I am lost at what to do.

              Any help is greatly appreciated!
              Thank you.
              The link again is: http://www.luminatii.org/rachellefox.html
              • 4. Re: Accessibility Issues
                Level 7
                On Sun, 9 Nov 2008 04:55:39 +0000 (UTC), "Rockyjd"
                <webforumsuser@macromedia.com> wrote:

                > I added "#" links to the images and in IE (mac) I can TAB through them but the
                >keyboard behaviors still won't work and I can't get any keyboard behaviors to
                >work in FF or Safari.

                You added the links, but you left the behaviors on the CompuServe event of the
                <mg>. You need to apply the behaviors to the links, preferably using the on
                click event. The way it should work, if you really want it to be accessible,
                would be like this:

                <a href="path/image.jpg" on click="MM_setTextOfLayer(...);return false" ...

                Then remove the CompuServe on the <mg> tags.

                Gary
                • 5. Re: Accessibility Issues
                  Level 7
                  On Sun, 09 Nov 2008 08:05:47 -0600, Gary White <reply@newsgroup.please> wrote:

                  >You added the links, but you left the behaviors on the CompuServe event of the
                  ><mg>. You need to apply the behaviors to the links, preferably using the on
                  >click event. The way it should work, if you really want it to be accessible,
                  >would be like this:
                  >
                  ><a href="path/image.jpg" on click="MM_setTextOfLayer(...);return false" ...
                  >
                  >Then remove the CompuServe on the <mg> tags.

                  Darn spellchecker! Sorry, the above should read:

                  You added the links, but you left the behaviors on the onmouseover event of the
                  <img>. You need to apply the behaviors to the links, preferably using the
                  onclick event. The way it should work, if you really want it to be accessible,
                  would be like this:

                  <a href="path/image.jpg" onclick="MM_setTextOfLayer(...);return false" ...

                  Then remove the onmouseover on the <img> tags.

                  Gary
                  • 6. Re: Accessibility Issues
                    Rockyjd Level 1
                    Thanks so much Gary!

                    I had a 'duh' moment when I read that the behaviors were still attached to my Img tags instead of the links. Sometimes you just need a fresh set of eyes.
                    It is working perfectly now with the onmouseover and onfocus behaviors.

                    I know onfocus doesn't work with Netscape 4 but it does work with everything else 4.01 onwards (as far as I have read...please let me know if this isn't true) and my group really likes the onmouseover behavior. At least it is keyboard accessible now for all the other browsers.

                    Now that one problem is solved I still have the second problem to contend with.

                    Right now the behaviors will only work if javascript is enabled. So:
                    2. Is there any way to have the large image show up in my main Div after clicking the thumbnails without using Javascript? (for those users with Javascript disabled.)

                    And how do I add this to my website so javascript users get the cool behaviors and non-javascript users can still access the images somehow.

                    I am on a steep learning curve here so all help is greatly appreciated!

                    Cheers,

                    Rachelle



                    • 7. Re: Accessibility Issues
                      Rockyjd Level 1
                      Hi all,

                      I'm still looking for an answer to the second part of my question if anyone has the time I would greatly appreciate it!
                      Thanks in advance.
                      Rachelle

                      Here's the question from above:
                      Right now the behaviors will only work if javascript is enabled. So:
                      2. Is there any way to have the large image show up in my main Div after clicking the thumbnails without using Javascript? (for those users with Javascript disabled.)

                      And how do I add this to my website so javascript users get the cool behaviors and non-javascript users can still access the images somehow.

                      And here's the link: http://www.luminatii.org/rachellefox.html
                      • 8. Re: Accessibility Issues
                        Level 7
                        On Mon, 10 Nov 2008 04:14:13 +0000 (UTC), "Rockyjd"
                        <webforumsuser@macromedia.com> wrote:

                        > Right now the behaviors will only work if javascript is enabled. So:
                        > 2. Is there any way to have the large image show up in my main Div after
                        >clicking the thumbnails without using Javascript? (for those users with
                        >Javascript disabled.)

                        There is no way, without JavaScript, to have the image show up in your <div>.
                        You can do as I suggested and use the onclick event and a return false after the
                        onclick call, and a real link to the image, have a click of the thumbnail open
                        the full size image.

                        <a href="path/image.jpg" onclick="MM_setTextOfLayer(...);return false" ...

                        Gary
                        • 9. Re: Accessibility Issues
                          Rockyjd Level 1
                          Hi Gary,

                          Thanks so much for all your help on this.

                          I figured that was the answer but I had hoped there would be some solution I wasn't experienced enough to know about.
                          I think I might just design one really nice page with the large images laid out together and link it to the thumbnails for non-javascript users.

                          I just personally don't like it when each thumbnail click takes you to a different page with the one large image on it and then to get through them you continually have to use the back button. Just a personal pet peeve. :)

                          This will also give anyone whose browser doesn't support the current onmouseover, onfocus behaviors a place to see all the larger images.
                          Luckily my group settled on a maximum of ten images per gallery so shouldn't look too bad.

                          I really appreciate your time!

                          Cheers,

                          Rachelle

                          • 10. Re: Accessibility Issues
                            Level 7
                            On Tue, 11 Nov 2008 00:39:46 +0000 (UTC), "Rockyjd"
                            <webforumsuser@macromedia.com> wrote:

                            > Thanks so much for all your help on this.

                            You're welcome. Good luck!

                            Gary