SlideShare uma empresa Scribd logo
Agosto 2012
Horácio Soares
horacio@digitalacesso.com
horacio.soares@internativa.com.br
facebook.com/internativabrasil
(21) 9925-5404 - @horaciosoares
Acessibilidade
 me lembra?
Acessibilidade
 para quem?
Todos nós...
Quem mais sofre com
     a falta de
  acessibilidade?
Marta e suas amigas…
Analfabeto
         funcional



     Um em cada cinco
   brasileiros (20,3%) é
analfabeto funcional, de
    acordo com a Pnad
(Pesquisa Nacional por
Amostra de Domicílios)
   2009, divulgada pelo
                 IBGE.
                           Homem de costas, sentado de frente para um quadro branco sem nada escrito.
Calvin, pouca
                                   experiência e
                                     medo do
                                    computador
Homem com muito medo olhando por
     cima de um notebook.
The Web is not fully accessible to
                perhaps 2 billion, including people with …

Five groups of people for whom Web accessibility can be challenging:

                 Challenges due to aging    Literate in poorly-supported
 Disabilities                                        languages




         Low literacy          Little experience with technology
E além desses 5
    grupos?
Gabriel compenetrado, olhando para o   Agora ele está olhando e
  monitor e clicando com o mouse.      brincando como teclado.




                     Gabriel, linguagem em
                      desenvolvimento...
Max, com
 tendinite,
 usando o
   mouse
com a mão
  trocada.

              Homem com expressão de desespero, usando o mouse com a mão esquerda
Como o Luli disse no Digitalks no Rio em 2012:




 “Nesse mundo Mobile, somos
todos daltónicos e sofremos do
      Mal de Parkinson”
“design for mobile people,...




...not for mobile device”            Foto: Rosenfield Media
Todos nós na primeira experiência.




   Um criança com camisa social e gravata em frente a um notebook
E finalmente,
 o bilionário
    cego!!!




       Cifrão desenhado com
            moedas douradas
Dilbert fazendo parte do logotipo do Google e falando “eu não posso ver”.




Google, o bilionário cego!!! É apenas um robô
      que indexa conteúdo em texto.
Estatísticas no Brasil
Estatística: segundo IBGE no
Brasil (2000)

  180 milhões de habitantes;

  24,3 milhões de pessoas com deficiência;

  15 milhões de pessoas com mais de 65 anos;

  5,4 milhões de pessoas com mais de 65 anos e que já
  possuem alguma deficiência.
Censo 2010
Dos cerca de 190 milhões de
brasileiros, aqueles com pelo menos
uma deficiência, seja visual, auditiva,
motora ou mental, somam 45 milhões
               (23,9%).
Leis de acessibilidade
Decreto Lei
nº 5.296 (dez/04)
Decreto Lei nº 6.949 (ago/09),
 onde a convenção da ONU
    ganhou força de lei.
Como anda a acessibilidade
    digital no Brasil?
Motivação pelo
     decreto de lei 5296

Resultado: acessibilidade para
         inglês ver.
Estatísticas do W3C

      2,5% em 2010

       5% em 2011

  Sem erros de validação
automática de HTML, CSS e
      acessibilidade.
Acessibilidade Web

E quais são os custos?
•   Curva de aprendizagem
•   Alto custo no redesign
•   Baixo em novos projetos
•   Diminui com tempo
•   Validação
•   Manutenção
•   Melhoria contínua
•   Mudança de cultura
Qual é o custo da
  qualidade?
E os benefícios?
Possibilidade de
 atingir 100% do
     público alvo;
Atender melhor todas as pessoas
Fidelizar clientes




  Homem de terno comemorando
Mais fácil de usar e aprender
Proteção contra
processos pela falta da
    acessibilidade
Manutenção mais
 rápida e barata,
          melhor
  performance…




                    Visualizar os benefícios
                       da acessibilidade
Valorização da
   Diversidade e
Responsabilidade
         Social.




                   Mãos entrelaçadas
Vantagem
                                     competitiva




Mulher com notebook em sinal de ok
Melhoria da
qualidade.




              Mãe e filha felizes na praia dando uma estrela
Um caminho para acessibilidade
 vem da busca pelas melhores
           IDADES
IDADES?
}
Acessibil



                IDADE
}
Acessibil
 Usabil


                IDADE
Comercial
          Mercado Livre
  “Eu compro o
   que quiser, 2011
  senão quiser,
   não compro”
Comercial do Mercado Livre
           2011
}
Acessibil
  Usabil
Simplic

                IDADE
ESPN Brasil– abril 2010
X
ESPN Brasil– abril 2010
10 princípios de UX do Google

Princípio 3. O simples é poderoso.
Em uma interface perfeita para as
pessoas, elas nunca deveriam errar,
 principalmente no mundo mobile…
}
 Acessibil
   Usabil
  Simplic
Interativ
                 IDADE
}
Acessibil
   Usabil
  Simplic
 Interativ
  Veloc          IDADE
X
X
10 princípios de UX do Google

Princípio 2 - cada milisegundo importa.

  Melhor definição de milisegundo?
}
    Acessibil
       Usabil
      Simplic
     Interativ
        Veloc
                     IDADE
Encontrabil
}
  Acessibil
     Usabil
    Simplic
   Interativ
      Veloc
Encontrabil
                   IDADE
   Atrativ
10 princípios de UX do Google

Princípio 8 – agrade aos olhos sem
          distrair a mente
}
  Acessibil
     Usabil
    Simplic
   Interativ
      Veloc
Encontrabil
                   IDADE
     Atrativ
       Util
10 princípios de UX do Google

Princípio 1 – foque nas pessoas: suas
       vidas, trabalho, sonhos.
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
Observação e identificação de
      um problema...
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
}
  Acessibil
     Usabil
    Simplic
   Interativ
      Veloc
Encontrabil
                   IDADE
     Atrativ
        Util
     Facil
Acessibil
  Usabil
Simplic
}
  Acessibil
     Usabil
    Simplic
   Interativ
      Veloc
Encontrabil
                   IDADE
     Atrativ
        Util
       Facil
 Portabil
         …
A melhor idade vem da:




}
     Investigação
     Observação
     Colaboração
        Análise
       Avaliação
       Validação
By Erico Fileno
Diretrizes de acessibilidade
Recomendações para acessibilidade do
    conteúdo da Web 1.0 e 2.0 do W3C
WCAG Web Content Accessibility Guidelines

 WCAG 1.0 – 05 de maio de 1999
Em português:
http://www.utad.pt/wai/wai-pageauth.html



 WCAG 2.0 – 11 de dezembro de 2008
http://www.ilearn.com.br/TR/WCAG20/
EMAG 3.0
http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG
Iniciativas de
Acessibilidade
W3C – WAI
      Web Accessibility Initiative
1.WCAG (Web Content Accessibility
   Guidelines) recomendações para
   acessibilidade do conteúdo da Web.
2.UAAG
3.ATAG
4.ARIA

Imagem de bonecos representando pessoas de mãos dadas .
W3C – WAI
   Web Accessibility Initiative
1.WCAG
2.UAAG (The User Agent Accessibility
   Guidelines) diretrizes de
   acessibilidade para navegadores e
   tecnologias assistivas.
3.ATAG
4.ARIA
W3C – WAI
   Web Accessibility Initiative
1.WCAG
2.UAAG
3.ATAG (Authoring Tool Accessibility
   Guidelines) ferramentas de criação
   de páginas/conteúdo Web.
4.ARIA
W3C – WAI
   Web Accessibility Initiative
1.WCAG
2.UAAG
3.ATAG
4.ARIA (Accessible Rich Internet
   Applications) Aplicações Internet
   Ricas e Acessíveis.
Principais barreiras de
    acessibilidade
Imagens

Recomendação 1.1 Alternativas em Texto
(Referências no WCAG 1.0 e WCAG 2.0) :
Fornecer alternativas em texto para qualquer
conteúdo não textual.
Imagens



Obs.: Deve ser fornecido um equivalente textual
   para a imagens. A descrição deve ser a
          melhor e menor possível.
Imagens e links




<a href=¨#¨>                </a>
Imagens e links

              <a href=¨#¨>
          <img src='http://[…]xxx.jpg'

alt=“70 Anos de Pelé – fotos e vídeos”
          width='XXX' height='XXX' />


                    </a>
Imagem com descrição ineficiente




Banner do MCA - Módulo Criança e Adolescente
 onde a descrição da imagem é apenas a sigla
                   “MCA”.
Elementos sem descrição textual
adequada (imagens, flash, etc.)
Links
Links: identificação de destino
Recomendação 13.1 (Referência no WCAG 1.0):
Identifique claramente o alvo de cada link.
Recomendação 2.4 Navegável (Referência no
WCAG 2.0 – critério 2.4.4 Finalidade do link):
Fornecer formas de ajudar os usuários a navegar,
localizar conteúdos e determinar o local onde
estão.
Links
“Clique aqui”, “Saiba mais”, “veja
 Mais”… 41.700.000 respostas
  para “clique aqui” no Google.
Links



          Saída
        acessível
Links


       Link no título da chamada
            com cara de link.

S
Links


        Title aplicado ao link.

S
Se ao entrar no link o usuário for
    desligado do site corrente.
- Links que abrem novos sites sem que o usuário
        note que foi levado para outro site.
