Improving Web Accessibility for Dichromat Users ... - Springer Link

4 downloads 15460 Views 241KB Size Report
designer in his effort to create accessible web sites [2,3]; (2) server-side tools ... The colors chosen by the author in a web page are usually additional ..... K.: Web-Page Color Modification for Barrier-Free Color Vision with Genetic Algo- rithm.
Improving Web Accessibility for Dichromat Users through Contrast Preservation Alina Mereuţă, Sébastien Aupetit, and Mohamed Slimane Universitě François Rabelais Tours, Laboratoire Informatique (EA6300), France 64, avenue Jean Portalis, 37200 Tours, France {alina.mereuta,aupetit,slimane}@univ-tours.fr

Abstract. Unfortunately, accessibility is not one of designers priorities while developing web sites, resulting in barriers for numerous disabled users. In this context, it is fundamental to identify the difficulties they may experience while surfing web and to propose solutions in order to remove them or diminish their impact. The choice of colors is far from being a random process but often a way to transmit or emphase information. This is particulary true for textual information contained in a web page. The perception of colors by a dichromat user is different. This results in a loss of the information conveyed by color. In our study, we show that there is a significant loss of contrast for a dichromat user resulting in information loss. We propose a method based on a mass-spring simulation to modify the colors with aim to enforce similar contrast for dichromat users. Tests on several websites allow us to conclude that our method significantly reduce the loss of contrast for both protanope and deuteranope users. Keywords: assistive technology, accessibility, dichromacy, web sites, contrast preservation.

1

Introduction

