Accesibilidad y nuevas tecnologías multimedia + web Fabio Arciniegas Postgraphy * Washington D.C. SIDAR 2002

Accesibilidad y nuevas tecnologías

multimedia+web

Fabio ArciniegasPostgraphy * Washington D.C.

SIDAR 2002

Contenido

VoiceXML– Tecnología– Aplicación– Evaluación

SMIL 1.0– Tecnología– Aplicación– Evaluación

IntroducciónObjetivos

SMIL 2– Tecnología– Aplicación– Evaluación

Introducción

Historicamente, los grandes avances técnicos y narrativos producen tantas cargas de accesibilidad como opciones.

Los nuevos desarrollos XML para mejorar la presentación y narrativa de la web no son la excepción.

Introducción [1]Las posibilidades de XML para definir lenguajes especializados para personas con discapacidades ha sido explorada ampliamente (no suficientemente) en otros trabajos [Martin 01]Seminarios y guias para diseño accesible de contenido tradicional han sido ampliamente difundidosMenos conocidas son las oportunidades de accesibilidad de lenguajes inicialmente diseñados para fines estéticos y multimedia

Objetivos

Introducir las tecnologías: SMIL 1.0, VoiceXML y SMIL 2Estudiar con casos reales su aplicabilidad como herramientas de accesibilidadEvaluar su relevancia en el marco general de calidad de desarrollo (costos, extensibilidad, etc.)

SMIL – Inspiración

SMIL (Synchronized Multimedia Integration Language) nace de la necesidad de crear contenido modularizado multimedia para la web

En su version mas sencilla, SMIL es un lenguaje de definicion de areas y secuencias

SMIL – Inspiración

SMIL - Estructura<?xml version="1.0"?><head>  <meta name="copyright" content="yourOrganization" />

<layout>  </layout></head><body> </body></smil>

SMIL - Areas

SMIL - Preview

Open Listing3-titlesAndNames.smil (realplayer)

SMIL - Areas

<?xml version="1.0"?><smil ><head><layout> <root-layout width="380" height="262" background-color="white"/>

<region id="advertisement" left="21" top="19" width="55" height="55"/> <region id="title" left="95" top="19" width="40%" height="20%"/> <region id="genInfo" right="21" top="19" width="55" height="55"/>  <region id="main" left="22" top="94" width="334" height="128" z-index="1"/> <region id="statistics" left="38" top="127" width="95" height="95" z-index="2"/> <region id="subtitles" left="77" top="206" width="60%" height="35" z-index="3"/></layout></head><body>...

SMIL - Contenido <body> <seq> <par dur="60"> <video src="martina.rm" region="main-left" title="Martina Hingis"/> <text src="martina-ranking.txt" region="main-right" title="Ranking" begin="20"/> </par> <par dur="60" begin="2"> <img src="anna.jpg" region="main-left" title="Anna Kournikova"/> <text src="anna-ranking.txt" region="main-right" title="Ranking" begin="21"/> </par> </seq> </body>

SMIL – Inspiración para problemas de accesibilidad

Los problemas visuales de accesibiliddad son variados y usualmente conflictivos (tamaño/forma/color vs. Area original, posicion)La produccion de videos alternativos con anotaciones es costosa (en tiempo, recursos) e inflexible

SMIL – Usos Reales de Accesibilidad

La anotación dinamica usando areas paralelas en SMIL permite permite la localización y presentación de anotaciones sin precedentes en la industria, a precios de desarrollo y difusión minimos.

SMIL – Usos Reales de Accesibilidad

La técnica demonstrada es aplicada en mayor detalle en mi articulo:

A Realist’s SMIL Manifesto, disponible en xml.com

VoiceXML - Inspiración

VoiceXML esá inspirado en nuevos y viejos mercados:– Estamos llegando al limite de “point

and grunt” (Engelbart)– Anualmente se procesan $500

Billones en transacciones telefónicas en solo US.

VoiceXML - Naturaleza

VoiceXML trata tres porciones de la interacción hombre-maquina usando voz:Reproducir audio (pregrabado y TTS)Reconocer voz y DTMFControlar el flujo de un dialogo

VoiceXML - Estructura

Un documento VoiceXML es una colección de formas

Cada forma tiene un prompt, y espera del usuario respuestas para llenar parametros.

VoiceXML - Elementos<?xml version="1.0"?>

<vxml> <form id="firstPromise">  </form> <form id="secondPromise">  </form> <form id="thirdPromise">  </form>  </vxml>

VoiceXML - Elementos<?xml version="1.0"?>

<vxml> <form id="firstPromise">  </form> <form id="secondPromise">  </form> <form id="thirdPromise">  </form>  </vxml>

VoiceXML - Elementos

