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

Fernando Bravo Figueroa

[email protected]

http://www.fernandobf.com

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

Licença:

http://creativecommons.org/licenses/by-nc-nd/3.0/


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

http://www.infnet.edu.br/

http://www.rio2016.org/

http://www.w3c.br/GT/GrupoAcessibilidade

http://www.w3.org/

http://fernandobf.com/blog/literatura/avaliacao-de-usabilidade-do-jornalismo-para-tablets-interacao-por-gestos-em-um-aplicativo-de-noticias






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

http://pt.wikipedia.org/wiki/Aaron_Swartz

http://pt.wikipedia.org/wiki/Aaron_Swartz

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

1




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


http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html




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.


http://www.youtube.com/watch?v=DHya_zl4kXI&list=UUscVLgae-2f9baEXhVbM1ng&index=7




http://www.nic.br/

http://www.nic.br/

http://www.w3c.br/

http://www.youtube.com/user/NICbrvideos?feature=watch




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

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




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

http://www.w3.org/TR/2007/WD-html-design-principles-20071126/




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.


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

3




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:




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


significado




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.


significado




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.


significado




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



</main>


significado




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.


significado




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.


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


significado

Multimídia no HTML5:

áudio e vídeo

4




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.




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;

Aceita como elemento-filho o <source>, que permite oferecer conteúdo alternativo.


<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

http://caniuse.com/




O elemento <video>:

Destina-se a incorporar um vídeo no documento;

Aceita como elemento-filho o <source>, que permite oferecer conteúdo alternativo.


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


http://caniuse.com/

Formulários no HTML5:novos atributos

5




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




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.


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




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 protected]">


http://caniuse.com/




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

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>


http://caniuse.com/




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/

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/

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




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

http://www.livrohtml5.com.br/




http://www.maujor.com/index.php






http://tableless.com.br/




http://www.w3.org/

http://www.w3.org/

http://www.w3.org/

http://www.w3.org/

http://www.w3.org/

http://www.w3.org/

http://www.w3.org/

http://www.whatwg.org/







Fechamento

Perguntas?




Muito obrigado! ;-)

fernandobf.com

Site:

fernandobf.com/blog

Blog:

http://goo.gl/CLOv9

Baixe os arquivos em:

http://fernandobf.com/

http://fernandobf.com/blog

http://goo.gl/CLOv9