Web accessibility means that people, disregarding of their abilities can access the Web. For so, it is neccessary that its essential components (contents, user agents, developers, assistive technologies, authoring and evaluation tools [1] work together. The weakness of any component makes websites less accessible or even inaccessible to some users, such as users with disabilities, making their web experience very unpleasant and frustrating. Unfortunatly most websites are created ignoring accessibility guidelines such as the ones proposed by the Web Accessibility Initiative (WAI).In order to remove or diminish some of the difficulties that disabled people may experience while surfing web, numerous transformation and evaluating tools were proposed: (1) evaluation tools which assist the designer in his effort to create accessible web sites [2,3]; (2) server-side tools which transform the pages on the servers [4,5,6,7]; (3) client-side tools which transform the content before browsing [8,9,10,11], or at browser level [12]; and (4) assistive technologies [13]. K. Miesenberger et al. (Eds.): ICCHP 2012, Part I, LNCS 7382, pp. 363–370, 2012. c Springer-Verlag Berlin Heidelberg 2012 

364

A. Mereuţă, S. Aupetit, and M. Slimane

We are focusing our study on a proxy server that runs client-side (the client side proxy part of the SWAP project). Such tools ensure confidentiality, are highly custmomizable to user needs and do not change the way the user uses assistive technologies. Studies [14,15] show that proxy-like transformations tools improve disabled user web experience but also for a standard user. The biggest limit of these tools consists in removing a large part from the web page content believed to be unaccessible resulting in a loss of information. In this paper, we are interested in reducing the information loss that dichromats users may experience. The colors chosen by the author in a web page are usually additional means to present and enhance the message that he wants to transmit. Then, the loss of contrast can be interpreted also as a loss of information. We introduce a method that aims to preserve the same level of contrast for both standard and dichromat users. In the followings , we introduce the SWAP project, which is used to perform our analysis,the dichromacy deficiencies and existing recolorization techniques. After we introduce the problem and our method, many graphical and statistical analysis are conducted to support our approach.

2

Smart Web Accessibility Proxy

This work was carried out using tools from the Smart Web Accessibility Proxy (SWAP) project1 . The SWAP project has for objective to propose a open source set of tools to implement a modular and extensible client-side transformation proxy to improve accessibility and usability. The proxy can be used by any HTTP client like a web browser or a specialized assistive technology. The one and only requirement is that it must be configured to access the web through the proxy. By being an intermediary between the web and the HTTP client, it allows to do any kind of transformation on the content, even on secured contents (HTTPs) can be done. SWAP is a web proxy designed to facilitate access to information for users with or without disabilities. One of the goal of the project is to identify the issues arising when both disabled and standard user access the web and to propose methods and tools that better respond to user needs and demandings.

3

Dichromacy

Color is a visual sensation which is produced by the interaction of the light spectrum on the photoreceptors (cones cells) in the retina of the eye. It is commonly accepted that human color perception is a tri-stilumus phenomenon [16] based on three types of cones: S, M and L. The S, M and L cones react respectively to short wavelength (420nm, blue), medium wavelength (534nm, green) and long wavelength (564nm, red). Color deficiency is the diminished ability or the inability to perceive certain colors. Among the color deficiencies are : (1) Achromatopsia - the total lack of cones - the individuals are completely colorblind - they 1

https://projectsforge.org/projects/swap

Improving Web Accessibility for Dichromat Users

365

perceive only black, white and different shades of gray, (2) Anomalous trichromacy (Protanomaly, Deuteranomaly, Tritanomaly) - the individuals have the 3 types of cones, but they do not function properly (3) Dichromacy - the individual has only two types of cones. People suffering from Dichromacy are called : (1) Protanope - (sever) red-green deficiency due to the lack of the L-cones, (2) Deuterope - (sever) red-green deficiency due to the absence of the M-cones and (3) Protanope - (sever) blue-yellow deficiency - S cone missing. About 7% of people have a form of Anomalous trichromacy, and around 2.4 % have a form of Dichromacy [17]. To simulate dichromacy a serie of algorithms [18,19,20] and simulating tools [21] were proposed. In the following sections, we focus our study on the Dichromacy.

4

Related Works

Many attempts were conducted in order to diminish the loss of information for dichromats. Thoses works are focused either on : – images/maps recoloring in order to preserve details [20,22,23,24,25] using different methods such as linear scalling and substitution of colors; – document recoloring in order to maintain a level of contrast according to user’s needs [26] using simulating annealing ; – web page recoloring to enhance contrast [27,28] using genetic algorithms or confusion lines; In order to emphase our problem interest, we have build graphics in Figure 1 using 2563 colors in the sRGB space. For each pair of colors, we have drawn a scatterplot having as abscissa the contrast value for a standard user and as ordinate the contrast as perceived by a dichromat user. The graphics allow us to conclude that the loss of contrast can be significant for all three types of dichromacy considered.

20

20

20

15

15

15

10

10

10

5

5

5

0

0 0

5

10

Protanope

15

20

0 0

5

10

15

Deuteranope

20

0

5

10

15

20

Tritanope

Fig. 1. Relationship between the standard and simulated constrasts over the sRGB space. The white line (y = x) represents the absence of loss of contrast. Abcissa is for the initial contrast and the ordinate is the simulated contrast for dichromacy.

366

5 5.1

A. Mereuţă, S. Aupetit, and M. Slimane

Recoloring Module General

In order to make the web more accessible to people with disabilities, W3C’s Web Accessibility Initiative (WAI) published a series of web accessibility guidelines called WCAG. They are organized using three priority levels (from A to AAA). The WCAG 1.0 guideline 2, checkpoint 2.2 states that “Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen”. Beyond the problem of ensuring minimum contrast, we can notice that colors and especially the contrast variations due to the choice of colors help significantly to convey the information provided by the author of the page. We have already seen that the perceived contrast can be changed significantly. Consequently some of the information provided can not be perceived correctly due to an unintentionally variation of contrast. Our work attempts to provide a solution to the possible loss of contrast (and information) induced by the different perception. We solve this problem in two phases: (1) modeling the textual information contained in the web page as a set of entities caracterized by foreground and background colors and (2) optimizing the set of colors by simulating a mass spring system in order to maintain the initial contrast. 5.2

Mass-Spring System

A mass-spring system is defined as a set of objects (masses) connected by springs. At each moment t ∈ R+ , every object i is defined by a mass mi and a position pi (t). Each spring, that connects two objects i and j, is defined by its elasticity 0 and its current ki,j which we consider to be 1 in the following, the rest length li,j + length li,j (t) at each moment t ∈ R . Let Ai be the set containing the number of objects connected by a spring with the object i. Then, the equation of motion for the mass-spring system is:   0 li,j 1  d2 pi (t) (pj (t) − pi (t)) . = kij 1 − (1) j∈Ai dt2 mi li,j (t) A mass-spring system can have one or more equilibrium configurations. To obtain one of them, it is enough to integrate numerically the motion equation using Euler, Verlet or Runge-Kutta method [29]. In the following experiments the integration is done using the Verlet method. 5.3

Modeling and Solving the Problem Using a Mass-Spring System

In the following, we consider the colors as being sRGB colors, represented in 0 : 2553 . The positions of the mass-spring system are represented in R3 . When appropriate, the position’s coordinates are truncated in [0 : 255]3 and their values are rounded to the closest integer in order to obtain sRGB colors. Let

Improving Web Accessibility for Dichromat Users

367

C = {c1 , . . . , c|C| } be the set of colors used to represent the textual information in a web page. Let E be the set of color couples (foreground, background) from the web page and wa,b ∈ R+ the associated weights to the couple (a, b) ∈ E. In our modeling, these weights correspond to the number of characters from the page that use this couple of colors. For each color a ∈ C, we define cIa the object representing the actual color found on the web page (initial color). We define by pcIa (0) ∈ R3 the point coresponding to the color a in the sRGB color space and mcIa = +∞ . In this case, pcIa (t) is constant and pcIa (t) = pcIa (0). cIa can be seen as an anchor in the color space. For each color a ∈ C, we define cF a as the object representing the color a after the modification in the space sRGB. At first, no modification is done, hence pcFa (0) = pcIa (0). The mass of the object is defined as being heavy if the color is often used in the page. Hence an unfrequent color will have a small mass. The objects’ mass is given by:   (a,b)∈E wa,b + (b,a)∈E wa,b  mcFa = . (2) (x,y)∈E wx,y Let  > 0 (0.03 in our experiments) and dCIELab be the Euclidian distance between two colors in CIEL*a*b* color space. Let Γ (x, y) ∈ [1 : 21] be a contrast measure between two colors x and y represented in sRGB space. Let D(x) ∈ 0 : 2553 be the simulation function for protanope, deuteranope or tritanope. For F,D I all couples of colors (a, b) ∈ E we define Γa,b and Γa,b the initial contrast for a standard user and the final contrast for a dichromat user.We have: I = Γ (pcIa (0), pcIb (0)) , Γa,b

(3)

F,D (t) = Γ (D(pcFa (t)), D(pcFb (t))) , Γa,b

(4)

F,D F,D = lim Γa,b (t) . Γa,b

(5)

t→∞

To guarantee that the colors will not change too much during the adaptation process, a spring is attached between cIa and cF a for each color a ∈ C, in order to reduce the difference of colors’ perception. We define for each couple (a, b) ∈ E : lc0Ia ,cFa =  ,

(6)

lcIa ,cFa (t) =  + dCIELAB (pcIa (t), pcFa (t)) .

(7)

F,D To ensure that the contrast for a dichromat user (Γa,b ) is at the level of a I standard user (Γa,b ), we add a spring for all couples (a, b) ∈ E such that

lc0F ,cF =  ,

(8)

F,D I − Γa,b , 0) . lcFa ,cFb (t) =  + max(Γa,b

(9)

a

b

When the system converge to a stable configuration, it tends, without necessarily achieving to satisfy the following constraints: (1) dCIELAB (pcIa (t), pcFa (t)) = 0 (maintain the same perceptual distance between the initial and final colors);

368

A. Mereuţă, S. Aupetit, and M. Slimane

F,D F,D I I (2) max(Γa,b − Γa,b , 0) = 0 meaning Γa,b > Γa,b (contrast enhancement) or

F,D I Γa,b = Γa,b (compensation of contrast loss). Of course, there is a possibility that the equilibrium positions of the system to be nothing more than a compromise. But, this compromise respects at best the previous conditions for the imposed constraints. In any case, we can consider that the equilibrium configuration gives a solution to the preservation contrast problem by reducing in the same time the change of colors. Moreover, considering pcFa (0) = pcIa (0), we allow the system to converge towards an equilibrium close to the initial colors. Given these conditions, the mass-spring system and the searching of its equilibrium constitute a deterministic algorithm providing the same solution for the same dataset. This could be problematic at first sight but actually has a good impact on the user because the web page doesn’t change its aspect at each visit.

6

Experiments and Discussion

We conduct our experiments on 87 randomly selected web pages. The text and the associated colors were extracted from the web pages through HTML and CSS analysis. The foreground and the background colors were differentiated.The set of colors C is constituted by the distinct set of colors that define the foreground and the background. For each couple of colors, the associated weight is the number of characters that use the couple in the web page. The Γ function, for contrast measuring, uses the formulae suggested in the WCAG 2.0.The D function for dichromacy simulation uses the algorithm proposed by Kuhn et al [20]. The average contrast Γ¯ I , the average weighted contrast Γ¯ I,W I,W I and their equivalents Γ¯D and Γ¯D after the dichromacy simulation are given by:  Γ¯ I = Γ (pcIa , pcIb ) , (10) (a,b)∈E

 Γ¯ I,W = I Γ¯D =

(a,b)∈E

 (a,b)∈E

 I,W Γ¯D =

(a,b)∈E

wa,b ∗ Γ (pcIa , pcIb ) 

(a,b)∈E

wa,b

(11)

,

Γ (D(pcIa ), D(pcIb )) ,

(12)

wa,b ∗ Γ (D(pcIa ) , D(pcIb )) 

(a,b)∈E

wa,b

.

(13)

The equivalent contrast measures on the colors obtained after the mass-spring F,W F converged are Γ¯ F , Γ¯ F,W , Γ¯D and Γ¯D . The weighted version allows us to consider the frequency of apparition of the colors by favoring the frequent contrasts. Several statistic tests were made in order to achieve the following conclusions: – –

I : there is an average contrast loss perceived by a dichromat user; Γ¯ I > Γ¯D I,W I,W ¯ Γ > Γ¯D : there is an average weighted contrast loss perceived by a dichromat user;

Improving Web Accessibility for Dichromat Users

369

F – ΔΓ¯ I > ΔΓ¯D : the proposed method allows to compensate the average contrast loss percieved by both protanope and deuteranope users. F,W : the proposed method allows to compensate the average – ΔΓ¯ I,W > ΔΓ¯D weighted contrast loss percieved by both protanope and deuteranope users.

By construction (the same starting configuration), our method is deterministic. From experiments, we observe that the mass-spring considered allows to compensate the contrast loss for both deuteranope and protanope users. On the opposite for the tritanope user our method doesn’t compensate the loss. This may be caused by (1) the fact that we try to enforce the same perceptual distance (lc0I ,C F ) or (2) the initial position pcFa (0) leads towards a local minimum. a a Future work is required to investigate these posibilities and to build new starting configuration with the cost of losing the deterministic aspect of the method.

7

Conclusion

In this paper we were interested in the contrast loss which can be observed by a dichromat user (protanope, deuteranope, tritanope) regarding the textual information contained in a web page. We showed that the loss can be significant for all three types of dichromacy. Contrast itself is often a mean of conveying information. In consequence, a contrast loss results in a potential handicap in understanding the author intent on the webpage. We have proposed a new method that helps to compensate the loss by modifying the set of colors used to represent textual information in a web page. The principles of the mass-spring system are the baseline of our method. The first experiments on randomly selected data are encouraging, our method succeeds in compensating the loss for both protanope and deutaranope. In our future work, we plan to extend the recoloring to images.

References 1. 2. 3. 4. 5.

W3C (October 2011), http://www.w3.org/WAI/intro/components.php A-checker (October 2011), http://achecker.ca/checker/index.php Acc (October 2011), http://appro.mit.jyu.fi/tools/acc/ Betsie (October 2011), http://www.bbc.co.uk/education/betsie Brown, S., Robinson, P.: A world wide web mediator for users with low vision. In: Proceedings of Conference on Human Factors in Computing Systems, CHI (2001) 6. Colajanni, M., Grieco, R., Malandrino, D., Mazzoni, F., Scarano, V.: A Scalable Framework for the Support of Advanced Edge Services. In: Yang, L.T., Rana, O.F., Di Martino, B., Dongarra, J. (eds.) HPCC 2005. LNCS, vol. 3726, pp. 1033–1042. Springer, Heidelberg (2005) 7. mod_accessibility (January 2012), http://apache.webthing.com/mod_accessibility/ 8. Parmanto, B., Ferrydiansyah, R., Zeng, X., Saptono, A., Sugiantara, I.W.: Accessibility transformation gateway. In: 38th Hawaii International Conference on System Sciences (2005)

370

A. Mereuţă, S. Aupetit, and M. Slimane

9. Han, R., Bhagwat, P., Lamaire, R., Perret, V., Rubas, J.: Dynamic adaptation in an image transcoding proxy for mobile web browsing. IEEE Personal Communications (December 1998) 10. Gupta, S., Kaiser, G.: Extracting content from accessible web pages. In: International Cross-Disciplinary Workshop on Web Accessibility (2005) 11. Gupta, S., Kaiser, G., et al.: Automating content extraction of HTML documents. In: World Wide Web (2005) 12. Hermsdorf, D., Gappa, H., Pieper, M.: A prototype of a www-browser with new special needs adaptations. In: International Conference on Computers Helping People with Special Needs, ICCHP (1998) 13. Dolphin lunar (October 2011), http://www.yourdolphin.com/ 14. Brajnik, G., Cancila, D., Nicoli, D., Pignatelli, M.: Do text transcoders improve usability for disabled users? In: WWW (2005) 15. Brajnik, G., et al.: Do dynamic text–only web pages improve usability for pda users? In: Usability Symposium (2005) 16. Levkowitz, H.: Color theory and modelling for computer graphics, visualisation and multimedia applications. Kluwer Academic Publisher (1997) 17. How do people get colorblindness and how many people have it? (November 2011), http://www.webexhibits.org/causesofcolor/2C.html 18. Brettel, H., Vienot, F., Mollon, J.D.: Computerized simulation of color appearance or dichromats. Journal of Optical Society of America (1997) 19. Brettel, H., Vienot, F., Mollon, J.D.: Digital video colourmaps for checking the legibility of displays by dichromats. In: Color Research and Application (1999) 20. Kuhn, G.R., Oliveira, M.M., Fernandes, L.A.F.: An efficient naturalness-preserving image-recoloring method for dichromats. In: IEEE Visualization and Computer Graphics (2008) 21. Vischeck (October 2011), http://www.vischeck.com/ 22. Ruminski, J., Wtorek, J., Ruminska, J., et al.: Color transformation methods for dichromats. In: Human System Interactions, HSI (2010) 23. Machado, G.M., Oliveira, M.M.: Real-time temporal-coherent color contrast enhancement for dichromats. IEEE (2010) 24. Rodríguez-Pardo, C.E., Sharma, G.: Adaptive color visualization for dichromats using a customized hierarchical palette. In: Color Imaging XVI: Displaying, Processing, Hardcopy, and Applications (2011) 25. Park, J., Choi, J., Han, D.: Applying enhanced confusion line color transform using color segmentation for mobile applications. In: Computers, Networks, Systems and Industrial Engineering, CNSI (2011) 26. Wakita, K., Shimamura, K.: Smartcolor: Disambiguation framework for the colorblind. In: ASSETS 2005: The Sixth International ACM Access Conference on Assistive Tehcnologies (2005) 27. Ichikawa, M., Tanaka, K., Kondo, S., Hiroshima, K., Ichikawa, K., Tanabe, S., Fukami, K.: Web-Page Color Modification for Barrier-Free Color Vision with Genetic Algorithm. In: Cantú-Paz, E., Foster, J.A., Deb, K., Davis, L., Roy, R., O’Reilly, U.-M., Beyer, H.-G., Kendall, G., Wilson, S.W., Harman, M., Wegener, J., Dasgupta, D., Potter, M.A., Schultz, A., Dowsland, K.A., Jonoska, N., Miller, J., Standish, R.K. (eds.) GECCO 2003. LNCS, vol. 2724, pp. 2134–2146. Springer, Heidelberg (2003) 28. Iaccarino, G., Malandrino, D., et al.: Efficient edge-services for colorblind users. In: 15th International Conference on World Wide Web (2006) 29. Kopchenova, N.V., Maron, I.A.: Computational Mathematics for Differential Equations. MIR Publishers, Moscow (1975)