Passo-a-passo: Criando um aplicativo de Web acessível

  • Artigo

Criar páginas Web acessíveis permite a você alcançar tantos clientes quanto possível.Pessoas com deficiências não são os únicos usuários que apreciam páginas acessíveis.Os usuários de navegadores com somente texto ou usuários de software que interpreta conteúdo de página de Web também podem confiar em Opções de acessibilidade.Design acessível permite ferramentas de automação, como mecanismos de pesquisa, para pesquisar, indexar, e trabalhar com as informações em suas páginas.Finalmente, as leis de telecomunicações futuras podem necessitar de informações que são distribuídas através da Internet para ser acessível, assim como Software tradicional.Para obter mais informações, consulte Suporte à acessibilidade no ASP.NET e Controles ASP.NET e acessibilidade.

A partir de Site da Microsoft na Web sobre acessibilidadeAqui estão dicas para the Autenticando páginas da Web acessíveis:

  • Fornecer texto alternativo (Alt) bom para todos os elementos gráficos.

  • Fazer uso correto dos mapas de imagem.

  • Escrever texto de link útil.

  • Criar boa navegação de teclado.

  • Fornecer páginas que não usam quadros alternativos.

  • Usar tabelas e suas alternativas corretamente.

  • Suporta as opções de formatação para a leitora de texto.

  • Não exige o uso de folhas de estilos.

  • Use formatos de arquivo que o leitor possa usar.

  • Evite usar letreiros.

  • Fornecer títulos para a maioria dos objetos.

Se você não puder atender os objetivos de acessibilidade, considere fornecer as páginas da Web somente em texto alternativo.

Controles ASP.NET suportam muitas das diretrizes de acessibilidade.Isso inclui revelar o foco do teclado e elementos de tela.As propriedades para controles ASP.NET podem ser usadas para fornecer suporte a outras diretrizes de acessibilidade como mostra a tabela a seguir.

Propriedade de controle

Considerações sobre acessibilidade

TabIndex

Crie um caminho de navegação adequado através do formulário.É importante para controles sem rótulos intrínsecos, como caixas de texto, para que o rótulo associado imediatamente preceda o controle na ordem das guias.Em casos quando isso é desejável ou não possível, usar o [P:System.Web.UI.WebControls.Rótulo.AssociatedControlID] propriedade de um Label Controle para associá-la com um caixa de texto.

Texto

Use o MTML u Elemento para exibir o teclado Atalho para um controle.Utilizar teclas de acesso contribui para fornecer acesso ao teclado documentado a todos os recursos.(Use o AccessKey Propriedade para Habilitar um atalho de teclado de um controle.)

Font Size

Usar marcas de título em vez de tamanhos específicos.

AlternateText

Forneça texto alternativo para todas as imagens que sejam significativas para que o conteúdo da página da Web seja compreendido.Em alguns casos, é adequado não configurar texto alternativo de uma imagem, como no caso de imagens usadas para formatação gráfica.Para processar o AlternateText Definir propriedade de uma imagem como vazio, o GenerateEmptyAlternateText Propriedade para verdadeiro Para o Image o controle.

AccessKey

Acostume-se a fornecer acesso a controles de teclado.

Pré-requisitos

Para concluir esta explicação passo a passo, será necessário o seguinte:

  • Ferramenta de desenvolvimento Microsoft Visual Web Developer.

  • O .NET Framework.

Criando um Site e Página da da Web

Nesta explicação passo a passo, você irá criar um site de uma classe algebra.Interface de usuário usa os seguintes controles:

  • Um Image o controle para o logotipo de classe.

  • A Panel Controlar com HyperLink Controles para as palestras.

  • A GridView controle que exibe uma tabela que contém o roteiro de classe.

  • A HyperLink Controlar que Links a uma página que descreve a classe textbook.

O foco desta explicação passo a passo é a acessibilidade da interface do usuário (IU), e como usar os controles do servidor Web para oferecer suporte de acessibilidade.Ele demonstra os recursos de acessibilidade de diversas usados controles, incluindo o HyperLink, GridView, Imagee Label Controles.O HyperLink Todos os controles navegar para a mesma página da Web, mas que página da Web estiver em branco.

