Proporcionando instrucciones al usuario empleanado «.HelpText» de «AutomationProperties» en Silverlight [Técnica SL19 – WCAG 2.1] (Accesibilidad Web 68)


Esta técnica , denominada SL19 Proporcionando instrucciones al usuario emplennado «AutomationProperties.HelpText» en Microsoft Silverlight.

Se aplica a

  • Microsoft Silverlight, versiones 3 y superiores.
  • Modelo de programación asistida de Silverlight y XAML Silverlight.

NOTA

Microsoft ha dejado de actualizar y distribuir Silverlight,, y se anima a los autores a usar HTML para contenido web accesible.

Esta técnica se relaciona con:

Descripción

El objetivo de esta técnica es proveer un texto largo como descripcion alternativa que sirva al propósito de presentar la misma inforamción que el contenido original no textual cuando un texto alternativo corto no sea suficiente.

También persigue mostrar cual es la técnica para almacenar dicha información en una propiedad de Silverlight qie sea soportada por UI Automation.

La técnica puede ser usada también en controles de texto (como «TextBox»), para aquellos casos donde el control de tipo texto por si mismo no proporcione suficiente contexto textual para sugerir una acción apropiada al usuario.

La propiedad relevante en cuanto a UI Automation es «HelpText», para connotar su posible uso para proporcioanr instrucciones específicas para elementos interactivos. No obstante, la misma propiedad puede ser usada para textos alternativos largos en objetos no textuales.

El API de Silverlight «AutomationProperties.HelpText» establece directamente «HelpText» en el arbol de UI Automation.

Las propiedades en el arbol de UI Automation son expuestas para que las tecnologías de asistencia puedan consumirla, cuando estas implementan la funcionalidad que actua como cliente de UI Automation.

«AutomationProperties.HelpText» puede ser establecido mediante código, pero es más típico establecerlo como atributo en el XAML que define el interfaz Silverlight UI.

La misma información establecida en «AutomationProperties.HelpText» puede también ser usada para usuarios videntes, en este caso, el mismo texto puede ser mostrado en un control ToolTip de Silverlight.

La razón por la cual los creadores de aplicaciones deberian usar AMBOS, tanto «AutomationProperties.HelpText», como «Tooltip» es debido a que la información presente en el Tooltip no es expuesta al framework de accesibilidad.

Esta no inclusión en el framework de accesibilidad es debido a que Tooltip no puede recibir el foco del teclado y es un control eminentemente transitorio. Cuando se programa en el entorno Silverlight, una tecnica util para compartir los mismos recirsos es combinar el Data Binding de Silverlight, con la funcionalidad embebida de recursos proviniente del framework .NET.

Para obtener más información sobre como combinar Data Binding de Silverlight y recursos obtenidos de fuentes string standar, puedes leer el siguiente documento (en Inglés) «How to Make XAML Content Localizable

Ejemplos

Ejemplo 1: Aplicando un texto alternativo largo para una imagen usando XAML

Para incorporar la inforamción necesaria en el XAML de Silverlight, para una definición de UI para una aplicación, especifique el atributo «AutomationProperties.HelpText» de un elemento «Image».

El valor proporcionado para el atributo es un texto alternativo largo significativo para el contenido del elemento «Image»

El valor de «AutomationProperties.HelpText» debe aumentar en lugar de duplicar «AutomationProperties.Name», que es usado también habitualmente para proporcionar soporte de accesibilidad para una imagen.

 <Image
   Height="400" Width="600"
   Source="/office.png"
   AutomationProperties.Name="Diagram of standard office layout"
   AutomationProperties.HelpText=”The standard office layout
includes one corner desk unit in the corner farthest from the
door, and one file cabinet against the same wall as the door.”/>

Ejemplo 2: Usando HelpText como isntrucciones de un formulario

Este ejemplo proporciona instrucciones para dos campos de formularios usando al tiempo «Tooltip» y «AutomationProperties.HelpText».

Las cadenas usadas para este proposito son compartidas por ambos métodos definiendo las cadenas como recursos y enlazandolas.

En este ejemplo, el envio del formulario no realiza ninguna validación de lado cliente (aunque la parte servidor si podría realizar algún tipo de validación que pudiera existir).

Este ejemplo es un XAML UI:

<UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" 
   x:Class="HelpTextAndToolTip.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
       <Grid x:Name="LayoutRoot" Background="White" Margin="10">
           <Grid.RowDefinitions>
               <RowDefinition Height="Auto"/>
               <RowDefinition Height="Auto"/>
               <RowDefinition Height="Auto"/>
               <RowDefinition Height="Auto"/>
               <RowDefinition Height="Auto"/>
           </Grid.RowDefinitions>
           <Grid.ColumnDefinitions>
               <ColumnDefinition Width="Auto"/>
               <ColumnDefinition Width="200"/>
               <ColumnDefinition Width="Auto"/>
           </Grid.ColumnDefinitions>
           <TextBlock Text="Form With Tooltips" FontSize="16" FontWeight="Bold"
     Grid.Column="1" HorizontalAlignment="Center" />
           <sdk:Label x:Name="NameLabel" Target="{Binding ElementName=NameTextBox}"
     Grid.Row="2" Margin="3"/>
           <TextBox x:Name="NameTextBox" 
     AutomationProperties.Name="{Binding Content, ElementName=NameLabel}"
     Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=Explicit}"
     Grid.Column="1" Grid.Row="2" Margin="3"
     AutomationProperties.HelpText="{Binding
       NameTextBoxToolTipString,Source={StaticResource TooltipStrings}}">
           <ToolTipService.ToolTip>
               <ToolTip Content="{Binding NameTextBoxToolTipString,Source={StaticResource TooltipStrings}}" />
           </ToolTipService.ToolTip>
           </TextBox>
           <sdk:Label x:Name="AgeLabel" Target="{Binding ElementName=AgeTextBox}"
     Grid.Row="3" Margin="3" HorizontalAlignment="Right"/>
           <TextBox x:Name="AgeTextBox" 
     AutomationProperties.Name="{Binding Content, ElementName=AgeLabel}" 
     Text="{Binding Age, Mode=TwoWay, UpdateSourceTrigger=Explicit}"  
     Grid.Column="1" Grid.Row="3" Margin="3"
    AutomationProperties.HelpText="{Binding AgeTextBoxToolTipString,Source={StaticResource TooltipStrings}}">
           <ToolTipService.ToolTip>
               <ToolTip Content="{Binding AgeTextBoxToolTipString,Source={StaticResource TooltipStrings}}" />
           </ToolTipService.ToolTip>
       </TextBox>
           <Button x:Name="SubmitButton" Content="Submit" Click="SubmitButton_Click"
             Grid.Column="1" Grid.Row="4" Width="50" Margin="3" />
       </Grid>
</UserControl>

Lo siguiente es la denfinicióin del recurso en app.xaml:

       <ResourceDictionary>
           <resources:Resource1 x:Key="TooltipStrings"/>
       </ResourceDictionary>
       

El código del recurso generado, que define la clase «Resource1» no es mostrado aquí porque es esencialmente código generado automáticamente por Visual Studio.

Para más información sobre recursos embebidos en silverlight, consulta el documento (en Inglés) «Resources Overview on MSDN«

Los recursos aquí mostrados contienen justamente dos cadenas, cada una de las cuales es usualmente definida en un fichero .resx a través de Visual Studio.

Los recursos de un fichero .resx pueden ser localizados o cambiados de forma separada respecto del código de la aplicación, usando las herramientas de localización de Microsoft.

  • NameTextBoxToolTipString: Must be 10 characters or less. Required.
  • AgeTextBoxToolTipString: Debe tener entre 0 y 120 caracteres, siendo obligatorio (aunque el texto esté vacio).

Estos ejemplos se pueden ver en funcionamiento en las siguientes webs (en Inglés) «working example of Automation Properties Help Text» y «working example of HelpText and ToolTip

Recursos

Estos recursos son sólo con propósito informativo, y no constituyen apoyo alguno al contenido de los mismos.

Técnicas Relacionadas

  • SL8: Mostrando HelpText en Interfaces de usuario de Silverlight

Tests

Procedimiento

  1. Usando un navegador que soporte Silverlight, abra una `ágina HTML que corresponda con una aplicacion Silverlight y la referencie mediante un tag «object». Para poder usar «UI Automation», hágalo desde Microsoft Windoes.
  2. Use una herramienta de verificación capaz de mostrar el arbol de automatización copleto, y la descripción larga de un objeto como parte de dicho árbol (Por ejemplo, use UIAVerify o Silverlight Spy; vea los enlaces de la sección Recursos)
  3. Ponga el foco en un elemento que se sepa tiene texto alternativo largo. Compruebe que «AutomationProperties.HelpText», aplicado a elementos individuales del Interfaz de Usuario aparece como «HelpText» o «acc_Help» en el arbol de automatización.

Resultados Esperados

El punto 3 es verdadero.

Bibliografía


Quizá te interese leer más sobre WCAG 2.1 - Técnicas

Dejar una Respuesta

XHTML: Usted puede usar las siguientes etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>