Palestra sobre Acessibilidade Web: o HTML5 a favor de uma Web única e universal

// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ

Fernando Bravo Figueroa
falecom@fernandobf.com
Licença:
http://www.fernandobf.com

Muito prazer, eu mesmo!

Formação
 Pós-graduando em Ergodesign de Interfaces: Usabilidade e Arquitetura de
Informação pela PUC/RJ;
 Graduado em História pela UVA;

Atividades recentes
 Responsável pela implementação dos módulos de ‘HTML5’, ‘CSS3’ e ‘jQuery
para Designers’ nos cursos de Extensão do Instituto Infnet;
 Consultoria para estratégias de acessibilidade da intranet dos jogos olímpicos
Rio 2016™;
 Integrante do Grupo de Trabalho de Acessibilidade Web, do W3C;
 Co-autor do artigo científico “Avaliação de usabilidade do jornalismo para
tablets: interações por gestos em um aplicativo de notícias”.

// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo Figueroa
Acessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com

Esta palestra é dedicada a Aaron Swarts.

...Tudo o que você aprende é provisório, tudo é
aberto ao questionamento e à refutação...
Aaron Swarts, in memorian
( 1986 -  2013)


1
Introdução ao HTML5 e um novo
mundo de oportunidades

Introdução ao HTML5 e um novo mundo de oportunidades

Breve cronologia da evolução do HTML/XHTML
1989 – Nascimento da Web
1991 – HTML
1993 – HTML+
1994 – HTML 2.0 / W3C
1995 – HTML 3.0
1997 – HTML 3.2 / HTML 4.0
1999 – HTML 4.01
2000 – XHTML 1.0
2001 – XHTML 1.1



Breve cronologia da evolução do HTML/XHTML (cont.)
2004 – WHAT WG
2007 – O W3C reconhece os trabalhos do WHAT WG
2009 – O GT do XHTML 2.0 é descontinuado
2010 – Início da adoção do HTML5



 A construção da World Wide Web foi criada como uma plataforma aberta,
única e universal;
 Desde o início da Web, as linguagens de marcação têm evoluído
constantemente;
 Essa evolução têm sido motivada por uma série de princípios, que buscam
levar a Web ao seu potencial máximo!
 Embora a acessibilidade seja (ou deveria ser) inerente à própria Web...



