Gustavo Ribeiro (blog)

dez 10

Tutorial xHTML #02 – Tabelas Acessíveis

Meta Tags: tutorial, xHTML • por Gustavo Ribeiro

Nosso assunto de hoje, dando sequencia ao tutorial xhtml, será sobre tabelas. Vamos falar um pouco sobre tabelas e como tornar nossa tabela acessível.

Muita gente tem horror a tabelas quando o assunto é ‘tableless’, dizem que tabela não deve mais ser utilizadas etc, mas poucos sabem que tabelas devem sim ser utilizadas, porém, com o seu real objetivo que é de mostrar, apenas, dados tabulares e não para criação de layouts.

Para se montar uma tabela em html – xhtml, devemos conhecer suas tags e para que cada uma delas servem.

» Continue lendo Tutorial xHTML #02 – Tabelas Acessíveis

dez 02

Tutorial xHTML #01 – Utilizando as listas: ul, ol e dl

Meta Tags: Tutorial, xHTML • por Gustavo Ribeiro

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

» Continue lendo Tutorial xHTML #01 – Utilizando as listas: ul, ol e dl

out 16

Criando Formulários Acessíveis

Meta Tags: Acessibilidade, Webstandards, xHTML • por Gustavo Ribeiro

Falar sobre formulários acessíveis se tornou meio difícil por ser um assunto que cada um poderá interpretar de uma maneira diferente. Alguns dizem que o correto é criarmos o formulário utilizando listas desordenadas (ul), outros já falam que o correto seria utilizarmos parágrafos (p). Utilizar <p> ou <ul>? Escolha um e seja feliz.

Para que um formulário seja realmente acessível, precisamos estar cientes da existência de algumas tags básicas e para que elas servem. Vamos a elas:

• form: cria uma área para a entrada de dados podendo conter campos de texto, checkboxes, radio-buttons etc.
• fieldset: utilizado para agrupar elementos no formulário. ex: dados pessoais, dados profissionais etc.
• legend: define um nome para cada fieldset criado
• label: define um “label” para um determinado controle.
• input, checkbox e radiobutton: elementos de um form.

» Continue lendo Criando Formulários Acessíveis

out 13

Formulário utilizando “Label” e o atributo “For”

Meta Tags: Webstandards, xHTML • por Gustavo Ribeiro

Quem nunca ficou irado ao ter que preencher um formulário e só conseguir clicar em cima da bolinha – radio button – de cada opção para fazer sua escolha? Sim, isso realmente irrita. Para isso que existe o atributo “for” para os nossos form label. Ok, o que seria esse tal de “for”.

Quando criamos um formulário temos que ficar atentos a, no mínimo, três tags fundamentais para a marcação correta do form, são elas: <form>, <label> e a nossa famosa <input>.

• <form> – indicará o início e fim do nosso formulário;
• <label> – irá conter todo o respectivo texto de cada campo do formulário;
• <input> – nosso formulário em si (campo texto, radio buttons etc).

» Continue lendo Formulário utilizando “Label” e o atributo “For”

set 25

CSS: Border-Collapse

Meta Tags: CSS, xHTML • por Gustavo Ribeiro

A propriedade border-collapse tem como objetivo dividir ou não as bordas das tabelas via CSS e possui os seguinte atributos: collapse e separate.

Por padrão, toda tabela renderizada recebe o atributo separate mesmo que não seja especificado no CSS da página, ou seja, cada elemento possui sua própria borda.

Exemplo de tabela com o atributo separate.

<table style="border:solid 1px #00f">
    <tbody>
        <tr>
            <td style="border:solid 1px #0f0">célula 1</td>
            <td style="border:solid 1px #0f0">célula 2</td>
            <td style="border:solid 1px #0f0">célula 3</td>
        </tr>
    </tbody>
</table>

Exemplo de tabela com o atributo collapse.

<table style="border:solid 1px #00f;border-collapse:collapse">
    <tbody>
        <tr>
            <td style="border:solid 1px #0f0">célula 1</td>
            <td style="border:solid 1px #0f0">célula 2</td>
            <td style="border:solid 1px #0f0">célula 3</td>
        </tr>
    </tbody>
</table>

Outras dicas são bem vindas nos comentários