Toolbar needs to work in High Contrast mode

[Damian]

One accessibility requirement is that the editor be usable in High Contrast (HC) mode by a user who does not have access to the mouse or a screen reader. When the editor is viewed in HC mode, the toolbar icons become invisible. When using keyboard only, the user cannot easily identify the functions of the toolbar items.
The ideal solution would be that the toolbar has a different rendering for HC mode. The Dojo editor could be used as a reference on how to handle this case. Should it be too complicated to do the detection of HC mode in CKEditor, it would be acceptable if the editor had a configuration parameter to set it to HC mode, by its parent application.

[Artur Formella]

The easiest way is to create a new skin.

[Frederico Caldeira Knabben]

Replying to arczi:

The easiest way is to create a new skin.

A new skin would now actually help us here. High Contrast is not something to be configured in the browser, or the web application. It's a feature provided by the operating system (check out ​Vista or ​XP help on this).

In High Contrast, CSS background colors are not rendered, so our toolbar buttons icons and dialog borders are not visible. So, what we need here is a way to detect High Contrast, and then provide a special set of CSS features to render the editor differently on such case.

[Frederico Caldeira Knabben]

There are a few issues I would like to have for this first proposal for this feature:

• The proposed ON state for the buttons make their size change. I would avoid it to not have the toolbar dancing. I've attached a new patch that adds a new way for it that works for Firefox only for now.

• The Color buttons have no text.

• The combos lost their right border.

• The dialogs have no outer border.

I think we would offer some good support for it with the above things fixed. Other possible issues could be fixed on future versions.

[Martin Kou]

1. Fixed toolbar jumping with ON state in IE.
2. Added hover effect for toolbar buttons.
3. Added text to color buttons.
4. Fixed missing right border in combos.
5. Fixed missing round corners in toolbar buttons in Firefox.
6. Added outer border for dialgos.
7. Fixed invisible close button in dialogs.

The color grid in color popups aren't converted to text in high contrast mode yet, because converting them to text would require a major layout change in the color selection panels.

[Frederico Caldeira Knabben]

Nice job Martin!

I have some small enhancements to it. I'll attach a new patch here.

[Frederico Caldeira Knabben]

This new patch simplifies the previous one a bit:

• Avoids adding a new js file just for that small check.

• Makes the check beforehand, when loading the editor code.

• Reduced the class name to "cke_hc" to save a few bytes.

• Uses "about:blank" for the background image. In this way we avoid having an HTTP request to the spacer file. Still need to check it on HTTPS.

[Martin Kou]

The only problem left is a security warning message in IE6 with HTTPS. Otherwise it's working great.

[Frederico Caldeira Knabben]

Fixed with 3505.