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

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

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

Goal

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

5/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-Applications

6/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-Applications

7/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-Applications

8/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-Applications

9/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-Applications

10/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-Applications

11/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-Applications

12/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-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

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

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

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

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

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

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

Blind people

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

20/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-Applications

21/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-Applications

22/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-Applications

23/32

Goal | Basics | „Access2Graphics“ | Outlook

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

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

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

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

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

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

Deaf people

Access2Graphicssolution:

Alternative text presentation of the audio content.

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

30/32

Goal | Basics | „Access2Graphics“ | Outlook

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 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 wolfram.woess@jku.at

Dipl.-Ing. Kerstin Altmanninger +43 (0732) 2468/9236 kerstin@tk.uni-linz.ac.at

Johannes Kepler University LinzAltenberger Str. 694040 Linz, Austria