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