... <li>
<a href="http://.../serialization/">
<span lang="en">Building Accessible
Websites</span>.
<img src="novo_site.gif" alt="abre novo
site">
</a><br>
Excelente livro em inglês - versão digital.
</li> ...
Se ao entrar no link o usuário for
desligado do site corrente em uma
           nova janela.
- Essa prática não é recomendada pelo W3C.
 Links que abrem em nova janela sem que o
             usuário seja avisado.
... <li>
<a href="http://.../serialization/">
<span lang="en">Building Accessible
Websites</span>.
<img src="novo_site.gif" alt="novo site em
nova janela">
</a><br>
Excelente livro em inglês - versão digital.
</li> ...
Links para formatos diferentes do
               HTML.
- Links para arquivos em PDF, DOC, XLS, PNG,
entre outros, sem a devida descrição do tipo de
   arquivo que será baixado e seu tamanho.
                        
Quando não se tem ideia:
         Clique aqui

          Saiba mais

        Continue lendo

          Veja mais
Quando somos surpreendidos:
        Conheça a legislação

      Leia o manual do produto
Quando falta informação:
    Faça download da legislação



   Baixe aqui o manual do produto
Sem surpresas!
 Faça download da legislação (formato doc, 1.32 mb)


Baixe aqui o manual do produto (formato pdf, 2.47 mb)
Sem surpresas e poluição
     Faça download da legislação


    Baixe aqui o manual do produto
Sem surpresas e poluição
     Faça download da legislação
                  Formato DOC - 1.32 Mb

    Baixe aqui o manual do produto
Sem surpresas e poluição
                      Faça download da legislação


                    Baixe aqui o manual do produto

                                        Formato PDF - 2.47 Mb
Recomendações:
●
    A informação pode estar escondida, mas deve aparecer quando o elemento
    ganhar foco com o mouse ou teclado. Essa recomendação não é válida para
    MOBILE.
●
    Informações relevantes não devem ser incluídas via atribulo TITLE.
O Mundo ideal!
Baixe aqui o manual do produto (formato pdf, 2.47 mb)

Baixe aqui o manual do produto (formato doc, 2.84 mb)

Baixe aqui o manual do produto (formato html, 1.24 mb)

Baixe aqui o manual do produto (formato txt, 705 kb)
Mundo ideal sem poluição
Manual do produto
Para baixar:

Selecione um formato     Baixar o Manual
  PDF – tamanho 1.5 Mb

  HTML – tamanho 0.7 Mb
  TXT – tamanho 0.5 Mb
Links dependentes de script

Recomendação 6.3 (Referência no WCAG 1.0
) : Certifique-se que as páginas são acessíveis
e usáveis mesmo quando as tecnologias
utilizadas não são suportadas ou se
encontram desligadas.
Recomendação 4.1 (Referência no WCAG 2.0
) : Maximizar a compatibilidade com atuais e
futuros agentes de usuário, incluindo
tecnologias assistivas.
Visão do inferno
<a href=“javascript:meuFruFruFavorito();”
style=“color:#900;”>
Clique aqui!!!
</a>




E esse exemplo não é dos piores...
Mundo (quase) ideal
HTML
<a href=“/algo.html” id=“frufru”>Meu frufru favorito</a>
CSS
#frufru{
   color:#900;
}
JavaScript
var frufru = document.getElementById(‘frufru’);
function meuFruFruFavorito() {
   [codigo]
}
frufru.onclick = meuFruFruFavorito;
frufru.onkeypress = meuFruFruFavorito;
Links e campos de formulários que não
se parecem como tal.
Design pesado e com poucos espaços
entre elementos.

Uso de tecnologias em desuso e pouco
acessívels
Idioma
Idioma
 Identificar claramente quaisquer
mudanças na linguagem natural do
  texto ou equivalentes textuais.
Recomendação 4.1 (Referência no WCAG 1.0) :
Identifique claramente alterações ocorridas no
idioma do texto do documento e em qualquer
equivalente textual.
Recomendação 3.1 (Referência no WCAG 2.0) :
Legível: Tornar o conteúdo de texto legível e
compreensível - 3.1.2 Linguagem das Partes.
Idioma
<ul class="topo_idioma">
<li><a href="http://www.xyz.com/en/">
    <span Lang="en"> English </span>
</a></li>
<li>
<li><a href="http://www.xyz.com/es/">
    <span Lang="es"> Español </span>
</a></li>
<li>...
</ul>
- Uso de aspectos de
  apresentação para veicular
informação (cores, disposição
       na página, etc.)
- Contraste insuficiente
Baixo contraste.
Baixo contraste e informações com foco
em cores
CAPTCHA
CAPTCHA

                caPTcHa
Imagem: http://www.slideshare.net/jared_w_smith/web-accessibility-gone-wild-now-even-more-wilder
Captcha   http://sam.zoy.org/pwntcha/
Captcha
(solução inacessível e insegura)




    (http://www.webvisum.com/en/main/download)
CAPTCHA and BBC iD
    http://www.bbc.co.uk/blogs/bbcinternet/2010/10/captcha_and_bbc_id.html




CAPTCHA, herói ou vilão?

http://acessodigital.net/art_captcha-heroi-ou-vilao.html
Semântica
Semântica
 Validação automática não
garante uma boa semântica
Navegação
Navegação
      1) Semântica:
   Headers: <H1>...<H6>
  Parágrafos: <p>texto</p>
    Listas: <ul><ol><dl>
 Tabelas: <table>...</table>
Formulários: <form>...</form>
Navegação
Recomendação 2.4 Navegável (Referência no
WCAG 2.0): Fornecer formas de ajudar os
usuários a navegar, localizar conteúdos e
determinar o local onde estão. - 2.4.1 Ignorar
Blocos: Disponibilizar um mecanismo para ignorar
blocos de conteúdo que são repetidos.
Navegação
 O primeiro elemento ativo da página deve ser
   um link (salto) que nos permita alcançar
       diretamente o conteúdo principal.

<a href=”#conteudo” class=”salto”>
Salto para conteúdo
</a>

<h2><a name=”conteudo” id=”conteudo”>
Título do H2
</a>
</h2>
<a name=”conteudo” id=”conteudo”></a>
Navegação
1)Salto visível
Navegação
2)Salto visível com foco
http://webstanderds.org
Navegação
Atalhos para principais áreas do site

Recomendação 9.5 (Referência no WCAG 1.0):
Providencie teclas de atalho para links
importantes.
Recomendação 2.4 Navegável (Referência no
WCAG 2.0): Fornecer formas de ajudar os
usuários a navegar, localizar conteúdos e
determinar o local onde estão. - 2.4.1 Ignorar
Blocos: Disponibilizar um mecanismo para
ignorar blocos de conteúdo que são repetidos.
Navegação
São três os tipos de teclas de atalho na Web:

- teclas de atalho dos navegadores: como não há uma
    padronização entre eles, cada browser tem seu
    próprio grupo de atalhos.

- teclas de atalho próprias aos leitores de tela e outras
    tecnologias assistivas.

- teclas de atalhos próprias ao site.
Navegação
<a href="pesquisa.html" title="tecla de
   atalho [1] para pesquisa"
   ACCESSKEY="1">
Pesquisa [1]
</a>
Navegação
Navegação e orientação:
Recomendação 2.4 Navegável (Referência no
WCAG 2.0): Fornecer formas de ajudar os
usuários a navegar, localizar conteúdos e
determinar o local onde estão.

Para facilitar a navegação pelas diferentes áreas do site, é
    recomendada a divisão da página em regiões navegáveis
    diretamente com leitores de tela. Para tal sugerimos a
    utilização de ARIA Landmark Roles:
    http://www.w3.org/TR/wai-aria/roles#landmark_roles ,
- É um recurso já implementado em 2 leitores de tela usados no
    Brasil - Jaws (muito usado) e NVDA (aberto e gratuito).
Navegação
Algumas regiões navegáveis com Landmark ARIA:

banner – normalmente é utilizado como a região do cabeçalho do
   site, onde são incluídos o logotipo, slogan, etc.

complementary – área complementar ao conteúdo principal da
   página, por exemplo, a coluna a direita da página onde podem
   ser incluídos outros conteúdos.
contentinfo - área que contém as informações sobre o site como,
   por exemplo, copyright, privacidade, endereço e outras
   informações comuns ao rodapé da página.
main – Conteúdo principal da página. Área com conteúdo centrado
   no assunto/tema da página Web.
navigation – área de navegação do site.
Navegação
Landmark ARIA:

<div role="banner"> [Conteúdo do cabeçalho]
  </div>
   <div role="navigation"> [Navegação] </div>

<div role="search"> [Busca] </div>

   <div role="main"> [Conteúdo principal]
   </div>

<div role="complementary"> [Conteúdo
  principal] </div>
Accessible Rich Internet Applications
                               ARIA NOW
       HTML 4 + ARIA                                      HTML5 + ARIA




http://www.abilitynet.org.uk/accessibility2/wp-content/uploads/2009/09/HTML5_Accessibility_faulkner.ppt
Navegação pelo teclado - barreiras:
           dropdown



           Keyboard Accessibility for Web Applications
  http://snook.ca/archives/accessibility_and_usability/keyboard-accessibility-for-web-apps
Menu DropDown
 O Professor Maurício Samy Silva, em seu livro
Construindo sites com CSS e (X)HTML, propõe
uma solução para um menu em cascata acessível
                  via teclado:




   http://livrocss.com.br/cap_09/arquivo_9.24-a.html
Menu expansível




