Tutorial: Crear una aplicación Web accesible

Artículo
10/07/2008

Actualización: noviembre 2007

La creación de páginas Web accesibles permite llegar al máximo número posible de usuarios. Las personas con discapacidades no son los únicos usuarios que apreciarán que las páginas sean accesibles. Los usuarios de exploradores de sólo texto o de software que interpreta el contenido de las páginas Web, podrían depender de las opciones de accesibilidad. El diseño accesible permite que herramientas de automatización tales como los motores de búsqueda, busquen, indicen y manipulen la información de las páginas. Por último, futuras leyes de telecomunicaciones podrían requerir que la información que se distribuye por Internet sea accesible, igual que el software convencional. Para obtener más información, vea Compatibilidad de accesibilidad en ASP.NET y Controles y accesibilidad en ASP.NET.

Las siguiente sugerencias para diseñar páginas Web accesibles proceden del sitio Web de accesibilidad de Microsoft:

Proporcione texto alternativo (ALT) adecuado para todos los gráficos.
Haga un uso correcto de mapas en imágenes.
Redacte texto útil en los vínculos.
Implante un buen navegación por el teclado.
Proporcione páginas alternativas que no utilicen marcos.
Utilice las tablas y sus alternativas correctamente.
Proporcione compatibilidad con las opciones de formato del lector de texto.
No exija la utilización de hojas de estilos.
Utilice formatos de archivo que el lector pueda utilizar.
Evite utilizar marquesinas que se desplacen.
Proporcione títulos para la mayoría de los objetos.

Si no puede cumplir los objetivos de accesibilidad, considere la posibilidad de proporcionar páginas Web alternativas que sólo contengan texto.

Los controles ASP.NET son compatibles con muchas de las directrices de accesibilidad. Por ejemplo, la indicación del foco del teclado y de elementos de pantalla. Puede utilizar las propiedades de los controles ASP.NET para ofrecer compatibilidad con otras directrices de accesibilidad, como se muestra en la tabla siguiente.

Propiedad del control	Consideraciones de accesibilidad
TabIndex	Utilice esta propiedad para crear una ruta de navegación razonable a través del formulario. Es importante que los controles que no tienen etiquetas intrínsecas, tales como los cuadros de texto, vayan precedidos de forma inmediata en el orden de tabulación por sus etiquetas asociadas. En casos en que esto no sea posible o deseable, utilice la propiedad AssociatedControlID de un control Label para asociarlo a un cuadro de texto.
Text	Utilice el elemento HTML u para mostrar el método abreviado de teclado de un control. El uso de teclas de acceso contribuye a proporcionar acceso documentado mediante teclado a todas las características. (Utilice la propiedad AccessKey para habilitar un método abreviado de teclado para un control.)
Font Size	Utilice etiquetas de encabezado en lugar de tamaños específicos.
AlternateText	Proporcione para todas las imágenes texto alternativo que sea significativo para la comprensión del contenido de la página Web. En algunas instancias, es adecuado no establecer texto alternativo para una imagen, como en el caso de imágenes utilizadas para dar formato gráfico. Para representar la propiedad AlternateText de una imagen como vacía, establezca la propiedad GenerateEmptyAlternateText en true para el control Image.
AccessKey	Utilice esta propiedad para proporcionar acceso a los controles mediante el teclado.

Requisitos previos

Para poder completar este tutorial, necesitará lo siguiente:

Herramienta de desarrollo Web Microsoft Visual Web Developer.
El entorno .NET Framework.

Crear un sitio y una página Web

En este tutorial, creará un sitio Web de un curso de álgebra. La interfaz de usuario consta de los controles siguientes:

Un control Image para el logotipo del curso.
Un control Panel con controles HyperLink para las distintas clases.
Un control GridView que muestra una tabla con el programa de estudios del curso.
Un control HyperLink que vincula una página que describe el libro de texto del curso.

El objetivo de este tutorial es la accesibilidad de la interfaz de usuario (IU) y cómo usar los controles de servidor Web para que permitan la accesibilidad. Muestra las características de accesibilidad de varios controles muy utilizados, por ejemplo los controles HyperLink, GridView, Image y Label. Todos los controles HyperLink navegan a la misma página Web, que está en blanco.

En el procedimiento siguiente, creará el sitio Web del sistema de archivos y agregará una página denominada Lecture.aspx.

