Dynamically Generated Scalable Vector Graphics (SVG)

Dynamically Generated Scalable Vector Graphics (SVG)

for Barrier
-
free Web
-
Applications
1



The first three slides
show a black page, one with a tunnel view and another one which is
blurry. These slides should visualize how people with visual impairments (bl
indness, Retinitis
Pigmentosa and Gray Star) feel during a presentation without having equivalent
accessible
materials.


Slide topic: Overview



Goal



Basics

o

Web Accessibility

o

Scalable Vector Graphics (SVG)



"Access2Graphics" Prototype

o

Supported kind of graphi
cs

o

User groups and their requirements



Outlook


Slide topic: Goal (1/2)

Graphics should be stored once in a database and dynamically generated for each user desire.

This is p
ossible with "Scalable Vector Graphics".


Slide topic: Goal (2/2)

Th
e graphic on th
is slide visualiz
es the big picture of the procedure to generate a user
depende
n
t graphic.

The process starts with the user and the specification of his/her special needs.

Bef
ore the user can access a w
ebsite he/she has to fill out a

user profile for
m so t
hat the
graphic can be ada
p
t
ed to his/her needs.

After this procedure they can access every website

of the specific domain
. If a website
contains
SVG

graphics they will be generated out of a database ad
justed

to the specific user
settings and the appropria
te output device like monitor, PDA, mobile phone, voice output,
braille text
and/
or tactile bitmap.


Slide topic: Web Accessibility

(1/4)

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




1

Hint: Graphics

form the Power Point Presentation are in this accessible document either described in words or
if not important not mentioned. Screenshots from the presented prototype are expressed in HTML or SVG source
code.



Web accessibility considers all kinds of disabilities including
older people with
changing abilities due to aging


Slide topic: Web Accessibility

(2/4)

Kinds of disabilities:



Blind



Low vision



Color deficit



Physical handicapped



Cognitive handicapped



Deaf


Slide topic: Web Accessibility

(3/4)

Why is Web Accessibility an
issue?



The Web is a key resource for:

o

News, information, commerce, entertainment,

o

Classroom education, distance learning

o

Job searching, workplace interaction

o

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

o

Underlying web technology

o

Tools to produce web content

o

Tools to access web content


Slide topic: Web Accessibility

(4/4)

Strategies to

improve Web Accessibility:



World Wide Web Consortium (W3C)



Web Accessibility Initiative (WAI)



Legal guidelines

o

European Union

o

Germany:

BITV (Barrier
-
free information technology regulation)

o

Austria
:

Article 7 of the federal constitution,

Federal obstructio
n equalization law (since 01.01.2006)


Slide topic: "Scalable Vector Graphics" (SVG)



"Scalable":

Graphics can be smoothly scaled wit
hout quality losses.



"Vector":

Vector graphic shapes constitutes the most important graphic object in SVG. Alongside
picture
s and text are also

considered as graphic objects.



"Graphics":

SVG displays the graphical part of the XML
-
family.


Slide topic: "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


Slide topic: "Scalable Vector Graphics" (
SVG)

Accessibility Features:



Alternative equivalents



Variable presentation depth



Internationalization



Filter effects


The following XML code
illustrates

an example
SVG

graphic which represents a smiley.


<?xml version="1.0" encoding="UTF
-
8"?>

<!DOCTYPE svg

PUBLIC "
-
//W3C//DTD SVG 1.1//EN"


"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="120px" height="120px">


<title>Smiley</title>


<desc>The picture shows a yellow smiling face.</desc>


<g>


<title>Face</title>


<desc>The face is r
epresented by a yellow circle.</desc>


<circle cx="60" cy="60" r="40"


style="fill:yellow;stroke:black;stroke
-
width:1;"/>


</g>


<g>


<title>Eyes, nose and mouth</title>


<desc>The facial expression is displayed in black color.</desc>


<g

style="fill:black;stroke:black;stroke
-
width:1">


<title>Eyes</title>