Tutorial - Accessible expanding and collapsing menu
http://www.456bereastreet.com/archive/200705/accessible_expanding_and_collapsing_menu/
Erro ao utilizar REFRESH

Recarregar a página automáticamente:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="refresh"
content="300" />
...
Erro ao utilizar REFRESH
Utilizar o evento onChange em combos (menus
                   de seleção)

  Recomendação 8.1 (Referência no WCAG 1.0) : Criar
  elementos de programação, tais como programas
  interpretáveis e applets, diretamente acessíveis pelas
  tecnologias de apoio ou com elas compatíveis.
  Recomendação 2.1 (Referência no WCAG 2.0) :
  Acessível por Teclado: Fazer com que toda a
  funcionalidade fique disponível a partir do teclado.
  Recomendação 3.2 (Referência no WCAG 2.0) :
  Previsível: 3.2.1 Em Foco: Quando um componente
  recebe o foco, ele não inicia uma alteração de contexto.
Utilizar o evento onChange em combos (menus
                   de seleção)

 Quando um usuário com deficiência visual ou motora
   (que usa o teclado para navegar) utiliza o evento
 onchange num menu select (combo box), a primeira
  opção é selecionada automaticamente sem que o
 usuário a tenha escolhido, antes que o usuário possa
           conhecer as opções disponíveis.
Utilizar o evento onChange em combos (menus
                   de seleção)
Eevento onChange em combos
Solução 1: Retirar o evento onchange, permitindo assim a
navegação via teclado pelas opções da combo box. Para
confirmar a seleção do item, deve ser disponibilizado um
submit (botão de Ok).
Formulários
Formulários  Fieldset

- <form action="blabla.htm">
- <fieldset>
- Nome <input type="text"><br>
- Endereço <input type="text">
- </fieldset>
- </form>
Formulários  legend

- <form action="blabla.htm">
- <fieldset>
   <legend>Dados Pessoais</legend>
- Nome <input type="text"><br>
- Endereço <input type="text">
- </fieldset>
- </form>
Formulários  label

- <form action="blabla.htm">
- <fieldset>
   <legend>Dados Pessoais</legend>
- <label for=“non">
    Nome <input type="text" id=“non">
- </label>
- <label for=“end">
    Endereço <input type="text“id=“end">
- </label>
- </fieldset>
- </form>
<form action="blabla.htm">
-    <fieldset>
-    <legend>Dados Pessoais</legend>
-    <label for="non">
-    Nome <input type="text" id="non">
-    </label>
-    <label for="end">
-    Endereço <input type="text" id="end">
-    </label>
-    <fieldset><legend>Sexo</legend>
-    <label for="m"><input type="radio" name="g" id="m">Masculino</label>
-    <label for="f">
-    <input type="radio" name="g” id="f">Feminino</label>
-    </fieldset>
-    </fieldset>
-    </form>
Formulários  optgroup
<form id="form" method="post" action=""><p>
    <label for="lista-de-mercado">
     Lista de Mercado:<br />
      <select name="select" id="lista-de-mercado">
         <option selected="selected" value="1">
             Escolha um item</option>
         <optgroup label="Laticíneos">
           <option value="2">Leite desnatado</option>
           <option value="3">Queijo ralado</option>
           <option value="4">Queijo prato</option>
         </optgroup>
         <optgroup label="Verduras">
           <option value="6">Alface</option>
           <option value="7">Alho</option>
         </optgroup>
      </select>
    </label>
</form>
Formulários  optgroup
Tabelas
Uso errado dos elementos HTML como
           tabelas e DIVs.
 Recomendação 5.3. (Referência no WCAG 1.0):
 Não use tabelas para layout (disposição de páginas)
 a não ser que a tabela faça sentido quando
 linearizada.
 Recomendação 1.3 Adaptável (Referência no
 WCAG 2.0 – critério 1.3.2 Sequência com
 Significado): Criar conteúdos que possam ser
 apresentados de diferentes maneiras sem perder
 informação ou estrutura.
Tabelas
<table>
<tr>
   <td>Janeiro</td>
   <td>Fevereiro</td>
   <td>Março</td>
</tr>
<tr>
   <td>10</td>
   <td>15</td>
   <td>25</td>
</tr>
</table>
Tabelas - summary
<table summary="Vendas de bananas no primeiro
trimestre 2011 - tabela com 2 linhas e 3 colunas">
<tr>
   <td>Janeiro</td>
   <td>Fevereiro</td>
   <td>Março</td>
</tr>
<tr>
   <td>10</td>
   <td>15</td>
   <td>25</td>
</tr>
</table>
Tabelas - caption
<table summary="Vendas de bananas no primeiro
trimestre 2011 - tabela com 2 linhas e 3 colunas">
<caption>Vendas de bananas - 1o. semestre</caption>
<tr>
   <td>Janeiro</td>
   <td>Fevereiro</td>
   <td>Março</td>
</tr>
<tr>
   <td>10</td>
   <td>15</td>
   <td>25</td>
</tr>
</table>
Tabelas – id/headers
<table summary="Vendas de bananas no primeiro
trimestre 2011 - tabela com 2 linhas e 3 colunas">
<caption>Vendas de bananas - 1o. semestre</caption>
<tr>
   <th id=“jan">Janeiro</th>
   <th id=“fev">Fevereiro</th>
   <th id=“mar">Março</th>
</tr>
<tr>
   <td headers=“jan">10</td>
   <td headers=“fev">15</td>
   <td headers=“mar">25</td>
</tr>
</table>
Tabelas – scope/col/row
<table summary="Vendas de bananas no primeiro
trimestre 2011 - tabela com 2 linhas e 3 colunas">
<caption>Vendas de bananas - 1o. semestre</caption>
<tr>
   <th scope=“col”>Janeiro</th>
   <th scope=“col”>Fevereiro</th>
   <th scope=“col”>Março</th>
</tr>
<tr>
   <td>10</td>
   <td>15</td>
   <td>25</td>
</tr>
</table>
Performance
http://www.websiteoptimization.com/services/analyze/
Portal Brasil  GTMETRIX: http://gtmetrix.com
MODAL
inacessível…
Mudança de foco
            (lightbox e lightwindows)

 Mudanças de foco causam desorientação e problemas
   de navegação.
 Usuários não tem a menor idéia de como achar o novo
   conteúdo atualizado.
 As mudanças de foco impedem que usuários tenham
   uma visão completa da página.

             - Building a Better Lightbox
           (recomendações de usabilidade)
 http://www.habdas.org/2009/03/29/building-a-better-lightbox/
Modal acessível
           (prática)

http://webhipster.com/testing/accessibi
        lity/modal-dialog-latest/
Players de vídeo e áudio.
Principais barreiras de acessibilidade em vídeo:
• Os controles do player de vídeo são
   inacessíveis pelo teclado.
• Os controles do player de vídeo podem ser
   acessados pelo teclado, mas não
   apresentam rótulos adequados.
• Os vídeos incluídos diretamente na página,
   com o uso de um player externo, começam a
   tocar assim que a página é carregada.
• ramente sobre esta função..
• Os vídeos não possuem audiodescrição.
• Os vídeos não possuem legendas.
• Os vídeos não possuem legenda oculta
    ("closed caption").
• Os vídeos não possuem transcrição.
• Quando um vídeo é disponibilizado para
    download, o respectivo link não informa
    claramente sobre esta função..
Validação de
   Acessibilidade




 Globo em ambiente futurista.
Validação de Acessibilidade



Validação automática dos Padrões Web:
  XHTML e CSS.
Validador W3C – HTML/XHTML
        http://validator.w3.org/
Validador W3C – CSS
  http://jigsaw.w3.org/css-validator/
Validação de Acessibilidade



Validação automática e semi-automática de
  acessibilidade.
Da Silva
http://www.dasilva.org.br/
Access Monitor
http://www.acessibilidade.gov.pt/accessmonitor/
Lista de validadores indicados pelo WAI:
       http://www.w3.org/WAI/ER/tools/complete
Validação de Acessibilidade


Avaliação automática de contraste.
Teste de contraste
http://www.vischeck.com/vischeck/ (teste de imagens e sites)
Validação de Acessibilidade
Avaliação humana por especialistas e usuários:
Aplicação de lista de verificação do WCAG por
    um especialista.
Avaliação por usuários deficientes, experts em
    acessibilidade.
Teste de acesso em diferentes ambientes,
    condições, navegadores, sistemas.
Testes com dispositivos móveis e de
    impressão.
Teste de usabilidade e acessibilidade com
    usuários.
Para onde caminha a
   acessibilidade
HTML5
 WAI ARIA
Multimídia
  Mobile
  Touch
Obrigado!



Horácio Soares
horacio@digitalacesso.com
horacio.soares@internativa.com.br
facebook.com/internativabrasil
(21) 9925-5404 - @horaciosoares

Mais conteúdo relacionado

Destaque

Grafica de colores
Grafica de coloresGrafica de colores
Grafica de colores
cinprach
 
Because
BecauseBecause
Because
fabian199221
 
Restaruant xines
Restaruant xinesRestaruant xines
Restaruant xinesclubsocial
 
Horario
HorarioHorario
Horario
andymanu10
 
Executive IT
Executive ITExecutive IT
Executive ITMd Tareq
 
Timetable, Liceo Industrial Metodista (Teacher: David Medina N)
Timetable, Liceo Industrial Metodista (Teacher: David Medina N)Timetable, Liceo Industrial Metodista (Teacher: David Medina N)
Timetable, Liceo Industrial Metodista (Teacher: David Medina N)
David Medina Novoa
 
