Gustavo Ribeiro – Desenvolvedor Front-End

Asp.Net vs. Acessibilidade – Componente GridView

Quem utiliza – ou já utilizou – o Visual Studio para desenvolvimento de sites .Net já deve ter passado pelo o que irei escrever neste tópico.

A alguns meses, venho tentando descobrir – mesmo eu não sendo desenvolvedor e por intermédio de sites, blogs e afins – como fazer com que os componentes do Asp.Net renderizem de forma correta e acessível. Atualmente, meu maior problema se encontra em um componente chamado GridView. O GridView é um novo controle do Asp.Net 2.0 e uma melhoria do antigo DataGrid.

Um dos maiores problemas no DataGrid era a falta de comprometimento com a acessibilidade e isso foi corrigido com o GridView, juntamente com diversas outras falhas, porém, para que a GridView se comporte de forma acessível temos que definir algumas propriedades para o componente e adicionar elementos extras em seu code-behind.

Primeiro, temos que definir a propriedade UseAcessibleHeader = “true” em nossa GridView. Isso irá fazer com que, na hora da renderização, as tags <td> sejam substituídas pela tag <th> quando a mesma for um cabeçalho.

Por algum motivo que não sei qual, não existe nenhuma propriedade na GridView para que seja fixado as tags <thead>, <tfoot> e <tbody> no componente – tags as quais são de grande importância para a acessibilidade de um site, como podemos ver no tópico Tutorial xHTML – Tabelas Acessíveis -, porém, existe uma maneira simples de adicionar-mos estes elementos em C# e VB.NET.

Primeiro, iremos adicionar o componente GridView em nossa página:

<asp:GridView runat="server" ID="GridView1" />

Após a inserção do componente GridView em nossa página, iremos adicionar o código abaixo, em um novo método, no code-behind:

private void MakeAcessible(GridView grid) {
    if (grid.Rows.Count > 0) {
        grid.UseAcessibleHeader = true;
        grid.HeaderRow.TableSection = TableRowSection.TableHeader;      // adiciona as tags <thead> e <tbody>
        grid.FooterRow.TableSection = TableRowSection.TableFooter;      // adiciona a tag <tfoot>. remova caso a grid não possua footer
    }
}

Agora, a chamada para o método acima no evento Page_Load:

protected void Page_Load(object sender, EventArgs e) {
    MakeAcessible(GridView1);
}

Infelizmente, por meu servidor ser php, não tenho como adicionar uma aplicação Asp.Net de exemplo para que possam verificar o código, mas funciona. Podem testar.