<circle cx="48" cy="44" r="3"/>


<circle cx="72" cy="44" r="3"/>


</g>


<g>


<title>Nose</title>


<line x1="60" y1="50" x2="60" y2="70"


style="str
oke:black;stroke
-
with:2;"/>


</g>


<g>


<title>Mouth</title>


<ellipse cx="60" cy="75" rx="15" ry="7"


style="fill:black;stroke:black;"/>


<ellipse cx="60" cy="71" rx="15" ry="7"


style="fill:yellow;"/>


</g>


</g>

</svg
>


Slide topic: "Access2Graphics"



What is Access2Graphics?



Which kind
s

of graphics are supported by Access2Graphics?



How can graphics be adapted for individual user desire?


Slide topic: What is "Access2Graphics"?

Web
-
Application:

Providing an as much as p
ossible barrier
-
free access to SVG graphics for user
s

with
disabilities
.


Functional range
of "Access2Graphics":



User functions:

o

SVG files list presentation which are contained in the database

o

Set profile



Admin functions:

o

Import SVG

o

Create chart

o

Edit SVG

o

D
elete SVG


Slide topic: Supported kinds of graphics



Charts



Images


Features:



Links to Web page(s)
→

image map



Links to audio files


Slide topic:

User profile and the impacts on graphics

User profile

(HTML extract)
:


<html>

...


<h1>User profile form:</h1>


<form name="userProfile" action="userProfile.php" method="post">


<fieldset>



<legend><
b>User specific settings:</b></legend>


<inp
ut type="checkbox" name="blind"
>Blind<br>


<in
put type="checkbox" name="lowV"
>
Low vision:


<select name="scaling">



<option value="3">maximum</option>


<option value="2">bigger<
/option>


<option value="1">big</option>


<option value="0" selected>normal</option>


<option value="
-
1">small</option>


</select>
graphic size
<br>


<input type="c
heckbox" name="colorD"
>Defective color vision<br>



<inp
ut type="checkbox" name="greyG"
>Grayscale graphic<br>


<input type="checkbox" name="cognitiveH">Cognitive

handicapped
<br>


<input t
ype="checkbox" name="physicalH"
>
Physical handicapped
<br>



<in
put type="checkbox" name="deaf"
>
Deaf


<
/f
ieldset><br>


<fieldset>



<legend><b>Language:</b></legend>



<input type="radi
o" name="language" value="de" >
German<br>



<input type="radio" name="lan
guage" value="en" checked>English


</fieldset>


<input type="submit" name="savePro
file" value="Create profile">


</form>

...

</html>


I
mpacts on graphics
:



Text

o

Only the title

o

Only the title and description

o

All textual content



Colors

o

Grayscale

o

User
-
defined



Size



Language


Slide topic:
Blind people

Situation:



No perception of images



Alter
native 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)


S
lide topic:
Blind people

Access2Graphics solution:

Charts will be displayed as tables.


Example

(HTML extract)
:


<html>

...


<!
--

In the following div are
a

the svg image will be included.
--
>


<div>



<h2>Student accommodations in Linz/Danube</h2>



<object data="pics/e8483e736df248ce53e1237f245d6351.svg"


type="image/svg+xml" width="600" height="300">


<param name="src" value="pics/e8483e736df248ce53e1237f245d6351.svg">



</object><br>


</div><br>


<!
--

Textual representation of the SVG
image in a table.
--
>



<div>


<meta name="svg_graphic" content="The following text is an graphic



equivalent for blind people.">



<h1>
Pie chart
</h1>



<h2>Student accommodations in Linz/Danube</h2>


<h3>This pie chart visualizes

al
l student

accommondations in


Linz/Danube and the amount of places they hold.</h3><br>



<table summary="chartData" border="1">


<tr
><th>Wert</th>
<th>Bezeichnung</th><th>Beschreibung</th>
</tr>



<tr><td>1310</td><td>Raab Heim</td><td>Julius Raab Heim
</td>
</tr>



