Custom and accessible panel

panels, CSS, style, accessibility, button

An accessible panel:

• The buttons are actual HTML buttons. You can therefore use the TAB key to give the focus to the panel's buttons, and the "ENTER" key to activate or trigger the corresponding control.
• The buttons include text and titles (displayed when a button is hovered).
• If you remove colors from the page (for example using FireFox's No Color extension) the buttons are still visible, and accessible using the keyboard.

By default a panel creates buttons as divs. In this example the createControlMarkup panel function is overridden to create a more accessible markup for the buttons. See the accessible-panel.js source to see how this is done.

Note: in IE 8, when a button is pressed its content shifts by 1 pixel. This is a known IE8 bug, with known workarounds. No workaround is applied in this example though.