Estarei começando hoje uma série de, podemos dizer tutoriais, explicações sobre o uso de cada tag xHTML e CSS. Cada tópico terá uma nomeclatura bastante direta sobre o assunto abordado, então vamos ao que interessa realmente.
Para iniciar a sequencia dos tutoriais, resolvi falar sobre listas de ordenação e explicar um pouco mais sobre o uso e cada uma e o porque isso é importante na hora de se desenvolver um site dentro dos padrões w3c.
Listas desordenadas: <ul>
As listas desordenadas são, comumente, as mais utilizadas por todos nós desenvolvedores quando resolvemos criar menus. E porque utilizamos as <ul> na criação de menus? Simples! Porque, semânticamente, os menus são itens correspondentes a uma lista sem ordenação não se encaixando em qualquer outra tag, semânticamente, a não ser a <ul>.
Listas ordenadas: <ol>
Idêntica as <ul>, porém nela temos a obrigação de ordernarmos os itens, seja eles por ordem alfabética, numérica, crescente ou decrescente. Devemos utilizá-las quando queremos criar, por exemplo, um passo-a-passo, uma receita ou até mesmo uma lista de categorias do seu blog.
Listas de definição: <dl>
As listas de definição são as menos utilizadas e pouco entendidas por muitos. Uma maneira bastante fácil e simples para o entendimento da <dl> é pensarmos em um glossário. Todo glossário possui termos e, cada termos, suas descrições. Para os termos utilizamos <dt> e para as descrições <dd>. Uma coisa muito importante na <dl> é que: nunca termos, em hipótese alguma, um termo repetido com descrições diferentes. Cada termo tem sua descrição única, caso contrário o mesmo não poderá ser um <dl>, e sim uma <ul> ou uma <ol>.
Em tempo, basta sabermos o nome de cada tag para qu possamos entender o seu uso. Consegui ser claro na explicação?
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 Criando Tabelas Acessíveis em xHTML -, 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.
fonte: http://blog.madskristensen.dk/post/Make-the-GridView-control-accessible.aspx