Dynamically Generated
Scalable Vector Graphics (SVG) for
Barrier-free Web-Applications
Kerstin AltmanningerWolfram Wöß
12.07.2006
07.06.2006
Dynamically Generated Scalable Vector Graphics (SVG) for
Barrier-free Web-Applications
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-Applications3/32
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-Applications4/32
„Scalable Vector Graphics“ (SVG)
Goal | Basics | „Access2Graphics“ | Outlook
Goal
Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications5/32
Goal | Basics | „Access2Graphics“ | Outlook
vector graphics databaseuser
blind
visually handicapped
physical handicapped
deaf
cognitive handicapped
without disabilities
user profile
braille text
voice output
request database query
generation of the context and user
dependent graphic
tactile bitmap
monitor
PDA
mobile phone
world wide web
world wide web
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-Applications6/32
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-Applications7/32
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-Applications8/32
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-Applications9/32
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-Applications10/32
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
Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications11/32
Accessibility Features of SVG W3C Note 7 August 2000
Goal | Basics | „Access2Graphics“ | Outlook
„Scalable Vector Graphics“ (SVG)
Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications12/32
Accessibility Features:
Alternative equivalents
Variable presentation depth
Internationalization Filter effects
Goal | Basics | „Access2Graphics“ | Outlook
„Access2Graphics“
Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications13/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
What is „Access2Graphics“?
Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications14/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
Supported kinds of graphics
Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications15/32
Charts Images
Features: Links to Web page(s) => image map Links to audio files
Goal | Basics | „Access2Graphics“ | Outlook
User profile:
Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications16/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
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-Applications17/32
Goal | Basics | „Access2Graphics“ | Outlook
Blind people
Access2Graphics solution:
Charts will be displayed as tables.
Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications18/32
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-Applications19/32
Goal | Basics | „Access2Graphics“ | Outlook
Blind people
Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications20/32
Access2Graphics solution:
SVG file HTML file
Goal | Basics | „Access2Graphics“ | Outlook
Visual impaired people
Kinds of visual impairments:
Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications21/32
Original
Macula-Degeneration Green Star Gray Star Retinitis Pigmentosa Diabetic
Retinopathy
Goal | Basics | „Access2Graphics“ | Outlook
Visual impaired people
Access2Graphics solution:
Scaling of the graphic
Microsoft Internet Explorer
Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications22/32
Goal | Basics | „Access2Graphics“ | Outlook
„Access2Graphics“ Application
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-Applications23/32
Goal | Basics | „Access2Graphics“ | Outlook
People with limited color vision
Access2Graphicssolution:
Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications24/32
Color (RGB)
Saturation
Brightness (RGB)
Contrast (RGB)
Goal | Basics | „Access2Graphics“ | Outlook
People with limited color vision
Access2Graphics solution:
Original Grayscale presentation
Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications25/32
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-Applications26/32
Goal | Basics | „Access2Graphics“ | Outlook
Physical handicapped people
Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications27/32
Link area
Access2Graphicssolution:
Extraction of navigation elements
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-Applications28/32
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-Applications29/32
Goal | Basics | „Access2Graphics“ | Outlook
Deaf people
Access2Graphicssolution:
Alternative text presentation of the audio content.
Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications30/32
Goal | Basics | „Access2Graphics“ | Outlook
Access2Graphics: Next steps
Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications31/32
Goal | Basics | „Access2Graphics“ | Outlook
Access2Graphics
Expansion of the variety ofsetting possibilities for people
with color deficits
WWW
Integration in an existing web application
Analyzing of SVG files forproviding structural
information
Generation ofmore complex and different
kinds of chartsAdaptation for mobile devices
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 [email protected]
Dipl.-Ing. Kerstin Altmanninger +43 (0732) 2468/9236 [email protected]
Johannes Kepler University LinzAltenberger Str. 694040 Linz, Austria