Opened 15 years ago
Closed 15 years ago
#3493 closed New Feature (fixed)
Toolbar needs to work in High Contrast mode
Reported by: | Damian | Owned by: | Frederico Caldeira Knabben |
---|---|---|---|
Priority: | Normal | Milestone: | CKEditor 3.0 |
Component: | Accessibility | Version: | |
Keywords: | IBM Confirmed Review+ | Cc: |
Description
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.
Attachments (5)
Change History (18)
comment:1 follow-up: 4 Changed 15 years ago by
Keywords: | Confirmed added |
---|---|
Type: | Bug → New Feature |
comment:2 Changed 15 years ago by
Priority: | High → Normal |
---|
comment:3 Changed 15 years ago by
Owner: | set to Martin Kou |
---|---|
Status: | new → assigned |
comment:4 Changed 15 years ago by
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.
Changed 15 years ago by
Attachment: | 3493.patch added |
---|
comment:5 Changed 15 years ago by
Keywords: | Review? added |
---|
Changed 15 years ago by
Attachment: | 3493_Changed.patch added |
---|
comment:6 Changed 15 years ago by
Keywords: | Review- added; Review? removed |
---|
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.
Changed 15 years ago by
Attachment: | 3493_2.patch added |
---|
comment:7 Changed 15 years ago by
Keywords: | Review? added; Review- removed |
---|
- Fixed toolbar jumping with ON state in IE.
- Added hover effect for toolbar buttons.
- Added text to color buttons.
- Fixed missing right border in combos.
- Fixed missing round corners in toolbar buttons in Firefox.
- Added outer border for dialgos.
- 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.
comment:8 Changed 15 years ago by
Keywords: | Review- added; Review? removed |
---|---|
Owner: | changed from Martin Kou to Frederico Caldeira Knabben |
Status: | assigned → new |
Nice job Martin!
I have some small enhancements to it. I'll attach a new patch here.
Changed 15 years ago by
Attachment: | 3493_3.patch added |
---|
comment:9 Changed 15 years ago by
Keywords: | Review? added; Review- removed |
---|---|
Status: | new → assigned |
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.
comment:10 Changed 15 years ago by
Keywords: | Review- added; Review? removed |
---|
The only problem left is a security warning message in IE6 with HTTPS. Otherwise it's working great.
Changed 15 years ago by
Attachment: | 3493_4.patch added |
---|
comment:11 Changed 15 years ago by
Keywords: | Review? added; Review- removed |
---|
comment:12 Changed 15 years ago by
Keywords: | Review+ added; Review? removed |
---|
The easiest way is to create a new skin.