Accessibility

In all fairness to designers, if you have a funky fresh over state for your button, let it shine! Get ride of the yellow focus rect, that yellow box that showcases where your tabbed selection is.

_focusrect = false;

The property is global, and that's all you have to do.

Nice point to bring up, Mr. Regan!

Hi Jester,

NOOOO!!!!! Do not do this! Sadly, there is a known bug in the player where disabling the focus rectangle disables keyboard access altogether. So this is a very bad idea.

For now, funky fresh rollovers are welcome in all other forms.

Actually, one can work around the _focusrect bug, by explicitly defining an onSetFocus event to the button that assigns a key listener checking for an ENTER or SPACE key-press. Use an onKillFocus event to remove the listener.

Generally, I think users who use keyboard focus to navigate Flash document are accustomed to seeing the yellow rectangles, so for those users, turning them off may do more harm than good from a usability standpoint. But in some cases, it can make sense. For example, check out this scrolling navigation menu: http://www.eduplace.com/kids/hmr05/?grade=1. In this situation, I actually disable the _focusrect for menu items in the scrolling pane and recreate the yellow rectangle with ActionScript so that when the content scrolls, the rectangle moves with the focused item. The actionable menu items have their own selection highlight style, so I use the onSetFocus/onKillFocus technique to capture keyboard activation of the buttons.

Very cool. This is an impressive piece (as always).

I think the same onSetFocus/onKillFocus method is used by Macromedia UI Components to draw the inner and outer focus rectangles around the UI elements. Usually when I use the components, I set the style of the inner and outer focus rectangles to yellow, so that they are consistent with any other keyboard-enabled elements. In fact, I do that in the example I mentioned above.

Hi Bob

Is there any way of globally changing the yellow highlight box to some other colour or graphic?

Yellow is a pretty good colour to achieve high contrast on most projects but there's one that i'm working on where we change the colour of all the screen elements to accomodate various visual impairments and we actually need low contrast.

I notice that when you tab around the buttons on the top navigation movie at macromedia.com you get green boxes that fade into the background and a highlight if you rollover them. That's the kind of effect I'm after!

Thanks

Simon

There is no way to change the default _focusrect color. The green, halo-themed effect is acheived in the UI components by drawing the focus rectangle with ActionScript triggered by an onSetFocus event.

The effect used in the navbar on macromedia.com looks like it was acheived by using ActionScript to draw three rectangles of decreasing opacity.

I'm trying to see the need to create a Flash widget for a simple text menu. Why not just use simple text for a simple text menu and get it all over with? Funky fresh rollovers can be created rather nicely using CSS techniques, if you must.

It's automatically more accessible by definition, provides the proper tabbing as-is, and is standards-complaint right out of the box. It is also a hell of a lot lighter than a Flash widget of comparable functionality would be.

Context is everything.

I would not advocate using Flash just to render text at this stage - though I am seeing some interesting projects underway. For now, you are correct, html with CSS does all the funky fresh stuff a growing desinger needs.

However, in cases where Flash is required and buttons are created, these issues come into the fray.

Hope that helps.