PowerPoint-Prentation by fjzhangweiqun

VIEWS: 2 PAGES: 33

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


Goal

                                                               request                         database query

 cognitive
 handicapped                                                                world wide web
                                             user profile
 physical
 handicapped

 deaf

 blind                                         monitor

 visually               user
 handicapped                                    PDA                              vector graphics             database

 without
 disabilities                              mobile phone

                                                                                                   generation of the
                                            voice output                                            context and user
                                                                            world wide web         dependent graphic
                                             braille text


                                            tactile bitmap


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


User profile:                                Impacts on
                                             graphics:

                                                   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
                        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
Access2Graphics solution:




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


Visual impaired people

Kinds of
visual impairments:

                                                                  Original




  Retinitis      Macula-     Diabetic                               Green Star                 Gray Star
Pigmentosa     Degeneration Retinopathy

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


Visual impaired people


Access2Graphics solution:
Scaling of the graphic

                                                               Microsoft Internet
        „Access2Graphics“ Application
                                                                   Explorer




           Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications
                                                  22/32
                     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
                    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
                   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

Access2Graphics
solution:

Extraction of
navigation elements




          Link area



         Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications
                                                27/32
                        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


Access2Graphics
solution:




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

                                                                                                     Generation of
                                                                                                     more complex
                          Adaptation for                                                              and different
                          mobile devices                                                             kinds of charts



                                        Access2Graphics



                                                   WWW
 Expansion of the variety of                                                           Analyzing of SVG files for
setting possibilities for people              Integration in an                          providing structural
       with color deficits                existing web application                            information
                 Dynamically Generated Scalable Vector Graphics (SVG) for Barrier-free Web-Applications
                                                        31/32
      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 Linz
           Dipl.-Ing. Kerstin Altmanninger   Altenberger Str. 69
           +43 (0732) 2468/9236              4040 Linz, Austria
           kerstin@tk.uni-linz.ac.at

								
To top