IMG sprite: optimization tips for high contrast Mode

Note: The high contrast mode is a theme set for Windows systems. It is intended to make it easy for users with impaired vision to view information. It improves text readability by using contrasting colors and font sizes. In high-contrast mode, the background of a webpage turns black by default.

CSS Image
Sprites is a technology used to reduce the number of HTTP requests for images on webpages. However, because it causes the disappearance of high-contrast images in windows, sprites causes the performance of Web applications.
The conflict between improvement and damage to the accessibility experience is gradually attracting attention. The reason for this problem is that this technology is usually applied to the "background-image" of CSS.
.

To prove this problem, we browse some well-known websites in high contrast mode (the above is the normal mode, and the following is the high contrast mode ):

In Google Video, the buttons of the front and back options disappear:

On Yahoo France's website, navigation items and buttons disappear:

Similarly, the logo disappears in Facebook, Amazon, and AOL Music:

Similarly, the buttons for popular content sharing services are gone:

The use of Sprite technology has contributed a lot to the experience of optimizing loading speeds for more websites, but we have to admit that this process ignores and damages the user experience using high-contrast mode.

introduction to sprites

In the new design of aol.com, which applied the graphic title (image display title) of the new enterprise logo text, I decided to try something that I had never used many years ago.

Since the element can be displayed in high contrast mode, why can't we crop the image to achieve the desired effect?

In this case, the HTML result of the graphic title is as follows:

<H2 class = "popular"> popular </H2> <H2 class = "featured"> featured </H2>

We set the alt attribute value to null so that screen readers can bypass them, we wrote text such as "featured" in the title so that the search engine can know what this part is about (this is more practical than adding it to alt ).

The following is the CSS we want to set:

H2 { Overflow: hidden; Position: relative; Height: 50px; Width: 200px; } H2 IMG { Position: relative; } H2.popular IMG { Top:-100px; } H2.featured IMG { Top:-200px; }

I don't want to explain it. I believe you can understand what is going on at a glance.

Test Environment

There are two ways to enter the high contrast Mode

[1] Step-by-Step methods with obsessive-compulsive disorder:

Start Menu-Control Panel

Enable auxiliary function options

Click "show"

Select "use high contrast"

Confirm

[2] shortcuts for Long Live lazy:

Left Alt + Left Shift + printscreen

sprite instance

The following are two cases: one is CSS sprite technology, the other is sprite technology, and the other is look in both modes to create a "find different" game.

CSS sprite demo

sprite demo

Known application restrictions

The premise of this technology is that the image should be placed in a block element or an inline element with the "display: Block" attribute set. it does not work in the following elements:

<Fieldset>, <legend>, <input>, <button>, <Table>, <tr>, <TD>, <TH>

The browser version used for the test is IE6 +, Firefox 3.5 +, chrome and Safari 4 +, and it is estimated that there is no problem in all modern browsers.

High contrast mode detection

Chris blouch also created a high-contrast mode detection module in axs's accessibility JS library. If your website has encountered this problem and wants to improve it, you can obtain more information about this database at the address below:

Http://dev.aol.com/downloads/axs1.2/readme.html#hd

Better: it supports printing devices

Many people complain that CSS Sprite, which uses background image technology, has poor support for printing devices, but the IMG technology does not.

Printed by the CSS sprite technology:

sprite technology:

(Original:Artzstudio.comSource:MasterReprinted, please respect the work of the original author and the translator. Thank you for your cooperation)

Conclusion: I have seen the IMG sprite technology before.ArticleI think this technology is also used in some parts of the dibao network. I don't think any kind of technology is applicable to both the background and IMG Sprite. PairImportant function modulesThe IMG sprite technology is good! Go to the Taobao homepage! Haha.