Pensando uma
aplicação
Acessível
com
HTML5!
Felipe
Sousa
Front end Developer
Pipoca Digital
@felipz_sousa
#html5acessivel
#fif2016
Qual é o seu público-alvo?
Dados
imagem dos dados de pessoas conectadas no mundo em 2015
State of Connectivity 2015 - A Report on Global Internet Access.

~3.2 bilhões de

Pessoas

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
~Tim Berners-Lee, W3C Director.
Apenas 5% da web é acessível!
http://www.un.org/disabilities/convention/conventionfull.shtml
Article 9 - Accessibility

2.f - Promote other appropriate forms of assistance and support to persons with disabilities to ensure their access to information.

2.g - Promote access for persons with disabilities to new information and communications technologies and systems, including the Internet.
Tools
An accessible website does not rely on the mouse; it provides all functionality via a keyboard.
https://www.w3.org/standards/webdesign/accessibility
  1. Teclado BrailleType
  2. Navegadores Textuais
  3. Ampliadores de Tela
  4. Leitores de Tela

1.Teclado BrailleType

2.Navegadores Textuais

imagem de um navegador textual.
  1. Lynx

3.Ampliadores de Tela

imagem de uma pessoa usando um ampliador de tela

4.Leitores de Tela

  1. NVDA
  2. JAWS
  3. Window Eyes
  4. Orca
How I do it?
  1. HTML5
  2. WAI-ARIA
  3. Técnicas no CSS
  4. AllyJS

1.HTML5

imagem html5 apis
Semântica.
imagem com comparação de sintaxe do html5 com outras versões.

DIV NÃO TEM VALOR SEMÂNTICO!

imagem da semantica do html5
imagem que mostra a estrutura semantica do html5
lang="language"
imagem do atributo lang no elemento html.
imagem com attributo lang em paragrafos.
imagem com attributo lang em paragrafos com exemplo da palavra 'fuleragem'.
alt="image description"
exemplo do atributo alt no elemento img.
exemplo do atributo alt no elemento input.
tabindex="number"
imagem com exemplo de uso do tabindex.
imagem com exemplo de como usar tabindex no wordpress.
< a href="link" >
imagem com exemplo errado de como linkar páginas.
imagem com exemplo renderizado da maneira errada de linkar paginas.
imagem com exemplo correto de linkagem de paginas.
imagem renderizada do exemplo correto de linkagem de paginas.
Use os elementos de forma semântica!
imagem com exemplo do que nao fazer no html.
imagem do que nao fazer com o html 2.
Existem elementos pra fazer isso!

2.WAI-ARIA

Web Acessibility Initiative
Accessible Rich Internet Applications
Regras imbutidas como atributo no nosso código que ajuda os leitores de tela na descrição do conteúdo.
https://www.w3.org/WAI/intro/aria

v1.0 Publicado como uma recomendação da W3C no dia 20 de Março de 2014.

  1. Abstract
  2. Widgets
  3. Document Structure
  4. Landmarks
Landmarks
  1. application
  2. banner
  3. complementary
  4. contentinfo
  5. form
  6. main
  7. search
role="application"
A region declared as a web application, as opposed to a web document.
role="banner"
A region that contains mostly site-oriented content, rather than page-specific content.
role="complementary"
A supporting section of the document, designed to be complementary to the main content at a similar level in the DOM hierarchy, but remains meaningful when separated from the main content.
role="contentinfo"
A large perceivable region that contains information about the parent document.
role="form"
A landmark region that contains a collection of items and objects that, as a whole, combine to create a form. See related search.
role="main"
The main content of a document.
role="search"
A landmark region that contains a collection of items and objects that, as a whole, combine to create a search facility. See related form.
https://www.w3.org/TR/wai-aria/roles#roles_categorization

3.Técnicas no CSS

  1. Cores & Contrastes
  2. Propriedades de CSS
Cores & Contrastes
http://www.dokimos.org/ajff/
Não associe cores a ações!
Monochromacy
Deuteranopia
Tritanomaly
Tritanopia
Tenha mais de 1 forma de informar usuário!
Propriedades CSS
http://portal.dataprev.gov.br/
:focus

4.Ally.JS

http://allyjs.io/
Browsers Support
http://html5accessibility.com/
http://caniuse.com/#search=wai-aria
Validators
W3C Validation Service
WAVE
Microsoft Static Scan
O melhor validador é o usuário!
Qual é o seu público-alvo?
Público-alvo não é definido por características físicas, características sociais, monetárias ou sexuais. Público-alvo é definido simplesmente pelo interesse no conteúdo.
Talita Pagani - Front in Sampa 2016
Para saber mais..

https://www.w3.org/WAI/intro/aria
https://github.com/frontendbr/forum/issues/302
http://www.felipefialho.com/blog/2016/sobre-wai-aria-acessibilidade-e-semantica
Obrigado!


@felipz_sousa
felipesousa.github.io/
github.com/felipesousa
#fif2016