1. Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications Kerstin Altmanninger Wolfram Wöß 12.07.2006

2. 07.06.2006

3. Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications

4. Goal Basics  Web Accessibility  Scalable Vector Graphics (SVG) „Access2Graphcis“ Prototype  Supported kinds of graphics  User groups and their requirements Outlook Overview Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications 3/32

5. Goal Graphics should be stored once in a database and dynamically generated for each user-desire. Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications 4/32 „Scalable Vector Graphics“ (SVG) Goal | Basics | „Access2Graphics“ | Outlook

6. Goal Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications 5/32 Goal | Basics | „Access2Graphics“ | Outlook

7. Web Accessibility WAI Definition: Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. From this it follows that … Web accessibility stands for „using the Web without encountering barriers” Access to the Web by everyone Web accessibility consider all kinds of disabilities including older people with changing abilities due to aging Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications 6/32 Goal | Basics | „Access2Graphics“ | Outlook

8. Web Accessibility Kinds of disabilities: Blind Low vision Color deficit Physical handicapped Cognitive handicapped Deaf Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications 7/32 Goal | Basics | „Access2Graphics“ | Outlook

9. Web Accessibility Why is Web accessibility an issue? The Web is a key resource for:  News, information, commerce, entertainment,  Classroom education, distance learning  Job searching, workplace interaction  Civic participation and integration, government services Barriers impact a significant population Problems: Not only responsibility of the Web developer Web accessibility depends on several components working together  Underlying Web technology  Tools to produce Web content  Tools to access Web content Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications 8/32 Goal | Basics | „Access2Graphics“ | Outlook

10. Web Accessibility Strategies to improve Web accessibility: World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI) Legal guidelines  European Union  Germany: BITV (Barrier-free information technology regulation)  Austria: Article 7 of the federal constitution Federal obstruction equalization law (since 01.01.2006) Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications 9/32 Goal | Basics | „Access2Graphics“ | Outlook

11. „Scalable Vector Graphics“ (SVG) „Scalable“: Graphics can be smoothly scaled without quality losses. „Vector“: Vector graphic shapes constitutes the most important graphic object in SVG. Alongside pictures and text are also considered as graphic objects. „Graphics“: SVG displays the graphical part of the XML-family. Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications 10/32 Goal | Basics | „Access2Graphics“ | Outlook

12. „Scalable Vector Graphics“ (SVG) XML-based language for describing two-dimensional vector and mixed vector/raster graphics W3C Specification Contained information is structured in the source code Scalable Large SVG graphics save disc space Support of script and stylesheet languages Specifications for mobile devices: SVG Basic & SVG Tiny Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications 11/32 Accessibility Features of SVG W3C Note 7 August 2000 Goal | Basics | „Access2Graphics“ | Outlook

13. „Scalable Vector Graphics“ (SVG) Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications 12/32 Accessibility Features: Alternative equivalents Variable presentation depth Internationalization Filter effects Goal | Basics | „Access2Graphics“ | Outlook

14. „Access2Graphics“ Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications 13/32 What is Access2Graphics? Which kind of graphics are supported by Access2Graphics? How can graphics be adapted for individual user desire? Goal | Basics | „Access2Graphics“ | Outlook

15. What is „Access2Graphics“? Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications 14/32 Web-Application Providing an as much as possible barrier-free access to SVG graphics for users with disabilities Functional range: Goal | Basics | „Access2Graphics“ | Outlook

16. Supported kinds of graphics Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications 15/32 Charts Images Features:  Links to Web page(s) => image map  Links to audio files Goal | Basics | „Access2Graphics“ | Outlook

17. User profile: Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications 16/32 Text  Only the title  Only the title and description  All textual content Colors  Grayscale  User-defined Size Language Impacts on graphics: Goal | Basics | „Access2Graphics“ | Outlook

18. Blind people Situation: No perception of images Alternative text is essential Making use of screen readers or self-voicing applications Screen reader: Software application Identifies and interprets information on the screen Presented to visual impaired people via braille displays or as speech (e.g. JAWS) Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications 17/32 Goal | Basics | „Access2Graphics“ | Outlook

19. Blind people Access2Graphics solution: Charts will be displayed as tables. Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications 18/32 Goal | Basics | „Access2Graphics“ | Outlook 

20. Blind people Access2Graphics solution: Images become accessible through an description of several graphical fragments. Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications 19/32 Goal | Basics | „Access2Graphics“ | Outlook

21. Blind people Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications 20/32 Access2Graphics solution: SVG fileHTML file Goal | Basics | „Access2Graphics“ | Outlook

22. Visual impaired people Kinds of visual impairments: Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications 21/32 Original Macula- Degeneration Green StarGray Star Retinitis Pigmentosa Diabetic Retinopathy Goal | Basics | „Access2Graphics“ | Outlook

23. Visual impaired people Access2Graphics solution: Scaling of the graphic Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications 22/32 Goal | Basics | „Access2Graphics“ | Outlook

24. People with limited color vision Situation: Identification of colors is limited or not possible. Reason: Defect in one or more of the three cones. Classification: Anomalous Trichromacy (Protanomaly, Deuteranomaly, Tritanomaly) Dichromacy (Protanopia, Deuteranopia, Tritanopia) Monochromacy Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications 23/32 Goal | Basics | „Access2Graphics“ | Outlook

25. People with limited color vision Access2Graphics solution: Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications 24/32 Color (RGB) Saturation Brightness (RGB) Contrast (RGB) Goal | Basics | „Access2Graphics“ | Outlook

26. People with limited color vision Access2Graphics solution: Original  Grayscale presentation Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications 25/32  Goal | Basics | „Access2Graphics“ | Outlook

27. Physical handicapped people Situation: Difficulties in handling with input devices. Requirements: Commands reachable with the keyboard Links included in graphics must be reachable with the tabulator button Button size Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications 26/32 Goal | Basics | „Access2Graphics“ | Outlook

28. Physical handicapped people Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications 27/32 Link area Access2Graphics solution: Extraction of navigation elements Goal | Basics | „Access2Graphics“ | Outlook

29. Cognitive handicapped people Situation: Problems in understanding complex images Access2Graphics solution: Verbal graphic description Redundant information (e.g. links of an image map) Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications 28/32 Goal | Basics | „Access2Graphics“ | Outlook

30. Deaf people Situation: No perception of audio content Can lead to an leak of information Alternative text for audio content is essential Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications 29/32 Goal | Basics | „Access2Graphics“ | Outlook

31. Deaf people Access2Graphics solution: Alternative text presentation of the audio content. Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications 30/32 Goal | Basics | „Access2Graphics“ | Outlook

32. Access2Graphics: Next steps Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications 31/32 Goal | Basics | „Access2Graphics“ | Outlook Access2Graphics Expansion of the variety of setting possibilities for people with color deficits WWW Integration in an existing web application Analyzing of SVG files for providing structural information Generation of more complex and different kinds of charts Adaptation for mobile devices

33. If a window of opportunity appears, don‘t pull down the shade. (Thomas J Peters) Contacts A.Univ.-Prof. Dr. Wolfram Wöß +43 (0732) 2468/9589 wolfram.woess@jku.at Dipl.-Ing. Kerstin Altmanninger +43 (0732) 2468/9236 kerstin@tk.uni-linz.ac.at Johannes Kepler University Linz Altenberger Str. 69 4040 Linz, Austria