<tr><td>470</td><td>JKH</td><td>Johannes Kepler Heim</td></tr>



<tr><td>316</td>
<td>Wist Haus</td><td></td></tr>


<tr><td>175</td><td>ESH</td><td>Evangelisches Studentenheim</td></tr>



<tr><td>133</td><td>KHG</td>
<td>Heim de
r Katholischen
Hochschulgemeinde Linz</td></tr>



<tr><td>200</td><td>Akademikerhilfe</td><td>Studentenheim
Akademikerhilfe</td></tr>


</table><br>


</div>

...

</html>


Slide topic:
Blind people

Access2Graphics solution:

Ima
ges become accessible th
rough
description
s

of several graphical fragments.


Slide topic:
Blind people

Access2Graphics solution:

Graphics like the one discussed before (smiley) will be represented in HTML as follows.


HTML extract:


<html>

...


<div>


<h2>Smiley</h2>


<obje
ct data="pics/e8483e736df248ce53e1237f245d6351.svg"


type="image/svg+xml" width="120" height="120">



<para
m name="src" value="pics/e8483e736df248ce53e1237f245d6351.svg">


</object><br>


</div><br>


<div>


<meta name="svg_graphic" content="
T
he following text is an graphic


equivalent for blind people.">


<h2>Smiley</h2>


<h3>The picture shows a yellow smiling face.</h3>


<ul>


<li><b>Face</b></li><br>The face is represented by a yellow circle.


</ul>


<ul>


<li><b
>Eyes, nose and mouth</b></li><br>The facial expression is
displayed in black color.


<ul><li><b>Eyes</b></li><br></ul>


<ul><li><b>Nose</b></li><br></ul>


<ul><li><b>Mouth</b></li><br>
</ul>


</ul>


</div>

...

</html>


As the example sho
ws the title and description of a graphic will be displayed as headings in
HTML and the groups as HTML lists.


Slide topic:
Visual impaired people

Kinds of visual impairments:



Retinitis pigmentosa



Macula degeneration



Diabetic retinopathy



Green star



Gray st
ar


Slide topic:

Visual impaired people

Access2Graphics solution:

Scaling of the graphic

in a quit
e

similar way it is usual in the Microsoft Internet Explorer.


Slide topic:

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


Slide topic:

People with limited color vision

The Access2Graphics solution provides a possibility to set the following values for people
with color deficits:



Color (RGB)



Saturation



Brightness (RGB)



Contrast (RGB)


Slide topic:

People with limited color vision

Access2Graphics solution:

Origina
l → Grayscale presentation


Slide topic:

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


Slide topic:

Physical handicapped people

Access2Graphics

solution:

Extraction of navigation elements

in a link list below the graphic so that they can be selected.


Slide topic:

Cognitive

handicapped people

Situation:

Problems in understanding comple
x images


Access2Graphics solution:



Verbal graphic description



Redundant information (e.g. links of an image map)


Slide topic:

Deaf people

Situation:



No perception of audio content



Can lead to an leak of information



Alternative text for audio content is e
ssential


Slide topic:

Deaf people

Access2Graphics

solution:

Alternative text presentation of the audio content

below the graphic
.


Slide topic:

Access2Graphics: Next steps



Adaptation for mobile devices



Integration in an existing web application



Generation

of

more complex and different

kinds of charts



Analyzing of SVG files for

providing structural information



Expansion of the variety of

setting possibilities for people

with color deficits


Slide topic:

Contacts

Johannes Kepler Univ
ersity Linz

Altenberger Str. 69

4040 Linz, Austria




Dipl.
-
Ing. Kerstin Altmanninger

+43 (0732) 2468/9236

kerstin@tk.uni
-
linz.ac.at



A. Univ.
-
Prof. Dr. Wolfram Wöß

+43 (0732) 2468/9589

wolfram.woess@jku.at


Slogan:
If a window of opportunity appe
ars, don‘t pull down the

shade.
(Thomas J Peters)