6 Replies Latest reply on Apr 1, 2010 2:03 AM by smon_ed

    mx:Image Tab focus


      I'm setting all my keyboard accessibility for my app and I'm having some trouble getting focus onto an mx:Image component.


      I've set the tabIndex and tabEnabled="true" (though for all other components, this appears to be true by default) and I have also set a tool tip text, which is working when rolled over with the mouse.


      My tabbing seems to skip over the image completely - my client would like to have descriptive text for images - it's an important issue.  Also, being unable to set focus to the image means that it is ignored by the screen reader.


      Can anyone give me any tips on why it's not accessible?


      Many thanks all.

        • 1. Re: mx:Image Tab focus
          Flex harUI Adobe Employee

          It would have to implement IFocusManagerComponent.

          • 2. Re: mx:Image Tab focus
            smon_ed Level 1

            Thanks.  I'll check that out.




            OK - shouldn't this component be accessible without using IFocusManagerComponent?




            So, wioth you help I have acheived a focus rectangle but the reader just says "Graphic".  Some articles I have read mention that an image component's description can be read using the toolTip property.




            function(){return A.apply(null,[this].concat($A(arguments)))}Flex applications commonly present images using only the image or loader component. To convey the contents of these components to a screen reader, a text equivalent is delivered via the toolTip attribute. The value for the toolTip is assigned as a property of the image or loader component. This content is also made visible to sighted users as they mouse over the image.


            Also, it should be possible to add a description property to an AccessibilityProperties Object applied to the component.



            Additional detailed descriptions of images that would not be appropriate to the sighted user can be provided using the description property for the object. To provide a detailed description of the image of the ice cream pint in Figure 3, for example, use this code:



            <mx:Image width="60" height="56" source="assets/icecreampint.jpg" toolTip="Ice Cream Pint creationComplete="event.target.accessibilityProperties = new AccessibilityProperties(); event.target.accessibilityProperties.description = ‘Our fine Ice Cream Pint provides the perfect serving dish for your homemade ice cream treats’”/>


            This strategy might be used in cases where more detail is provided within the image itself or in a separate panel. When the description is in a separate panel, it can be difficult for the screen reader user to discern that the contents elsewhere on the screen have changed. Not all images require a description field though. In fact, this would make most applications extremely verbose and tedious to use.


            Neither seem to do anything to either the component used in it's vanilla form or as a customCcomponent extends Image implemements IFocusManagerComponent.


            So, despite achieving successful focus, the component remains inaccessible, despite the articles I have read which say it should be an accessible component.

            • 3. Re: mx:Image Tab focus
              Flex harUI Adobe Employee

              Large frameworks are hard to get to know and documentation is biased towards

              common cases.  I don't recall someone trying to set focus to an image very



              One of the reasons we ship the source code is so you can do comparisons as

              in: "gee, this component takes focus, and so does this one, but this one

              doesn't, what are the differences?"


              But for sure, there's so much to learn that Adobe thinks it is worthwhile

              for the developers to troll the forums.

              • 4. Re: mx:Image Tab focus
                smon_ed Level 1

                Yep - I can understand that - I guess the docs would be unfathomable if they included every single aspect.


                I updated my previous post, by the way.. possibly while you were writing your reply.


                It's an interesting puzzle...  As a disabled user, I might want two possible situations - either I sit back and listen to the page being read and described - or I tab through the page items and listen to the parts of the page that I choose to listen to - so I would argue that making an image component accessible to a screen reader and making it tab selectable is a pretty fundamental need for a non-sighted or poor-sighted user - in HTML, for example, the alt tag is straightforward.  As an educational tool, my application's images are likely to be more than just eye candy - so descriptions are important.  I can't believe that's uncommon either.


                Making this application accessible is a client requirement and quite possibly a legal one too, so it's something I have to get right or It'll come back and bite me. 


                The other obvious solution is to place an invisible text item underneath the image, which will take focus and read a description.


                My application includes a CMS, so I can include this additional description field in the edit screen without too much hassle, so perhaps that's a better solution than trying to force this component to do something it's not designed to do.  It's just that much of the docs I have read indicate that the mx:Image component is one of Flex's accessible ones - as described in my prevous post - so I'm quite confused.  After all - the whole reason I started creating this app in Flex was because it boasts 28 accessible components - I'm going to have a hard time coming if that turns out to be misleading.  Hopefully though - it's just something I'm not doing correctly with it?


                Anyway... back to the drawing board...




                • 5. Re: mx:Image Tab focus
                  Flex harUI Adobe Employee

                  I don't see an accessibility implementation for mx:Image.  Could be a doc



                  I don't know the accessibility rules for image content.  I would be puzzled

                  as a sighted user if the tab sort of went to "nowhere".  I wouldn't expect

                  it to stop on an image.

                  • 6. Re: mx:Image Tab focus
                    smon_ed Level 1

                    Thanks,  what I may do is check to see if Accessiblilty.active = true


                    If so, then I'll set the image component to accept tabbing, and if not, I'll leave it without.  That way, the accessibillity is there for non-sighted users.


                    I started a related thread on the AIR 2.0 forum here:  http://forums.adobe.com/message/2705481#2705481


                    If you're interested.


                    Thanks again,