Exportar (0) Imprimir
Expandir todo

Tutorial: Crear una aplicación Web accesible

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 desplazamiento 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 desplazamiento 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 funciones. (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.

Para poder completar este tutorial, necesitará lo siguiente:

  • Herramienta de desarrollo Web Microsoft Visual Web Developer.

  • El entorno .NET Framework.

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 lleva a 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 llevan 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

  1. Abra Visual Web Developer.

  2. En el menú Archivo, elija Nuevo y, a continuación, haga clic en Sitio Web.

    Aparece el cuadro de diálogo Nuevo sitio Web.

  3. En Plantillas instaladas de Visual Studio, haga clic en Sitio Web de ASP.NET.

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

  5. En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.

  6. Haga clic en Aceptar.

    Visual Web Developer crea la carpeta y una nueva página denominada Default.aspx.

  7. En el Explorador de soluciones, haga clic con el botón secundario en el nombre del sitio Web y haga clic en Agregar nuevo elemento.

  8. En Plantillas instaladas de Visual Studio, haga clic en Web Forms.

  9. En el cuadro Nombre, escriba Lecture.aspx y, a continuación, haga clic en Aceptar.

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

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

    NoteNota

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

  2. En el cuadro de diálogo Agregar nuevo elemento, Plantillas instaladas de Visual Studio, haga clic en Archivo XML.

  3. En el cuadro Nombre, escriba Syllabus.

  4. Haga clic en Agregar.

  5. 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>
    
  6. Guarde el archivo XML y ciérrelo.

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

  1. Cambie a la vista Diseño.

  2. En Propiedades, establezca las propiedades siguientes para DOCUMENT:

    • Establezca Title en el "Curso de álgebra"

    • Establezca BgColor en Fondo.

  3. En la parte superior de la página, escriba Curso de revisión de álgebra .

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

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

    NoteNota

    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

     

    NavigateUrl

    ~/Lecture.aspx

     

    TabIndex

    1

    HyperLink (agregar al panel Conferencias)

    ID

    Lecture2

     

    Text

    Notas clase 2

     

    AccessKey

    2

     

    NavigateUrl

    ~/Lecture.aspx

     

    TabIndex

    2

    HyperLink (agregar al panel Conferencias)

    ID

    Lecture3

     

    Text

    Notas clase 3

     

    AccessKey

    3

     

    NavigateUrl

    ~/Lecture.aspx

     

    TabIndex

    3

    Label

    ID

    TextbookLabel

     

    Text

    Libro de texto:

     

    AssociatedControlID

    TextbookLink

    Hyperlink

    ID

    TextbookLink

     

    Text

    Algebra Review, J. A. Smith

     

    NavigateUrl

    ~/Lecture.aspx

     

    TabIndex

    4

  6. Haga clic en el control Panel y, a continuación, establezca la propiedad GroupingText Notas de clase.

  7. Cambie a la vista de código fuente.

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

  1. Cambie a la vista Diseño.

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

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

  4. En el cuadro Archivo de datos, escriba ~/App_Data/Syllabus.xml y, a continuación, haga clic en Aceptar.

  5. Arrastre un control GridView desde el grupo Datos del Cuadro de herramientas hasta la página.

  6. En Propiedades, establezca las propiedades como se muestra en la tabla siguiente.

    Propiedad Valor

    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

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

  2. 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();
            }
        }
    
  3. En la vista Diseño, haga clic en el control GridView y, a continuación, en Propiedades, establezca el evento RowCreated en "SyllabusGrid_RowCreated".

    Así se conecta el evento al controlador de eventos.

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

  1. Asegúrese de que la página está en la vista Diseño.

  2. En el menú Herramientas, haga clic en Comprobar accesibilidad.

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

    NoteNota

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

  3. Active las casillas de verificación 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.

  4. Presione CTRL+F5 para ejecutar la página.

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

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

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

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

  9. 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 de verificación 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.

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

  11. Cambie el tamaño de la ventana del explorador y compruebe la legibilidad.

  12. Desplácese por la página Web mediante el teclado para asegurarse de que el orden de desplazamiento es razonable, de que la tecla TAB pasa por todos los vínculos y de que CONTROL+TAB se desplaza entre paneles o secciones.

  13. Seleccione todo el texto y cópielo en el Portapapeles, para asegurarse de que tiene sentido.

Adiciones de comunidad

AGREGAR
Mostrar:
© 2014 Microsoft