Para crear un sitio Web del sistema de archivos

Abra Visual Web Developer.
En el menú Archivo, haga clic en Nuevo sitio Web.

Aparece el cuadro de diálogo Nuevo sitio Web.
En Plantillas instaladas de Visual Studio, haga clic en Sitio Web de ASP.NET.
En el cuadro Ubicación, escriba el nombre de la carpeta dónde desea conservar las páginas del sitio Web.

Por ejemplo, escriba el nombre de carpeta C:\WebSites.
En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.
Haga clic en Aceptar.

Visual Web Developer crea la carpeta y una nueva página denominada Default.aspx.
En el Explorador de soluciones, haga clic con el botón secundario del mouse en el nombre del sitio Web y, a continuación, seleccione Agregar nuevo elemento.
En Plantillas instaladas de Visual Studio, haga clic en Web Forms.
En el cuadro Nombre, escriba Lecture.aspx y, a continuación, haga clic en Aceptar.

Crear los datos que se van a mostrar

La página que está creando muestra información sobre las clases de un curso de álgebra. Para este tutorial, los datos del curso se almacenan en un archivo XML.

Para crear un archivo de datos XML

En el Explorador de soluciones, haga clic con el botón secundario en la carpeta App_Data y, a continuación, haga clic en Agregar nuevo elemento.

Nota:

Asegúrese de agregar el archivo XML a la carpeta App_Data.
En el cuadro de diálogo Agregar nuevo elemento, Plantillas instaladas de Visual Studio, haga clic en Archivo XML.
En el cuadro Nombre, escriba Syllabus.
Haga clic en Agregar.

Nota:
Asegúrese de agregar el archivo XML a la carpeta App_Data.

Copie el XML siguiente en el archivo, sobrescribiendo el contenido predeterminado.

<?xml version="1.0" encoding="utf-8" ?>
<entries>
    <lecture 
       date="04/02/2005" 
       topic="Integers and Rational Numbers" />
    <lecture 
        date="04/03/2005"
        topic="Equations and Polynomials" />
    <lecture
        date="04/04/2005"
        topic="Roots and Irrational Numbers" />
</entries>

Guarde el archivo XML y ciérrelo.

Agregar controles al formulario

Cuando agregue los controles al formulario de esta aplicación, tenga en cuenta las siguientes directrices para crear una aplicación accesible:

Cada imagen que proporciona información de usuario debe tener texto descriptivo alternativo.
Cuando use tablas, utilice el atributo Title para proporcionar nombres a las columnas y las filas de las tablas. Además, asegúrese de que las tablas tengan sentido si se leen de izquierda a derecha y de arriba abajo.
Utilice etiquetas de encabezado reales en lugar del texto con formato, para proporcionar compatibilidad con las opciones de formato seleccionadas por el usuario.
Utilice texto útil en los vínculos. Por ejemplo, si el texto es "Haga clic aquí para ver las notas de la Lección 1", "Notas de la lección 1" resultará más útil que "Haga clic aquí".
Proporcione una ruta razonable para desplazarse por la página, que siga el flujo normal de texto relativo al idioma de que se trate.
Utilice el atributo Title para la mayoría de los objetos.

Para agregar controles accesibles a la página

Cambie a la vista Diseño.
En Propiedades, establezca las propiedades siguientes para DOCUMENT:
- Establezca Title en el "Curso de álgebra"
- Establezca BgColor en Fondo.
En la parte superior de la página, escriba Curso de revisión de álgebra .
Resalte el texto al que debe dar formato para seleccionarlo y, a continuación, en la barra de herramientas Formato, en la lista situada más a la izquierda, haga clic en Encabezado 1.

En el Cuadro de herramientas, en el grupo Estándar, agregue los controles siguientes y establezca las propiedades como se indica.

Nota:
El diseño de la página no es importante.

Control	Propiedad	Valor
Image	AlternateText	Ecuaciones algebraicas.
	ImageUrl	Dirección URL de una imagen.
	TabIndex	0
Panel	ID	Conferencias
	TabIndex	0
HyperLink (agregar al panel Conferencias)	ID	Lecture1
	Text	Notas clase 1
	AccessKey	1
	href	~/Lecture.aspx
	TabIndex	1
HyperLink (agregar al panel Conferencias)	ID	Lecture2
	Text	Notas clase 2
	AccessKey	2
	href	~/Lecture.aspx
	TabIndex	2
HyperLink (agregar al panel Conferencias)	ID	Lecture3
	Text	Notas clase 3
	AccessKey	3
	href	~/Lecture.aspx
	TabIndex	3
Label	ID	TextbookLabel
	Text	Libro de texto:
	AssociatedControlID	TextbookLink
Hyperlink	ID	TextbookLink
	Text	Algebra Review, J. A. Smith
	href	~/Lecture.aspx
	TabIndex	4

Haga clic en el control Panel y, a continuación, establezca la propiedad GroupingTextNotas de clase.
Cambie a la vista Código fuente.
Haga clic en el elemento HTML y, a continuación, en Propiedades; establezca lang en en para indicar que el lenguaje de la página es inglés.

La etiqueta debe decir lo siguiente:
```
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
```

Agregar un control GridView

La información sobre las conferencias se muestra en un control GridView. El control GridView recupera los datos del archivo XML que creó en la sección anterior.

Para agregar un control GridView y enlazarlo al archivo XML

Cambie a la vista Diseño.
Desde el grupo Datos del Cuadro de herramientas, arrastre un control XmlDataSource a la página.

La ubicación no es importante.

El control XmlDataSource lee un archivo XML y pone los datos a disposición de los controles de la página.
Haga clic con el botón secundario en XmlDataSource, haga clic en Mostrar etiqueta inteligente y, a continuación, en el menú Tareas de XmlDataSource, haga clic en Configurar origen de datos.

Aparecerá el cuadro de diálogo Configurar origen de datos.
En el cuadro Archivo de datos, escriba ~/App_Data/Syllabus.xml y, a continuación, haga clic en Aceptar.
Arrastre un control GridView desde el grupo Datos del Cuadro de herramientas hasta la página.
En Propiedades, establezca las propiedades como se muestra en la tabla siguiente.

Propiedad

Ajuste

ID

SyllabusGrid

DataSourceId

XmlDataSource1

TabIndex

9

Propiedad	Ajuste
ID	SyllabusGrid
DataSourceId	XmlDataSource1
TabIndex	9

Agregar títulos a las celdas del control GridView

Un requisito para la accesibilidad es que las columnas y las celdas de las tablas HTML tengan títulos. El control GridView representa en tiempo de ejecución una tabla HTML en tiempo de ejecución. Por consiguiente, debe asegurarse de que las columnas que representa el control tienen títulos. Para realizar esta tarea, escribirá código que controla el evento RowCreated. En el controlador de eventos, agregará los atributos Title a las celdas de la tabla que crea el control GridView.

Para agregar los títulos a las columnas del control GridView

En el Explorador de soluciones, haga clic con el botón secundario en el nombre de la página (Default.aspx) y, a continuación, haga clic en Ver código.

Agregue el código siguiente:

Protected Sub SyllabusGrid_RowCreated _
        (ByVal sender As Object, _
        ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) _
        Handles SyllabusGrid.RowCreated
        Dim cells As TableCellCollection = e.Row.Cells
        If e.Row.RowType = DataControlRowType.Header Then
            cells(0).Attributes("title") = "Date"
            cells(1).Attributes("title") = "Topic"
        ElseIf e.Row.RowType = DataControlRowType.DataRow Then
            cells(0).Attributes("title") = _
                DataBinder.Eval(e.Row.DataItem, "date").ToString()
            cells(1).Attributes("title") = _
                DataBinder.Eval(e.Row.DataItem, "topic").ToString()
        End If
    End Sub

protected void SyllabusGrid_RowCreated
        (object sender, 
        System.Web.UI.WebControls.GridViewRowEventArgs e)
    {
        TableCellCollection cells = e.Row.Cells;
        if (e.Row.RowType == DataControlRowType.Header)
        {
            cells[0].Attributes["title"] = "Date";
            cells[1].Attributes["title"] = "Topic";
        }
        else if (e.Row.RowType == DataControlRowType.DataRow)
        {
            cells[0].Attributes["title"] = 
                DataBinder.Eval(e.Row.DataItem, "date").ToString();
            cells[1].Attributes["title"] = 
                DataBinder.Eval(e.Row.DataItem, "topic").ToString();
        }
    }

