6 Dec 2012 1:30 AM #1
Unanswered: ExtJS 4.0.0 web accessibilty issue in High Contrast mode.
We are using ExtJS 4.0.0 in our application. All the background images of extjs does not show up when the application is accessed in High Contrast Mode. For ex: the ext-all.css has trigger.gif as background image and it does not show up in High contrast mode :
background-position: 0 0;
border-bottom: 1px solid #B5B8C8;
Kindly let me know how can we make these background images visible in High Contrast mode also?
8 Dec 2012 6:25 AM #2
- Join Date
- Mar 2007
- Gainesville, FL
- Vote Rating
You will likely have to create your own images then.Mitchell Simoens @LikelyMitch
Sencha Inc, Senior Software Engineer
Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/
Need more help with your app? Hire Sencha Services firstname.lastname@example.org
Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!
When posting code, please use BBCode's CODE tags.
10 Dec 2012 12:43 AM #3
Is it there any possible solution with some css changes in ext-all.css.?
25 Jun 2014 6:50 AM #4
ExtJS support for High Contrast Mode
Haven't seen any updates to this so I thought I'd chime in with my $.02, but by switching to Window's High Contrast Theme it might not be possible to use background images at all (so don't go designing your own images just yet).
According to the documentation (and also see this article in WebAIM particularly the section on "CSS Background Images") which states that this feature "turns off all unimportant, overlapped content and background images to help make the screen easier to see."
So my suggestion (which is what I use in my apps) is to have a control that allows the user to switch to the Accessibility Theme of ExtJS ( ext-all-access.css ). Make sure that this control is clearly visible when windows is switched to "High Contrast Mode" especially since it's only in Windows 8 that the browser can detect (using the -ms-high-contrast media feature) that windows is in high contrast mode.
Hope this helps.
25 Jun 2014 7:11 AM #5
Ok here's a case of hitting send before doing due diligence
I take back some of my comments in my previous post on this topic.
Switching to Windows High Contrast mode (at least in Windows 7) does not fully disable CSS background images (although there is a blog post in the Paciello Group site about making "High Contrast Proof CSS Sprites"), but in using the Kitchen Sink demo in both the Accessibility Theme and the Classic theme in both normal and Windows High Contrast mode I see that you CAN access the controls so perhaps they have some of the bugs worked out on CSS Sprites in Windows High Contrast mode since this post was originally made.
But it also means that you probably shouldn't have to create your own sprite images as the ones that come with the theme apparently do work.