No procedimento a seguir, você irá criar o site do sistema de arquivos e adicionar uma página chamada Lecture.aspx.

Para criar um site do sistema de arquivos

  1. Abra o Visual Web Developer.

  2. Sobre o File Menu, clique em Novo Site da Web.

    O Novo Site da Web caixa de diálogo é exibida.

  3. Em Modelos Visual Studio instaladoClique em Web Site ASP.NET.

  4. Na Local Digite o nome da pasta onde você deseja manter as páginas do site da Web.

    Por exemplo, digite o nome da pasta C:\WebSites.

  5. Na Linguagem lista, clique no linguagem de programação que você prefere trabalhar no.

  6. Clique em OK.

    Visual Web Developer cria a pasta e uma nova página chamada Default.aspx.

  7. No Solução Explorer, clique com o botão direito do mouse no nome do site e em seguida, clique em Adicionar novo item.

  8. Em Modelos Visual Studio instaladoClique em Web Form.

  9. Na Name (Nome) caixa, digite Lecture.aspx e em seguida, clique em OK.

Criar dados a serem exibidos

A página que você está criando exibe informações sobre leituras de uma classe algebra.Para este explicação passo a passo, os dados para a classe são armazenados em um arquivo XML.

Para criar um arquivo de dados XML

  1. No Gerenciador de Soluções, clique com o botão direito do mouse o App_Data pasta e em seguida, clique em Adicionar novo item.

    Observação:

    Não se esqueça que você adicionar o arquivo XML o App_Data a pasta.

  2. Na Adicionar novo item caixa de diálogo, em Modelos Visual Studio instaladoClique em XML File.

  3. Na Name (Nome) caixa, digite roteiro.

  4. Clique em Adicionar.

  5. Copie o seguinte XML para o arquivo, substituindo o conteúdo padrão.

    <? XML version = "1.0" Codificação = " UTF-8 "? > < entradas > < palestra Data = " 04/02/2005 " Tópico = "Integers e números racional / &Gt; < palestra Data = " 03/04/2005 " Tópico = "equações e Polynomials / &Gt; < palestra Data = " 04/04/2005 " Tópico = "raízes e números Irrational" / &Gt; < / entradas >

  6. Salvar o arquivo XML, e em seguida, feche-o.

Adicionar os controles ao formulário

Quando você adicionar os controles ao formulário para este aplicativo, considere as seguintes diretrizes para tornar o aplicativo acessível:

  • Cada imagem que fornece informações ao usuário deve ter texto alternativo descritivo.

  • Quando você estiver usando tabelas, usar o Title Atributo para fornecer nomes para as colunas e linhas da tabela.Além disso, certifique-se que tabelas fazem sentido, se ler da esquerda para a direita, da parte inferior para a superior.

  • Uso marcas de título real em vez de texto formatado, para oferecer suporte ao usuário selecionando as opções de formatação.

  • Forneça link de texto útil.Por exemplo, se o texto for " Clique aqui para anotações Lecture 1 ", " Anotações Lecture 1" é um texto mais útil para link do que " Clique aqui ".

  • Forneça um caminho de navegação adequado através da página, seguindo o fluxo comum de texto para a linguagem específica.

  • Use o Title Atributo para a maioria dos objetos.