Lideres 2
Lideres 2Lideres 2
Lideres 2
softcodia
 
Reunió informativa Eurovegas 12/07/2012
Reunió informativa Eurovegas 12/07/2012Reunió informativa Eurovegas 12/07/2012
Reunió informativa Eurovegas 12/07/2012
Laia P
 
Asamblea minera samaca (2)
Asamblea minera  samaca (2)Asamblea minera  samaca (2)
Asamblea minera samaca (2)
Pedro Hernandez
 
Origenes de vida
Origenes de vidaOrigenes de vida
Origenes de vida
Jared Aldaco
 
Wallabe
WallabeWallabe
Wallabe
Raquel Pinho
 
Ciberbullying
CiberbullyingCiberbullying
Ciberbullying
alessandra130200
 
Presentació pezi
Presentació peziPresentació pezi
Presentació peziNeyoner
 

Destaque (20)

Elekta UCS copy
Elekta UCS copyElekta UCS copy
Elekta UCS copy
 
Desen maini
Desen mainiDesen maini
Desen maini
 
Live room
Live roomLive room
Live room
 
Grafica de colores
Grafica de coloresGrafica de colores
Grafica de colores
 
Because
BecauseBecause
Because
 
Restaruant xines
Restaruant xinesRestaruant xines
Restaruant xines
 
Horario
HorarioHorario
Horario
 
Executive IT
Executive ITExecutive IT
Executive IT
 
1212
12121212
1212
 
Control room
Control roomControl room
Control room
 
Timetable, Liceo Industrial Metodista (Teacher: David Medina N)
Timetable, Liceo Industrial Metodista (Teacher: David Medina N)Timetable, Liceo Industrial Metodista (Teacher: David Medina N)
Timetable, Liceo Industrial Metodista (Teacher: David Medina N)
 
11
1111
11
 
Lideres 2
Lideres 2Lideres 2
Lideres 2
 
Reunió informativa Eurovegas 12/07/2012
Reunió informativa Eurovegas 12/07/2012Reunió informativa Eurovegas 12/07/2012
Reunió informativa Eurovegas 12/07/2012
 
F 1187
F 1187F 1187
F 1187
 
Asamblea minera samaca (2)
Asamblea minera  samaca (2)Asamblea minera  samaca (2)
Asamblea minera samaca (2)
 
Origenes de vida
Origenes de vidaOrigenes de vida
Origenes de vida
 
Wallabe
WallabeWallabe
Wallabe
 
Ciberbullying
CiberbullyingCiberbullying
Ciberbullying
 
Presentació pezi
Presentació peziPresentació pezi
Presentació pezi
 

Semelhante a Webinar: Acessibilidade Web para desenvolvedores