<?xml version="1.0"?><vxml> <form id="firstPromise"> <field name="promise">   </field> </form> </vxml>


<?xml version="1.0"?><vxml> <form id="firstPromise"> <field name="promise">   </field> </form> </vxml>


<?xml version="1.0"?><vxml> <form id="firstPromise"> <field name="promise"> <prompt> <audio src="fightclub1.wav"/> </prompt>  </field> </form> </vxml>

VoiceXML - Elementos<?xml version="1.0"?><vxml> <form id="firstPromise"> <field name="promise"> <prompt> <audio src="fightclub1.wav"/> </prompt> <filled> <result name="no"> <audio>That is not correct. Let me ask that again</audio> <reprompt/> </result> </filled> </field> </form> </vxml>

VoiceXML - Elementos<?xml version="1.0"?><vxml> <form id="firstPromise"> <field name="promise"> <prompt> <audio src="fightclub1.wav"/> </prompt> <filled> <result name="yes"> <goto next="#secondPromise"/> </result> <result name="no"> <audio>That is not correct. Let me ask that again</audio> <reprompt/> </result> </filled> </field> </form> </vxml>

VoiceXML - Elementos <nomatch> <audio>I didn't get that</audio> <reprompt/> </nomatch>

<noinput> <audio>What was that?</audio> <reprompt/> </noinput>

<default> <reprompt/> </default>

(abrir fightclub2.wav)

VoiceXML - Gramáticas

Una gramática para YES or NO

[dtmf-0 yes] {<option "yes">} [dtmf-1 ok] {<option "yes">} [(oh)? yes] {<option "yes">} [(oh)? sure] {<option "yes">} [yeah] {<option "yes">} [dtmf-2 no] {<option "no">}

VoiceXML – Caracterisicas relevantes

Mas alla de las ventajas tradicionales de VoiceXML para la industria de IVR, VoiceXML posee ventajas relevantes para nuestro objeto de estudio:Fácil de producirBaratoEs naturalmente orientado a dialogos guiados por la máquina, lo cual ha sido probado eficiente y deseable en tareas complejas y problemas de accesibilidad

VoiceXML – Inspiración para problemas de

AccesibilidadEl paradigma Documento/Paleta es un reto (muchas veces innecesario) para personas con discapacidadesEl paradigma de dialogos subsecuentes (wizards) es uno de los avances significativos en UI en los ultimos años

VoiceXML – Usos Reales de Accesibilidad

Los wizards de aplicaciones en windows estan compuestos por widgets conocidos y predecibles:– Check Buttons – Radio Buttons– Text Fields


Mas aún, dichos widgets tienen una relacion uno a uno con representaciones en un dialogo automatico:– Check Buttons - Respuestas Si/No– Radio Buttons – Seleccion multiple– Text Fields – Respuestas STT altamente

estandarizadas (e.g. Fechas)


Mas aún, dichos widgets tienen una relacion uno a uno con representaciones en un dialogo automatico:– Check Buttons - Respuestas Si/No– Radio Buttons – Seleccion multiple– Text Fields – Respuestas STT altamente

estandarizadas (e.g. Fechas)


Es posible crear documentos VoiceXML automaticamente a partir de wizards en Windows.Automatica y predeciblemente, cada aplicación de Windows puede ser recompilada para tomar su entrada tradicionalmente o por voz (!)


Por cada paso en el dialog hay una formaPor cada widget en el dialogo hay un prompt y un campo como ha sido descrito previamente


Se convierte en...


<?xml version="1.0"?><vxml> <form id="buscardisco"> <field name="donde"> <prompt> <audio>Ud. esta a punto de configurar sus folderes favoritos.Diga "todo el disco" para buscar exhaustivamente, o diga "busqueda rapida" para una busqueda mas rapida pero superficial</audio> </prompt> <filled> <result name="exhausitiva"> <goto next="javascript:exaustiva()"/> </result> <result name="exhausitiva"> <goto next="javascript:rapida()"/> </result> </filled> ...


...<nomatch> <audio>No reconoci su opcion. por favor repitala</audio> <reprompt/> </nomatch>

<noinput> <audio>Por favor diga "todo el disco" o "busqueda rapida"

</audio> <reprompt/> </noinput> </form> </vxml>

VoiceXML - Evaluación

VoiceXML provee posibilidades de desarrollo accesible en audio sin precedentes, gracias a su:– Precio– Baja Complejidad– Automatización razonablemente compleja

(compare la produccion de un sistema Nuance en C a partir de un dialogo con la produccion de un simple archivo VoiceXML)

SMIL 2 - Inspiración

SMIL 2 nace de la necesidad de incorporar elementos de secuencia a contenido web tradicionalAunque las ventajas de SMIL 1.0 son notables, la necesidad de alinear la tecnologia con XHTML era obvia si se queria hacer de SMIL 2 una herramienta para las masas