Para adicionar controles acessíveis à sua página

  1. Alterne para o mode design.

  2. Em Propriedades, defina as propriedades a seguir para Documento:

    • Set Title Para "Classe Algebra".

    • Set BgColor para Segundo plano.

  3. Na parte superior da página, digite Algebra revisão classe.

  4. Realce o texto para formatar a Selecionar-la e, em seguida, na Formato Barra de Ferramentas, na lista da extrema esquerda, clique em Título 1.

  5. A partir de Toolboxin a Padrão Grupo, Adicionar a seguir controla e defina as propriedades, conforme indicado.

    Observação:

    O leiaute da página não é importante.

    Controle

    Propriedade

    Value (Valor)

    Image

    AlternateText

    Equações algebra.

     

    ImageUrl

    Uma URL para uma imagem.

     

    TabIndex

    0

    Panel

    ID

    Lectures

     

    TabIndex

    0

    HyperLink (adicionar a Lectures Painel)

    ID

    Lecture1

     

    Texto

    Antações Lecture 1

     

    AccessKey

    1

     

    href

    ~/Lecture.aspx

     

    TabIndex

    1

    HyperLink (adicionar a Lectures Painel)

    ID

    Lecture2

     

    Texto

    Antações Lecture 2

     

    AccessKey

    2

     

    href

    ~/Lecture.aspx

     

    TabIndex

    2

    HyperLink (adicionar a Lectures Painel)

    ID

    Lecture3

     

    Texto

    Antações Lecture 3

     

    AccessKey

    3

     

    href

    ~/Lecture.aspx

     

    TabIndex

    3

    Rótulo

    ID

    TextbookLabel

     

    Texto

    Textbook:

     

    AssociatedControlID

    TextbookLink

    Hiperlink

    ID

    TextbookLink

     

    Texto

    Revisão de algebra, J. A. Smith

     

    href

    ~/Lecture.aspx

     

    TabIndex

    4

  6. Clique na Panel Controlar e em seguida, defina o GroupingText Propriedade para Anotações da Palestra.

  7. Alterne para modo de origem.

  8. Clique dentro de HTML Elemento e em Propriedades, defina Lang para En Para indicar que o idioma da página é inglês.

    Agora a marca deve ler da seguinte maneira:

    < HTML xmlns="http://www.w3.org/1999/XHTML " lang = "EN" >

Adicionando um controle GridView

As informações sobre as palestras são exibidas em um GridView o controle.O GridView o controle recupera os dados a partir de Arquivo XML que você criou na seção anterior.

Para adicionar um controle GridView e acoplá-lo ao arquivo XML

  1. Alternar para modo Design.

  2. A partir de Dados Agrupar in a ToolboxArraste um XmlDataSource controlar até a página.

    O posicionamento não é importante.

    O XmlDataSource Controle lê um arquivo XML e o disponibiliza os dados para controles na página.

  3. Clique com o botão direito do mouse XmlDataSourceClique em Mostrar marcas inteligentese em seguida, na Tarefas XmlDataSource Menu, clique em Configurar fonte de dados.

    O Configurar fonte de dados caixa de diálogo é exibida.

  4. Na Arquivo de dados caixa, digite ~/App_Data/Syllabus.xmle em seguida, clique em OK.

  5. A partir de Dados Grupo da ToolboxAdicione um GridView controlar até a página.

  6. Em propriedades, defina as propriedades como mostrado na tabela a seguir.

    Propriedade

    Configuração

    ID

    SyllabusGrid

    DataSourceId

    XmlDataSource1

    TabIndex

    9

Adicionar títulos a células de controle GridView

Um requisito para acessibilidade é que colunas da tabela HTML e células tenham títulos.O GridView Controle processa uma Tabela HTML em tempo de execução.Portanto, deve certificar-se que as colunas que são processadas pelo controle incluem títulos.Para executar esta tarefa, você irá Gravar o código que manipula a RowCreated Evento.Você adicionará o manipulador de eventos, Title Atributos às células da tabela que são criadas pela GridView o controle.