Desafios da Acessibilidade em Portais Governamentais | Acesso Digital (Horáci...
Desafios da Acessibilidade em Portais Governamentais | Acesso Digital (Horáci...Desafios da Acessibilidade em Portais Governamentais | Acesso Digital (Horáci...
Desafios da Acessibilidade em Portais Governamentais | Acesso Digital (Horáci...
Lumis
 
Webinar Usabilidade no E-commerce
Webinar Usabilidade no E-commerceWebinar Usabilidade no E-commerce
Webinar Usabilidade no E-commerce
Horácio Soares
 
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Horácio Soares
 
Acessibilidade como Fator de Inovação - Intercon 2009 - Imasters
Acessibilidade como Fator de Inovação - Intercon 2009 - ImastersAcessibilidade como Fator de Inovação - Intercon 2009 - Imasters
Acessibilidade como Fator de Inovação - Intercon 2009 - Imasters
Horácio Soares
 
Os Desafios do Design Mobile - Jun/2012
Os Desafios do Design Mobile - Jun/2012Os Desafios do Design Mobile - Jun/2012
Os Desafios do Design Mobile - Jun/2012
Horácio Soares
 
Web 2.0 + Foco no Usuário
Web 2.0 + Foco no UsuárioWeb 2.0 + Foco no Usuário
Web 2.0 + Foco no Usuário
guest479a40
 
Joomla e acessibilidade
Joomla e acessibilidadeJoomla e acessibilidade
Joomla e acessibilidade
Trídia Criação
 
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
GovBR
 
Acessibilidade Digital (19/02/2013)
Acessibilidade Digital (19/02/2013)Acessibilidade Digital (19/02/2013)
Acessibilidade Digital (19/02/2013)
Rodrigo Leme
 
Estratégia, Design e Acessibilidade Web - BlogcampRJ
Estratégia, Design e Acessibilidade Web - BlogcampRJEstratégia, Design e Acessibilidade Web - BlogcampRJ
Estratégia, Design e Acessibilidade Web - BlogcampRJ
Horácio Soares
 
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design MobileFrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
Horácio Soares
 
Circuito4x1 Acessibilidade e ecommerce-abril-2011
Circuito4x1 Acessibilidade e ecommerce-abril-2011Circuito4x1 Acessibilidade e ecommerce-abril-2011
Circuito4x1 Acessibilidade e ecommerce-abril-2011
Horácio Soares
 
Aplicações Web Acessíveis
Aplicações Web AcessíveisAplicações Web Acessíveis
Aplicações Web Acessíveis
Diego Pessoa
 
Estratégia, Melhor Idade e Design de Verdade
Estratégia, Melhor Idade e Design de VerdadeEstratégia, Melhor Idade e Design de Verdade
Estratégia, Melhor Idade e Design de Verdade
iMasters
 
Ux 7Masters - Estratégia, melhor idade e design de verdade
Ux 7Masters - Estratégia, melhor idade e design de verdadeUx 7Masters - Estratégia, melhor idade e design de verdade
Ux 7Masters - Estratégia, melhor idade e design de verdade
Horácio Soares
 
EDTED 2010 - Acessibilidade na Web
EDTED 2010 - Acessibilidade na WebEDTED 2010 - Acessibilidade na Web
EDTED 2010 - Acessibilidade na Web
Horácio Soares
 
Acessibilidade web
Acessibilidade webAcessibilidade web
Acessibilidade web
Ubirajara Pelli
 
Acessibilidade web
Acessibilidade webAcessibilidade web
Acessibilidade web
Fabíola Calixto
 
Usabilidade: Palestra no auditório do IBGE
Usabilidade: Palestra no auditório do IBGEUsabilidade: Palestra no auditório do IBGE
Usabilidade: Palestra no auditório do IBGE
Luiz Agner
 
Seminario Lep Ibge Slideshare
Seminario Lep Ibge SlideshareSeminario Lep Ibge Slideshare
Seminario Lep Ibge Slideshare
guest5ccda
 

Semelhante a Webinar: Acessibilidade Web para desenvolvedores (20)

Desafios da Acessibilidade em Portais Governamentais | Acesso Digital (Horáci...
Desafios da Acessibilidade em Portais Governamentais | Acesso Digital (Horáci...Desafios da Acessibilidade em Portais Governamentais | Acesso Digital (Horáci...
Desafios da Acessibilidade em Portais Governamentais | Acesso Digital (Horáci...
 
Webinar Usabilidade no E-commerce
Webinar Usabilidade no E-commerceWebinar Usabilidade no E-commerce
Webinar Usabilidade no E-commerce
 
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
 
Acessibilidade como Fator de Inovação - Intercon 2009 - Imasters
Acessibilidade como Fator de Inovação - Intercon 2009 - ImastersAcessibilidade como Fator de Inovação - Intercon 2009 - Imasters
Acessibilidade como Fator de Inovação - Intercon 2009 - Imasters
 
Os Desafios do Design Mobile - Jun/2012
Os Desafios do Design Mobile - Jun/2012Os Desafios do Design Mobile - Jun/2012
Os Desafios do Design Mobile - Jun/2012
 
Web 2.0 + Foco no Usuário
Web 2.0 + Foco no UsuárioWeb 2.0 + Foco no Usuário
Web 2.0 + Foco no Usuário
 
Joomla e acessibilidade
Joomla e acessibilidadeJoomla e acessibilidade
Joomla e acessibilidade
 
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
 
Acessibilidade Digital (19/02/2013)
Acessibilidade Digital (19/02/2013)Acessibilidade Digital (19/02/2013)
Acessibilidade Digital (19/02/2013)
 
Estratégia, Design e Acessibilidade Web - BlogcampRJ
Estratégia, Design e Acessibilidade Web - BlogcampRJEstratégia, Design e Acessibilidade Web - BlogcampRJ
Estratégia, Design e Acessibilidade Web - BlogcampRJ
 
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design MobileFrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
 
Circuito4x1 Acessibilidade e ecommerce-abril-2011
Circuito4x1 Acessibilidade e ecommerce-abril-2011Circuito4x1 Acessibilidade e ecommerce-abril-2011
Circuito4x1 Acessibilidade e ecommerce-abril-2011
 
Aplicações Web Acessíveis
Aplicações Web AcessíveisAplicações Web Acessíveis
Aplicações Web Acessíveis
 
Estratégia, Melhor Idade e Design de Verdade
Estratégia, Melhor Idade e Design de VerdadeEstratégia, Melhor Idade e Design de Verdade
Estratégia, Melhor Idade e Design de Verdade
 
Ux 7Masters - Estratégia, melhor idade e design de verdade
Ux 7Masters - Estratégia, melhor idade e design de verdadeUx 7Masters - Estratégia, melhor idade e design de verdade
Ux 7Masters - Estratégia, melhor idade e design de verdade
 
EDTED 2010 - Acessibilidade na Web
EDTED 2010 - Acessibilidade na WebEDTED 2010 - Acessibilidade na Web
EDTED 2010 - Acessibilidade na Web
 
Acessibilidade web
Acessibilidade webAcessibilidade web
Acessibilidade web
 
Acessibilidade web
Acessibilidade webAcessibilidade web
Acessibilidade web
 
Usabilidade: Palestra no auditório do IBGE
Usabilidade: Palestra no auditório do IBGEUsabilidade: Palestra no auditório do IBGE
Usabilidade: Palestra no auditório do IBGE
 
Seminario Lep Ibge Slideshare
Seminario Lep Ibge SlideshareSeminario Lep Ibge Slideshare
Seminario Lep Ibge Slideshare
 

Mais de Horácio Soares

UX Mobile - Testando com Usuários
UX Mobile - Testando com UsuáriosUX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
Horácio Soares
 
Experiência do Cliente no Varejo Online - E-commerce Brasil
Experiência do Cliente no Varejo Online - E-commerce BrasilExperiência do Cliente no Varejo Online - E-commerce Brasil
Experiência do Cliente no Varejo Online - E-commerce Brasil
Horácio Soares
 
UX e testes de usabilidade mobile
UX e testes de usabilidade mobileUX e testes de usabilidade mobile
UX e testes de usabilidade mobile
Horácio Soares
 
Mobile UX - MobileConf 2014 - RJ
Mobile UX - MobileConf 2014 - RJMobile UX - MobileConf 2014 - RJ
Mobile UX - MobileConf 2014 - RJ
Horácio Soares
 
A Experiência como Vantagem Competitiva (UX) - Goiânia 2014
A Experiência como Vantagem Competitiva (UX) - Goiânia 2014A Experiência como Vantagem Competitiva (UX) - Goiânia 2014
A Experiência como Vantagem Competitiva (UX) - Goiânia 2014
Horácio Soares
 
LEAN UX - Campus Party 2014
LEAN UX - Campus Party 2014LEAN UX - Campus Party 2014
LEAN UX - Campus Party 2014
Horácio Soares
 
Acessibilidade e Design Mobile - TablelessConf 2013 - SP
Acessibilidade e Design Mobile - TablelessConf 2013 - SPAcessibilidade e Design Mobile - TablelessConf 2013 - SP
Acessibilidade e Design Mobile - TablelessConf 2013 - SP
Horácio Soares
 
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Horácio Soares
 
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Horácio Soares
 
Mobile first - W3C WEB.BR 2012
Mobile first - W3C WEB.BR 2012Mobile first - W3C WEB.BR 2012
Mobile first - W3C WEB.BR 2012
Horácio Soares
 
InterAct 2010 - Acessibilidade e Inovação
InterAct 2010 - Acessibilidade e InovaçãoInterAct 2010 - Acessibilidade e Inovação
InterAct 2010 - Acessibilidade e Inovação
Horácio Soares
 
Interact 2009 Acessibilidade no Cafofo do Luli
Interact 2009 Acessibilidade no Cafofo do LuliInteract 2009 Acessibilidade no Cafofo do Luli
Interact 2009 Acessibilidade no Cafofo do Luli
Horácio Soares
 
Interact 2009 - Acessibilidade Web e Mobilidade
Interact 2009 - Acessibilidade Web e MobilidadeInteract 2009 - Acessibilidade Web e Mobilidade
Interact 2009 - Acessibilidade Web e Mobilidade
Horácio Soares
 
Monica M Fernandes - Sou+Web 2009 02 13
Monica M Fernandes - Sou+Web 2009 02 13Monica M Fernandes - Sou+Web 2009 02 13
Monica M Fernandes - Sou+Web 2009 02 13
Horácio Soares
 
Leda Spelta Sou+Web 2009 02 13
Leda Spelta Sou+Web 2009 02 13Leda Spelta Sou+Web 2009 02 13
Leda Spelta Sou+Web 2009 02 13
Horácio Soares
 
Ricardo Nunes - 5o Sou+Web: a união faz a acessibilidade
Ricardo Nunes - 5o Sou+Web: a união faz a acessibilidadeRicardo Nunes - 5o Sou+Web: a união faz a acessibilidade
Ricardo Nunes - 5o Sou+Web: a união faz a acessibilidade
Horácio Soares
 
Portais Corporativos - Mobile, PodCast, WebCast, Design
Portais Corporativos - Mobile, PodCast, WebCast, DesignPortais Corporativos - Mobile, PodCast, WebCast, Design
Portais Corporativos - Mobile, PodCast, WebCast, Design
Horácio Soares
 
Técnicas de Apresentação
Técnicas de ApresentaçãoTécnicas de Apresentação
Técnicas de Apresentação
Horácio Soares
 
Como Tornar Seu Site Atraente
Como Tornar Seu Site AtraenteComo Tornar Seu Site Atraente
Como Tornar Seu Site Atraente
Horácio Soares
 

Mais de Horácio Soares (19)

UX Mobile - Testando com Usuários
UX Mobile - Testando com UsuáriosUX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
 
Experiência do Cliente no Varejo Online - E-commerce Brasil
Experiência do Cliente no Varejo Online - E-commerce BrasilExperiência do Cliente no Varejo Online - E-commerce Brasil
Experiência do Cliente no Varejo Online - E-commerce Brasil
 
UX e testes de usabilidade mobile
UX e testes de usabilidade mobileUX e testes de usabilidade mobile
UX e testes de usabilidade mobile
 
Mobile UX - MobileConf 2014 - RJ
Mobile UX - MobileConf 2014 - RJMobile UX - MobileConf 2014 - RJ
Mobile UX - MobileConf 2014 - RJ
 
A Experiência como Vantagem Competitiva (UX) - Goiânia 2014
A Experiência como Vantagem Competitiva (UX) - Goiânia 2014A Experiência como Vantagem Competitiva (UX) - Goiânia 2014
A Experiência como Vantagem Competitiva (UX) - Goiânia 2014
 
LEAN UX - Campus Party 2014
LEAN UX - Campus Party 2014LEAN UX - Campus Party 2014
LEAN UX - Campus Party 2014
 
Acessibilidade e Design Mobile - TablelessConf 2013 - SP
Acessibilidade e Design Mobile - TablelessConf 2013 - SPAcessibilidade e Design Mobile - TablelessConf 2013 - SP
Acessibilidade e Design Mobile - TablelessConf 2013 - SP
 
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
 
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
 
Mobile first - W3C WEB.BR 2012
Mobile first - W3C WEB.BR 2012Mobile first - W3C WEB.BR 2012
Mobile first - W3C WEB.BR 2012
 
InterAct 2010 - Acessibilidade e Inovação
InterAct 2010 - Acessibilidade e InovaçãoInterAct 2010 - Acessibilidade e Inovação
InterAct 2010 - Acessibilidade e Inovação
 
Interact 2009 Acessibilidade no Cafofo do Luli
Interact 2009 Acessibilidade no Cafofo do LuliInteract 2009 Acessibilidade no Cafofo do Luli
Interact 2009 Acessibilidade no Cafofo do Luli
 
Interact 2009 - Acessibilidade Web e Mobilidade
Interact 2009 - Acessibilidade Web e MobilidadeInteract 2009 - Acessibilidade Web e Mobilidade
Interact 2009 - Acessibilidade Web e Mobilidade
 
Monica M Fernandes - Sou+Web 2009 02 13
Monica M Fernandes - Sou+Web 2009 02 13Monica M Fernandes - Sou+Web 2009 02 13
Monica M Fernandes - Sou+Web 2009 02 13
 
Leda Spelta Sou+Web 2009 02 13
Leda Spelta Sou+Web 2009 02 13Leda Spelta Sou+Web 2009 02 13
Leda Spelta Sou+Web 2009 02 13
 
Ricardo Nunes - 5o Sou+Web: a união faz a acessibilidade
Ricardo Nunes - 5o Sou+Web: a união faz a acessibilidadeRicardo Nunes - 5o Sou+Web: a união faz a acessibilidade
Ricardo Nunes - 5o Sou+Web: a união faz a acessibilidade
 
Portais Corporativos - Mobile, PodCast, WebCast, Design
Portais Corporativos - Mobile, PodCast, WebCast, DesignPortais Corporativos - Mobile, PodCast, WebCast, Design
Portais Corporativos - Mobile, PodCast, WebCast, Design
 
Técnicas de Apresentação
Técnicas de ApresentaçãoTécnicas de Apresentação
Técnicas de Apresentação
 
Como Tornar Seu Site Atraente
Como Tornar Seu Site AtraenteComo Tornar Seu Site Atraente
Como Tornar Seu Site Atraente
 

Último

Como fui de 0 a lead na gringa em 3 anos.pptx
Como fui de 0 a lead na gringa em 3 anos.pptxComo fui de 0 a lead na gringa em 3 anos.pptx
Como fui de 0 a lead na gringa em 3 anos.pptx
tnrlucas
 
Teoria de redes de computadores redes .doc
Teoria de redes de computadores redes .docTeoria de redes de computadores redes .doc
Teoria de redes de computadores redes .doc
anpproferick
 
Gestão de dados: sua importância e benefícios
Gestão de dados: sua importância e benefíciosGestão de dados: sua importância e benefícios
Gestão de dados: sua importância e benefícios
Rafael Santos
 
PRATICANDO O SCRUM Scrum team, product owner
PRATICANDO O SCRUM Scrum team, product ownerPRATICANDO O SCRUM Scrum team, product owner
PRATICANDO O SCRUM Scrum team, product owner
anpproferick
 
Por que escolhi o Flutter - Campus Party Piauí.pdf
Por que escolhi o Flutter - Campus Party Piauí.pdfPor que escolhi o Flutter - Campus Party Piauí.pdf
Por que escolhi o Flutter - Campus Party Piauí.pdf
Ian Oliveira
 
Orientações para utilizar Drone no espaço Brasil
Orientações para utilizar Drone no espaço BrasilOrientações para utilizar Drone no espaço Brasil
Orientações para utilizar Drone no espaço Brasil
EliakimArajo2
 
Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!
Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!
Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!
Annelise Gripp
 

Último (7)

Como fui de 0 a lead na gringa em 3 anos.pptx
Como fui de 0 a lead na gringa em 3 anos.pptxComo fui de 0 a lead na gringa em 3 anos.pptx
Como fui de 0 a lead na gringa em 3 anos.pptx
 
Teoria de redes de computadores redes .doc
Teoria de redes de computadores redes .docTeoria de redes de computadores redes .doc
Teoria de redes de computadores redes .doc
 
Gestão de dados: sua importância e benefícios
Gestão de dados: sua importância e benefíciosGestão de dados: sua importância e benefícios
Gestão de dados: sua importância e benefícios
 
PRATICANDO O SCRUM Scrum team, product owner
PRATICANDO O SCRUM Scrum team, product ownerPRATICANDO O SCRUM Scrum team, product owner
PRATICANDO O SCRUM Scrum team, product owner
 
Por que escolhi o Flutter - Campus Party Piauí.pdf
Por que escolhi o Flutter - Campus Party Piauí.pdfPor que escolhi o Flutter - Campus Party Piauí.pdf
Por que escolhi o Flutter - Campus Party Piauí.pdf
 
Orientações para utilizar Drone no espaço Brasil
Orientações para utilizar Drone no espaço BrasilOrientações para utilizar Drone no espaço Brasil
Orientações para utilizar Drone no espaço Brasil
 
Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!
Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!
Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!
 

Webinar: Acessibilidade Web para desenvolvedores

  • 6. Quem mais sofre com a falta de acessibilidade?
  • 7.
  • 8. Marta e suas amigas…
  • 9. Analfabeto funcional Um em cada cinco brasileiros (20,3%) é analfabeto funcional, de acordo com a Pnad (Pesquisa Nacional por Amostra de Domicílios) 2009, divulgada pelo IBGE. Homem de costas, sentado de frente para um quadro branco sem nada escrito.
  • 10. Calvin, pouca experiência e medo do computador Homem com muito medo olhando por cima de um notebook.
  • 11. The Web is not fully accessible to perhaps 2 billion, including people with … Five groups of people for whom Web accessibility can be challenging: Challenges due to aging Literate in poorly-supported Disabilities languages Low literacy Little experience with technology
  • 12. E além desses 5 grupos?
  • 13. Gabriel compenetrado, olhando para o Agora ele está olhando e monitor e clicando com o mouse. brincando como teclado. Gabriel, linguagem em desenvolvimento...
  • 14. Max, com tendinite, usando o mouse com a mão trocada. Homem com expressão de desespero, usando o mouse com a mão esquerda
  • 15.
  • 16. Como o Luli disse no Digitalks no Rio em 2012: “Nesse mundo Mobile, somos todos daltónicos e sofremos do Mal de Parkinson”
  • 17. “design for mobile people,... ...not for mobile device” Foto: Rosenfield Media
  • 18. Todos nós na primeira experiência. Um criança com camisa social e gravata em frente a um notebook
  • 19. E finalmente, o bilionário cego!!! Cifrão desenhado com moedas douradas
  • 20. Dilbert fazendo parte do logotipo do Google e falando “eu não posso ver”. Google, o bilionário cego!!! É apenas um robô que indexa conteúdo em texto.
  • 22. Estatística: segundo IBGE no Brasil (2000) 180 milhões de habitantes; 24,3 milhões de pessoas com deficiência; 15 milhões de pessoas com mais de 65 anos; 5,4 milhões de pessoas com mais de 65 anos e que já possuem alguma deficiência.
  • 24. Dos cerca de 190 milhões de brasileiros, aqueles com pelo menos uma deficiência, seja visual, auditiva, motora ou mental, somam 45 milhões (23,9%).
  • 27. Decreto Lei nº 6.949 (ago/09), onde a convenção da ONU ganhou força de lei.
  • 28. Como anda a acessibilidade digital no Brasil?
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34. Motivação pelo decreto de lei 5296 Resultado: acessibilidade para inglês ver.
  • 35. Estatísticas do W3C 2,5% em 2010 5% em 2011 Sem erros de validação automática de HTML, CSS e acessibilidade.
  • 36. Acessibilidade Web E quais são os custos?
  • 37. Curva de aprendizagem • Alto custo no redesign • Baixo em novos projetos • Diminui com tempo • Validação • Manutenção • Melhoria contínua • Mudança de cultura
  • 38. Qual é o custo da qualidade?
  • 40. Possibilidade de atingir 100% do público alvo;
  • 41. Atender melhor todas as pessoas
  • 42. Fidelizar clientes Homem de terno comemorando
  • 43. Mais fácil de usar e aprender
  • 44. Proteção contra processos pela falta da acessibilidade
  • 45. Manutenção mais rápida e barata, melhor performance… Visualizar os benefícios da acessibilidade
  • 46. Valorização da Diversidade e Responsabilidade Social. Mãos entrelaçadas
  • 47. Vantagem competitiva Mulher com notebook em sinal de ok
  • 48. Melhoria da qualidade. Mãe e filha felizes na praia dando uma estrela
  • 49. Um caminho para acessibilidade vem da busca pelas melhores IDADES
  • 51. } Acessibil IDADE
  • 52.
  • 53.
  • 54.
  • 56. Comercial Mercado Livre “Eu compro o que quiser, 2011 senão quiser, não compro” Comercial do Mercado Livre 2011
  • 60.
  • 61. 10 princípios de UX do Google Princípio 3. O simples é poderoso.
  • 62.
  • 63. Em uma interface perfeita para as pessoas, elas nunca deveriam errar, principalmente no mundo mobile…
  • 64. } Acessibil Usabil Simplic Interativ IDADE
  • 65.
  • 66.
  • 67. } Acessibil Usabil Simplic Interativ Veloc IDADE
  • 68.
  • 69. X
  • 70. X
  • 71. 10 princípios de UX do Google Princípio 2 - cada milisegundo importa. Melhor definição de milisegundo?
  • 72. } Acessibil Usabil Simplic Interativ Veloc IDADE Encontrabil
  • 73.
  • 74. } Acessibil Usabil Simplic Interativ Veloc Encontrabil IDADE Atrativ
  • 75.
  • 76. 10 princípios de UX do Google Princípio 8 – agrade aos olhos sem distrair a mente
  • 77. } Acessibil Usabil Simplic Interativ Veloc Encontrabil IDADE Atrativ Util
  • 78. 10 princípios de UX do Google Princípio 1 – foque nas pessoas: suas vidas, trabalho, sonhos.
  • 79. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  • 80. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  • 81. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  • 82. Observação e identificação de um problema...
  • 83. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  • 84. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  • 85.
  • 86. } Acessibil Usabil Simplic Interativ Veloc Encontrabil IDADE Atrativ Util Facil
  • 88.
  • 89. } Acessibil Usabil Simplic Interativ Veloc Encontrabil IDADE Atrativ Util Facil Portabil …
  • 90.
  • 91. A melhor idade vem da: } Investigação Observação Colaboração Análise Avaliação Validação
  • 94. Recomendações para acessibilidade do conteúdo da Web 1.0 e 2.0 do W3C WCAG Web Content Accessibility Guidelines  WCAG 1.0 – 05 de maio de 1999 Em português: http://www.utad.pt/wai/wai-pageauth.html  WCAG 2.0 – 11 de dezembro de 2008 http://www.ilearn.com.br/TR/WCAG20/
  • 97. W3C – WAI Web Accessibility Initiative 1.WCAG (Web Content Accessibility Guidelines) recomendações para acessibilidade do conteúdo da Web. 2.UAAG 3.ATAG 4.ARIA Imagem de bonecos representando pessoas de mãos dadas .
  • 98. W3C – WAI Web Accessibility Initiative 1.WCAG 2.UAAG (The User Agent Accessibility Guidelines) diretrizes de acessibilidade para navegadores e tecnologias assistivas. 3.ATAG 4.ARIA
  • 99. W3C – WAI Web Accessibility Initiative 1.WCAG 2.UAAG 3.ATAG (Authoring Tool Accessibility Guidelines) ferramentas de criação de páginas/conteúdo Web. 4.ARIA
  • 100. W3C – WAI Web Accessibility Initiative 1.WCAG 2.UAAG 3.ATAG 4.ARIA (Accessible Rich Internet Applications) Aplicações Internet Ricas e Acessíveis.
  • 101. Principais barreiras de acessibilidade
  • 102. Imagens Recomendação 1.1 Alternativas em Texto (Referências no WCAG 1.0 e WCAG 2.0) : Fornecer alternativas em texto para qualquer conteúdo não textual.
  • 103. Imagens Obs.: Deve ser fornecido um equivalente textual para a imagens. A descrição deve ser a melhor e menor possível.
  • 104. Imagens e links <a href=¨#¨> </a>
  • 105. Imagens e links <a href=¨#¨> <img src='http://[…]xxx.jpg' alt=“70 Anos de Pelé – fotos e vídeos” width='XXX' height='XXX' /> </a>
  • 106. Imagem com descrição ineficiente Banner do MCA - Módulo Criança e Adolescente onde a descrição da imagem é apenas a sigla “MCA”.
  • 107. Elementos sem descrição textual adequada (imagens, flash, etc.)
  • 108.
  • 109. Links
  • 110. Links: identificação de destino Recomendação 13.1 (Referência no WCAG 1.0): Identifique claramente o alvo de cada link. Recomendação 2.4 Navegável (Referência no WCAG 2.0 – critério 2.4.4 Finalidade do link): Fornecer formas de ajudar os usuários a navegar, localizar conteúdos e determinar o local onde estão.
  • 111. Links
  • 112. “Clique aqui”, “Saiba mais”, “veja Mais”… 41.700.000 respostas para “clique aqui” no Google.
  • 113. Links Saída acessível
  • 114. Links Link no título da chamada com cara de link. S
  • 115. Links Title aplicado ao link. S
  • 116. Se ao entrar no link o usuário for desligado do site corrente. - Links que abrem novos sites sem que o usuário note que foi levado para outro site.
  • 117. ... <li> <a href="http://.../serialization/"> <span lang="en">Building Accessible Websites</span>. <img src="novo_site.gif" alt="abre novo site"> </a><br> Excelente livro em inglês - versão digital. </li> ...
  • 118. Se ao entrar no link o usuário for desligado do site corrente em uma nova janela. - Essa prática não é recomendada pelo W3C. Links que abrem em nova janela sem que o usuário seja avisado.
  • 119. ... <li> <a href="http://.../serialization/"> <span lang="en">Building Accessible Websites</span>. <img src="novo_site.gif" alt="novo site em nova janela"> </a><br> Excelente livro em inglês - versão digital. </li> ...
  • 120. Links para formatos diferentes do HTML. - Links para arquivos em PDF, DOC, XLS, PNG, entre outros, sem a devida descrição do tipo de arquivo que será baixado e seu tamanho.  
  • 121. Quando não se tem ideia: Clique aqui Saiba mais Continue lendo Veja mais
  • 122. Quando somos surpreendidos: Conheça a legislação Leia o manual do produto
  • 123. Quando falta informação: Faça download da legislação Baixe aqui o manual do produto
  • 124. Sem surpresas! Faça download da legislação (formato doc, 1.32 mb) Baixe aqui o manual do produto (formato pdf, 2.47 mb)
  • 125. Sem surpresas e poluição Faça download da legislação Baixe aqui o manual do produto
  • 126. Sem surpresas e poluição Faça download da legislação Formato DOC - 1.32 Mb Baixe aqui o manual do produto
  • 127. Sem surpresas e poluição Faça download da legislação Baixe aqui o manual do produto Formato PDF - 2.47 Mb Recomendações: ● A informação pode estar escondida, mas deve aparecer quando o elemento ganhar foco com o mouse ou teclado. Essa recomendação não é válida para MOBILE. ● Informações relevantes não devem ser incluídas via atribulo TITLE.
  • 128. O Mundo ideal! Baixe aqui o manual do produto (formato pdf, 2.47 mb) Baixe aqui o manual do produto (formato doc, 2.84 mb) Baixe aqui o manual do produto (formato html, 1.24 mb) Baixe aqui o manual do produto (formato txt, 705 kb)
  • 129. Mundo ideal sem poluição Manual do produto Para baixar: Selecione um formato  Baixar o Manual PDF – tamanho 1.5 Mb HTML – tamanho 0.7 Mb TXT – tamanho 0.5 Mb
  • 130. Links dependentes de script Recomendação 6.3 (Referência no WCAG 1.0 ) : Certifique-se que as páginas são acessíveis e usáveis mesmo quando as tecnologias utilizadas não são suportadas ou se encontram desligadas. Recomendação 4.1 (Referência no WCAG 2.0 ) : Maximizar a compatibilidade com atuais e futuros agentes de usuário, incluindo tecnologias assistivas.
  • 131. Visão do inferno <a href=“javascript:meuFruFruFavorito();” style=“color:#900;”> Clique aqui!!! </a> E esse exemplo não é dos piores...
  • 132. Mundo (quase) ideal HTML <a href=“/algo.html” id=“frufru”>Meu frufru favorito</a> CSS #frufru{ color:#900; } JavaScript var frufru = document.getElementById(‘frufru’); function meuFruFruFavorito() { [codigo] } frufru.onclick = meuFruFruFavorito; frufru.onkeypress = meuFruFruFavorito;
  • 133. Links e campos de formulários que não se parecem como tal.
  • 134.
  • 135.
  • 136. Design pesado e com poucos espaços entre elementos. Uso de tecnologias em desuso e pouco acessívels
  • 137.
  • 138. Idioma
  • 139. Idioma Identificar claramente quaisquer mudanças na linguagem natural do texto ou equivalentes textuais. Recomendação 4.1 (Referência no WCAG 1.0) : Identifique claramente alterações ocorridas no idioma do texto do documento e em qualquer equivalente textual. Recomendação 3.1 (Referência no WCAG 2.0) : Legível: Tornar o conteúdo de texto legível e compreensível - 3.1.2 Linguagem das Partes.
  • 140. Idioma <ul class="topo_idioma"> <li><a href="http://www.xyz.com/en/"> <span Lang="en"> English </span> </a></li> <li> <li><a href="http://www.xyz.com/es/"> <span Lang="es"> Español </span> </a></li> <li>... </ul>
  • 141. - Uso de aspectos de apresentação para veicular informação (cores, disposição na página, etc.)
  • 144. Baixo contraste e informações com foco em cores
  • 145.
  • 147. CAPTCHA caPTcHa Imagem: http://www.slideshare.net/jared_w_smith/web-accessibility-gone-wild-now-even-more-wilder
  • 148. Captcha http://sam.zoy.org/pwntcha/
  • 149. Captcha (solução inacessível e insegura) (http://www.webvisum.com/en/main/download)
  • 150. CAPTCHA and BBC iD http://www.bbc.co.uk/blogs/bbcinternet/2010/10/captcha_and_bbc_id.html CAPTCHA, herói ou vilão? http://acessodigital.net/art_captcha-heroi-ou-vilao.html
  • 152. Semântica Validação automática não garante uma boa semântica
  • 154. Navegação 1) Semântica: Headers: <H1>...<H6> Parágrafos: <p>texto</p> Listas: <ul><ol><dl> Tabelas: <table>...</table> Formulários: <form>...</form>
  • 155. Navegação Recomendação 2.4 Navegável (Referência no WCAG 2.0): Fornecer formas de ajudar os usuários a navegar, localizar conteúdos e determinar o local onde estão. - 2.4.1 Ignorar Blocos: Disponibilizar um mecanismo para ignorar blocos de conteúdo que são repetidos.
  • 156. Navegação O primeiro elemento ativo da página deve ser um link (salto) que nos permita alcançar diretamente o conteúdo principal. <a href=”#conteudo” class=”salto”> Salto para conteúdo </a> <h2><a name=”conteudo” id=”conteudo”> Título do H2 </a> </h2> <a name=”conteudo” id=”conteudo”></a>
  • 158. Navegação 2)Salto visível com foco http://webstanderds.org
  • 159. Navegação Atalhos para principais áreas do site Recomendação 9.5 (Referência no WCAG 1.0): Providencie teclas de atalho para links importantes. Recomendação 2.4 Navegável (Referência no WCAG 2.0): Fornecer formas de ajudar os usuários a navegar, localizar conteúdos e determinar o local onde estão. - 2.4.1 Ignorar Blocos: Disponibilizar um mecanismo para ignorar blocos de conteúdo que são repetidos.
  • 160. Navegação São três os tipos de teclas de atalho na Web: - teclas de atalho dos navegadores: como não há uma padronização entre eles, cada browser tem seu próprio grupo de atalhos. - teclas de atalho próprias aos leitores de tela e outras tecnologias assistivas. - teclas de atalhos próprias ao site.
  • 161. Navegação <a href="pesquisa.html" title="tecla de atalho [1] para pesquisa" ACCESSKEY="1"> Pesquisa [1] </a>
  • 162. Navegação Navegação e orientação: Recomendação 2.4 Navegável (Referência no WCAG 2.0): Fornecer formas de ajudar os usuários a navegar, localizar conteúdos e determinar o local onde estão. Para facilitar a navegação pelas diferentes áreas do site, é recomendada a divisão da página em regiões navegáveis diretamente com leitores de tela. Para tal sugerimos a utilização de ARIA Landmark Roles: http://www.w3.org/TR/wai-aria/roles#landmark_roles , - É um recurso já implementado em 2 leitores de tela usados no Brasil - Jaws (muito usado) e NVDA (aberto e gratuito).
  • 163. Navegação Algumas regiões navegáveis com Landmark ARIA: banner – normalmente é utilizado como a região do cabeçalho do site, onde são incluídos o logotipo, slogan, etc. complementary – área complementar ao conteúdo principal da página, por exemplo, a coluna a direita da página onde podem ser incluídos outros conteúdos. contentinfo - área que contém as informações sobre o site como, por exemplo, copyright, privacidade, endereço e outras informações comuns ao rodapé da página. main – Conteúdo principal da página. Área com conteúdo centrado no assunto/tema da página Web. navigation – área de navegação do site.
  • 164. Navegação Landmark ARIA: <div role="banner"> [Conteúdo do cabeçalho] </div> <div role="navigation"> [Navegação] </div> <div role="search"> [Busca] </div> <div role="main"> [Conteúdo principal] </div> <div role="complementary"> [Conteúdo principal] </div>
  • 165.
  • 166.
  • 167. Accessible Rich Internet Applications ARIA NOW HTML 4 + ARIA HTML5 + ARIA http://www.abilitynet.org.uk/accessibility2/wp-content/uploads/2009/09/HTML5_Accessibility_faulkner.ppt
  • 168. Navegação pelo teclado - barreiras: dropdown Keyboard Accessibility for Web Applications http://snook.ca/archives/accessibility_and_usability/keyboard-accessibility-for-web-apps
  • 169.
  • 170. Menu DropDown O Professor Maurício Samy Silva, em seu livro Construindo sites com CSS e (X)HTML, propõe uma solução para um menu em cascata acessível via teclado: http://livrocss.com.br/cap_09/arquivo_9.24-a.html
  • 171. Menu expansível Tutorial - Accessible expanding and collapsing menu http://www.456bereastreet.com/archive/200705/accessible_expanding_and_collapsing_menu/
  • 172. Erro ao utilizar REFRESH Recarregar a página automáticamente: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="refresh" content="300" /> ...
  • 173. Erro ao utilizar REFRESH
  • 174. Utilizar o evento onChange em combos (menus de seleção) Recomendação 8.1 (Referência no WCAG 1.0) : Criar elementos de programação, tais como programas interpretáveis e applets, diretamente acessíveis pelas tecnologias de apoio ou com elas compatíveis. Recomendação 2.1 (Referência no WCAG 2.0) : Acessível por Teclado: Fazer com que toda a funcionalidade fique disponível a partir do teclado. Recomendação 3.2 (Referência no WCAG 2.0) : Previsível: 3.2.1 Em Foco: Quando um componente recebe o foco, ele não inicia uma alteração de contexto.
  • 175. Utilizar o evento onChange em combos (menus de seleção) Quando um usuário com deficiência visual ou motora (que usa o teclado para navegar) utiliza o evento onchange num menu select (combo box), a primeira opção é selecionada automaticamente sem que o usuário a tenha escolhido, antes que o usuário possa conhecer as opções disponíveis.
  • 176.
  • 177.
  • 178. Utilizar o evento onChange em combos (menus de seleção)
  • 179. Eevento onChange em combos Solução 1: Retirar o evento onchange, permitindo assim a navegação via teclado pelas opções da combo box. Para confirmar a seleção do item, deve ser disponibilizado um submit (botão de Ok).
  • 181. Formulários  Fieldset - <form action="blabla.htm"> - <fieldset> - Nome <input type="text"><br> - Endereço <input type="text"> - </fieldset> - </form>
  • 182. Formulários  legend - <form action="blabla.htm"> - <fieldset> <legend>Dados Pessoais</legend> - Nome <input type="text"><br> - Endereço <input type="text"> - </fieldset> - </form>
  • 183. Formulários  label - <form action="blabla.htm"> - <fieldset> <legend>Dados Pessoais</legend> - <label for=“non"> Nome <input type="text" id=“non"> - </label> - <label for=“end"> Endereço <input type="text“id=“end"> - </label> - </fieldset> - </form>
  • 184. <form action="blabla.htm"> - <fieldset> - <legend>Dados Pessoais</legend> - <label for="non"> - Nome <input type="text" id="non"> - </label> - <label for="end"> - Endereço <input type="text" id="end"> - </label> - <fieldset><legend>Sexo</legend> - <label for="m"><input type="radio" name="g" id="m">Masculino</label> - <label for="f"> - <input type="radio" name="g” id="f">Feminino</label> - </fieldset> - </fieldset> - </form>
  • 185. Formulários  optgroup <form id="form" method="post" action=""><p> <label for="lista-de-mercado"> Lista de Mercado:<br /> <select name="select" id="lista-de-mercado"> <option selected="selected" value="1"> Escolha um item</option> <optgroup label="Laticíneos"> <option value="2">Leite desnatado</option> <option value="3">Queijo ralado</option> <option value="4">Queijo prato</option> </optgroup> <optgroup label="Verduras"> <option value="6">Alface</option> <option value="7">Alho</option> </optgroup> </select> </label> </form>
  • 187. Tabelas Uso errado dos elementos HTML como tabelas e DIVs. Recomendação 5.3. (Referência no WCAG 1.0): Não use tabelas para layout (disposição de páginas) a não ser que a tabela faça sentido quando linearizada. Recomendação 1.3 Adaptável (Referência no WCAG 2.0 – critério 1.3.2 Sequência com Significado): Criar conteúdos que possam ser apresentados de diferentes maneiras sem perder informação ou estrutura.
  • 188. Tabelas <table> <tr> <td>Janeiro</td> <td>Fevereiro</td> <td>Março</td> </tr> <tr> <td>10</td> <td>15</td> <td>25</td> </tr> </table>
  • 189. Tabelas - summary <table summary="Vendas de bananas no primeiro trimestre 2011 - tabela com 2 linhas e 3 colunas"> <tr> <td>Janeiro</td> <td>Fevereiro</td> <td>Março</td> </tr> <tr> <td>10</td> <td>15</td> <td>25</td> </tr> </table>
  • 190. Tabelas - caption <table summary="Vendas de bananas no primeiro trimestre 2011 - tabela com 2 linhas e 3 colunas"> <caption>Vendas de bananas - 1o. semestre</caption> <tr> <td>Janeiro</td> <td>Fevereiro</td> <td>Março</td> </tr> <tr> <td>10</td> <td>15</td> <td>25</td> </tr> </table>
  • 191. Tabelas – id/headers <table summary="Vendas de bananas no primeiro trimestre 2011 - tabela com 2 linhas e 3 colunas"> <caption>Vendas de bananas - 1o. semestre</caption> <tr> <th id=“jan">Janeiro</th> <th id=“fev">Fevereiro</th> <th id=“mar">Março</th> </tr> <tr> <td headers=“jan">10</td> <td headers=“fev">15</td> <td headers=“mar">25</td> </tr> </table>
  • 192. Tabelas – scope/col/row <table summary="Vendas de bananas no primeiro trimestre 2011 - tabela com 2 linhas e 3 colunas"> <caption>Vendas de bananas - 1o. semestre</caption> <tr> <th scope=“col”>Janeiro</th> <th scope=“col”>Fevereiro</th> <th scope=“col”>Março</th> </tr> <tr> <td>10</td> <td>15</td> <td>25</td> </tr> </table>
  • 195. Portal Brasil  GTMETRIX: http://gtmetrix.com
  • 197. Mudança de foco (lightbox e lightwindows)  Mudanças de foco causam desorientação e problemas de navegação.  Usuários não tem a menor idéia de como achar o novo conteúdo atualizado.  As mudanças de foco impedem que usuários tenham uma visão completa da página. - Building a Better Lightbox (recomendações de usabilidade) http://www.habdas.org/2009/03/29/building-a-better-lightbox/
  • 198.
  • 199.
  • 200.
  • 201.
  • 202. Modal acessível (prática) http://webhipster.com/testing/accessibi lity/modal-dialog-latest/
  • 203. Players de vídeo e áudio.
  • 204. Principais barreiras de acessibilidade em vídeo: • Os controles do player de vídeo são inacessíveis pelo teclado. • Os controles do player de vídeo podem ser acessados pelo teclado, mas não apresentam rótulos adequados. • Os vídeos incluídos diretamente na página, com o uso de um player externo, começam a tocar assim que a página é carregada. • ramente sobre esta função..
  • 205. • Os vídeos não possuem audiodescrição. • Os vídeos não possuem legendas. • Os vídeos não possuem legenda oculta ("closed caption"). • Os vídeos não possuem transcrição. • Quando um vídeo é disponibilizado para download, o respectivo link não informa claramente sobre esta função..
  • 206. Validação de Acessibilidade Globo em ambiente futurista.
  • 207. Validação de Acessibilidade Validação automática dos Padrões Web: XHTML e CSS.
  • 208. Validador W3C – HTML/XHTML http://validator.w3.org/
  • 209. Validador W3C – CSS http://jigsaw.w3.org/css-validator/
  • 210. Validação de Acessibilidade Validação automática e semi-automática de acessibilidade.
  • 213. Lista de validadores indicados pelo WAI: http://www.w3.org/WAI/ER/tools/complete
  • 214. Validação de Acessibilidade Avaliação automática de contraste.
  • 216. Validação de Acessibilidade Avaliação humana por especialistas e usuários: Aplicação de lista de verificação do WCAG por um especialista. Avaliação por usuários deficientes, experts em acessibilidade. Teste de acesso em diferentes ambientes, condições, navegadores, sistemas. Testes com dispositivos móveis e de impressão. Teste de usabilidade e acessibilidade com usuários.
  • 217. Para onde caminha a acessibilidade
  • 218. HTML5 WAI ARIA Multimídia Mobile Touch