1 / 33

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

Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications. Kerstin Altmanninger Wolfram Wöß. 12.07.2006. 07.06.2006. Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications. Overview. Goal Basics Web Accessibility

fola
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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. Overview • Goal • Basics • Web Accessibility • Scalable Vector Graphics (SVG) • „Access2Graphcis“ Prototype • Supported kinds of graphics • User groups and their requirements • Outlook Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications 3/32

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

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

  7. Goal | Basics | „Access2Graphics“ | Outlook 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

  8. Goal | Basics | „Access2Graphics“ | Outlook 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

  9. Goal | Basics | „Access2Graphics“ | Outlook 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

  10. Goal | Basics | „Access2Graphics“ | Outlook 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 constitutionFederal obstruction equalization law (since 01.01.2006) Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications 9/32

  11. Goal | Basics | „Access2Graphics“ | Outlook „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

  12. Goal | Basics | „Access2Graphics“ | Outlook „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 Accessibility Features of SVG W3C Note 7 August 2000 Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications 11/32

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

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

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

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

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

  18. Goal | Basics | „Access2Graphics“ | Outlook 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

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

  20. Goal | Basics | „Access2Graphics“ | Outlook 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

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

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

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

  24. Goal | Basics | „Access2Graphics“ | Outlook 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

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

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

  27. Goal | Basics | „Access2Graphics“ | Outlook 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

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

  29. Goal | Basics | „Access2Graphics“ | Outlook 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

  30. Goal | Basics | „Access2Graphics“ | Outlook 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

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

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

  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 Johannes Kepler University LinzAltenberger Str. 694040 Linz, Austria Dipl.-Ing. Kerstin Altmanninger +43 (0732) 2468/9236 kerstin@tk.uni-linz.ac.at

More Related