Para adicionar títulos para as colunas de controle GridView

  1. No Solução Explorer, clique com o botão direito do mouse no nome do (a página Padrão.aspx e em seguida, clique em Visualiza o código.

  2. Adicione o seguinte código.

    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. No modo de exibição de design, clique o GridView o controle e em seguida, na Propriedades janela, defina o RowCreated Evento " SyllabusGrid_RowCreated ".

    Isso conecta o evento para o manipulador de eventos.

Testando o aplicativo

O Visual Web Developer inclui validação de acessibilidade, que é uma ferramenta que revisa a página da Web e determina se ela atende diretrizes de acessibilidade.A ferramenta revisa o HTML na página em tempo de design.Você também poderá analisar a saída da página, que verifica a marcação que é processada por controles ASP.NET e que atenda às diretrizes de acessibilidade.

Para testar o aplicativo para acessibilidade

  1. Certifique-se que a página esteja na modo Design.

  2. Sobre o Ferramentas Menu, clique em Marcar acessibilidade.

    O Validação de acessibilidade caixa de diálogo é exibida.

    Observação:

    A acessibilidade de verificação de ferramenta não está disponível na edição Express Visual Web Developer microsoft.

  3. Selecionar o Marcar caixas para os padrões de acessibilidade que você deseja procurar e em seguida, clique em Validate.

    Visual Web Developer Revisa a página, e exibe um relatório de erros de validação, se houver.Observe que o Relatar de acessibilidade de validação não é possível determinar se a tabela que irá ser processado pelo GridView o Controlarar atenda acessibilidade guia linhas.

  4. Pressione CTRL+F5 para executar a página.

  5. Testar as teclas de acesso.

    Para este aplicativo, você definiu as teclas ALT + 1 de Acessar, ALT + 2 e Alt + 3 para o HyperLink Controles.As teclas de acesso movem para os vínculos.Pressione ENTER para seguir os links.

  6. Desativar elementos gráficos para certificar-se que o texto alternativo torna a página utilizável.Para fazer isso:

    1. Em Microsoft Internet Explorer 6.0, sobre o Ferramentas Menu, clique em Opções da Internet.

    2. Sobre o Avançado Guia, em MultimídiaDesative as opções de elementos gráficos.

    Você deve atualizar a página para ver o texto alternativo.

  7. Desativar sons para verificar se há instruções importantes estão perdidos.Para fazer isso:

    1. Em Internet Explorer 6.0, sobre o Ferramentas Menu, clique em Opções da Internet.

    2. Sobre o Avançado Guia, em MultimídiaDesative as opções de som.

  8. Exiba o aplicativo em um navegador que permita você desativar as folhas de estilos, e então desative as folhas de estilos para certificar-se que a página é ainda legível.

    1. Em Internet Explorer 6.0, sobre o Ferramentas Menu, clique em Opções da Internet.

    2. Sobre o Geral guia, clique em Acessibilidade Para definir opções Planilha de estilos.

  9. Usar o Microsoft Windows Alto contraste Opção para verificar se a página é ainda legível.Para testar o Alto contraste opção:

    1. No Windows, clique em IniciarAponte para O Painel de controlee em seguida, clique em As opções de acessibilidade.

    2. Sobre o Exibir guia, selecione o Usar alto contraste caixa de seleção.

    3. Percorrer todos os elementos de IU para garantir que as alterações de cores e fontes serão refletidas.Além disso, certifique-se que imagens ou padrões que são desenhados por atrás do texto sejam omitidos.

  10. Usar o Muito Grande tamanho da fonte que é suportado, que está disponível somente quando Alto contraste é Selecionado, para certificar-se de que a página é ainda legível.Para fazer isso:

    1. No Windows, clique em IniciarAponte para O Painel de controlee em seguida, clique em Exibir.

    2. Sobre o Aparência guia, na Font Size lista, clique em Extra grande.

  11. Redimensionar a janela do navegador e examinar a legibilidade.

  12. Use o teclado para percorrer a página da Web e certificar-se de que a ordem de navegação é sensível, que a tecla TAB percorre todos os links, e que as teclas CTRL+TAB move entre painéis ou seções.

  13. Selecione todo o texto e copie para a Área de transferência para certificar-se que ele faz sentido.

Consulte também

Conceitos

Suporte à acessibilidade no ASP.NET

Controles ASP.NET e acessibilidade

Visão Geral sobre Ameças de Segurança em Aplicativos da Web

Outros recursos

Diretrizes para Acessibilidade a Conteúdo Web 1.0 (W3C).