SMIL 2 - Estructura

SMIL 2 esta compuesto por 45 modulos, distribuidos en 10 grupos funcionales:

TimingTime manipulatorsAnimationContent ControlLayoutLinkingMedia ObjectsMetainformationStructureTransitions

SMIL 2 - Estructura

Microsoft implementó en IE 6 + un subconjunto de SMIL 2 llamado HTML+TIMEUsando HTML+TIME cualquier atributo de una pagina HTML que tenga dimensiones (un paragrafo, una imagen) puede ser animado declarativamente

SMIL 2 – Elementos (abrir listing1-star.html)

<!doctype html public "-//w3c//dtd html 4.0 transitional//en"><html xmlns:t ="urn:schemas-microsoft-com:time"><head> <style> .time {behavior: url(#default#time2);} </style> <?import namespace="t" implementation="#default#time2"></head><body>

<t:par dur="5"> <t:img src="comeplay.gif"> <t:transitionfilter begin="0" dur="3" type="starWipe" subtype="fivePoint" mode="in" /></t:par>

</body></html>

SMIL 2 – Elementos (abrir listing4-mondrian.html)Cualquier elemento de HTML con area puede ser animado y secuenciado:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML XMLNS:t ="urn:schemas-microsoft-com:time"><HEAD> <STYLE> .time {behavior: url(#default#time2);} </STYLE> <?IMPORT namespace="t" implementation="#default#time2"></HEAD><BODY>

<DIV id="ol1" style="width: 80; height:236; top: 0; left: 0; border-top-width: 35px; border-left-width:0px"></DIV>

<t:animateColor targetElement="ol1" attributeName="backgroundColor" from="black" to="#ADA5B5" begin="0" dur="3" fill="hold"/></BODY></HTML>

SMIL 2 – Inspiración para problemas de accesibilidad

La pantalla no es el mejor recurso para lectura, pero es dinámica (por cada reto...)Las posibilidades de una web que pueda cambiar tamaños, colores, fuentes y estructuras de las paginas dependiendo de los retos de discapacitación del usuario es algo digno de buscar(!) y SMIL 2 puede ser parte elegante de la solución.

SMIL 2 – Usos reales en problemas de discapacidad

Producir paginas accesibles con tamaños de letra adecuados y graficas claras no es suficiente. Siempre hemos de encontrar limitaciones de tamaño no previstas y es importante mantener la estructura de la página.


Graficas de tamaño variable, a costo razonable son ideales para la producción accesible. Imagine una grafica lo suficientemente inteligente como para hacer Zoom cuando ud se acerca a la pantalla porque no puede ver bien un detalle.

SMIL 2 – Usos reales en problemas de discapacidadMediante la combinación de un headmouse y SMIL 2 es posible:

<DIV STYLE="background-color:black; font-family:arial; font-size:14pt; width:240; height:180; overflow-x:hidden; overflow-y:hidden;

top: 60; left:200; position: absolute; border-style: dashed; border-color: gray; z-index:1;" id="hola" CLASS="time" ID="oDiv" >

<t:img src="lili.jpg" id="oSour" style="width:240; height:180"/>

<t:ANIMATE id="oAnim" begin="6" dur="4" fill="hold" targetElement="oSour" attributeName="marginLeft" calcMode="linear" values="0; -734" keyTimes="0; 1"/>

<t:ANIMATE id="oAnim2" begin="6" dur="4" fill="hold" targetElement="oSour" attributeName="marginTop" calcMode="linear" values="0; -726" keyTimes="0; 1" />

<t:ANIMATE id="oAnim3" begin="6" dur="2" fill="hold" targetElement="oSour" attributeName="width" calcMode="linear" values="240; 1556" keyTimes="0; 1" /></DIV>

*abrir zoom2rose.html*


La estrategia descrita (SMIL 2) es explicada en mayor detalle en mi articulo SMIL Manifesto II.A partir de IE 6, cualquier elemento en HTML puede ser animado con SMIL 2 en la manera que animamos colores y tamaños. Esto abre importantes posibilidades de accesibilidad a la web, como fue demostrado.

Futuros Pasos

Esta presentación tan solo toca tres de los muchos aspectos en la aplicación de estrategias innovadoras para accesibilidad en multimedia/web y aspira tan solo a generar conciencia de las posibilidades y curiosidad para mayor investigación.Mas información: [email protected]

Fabio Arciniegas

PostgraphyWashington, D.C.

SIDAR 2002

Documents

Accesibilidad y nuevas tecnologías multimedia + web Fabio Arciniegas Postgraphy * Washington D.C. SIDAR 2002