Custom and accessible panel

+ panels, CSS, style, accessibility, button +

+ Create a custom and accessible panel, styled entirely with + CSS. +

+ +

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.

+ +