Baixar para ler offline
Carregado porTiago Rafael Leite Neves
Acessibilidade na Prática
O documento apresenta a biografia de Tiago Rafael L. Neves e seu trabalho com acessibilidade na web. Ele resume sua formação acadêmica e experiência profissional, destacando projetos iniciados em 2013 para tornar sites acessíveis. O texto também explica porque a acessibilidade é importante para todos os usuários e lista barreiras e benefícios, além de fornecer dicas técnicas para desenvolvimento web acessível.
Acessibilidade na Prática
- 1.
- 2. TIAGO RAFAEL L. NEVES about.me/rafaneves tiago@w3c.ae #quemsoueu FATECJAHU – Informática c/ Gestão Prod. Ind. UNINTER – MBA em Adm. e Marketing
- 3.
- 4. 1996 #comochegueiaqui * Imagem:Google Imagens
- 5. 1999 </> #comochegueiaqui * Aparênciado site em 2002
- 6.
- 7. Uso do CSS Fimdas TABELAS TABLELESS Importância da SEMÂNTICA #comochegueiaqui
- 8.
- 9.
- 10. 2014 Premiação realizada peloW3C Brasil, em parceria com o NIC.br, CGI.br, AACD e Ministério do Planejamento e Secretaria dos Direitos da Pessoa com Deficiência - São Paulo. Visa estimular e fomentar o desenvolvimento de sites e sistemas acessíveis.
- 13.
- 14. 4ª EDIÇÃO Inscrições até11/05/2016 Prêmio até R$5.000,00 http://premio.w3c.br
- 15.
- 16. “ O poderda WEB está em sua universalidade. Ser acessada por todos, independente de deficiência, é um aspecto essencial.” Sir Tim Berners-Lee Inventor da WWW * Fonte Wikipedia - 2014
- 17.
- 18. TODOS (Mesmo que sejapor um curto espaço de tempo)
- 19. QUESTÕES VISUAIS Cegueira totalou grave Problemas visuais parciais Cegueira temporária Daltonismo
- 20. QUESTÕES AUDITIVAS Surdez total Surdezparcial Dispositivos sem som
- 21. QUESTÕES MOTORAS Mobilidade reduzidatemporariamente Navegação por teclado Navegação por apontador Tetraplegia Problemas na coordenação fina Tremores
- 22. PRINCIPAIS BARREIRAS * Falta dedocumentação em português * Documentação muito técnica, não amigável * Pouca divulgação sobre acessibilidade * Pequena demanda por parte dos clientes * Baixo conhecimento dos desenvolvedores
- 23. MAIORES BENEFÍCIOS * Responsabilidade Moral *Recompensa Financeira * 24% dos brasileiros tem alguma deficiência** * Diferenciação no mercado WEB #devs ** Fonte: IBGE 2010 * É LEI! (Artigo 63 do Estatuto da Pessoa com Deficiência)
- 24.
- 25.
- 26.
- 27. DIV - topo DIV- menu DIV - corpo DIV - rodape ERRADO
- 28.
- 29.
- 30. <ul> EXEMPLO DE MENU <li><ahref=“#” title=“”>MENU</a></li> <li><a href=“#” title=“”>MENU</a></li> <li><a href=“#” title=“”>MENU</a></li> </ul>
- 31.
- 32.
- 33.
- 34. <html lang=“pt-br”> Linguagem noformato ISO 639-1 <p lang=“en-us”>Hardware</p>
- 35.
- 36. <a href=‘#’ title=“ABC”> NoHTML5 o atributo TITLE pode ser aplicado em qualquer elemento <attr title=“World Wide Web”>WWW</attr>
- 37.
- 38. <img src=“foto.jpg” alt=“”/>PÉSSIMO
- 39.
- 40. <img src=“foto.jpg” alt=“Elefantespaisagem” />REGULAR
- 41. <img src=“foto.jpg” alt=“Dois elefantescaminhando em uma paisagem árida com pôr-do-sol ao fundo” />
- 42. DICA Para imagens apenasestéticas, deixe o atributo ALT em branco e use o aria-hidden
- 43.
- 44. Mostrar qual éo link ativo para navegação pelo teclado IDENTIFICAR LINK ATIVO a:focus { outline: thin solid #00F; }
- 45. O primeiro itemdo site deve ser um link para o conteúdo principal da página em questão. CONTEÚDO PRINCIPAL
- 46.
- 47. Manter uma relaçãoadequada de contraste entre a fonte e o fundo. CONTRASTE MÍNIMO Use o software Colour Contrast Analyser https://www.paciellogroup.com/resources/contrastanalyser/
- 48.
- 49. <label for=“nome”> Nome completo </ul> <inputtype=“text” id=“nome” title=“” />
- 50.
- 51.
- 52. <ul role=“navigation”> <li role=“menubar”> <ahref=“#” title=“” role=“menuitem”> MENU </a> </li> </ul>
- 53. role=“banner” Pode ter apenas1 por página. Define a área com informações sobre o site / empresa
- 54. role=“main” Pode ter apenas1 por página. Define a área com as informações principais (conteúdo) da página.
- 55. role=“search” Pode ter váriospor página. Define a área com uma ferramenta de pesquisa do site
- 56. aria-expanded=“true|false” Define o estadode um elemento do “expansível”, como uma tabela ou menu tipo “acordeon”
- 57. aria-describeby=“elemento” Define um elementoque tem a descrição para um outro elemento... <button aria-describeby=“descreve”...> ... <div id=“descreve”> Descrição do item</div>
- 58. aria-haspopup=“true|false” Define se umelemento tem Sub-itens no esquema popup (como um menu)
- 59.
- 60.
- 61.
- 62. TIAGO RAFAEL L.NEVES about.me/rafaneves tiago@w3c.ae slideshare.net/labombajau OBRIGADO!
Notas do Editor
- #3 Quem sou eu? Dados Básicos
- #4 Sobre a W3 – Incubadora Tecnológica para Startups e novos negócios
- #5 Como conheci a internet. Queria saber como fazer um site Fiz alguns sites pessoais
- #6 Primeiro site não-pessoal (.com.br)
- #7 Vi o simples HTML3 ser substituído por um HTML4 muito mais interativo. Anos depois testemunhei o HTML4 dando espaço para toda semântica do HTML5
- #8 Também acompanhei várias mudanças na forma de se programar. E todas estas mudanças levaram a mim, e a internet no todo à convergir para a ACESSIBILIDADE
- #10 2013 – Primeiro projeto para um cliente em 2014 decidi me aprofundar e aplicar em um projeto maior e não destinado apenas para pessoas com deficiência E foi sem querer que acabei indo participar do....
- #11 Prêmio Sobre o prêmio e sobre como foi minha participação
- #12 Sobre o dia da premiação final e apresentação para os jurados
- #13 Resultado: 2ª colocação na categoria E-commerce Único site finalista que não era voltado para o público com deficiência
- #14 Quem quiser visitar
- #15 Como participar
- #16 O que é acessibilidade? Qual sua importância e principais barreiras?