Nem todos foram convidados para essa festa.. :-(



 Assim, a quinta versão do HTML fora criada como uma forma de “quebrar”
ainda mais as barreiras de comunicação;
 Pensada para permitir o acesso ao conteúdo por parte de qualquer pessoa,
independente do dispositivo, conexão, condição ou necessidade;
 Exibição do filme ‘HTML5 - Uma web para todos’, do NIC.br / W3C Brasil.


Bem-vindos (as) à nova geração da Web!

Exemplos:
http://goo.gl/isDjx

http://goo.gl/52lAr

http://goo.gl/tsZQE

http://goo.gl/7r8p

http://goo.gl/upxI

http://goo.gl/jEALR


2
Princípios de desenvolvimento
do HTML5

Princípios de desenvolvimento do HTML5

O Grupo de Trabalho do HTML, do W3C, publicou, em 26 de novembro de 2007,
um conjunto de diretrizes que iriam guiar o desenvolvimento da quinta versão do
HTML.
 Compatibilidade;
 Utilidade;
 Interoperabilidade;
 Acesso universal.



Compatibilidade
 Suporte para conteúdos existentes;
 Degradação graciosa (graceful degradation);
 Não reinventar a roda;
 Pavimentar os caminhos existentes;
 Evolução em lugar de revolução.



Utilidade
 Solucionar problemas reais;
 Prioridades;
 Segurança;
 Separação de camadas;
 Consistência do DOM (Document Object Model).



Interoperabilidade
 Comportamentos definidos;
 Evitar soluções complexas;
 Tratamento de erros.



Acesso universal
 Independência de mídia;
 Suporte multilíngua;
 Acessibilidade.


3
Estruturas semânticas no HTML5:
as divisões ganham significado

Estruturas semânticas no HTML5: as divisões ganham
significado

A palavra ‘Semântica’ reporta-se fundamentalmente ao
verbo grego semaíno, cujo o valor é significar, seria, pois,
a ciência das significações.
Célia Maria Paula de Barros (UCB)


significado
Em um mundo visual, tudo pode parecer mais bonito e legível. As ‘partes’, que
compõem a diagramação, os espaçamentos, as fontes e as cores, por exemplo,
nos ajudam a compreender e dar sentido ao ‘todo’.


significado
Porém, no mundo da Web, as coisas são bem diferentes. Existem mecanismos
que não enxergam o mesmo que nós e, muito menos, entendem a linguagem
humana. Esses mecanismos apenas interpretam códigos.


significado
Como era:


significado
Como é:


significado
O HTML5 trouxe novos elementos, e muitos destes são de uso estrutural com
mais significado e que permitem um código mais limpo e acessível. Como os
usaremos constantemente para implementarmos nossos layouts, os veremos com
mais detalhes:
 header;
 nav;
 aside;
 main;
 section;
 article;
 footer.


significado
O elemento <header>:
 O elemento <header> é utilizado para marcar um
cabeçalho de uma seção ou documento. Ou seja,
podemos utilizar quantos <header> for necessário
em uma mesma página;
 Não cria uma nova seção, apenas faz parte de uma;
 É utilizado para representar um grupo de introdução
como, por exemplo, informações sobre o conteúdo
associado, índices, campos de busca e logos.


significado
O elemento <nav>:
 Representa uma seção de navegação;
 O elemento <nav> contém links para outras
páginas ou partes do mesmo projeto;
 Nem todos os agrupamentos de links são
candidatos a serem marcados com o elemento <nav>,
mas apenas as seções que consistem em blocos
principais.


significado
O elemento <aside>:
 Pode estar, ou não, representado como uma
barra lateral do site;
 Quando usado dentro de um elemento
<article>, o <aside> está diretamente
relacionado com o conteúdo deste elemento. Se fora,
estará relacionado com o conteúdo global do
documento;
 Em sua essência, o elemento <aside> busca agregar mais informação ao
conteúdo relacionado, podendo conter citações ou sidebars, agrupamento de
publicidade, grupos e blocos de navegação...
 Como dica de uso, podemos indicá-lo como aquele que, embora relacionado, é
independente ao ponto de prejudicá-lo caso retirado.


significado
O elemento <main>:
 Este elemento marca o conteúdo principal de uma
página Web ou aplicativo;
 O uso do elemento <main> é limitado, devendo
ser aplicado uma única vez em cada documento;
 Não pode ser usado como filho dos elementos
<header>, <nav>, <article>, <aside> e
<footer>;
Por ser um elemento ainda muito recente, recomenda-se o uso da ARIA
role=“main”, como mostrado no exemplo, até os user agents o
implementarem por completo:

<main role=“main”>

</main>

significado
O elemento <section>:
 Dos novos elementos, o <section> é o que
apresenta o uso mais genérico;
 Seu emprego assemelha-se ao uso das <div>, que
no HTML5 perderam relevância;
 Comumente usaremos este elemento relacionado
a estrutura do conteúdo;
 Na prática, serve para marcar seções de uma
página. Entende-se como seção um conjunto de conteúdo abordando o mesmo
tema.


significado
O elemento <article>:
 O elemento <article> representa um conteúdo
mais específico do que o <section> e a <div>;
 Podemos defini-lo como uma área que agrega
um conteúdo independente e autossuficiente de uma
página Web ou aplicação;
 O conteúdo contido neste elemento pode ser
reutilizado de forma separada, independente do
contexto no qual foi inserido.


significado
O elemento <footer>:
 Comumente usado para representar a última
grande área estrutural de uma página;
 Contudo, o HTML5 mudou o conceito do seu uso e
e elemento <footer> poderá aparecer também
diversas vezes em um mesmo documento como, por
exemplo, representando o rodapé de uma seção;
 Não cria uma nova seção, apenas faz parte de uma;


4
Multimídia no HTML5:
áudio e vídeo

Multimídia no HTML5: áudio e vídeo

 Historicamente, o emprego de elementos multimídia na Web, como áudio e
vídeo, sempre foram dependentes de plug-ins e tecnologias proprietárias que
criavam uma barreira para os usuários;
 Nem sempre a implementação destes elementos foi uma tarefa simples para os
desenvolvedores;
 Além dos custos, muitas vezes era necessário a participação de outro
profissional para executar a tarefa de compilação/conversão.

Telas de aviso exigindo a instalação ou falta dos plug-ins do QuickTime, Flash e Silverlight, respectivamente.



A fim de quebrar essas barreiras, o HTML5 propôs a criação dos elementos
<audio> e <video>. Uma forma simples, direta e universal de trabalharmos
com multimídia. Afinal, a Web é para todos...



O elemento <audio>:
 Destina-se a incorporar um som no documento;
<audio src=“som.mp3” autoplay loop preload=“auto” controls></audio>

 Aceita como elemento-filho o <source>, que permite oferecer conteúdo
alternativo.
<audio autoplay loop preload=“auto” controls>
<source src=“som.ogg” type=“audio/ogg”>
<source src=“som.mp3” type=“audio/mpeg”>
<!-– Código (X)HTML para inserção do do som em Flash -->
<p>Faça o download do som <a href=“#”>aqui</a>.</p>
</audio>

Fonte: http://caniuse.com



O elemento <video>:
 Destina-se a incorporar um vídeo no documento;
<video src=“video.ogv” autoplay loop preload poster audio width height controls
></video>

 Aceita como elemento-filho o <source>, que permite oferecer conteúdo
alternativo.
<video autoplay loop preload poster audio width height controls>
<source src=“video.ogv” type=“video/ogg”>
<source src=“video.mp4” type=“video/mp4”>
<source src=“video.webm” type=“video/webm”>
<!-– Código (X)HTML para inserção do do som em Flash -->
<p>Faça o download do som <a href=“#”>aqui</a>.</p>
</video>



5
Formulários no HTML5:
novos atributos

Formulários no HTML5: novos atributos

 Formulários são, talvez, o mais antigo e importante mecanismo de interação
entre um sistema e o usuário;
 São responsáveis por permitir a entrada de dados que posteriormente serão
processados no lado do servidor;
 Aceitam não só apenas textos, mas também marcações e comandos de HTML e
scripts;
 Com isso, faz-se necessário o tratamento e verificação desses dados inseridos,
tanto no lado do cliente (client-side) quanto no lado do servidor (server-side);



 Antes do HTML5, a validação client-side dava-se através de rotinas criadas com
javascript, porém este solução não é tão segura;

Print da aba Conteúdo do Firefox, disponível em Ferramentas > Opções

 A quinta versão da linguagem HTML introduziu novos atributos que
apresentam um conceito inovador, prático e eficiente de validação desses
campos;
 Estes novos atributos permitem uma validação nativa, apresentando
mensagens de erros automaticamente e dispensando a necessidade de scripts;
 Os atributos a serem mostrados aqui serão: placeholder, autofocus, required,
autocomplete, max e min.



O atributo placeholder
 De uso exclusivo com os elementos <input> e <textarea>;
 Destina-se a inserir no campo com uma pré-dica ou orientação no elemento,
que será retirado quando o usuário preencher o campo com algum valor.
<input type="text" name="mail" placeholder="email@exemplo.com.br">




O atributo autofocus
 De uso exclusivo com os elementos <button>, <keygen>, <input>,
<select> e <textarea>;
 É um atributo booleano e destina-se a definir qual elemento ganhará foco logo
a página ser carregada;
 Seu uso deve ser único em cada página.
<input type="text" name="nome" autofocus>

Fonte: http://www.techrepublic.com/blog



O atributo required
 De uso exclusivo com os elementos <input>, <select> e <textarea>;
 É um atributo booleano que define o preenchimento de um item do formulário
como obrigatório.
<input type="text" id="nome" required>




O atributo autocomplete
 De uso exclusivo com os elementos <input> e <form>;
 Este atributo busca padronizar este tipo de comportamento;
 Este atributo aceita como valores on e off;
 Quando on, o elemento, ao ganhar foco, mostra uma lista de opões baseado
no que já fora digitado anteriormente;
 Quando off, é desabilitada esta função.
<input type="text" id="nome" autocomplete=off>

Fonte: http://www.wufoo.com/html5/



Os atributos max e min
 De uso exclusivo com os elementos <meter>, <progress> e <input>;
 O atributo max define um valor máximo a ser inserido dentro de um intervalo
conhecido;
 O atributo min define um valor mínimo a ser inserido dentro de um intervalo
conhecido;
<input id="year" required type="number" min="2010" max="2019" value="2010">

Fonte: http://www.wufoo.com/html5/


Fechamento

Bibliografia e fontes de consulta/referência
 Livro HTML5 – A linguagem de marcação que revolucionou a Web
de Maurício Samy ‘Maujor’ Silva, Editora Novatec.

 Tableless – Desenvolvimento inteligente com padrões web

 W3C – World Wide Web Consortium

 WHAT WG – Web Hypertext Application Technology Working Group


Fechamento

Perguntas?


Muito obrigado! ;-)

Site:
fernandobf.com

Blog:
fernandobf.com/blog

Baixe os arquivos em:
http://goo.gl/CLOv9


Palestra sobre Acessibilidade Web: o HTML5 a favor de uma Web única e universal

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Palestra sobre Acessibilidade Web: o HTML5 a favor de uma Web única e universal

Similar to Palestra sobre Acessibilidade Web: o HTML5 a favor de uma Web única e universal (20)

Palestra sobre Acessibilidade Web: o HTML5 a favor de uma Web única e universal