En la vista Diseño, haga clic en el control GridView y, a continuación, en la ventana Propiedades, establezca el evento RowCreated en "SyllabusGrid_RowCreated".

Así se conecta el evento al controlador de eventos.

Probar la aplicación

Visual Web Developer proporciona la validación de accesibilidad, que es una herramienta que revisa la página Web y determina si cumple las directrices de la accesibilidad. La herramienta revisa el HTML de la página en tiempo de diseño. También puede revisar el resultado de la página, que comprueba que el marcado que representan los controles ASP.NET cumple las directrices de la accesibilidad.

Para probar la accesibilidad de la aplicación

Asegúrese de que la página está en la vista Diseño.
En el menú Herramientas, haga clic en Comprobar accesibilidad.

Aparecerá el cuadro de diálogo Validación de accesibilidad.

Nota:

La herramienta de comprobación de la accesibilidad no está disponible en Microsoft Visual Web Developer Express.
Active las casillas de los estándares de accesibilidad que desee buscar y, a continuación, haga clic en Validar.

Visual Web Developer revisa la página y, a continuación, muestra un informe de errores de validación, si los hay. Observe que el informe de validación de accesibilidad no puede determinar si la tabla que el control GridView va a representar cumplirá las directrices de la accesibilidad.
Presione CTRL+F5 para ejecutar la página.
Pruebe las teclas de acceso.

Para esta aplicación, ha definido las teclas de acceso ALT+1, ALT+2 y ALT+3 para los controles HyperLink. Las teclas de acceso se desplazan a los vínculos. Presione ENTRAR para seguir los vínculos.
Desactive los gráficos para asegurarse de que el texto alternativo permite usar la página. Para hacerlo:
1. En Microsoft Internet Explorer 6.0, en el menú Herramientas, elija Opciones de Internet.
2. En la ficha Avanzadas, en Multimedia, desactive las opciones de gráficos.
Debe actualizar la página para ver el texto alternativo.
Desactive los sonidos para comprobar que no se pierde ninguna instrucción importante. Para hacerlo:
1. En Internet Explorer 6.0, en el menú Herramientas, haga clic en Opciones de Internet.
2. En la ficha Avanzadas, en Multimedia, desactive las opciones de sonido.
Visualice la aplicación en un explorador que le permita desactivar las hojas de estilo y, a continuación, desactive las hojas de estilo para asegurarse de que la página sigue siendo legible.
1. En Internet Explorer 6.0, en el menú Herramientas, haga clic en Opciones de Internet.
2. En la ficha General, haga clic en Accesibilidad para establecer las opciones de hojas de estilos.
Utilice la opción Contraste alto de Microsoft Windows para asegurarse de que la página sigue siendo legible. Para probar la opción Contraste alto:
1. En Windows, haga clic en Inicio, seleccione Panel de control y, a continuación, haga clic en Opciones de accesibilidad.
2. Haga clic en la ficha Pantalla y active la casilla Utilizar contraste alto.
3. Desplácese por todos los elementos de la interfaz de usuario para asegurarse de que se reflejan los cambios de color y fuente. Asegúrese también de que se omiten las imágenes y tramas que se representan como fondo del texto.
Utilice la fuente de mayor tamaño permitido, disponible sólo cuando se selecciona Contraste alto, para asegurarse de que la página continúa siendo legible. Para hacerlo:
1. En Windows, haga clic en Inicio, seleccione Panel de control y, a continuación, haga clic en Pantalla.
2. En la ficha Apariencia, en la lista Tamaño de fuente, haga clic en Extra grande.
Cambie el tamaño de la ventana del explorador y compruebe la legibilidad.
Desplácese por la página Web mediante el teclado para asegurarse de que el orden de navegación es razonable, de que la tecla TAB pasa por todos los vínculos y de que CONTROL+TAB se desplaza entre paneles o secciones.
Seleccione todo el texto y cópielo en el Portapapeles, para asegurarse de que tiene sentido.

Nota:
La herramienta de comprobación de la accesibilidad no está disponible en Microsoft Visual Web Developer Express.

Vea también

Conceptos

Compatibilidad de accesibilidad en ASP.NET

Controles y accesibilidad en ASP.NET

Información general sobre las amenazas para la seguridad de las aplicaciones Web

Otros recursos

Directrices de accesibilidad para contenido Web 1.0 (W3C)

Share via