Palestra sobre Acessibilidade Web: o HTML5 a favor de uma Web única e universal
-
Upload
fernando-figueroa -
Category
Technology
-
view
1.238 -
download
0
description
Transcript of Palestra sobre Acessibilidade Web: o HTML5 a favor de uma Web única e universal
Fernando Bravo Figueroa
http://www.fernandobf.com
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Licença:
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
Formação
Pós-graduando em Ergodesign de Interfaces: Usabilidade e Arquitetura de Informação pela PUC/RJ;
Graduado em História pela UVA;
Muito prazer, eu mesmo!
Atividades recentes
Responsável pela implementação dos módulos de ‘HTML5’, ‘CSS3’ e ‘jQuerypara 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
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
...Tudo o que você aprende é provisório, tudo é
aberto ao questionamento e à refutação...Aaron Swarts, in memorian
( 1986 - 2013)
Esta palestra é dedicada a Aaron Swarts.
Introdução ao HTML5 e um novo mundo de oportunidades
1
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
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
Introdução ao HTML5 e um novo mundo de oportunidades
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
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
Introdução ao HTML5 e um novo mundo de oportunidades
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
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...
Introdução ao HTML5 e um novo mundo de oportunidades
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
Nem todos foram convidados para essa festa.. :-(
Introdução ao HTML5 e um novo mundo de oportunidades
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
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.
Introdução ao HTML5 e um novo mundo de oportunidades
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
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
Princípios de desenvolvimentodo HTML5
2
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
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.
Princípios de desenvolvimento do HTML5
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
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.
Princípios de desenvolvimento do HTML5
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
Utilidade
Solucionar problemas reais;
Prioridades;
Segurança;
Separação de camadas;
Consistência do DOM (Document Object Model).
Princípios de desenvolvimento do HTML5
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
Interoperabilidade
Comportamentos definidos;
Evitar soluções complexas;
Tratamento de erros.
Princípios de desenvolvimento do HTML5
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
Acesso universal
Independência de mídia;
Suporte multilíngua;
Acessibilidade.
Princípios de desenvolvimento do HTML5
Estruturas semânticas no HTML5:as divisões ganham significado
3
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
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)
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
Estruturas semânticas no HTML5: as divisões ganham
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’.
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
Estruturas semânticas no HTML5: as divisões ganham
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.
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
Estruturas semânticas no HTML5: as divisões ganham
significado
Como era:
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
Como é:
Estruturas semânticas no HTML5: as divisões ganham
significado
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
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.
Estruturas semânticas no HTML5: as divisões ganham
significado
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
O elemento <header>:
O elemento <header> é utilizado para marcar umcabeçalho de uma seção ou documento. Ou seja, podemos utilizar quantos <header> for necessárioem uma mesma página;
Não cria uma nova seção, apenas faz parte de uma;
É utilizado para representar um grupo de introduçãocomo, por exemplo, informações sobre o conteúdoassociado, índices, campos de busca e logos.
Estruturas semânticas no HTML5: as divisões ganham
significado
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
O elemento <nav>:
Representa uma seção de navegação;
O elemento <nav> contém links para outraspá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 blocosprincipais.
Estruturas semânticas no HTML5: as divisões ganham
significado
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
O elemento <aside>:
Pode estar, ou não, representado como umabarra lateral do site;
Quando usado dentro de um elemento<article>, o <aside> está diretamenterelacionado com o conteúdo deste elemento. Se fora,estará relacionado com o conteúdo global dodocumento;
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.
Estruturas semânticas no HTML5: as divisões ganham
significado
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
O elemento <main>:
Este elemento marca o conteúdo principal de umapágina Web ou aplicativo;
O uso do elemento <main> é limitado, devendoser 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”>
<!-- Conteúdo -->
</main>
Estruturas semânticas no HTML5: as divisões ganham
significado
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
O elemento <section>:
Dos novos elementos, o <section> é o queapresenta o uso mais genérico;
Seu emprego assemelha-se ao uso das <div>, que no HTML5 perderam relevância;
Comumente usaremos este elemento relacionadoa estrutura do conteúdo;
Na prática, serve para marcar seções de umapágina. Entende-se como seção um conjunto de conteúdo abordando o mesmo tema.
Estruturas semânticas no HTML5: as divisões ganham
significado
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
O elemento <article>:
O elemento <article> representa um conteúdomais específico do que o <section> e a <div>;
Podemos defini-lo como uma área que agrega um conteúdo independente e autossuficiente de umapágina Web ou aplicação;
O conteúdo contido neste elemento pode serreutilizado de forma separada, independente docontexto no qual foi inserido.
Estruturas semânticas no HTML5: as divisões ganham
significado
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
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 ee elemento <footer> poderá aparecer tambémdiversas vezes em um mesmo documento como, porexemplo, representando o rodapé de uma seção;
Não cria uma nova seção, apenas faz parte de uma;
Estruturas semânticas no HTML5: as divisões ganham
significado
Multimídia no HTML5:
áudio e vídeo
4
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
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.
Multimídia no HTML5: áudio e vídeo
Telas de aviso exigindo a instalação ou falta dos plug-ins do QuickTime, Flash e Silverlight, respectivamente.
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
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...
Multimídia no HTML5: áudio e vídeo
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
O elemento <audio>:
Destina-se a incorporar um som no documento;
Aceita como elemento-filho o <source>, que permite oferecer conteúdo alternativo.
Multimídia no HTML5: áudio e vídeo
<audio src=“som.mp3” autoplay loop preload=“auto” controls></audio>
<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
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
O elemento <video>:
Destina-se a incorporar um vídeo no documento;
Aceita como elemento-filho o <source>, que permite oferecer conteúdo alternativo.
Multimídia no HTML5: áudio e vídeo
<video src=“video.ogv” autoplay loop preload poster audio width height controls
></video>
<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>
Fonte: http://caniuse.com
Formulários no HTML5:novos atributos
5
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
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);
Formulários no HTML5: novos atributos
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
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;
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.
Formulários no HTML5: novos atributos
Print da aba Conteúdo do Firefox, disponível em Ferramentas > Opções
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
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.
Formulários no HTML5: novos atributos
<input type="text" name="mail" placeholder="[email protected]">
Fonte: http://caniuse.com
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
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.
Formulários no HTML5: novos atributos
<input type="text" name="nome" autofocus>
Fonte: http://www.techrepublic.com/blog
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
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.
Formulários no HTML5: novos atributos
<input type="text" id="nome" required>
Fonte: http://caniuse.com
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
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.
Formulários no HTML5: novos atributos
<input type="text" id="nome" autocomplete=off>
Fonte: http://www.wufoo.com/html5/
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
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;
Formulários no HTML5: novos atributos
<input id="year" required type="number" min="2010" max="2019" value="2010">
Fonte: http://www.wufoo.com/html5/
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
Fechamento
Bibliografia e fontes de consulta/referência
Livro HTML5 – A linguagem de marcação que revolucionou a Webde 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
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
Fechamento
Perguntas?
// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ
Acessibilidade Web: o HTML5 a favor de uma Web única e universalFernando Bravo Figueroa
http://fernandobf.com | [email protected]
Muito obrigado! ;-)
fernandobf.com
Site:
fernandobf.com/blog
Blog:
http://goo.gl/CLOv9
Baixe os arquivos em: