Results 1 to 5 of 5

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

  1. #1
    Sencha User
    Join Date
    Jun 2011
    Posts
    9
    Vote Rating
    0
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      0  

    Default

    You will likely have to create your own images then.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Jun 2011
    Posts
    9
    Vote Rating
    0
      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
    Lancaster, Pa
    Posts
    107
    Answers
    1
    Vote Rating
    1
      0  

    Default 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
    Lancaster, Pa
    Posts
    107
    Answers
    1
    Vote Rating
    1
      0  

    Default 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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •