1. #1
    Sencha User
    Join Date
    Jun 2011
    Posts
    9
    Vote Rating
    0
    extjsquestions is on a distinguished road

      0  

    Default Unanswered: ExtJS 4.0.0 web accessibilty issue in High Contrast mode.

    Unanswered: ExtJS 4.0.0 web accessibilty issue in High Contrast mode.


    Hi,

    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 :

    .x-form-trigger {
    background-image: url("../../resources/themes/images/default/form/trigger.gif");
    background-position: 0 0;
    border-bottom: 1px solid #B5B8C8;
    cursor: pointer;
    float: left;
    height: 21px;
    width: 17px;


    }

    Kindly let me know how can we make these background images visible in High Contrast mode also?

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Answers
    3540
    Vote Rating
    851
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You will likely have to create your own images then.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    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 services@sencha.com

    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.

  3. #3
    Sencha User
    Join Date
    Jun 2011
    Posts
    9
    Vote Rating
    0
    extjsquestions is on a distinguished road

      0  

    Default


    Is it there any possible solution with some css changes in ext-all.css.?

  4. #4
    Sencha User MikeB's Avatar
    Join Date
    Feb 2008
    Location
    Northern Md
    Posts
    104
    Answers
    1
    Vote Rating
    0
    MikeB is on a distinguished road

      0  

    Default ExtJS support for High Contrast Mode

    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.
    MikeB

  5. #5
    Sencha User MikeB's Avatar
    Join Date
    Feb 2008
    Location
    Northern Md
    Posts
    104
    Answers
    1
    Vote Rating
    0
    MikeB is on a distinguished road

      0  

    Default Ok here's a case of hitting send before doing due diligence

    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.

    MikeB

Thread Participants: 2