O documento aborda a importância da acessibilidade na web, destacando a necessidade de permitir que pessoas com deficiência possam acessar informações e interagir online. Ele explica as definições de diversos tipos de deficiência e apresenta as Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.0, que orientam desenvolvedores a criar experiências web acessíveis. O texto enfatiza que a acessibilidade beneficia não apenas pessoas com deficiência, mas também idosos e melhora a usabilidade para todos os usuários.

1. Ubirajara Pelli
@ubirajarapelli
Desenvolvedor Front-End

2. 1 Acordo
Plataforma para mediação de conflitos
www.1acordo.com

3. Colégio e Faculdade
Pentágono
www.pentagonoedu.com.br

4. MeetUp Front ABC
Front ABC

5. FEMUG ABC

6. Acessibilidade
Web
Porque você desenvolvedor deveria estar aplicando acessibilidade
em seus projetos.

7. O que é
Acessibilidade?
Qualidade ou caráter do que é acessível.
Facilidade na aproximação, no tratamento ou na aquisição.

9. 60 Milhões de
Usuários Ativos
Individuo que acessa a internet pelo menos uma vez a cada 30 dias.
(Março 2014)
bit.ly/1hgcp05

10. Somos mais de
190 Milhões
de Brasileiros, segundo o censo demográfico do IBGE realizado no
ano de 2010.
bit.ly/1TJ1CqW

11. Mais de 45
Milhões são
deficientes
Calma aí, vamos entender o que carateriza a deficiência.
bit.ly/1TJ1CqW

12. Deficiência
Toda perda ou anormalidade de uma estrutura ou função psicológica
fisiológica ou anatômica que gere incapacidade para o desempenho
de atividade, dentro do padrão considerado normal para o ser
humano.

13. Deficiência
Permanente
Aquela que ocorreu ou se estabilizou durante um período de tempo
suficiente para não permitir recuperação ou ter probabilidade de que
se altere, apesar de novos tratamentos.

14. Deficiência Física
Alteração completa ou parcial de um ou mais segmentos do corpo
humano, acarretando o comprometimento da função física, exceto as
deformidades estéticas e as que não produzam dificuldades para o
desempenho de funções

15. Deficiência
Auditiva
Perda bilateral, parcial ou total, de quarenta e um decibéis (dB) ou
mais, aferida por audiograma nas frequências de 500HZ, 1.000HZ,
2.000Hz e 3.000Hz;

16. Deficiência Visual
Cegueira, na qual a acuidade visual é igual ou menor que 0,05 no
melhor olho, com a melhor correção óptica; a baixa visão, que
significa acuidade visual entre 0,3 e 0,05 no melhor olho, com a
melhor correção óptica; os casos nos quais a somatória da medida
do campo visual em ambos os olhos for igual ou menor que 60o; ou
a ocorrência simultânea de quaisquer das condições anteriores

17. Deficiência
Mental
Funcionamento intelectual significativamente inferior à média, com
manifestação antes dos dezoito anos e limitações associadas a duas
ou mais áreas de habilidades adaptativas

18. Representa
23,92% da
população
Mais 12 milhões de pessoas com deficiência acessando a internet
diariamente (2010)
bit.ly/1TJ1CqW

19. O que é
acessibilidade
Web?
Acessibilidade na Web significa que pessoas com deficiência podem
usar a Web. Mais especificamente, a acessibilidade na Web significa
que pessoas com deficiência podem perceber entender, navegar,
interagir e contribuir para a Web. (W3C Brasil, 2013)
bit.ly/1IVKxVz

20. ● Uma mulher cega, utilizando um leitor de telas, pesquisa a
restituição de imposto de renda no sítio da Receita Federal;
● Um jovem surdo ou com deficiência auditiva que faz um
curso de inglês à distância.
Acessibilidade
Web pra quem?

21. ● Um homem cego e sem braços procura sua ex-professora em um
sistema de busca utilizando um programa de reconhecimento de
voz para entrar comandos no computador e receber retorno a
partir do leitor de telas;
● Um homem com paralisia cerebral, com grandes dificuldades
motoras e que só utiliza um dedo para teclar, atualiza seu perfil
em uma rede social;

22. ● Um homem com deficiência motora, que usa um mouse
adaptado, faz compras em uma loja virtual;
● Uma jovem tetraplégica, utilizando apenas um ponteiro na
cabeça, procura informações sobre células-tronco em sítios
especializados;
● Uma mulher com deficiência intelectual faz exercícios pela web
para melhorar sua comunicação;

23. ● Um senhor surdocego namora pela web, utilizando um
dispositivo que mostra em Braille as informações exibidas na
tela;
● Uma mulher com baixa visão procura informações sobre
investimentos e a crise econômica mundial, utilizando um
programa ampliador de tela;
● Um programador daltônico testa uma aplicação na web,
procurando erros;

24. Acessibilidade é
para todos!
"The power of the Web is in its universality. Access by everyone
regardless of disability is an essential aspect."
Tim Berners-Lee

25. bit.ly/1IVKxVz
Diretrizes de
Acessibilidade
para Conteúdo
Web

26. ● As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.0
definem a forma de como tornar o conteúdo da Web mais
acessível para pessoas com deficiência.
● Estas diretrizes tornam também o conteúdo da Web mais
acessível por pessoas idosas, cujas habilidades estão em
constante mudança devido ao envelhecimento, e muitas vezes
melhoram a usabilidade para usuários em geral.

27. bit.ly/1J0Yvp9
Camadas de
Orientação das
WCAG 2.0

28. As pessoas e organizações que utilizam as WCAG são diversas e
incluem programadores e web designers, legisladores, responsáveis
pelas compras, professores e alunos.
Para corresponder às várias necessidades deste público, são
fornecidas diversas camadas de orientação, incluindo princípios
globais, diretrizes gerais, critérios de sucesso testáveis, um rico
conjunto de técnicas de tipo necessárias e de tipo sugeridas, bem
como falhas comuns documentadas com exemplos, links para
recursos e código fonte.

29. 1. Perceptível
2. Operável
3. Compreensível
4. Robusto
As 4 Diretrizes do
WCAG 2.0

30. As informações e os componentes da interface do usuário devem ser
apresentados em formas que possam ser percebidas pelo usuário
1 - Perceptível

31. Forncer alternativas textuais para qualquer conteúdo não textual
para que possa ser transformado em outras formas de acordo com
as necessidades dos usuários
1.1
Alternativas
em Texto:

37. Fornecer alternativas textuais para qualquer conteúdo não textual
para que possa ser transformado em outras formas de acordo com
as necessidades dos usuários
1.2 Midias
Baseas em
Tempo

39. Vídeos com legenda bit.ly/1E3XuQh
<video width="390" id="clip" controls>
<source src="movie.webm" type='video/webm; codecs="vp8,
vorbis"' />
<track kind="subtitles" src="subtitles-en.vtt" srclang="en"
label="English subtitles" default />
<track kind="subtitles" src="subtitles-ptbr.vtt" srclang="pt-br"
label="Legendas em Portugês">
</video>
var videoElement = document.querySelector("video");
var textTracks = videoElement.textTracks; //one for each track
element
var textTrack = textTracks[0]; //corresponds to the first track element
var kind = textTrack.kind //e.g. "subtitles"
var mode = textTrack.mode // 0 (TextTrack.OFF in spec,
TextTrack.DISABLED in Chrome), 1 (TextTrack.HIDDEN) or 2
(TextTrack.SHOWING)
WEBVTT FILE
1
00:00:00.500 --> 00:00:02.000 D:vertical A:start
The Web is always changing
2
00:00:02.500 --> 00:00:04.300
and the way we access it is changing
3
00:00:05.000 --> 00:00:07.000
The source of that change is <c.highlight>you</c>

40. Criar conteúdo que pode ser apresentado de diferentes maneiras
sem perder informação ou estrutura.
1.3 Adaptável

41. Facilitar a audição e a visualização de conteúdo aos usuários,
incluindo a separação entre o primeiro plano e o plano de fundo.
1.4 Discernivel

43. Analizador de contraste bit.ly/1E3XuQh

44. Os componentes de interface de usuário e a navegação devem ser
operáveis.
2 - Operável

45. Fazer com que toda funcionalidade fique disponível a partir de um
teclado.
2.1 Acessível
por teclado

46. <input type="text" tabindex="1">
<input type="text" tabindex="2">
<input type="text" accesskey="q">

47. Fornecer aos usuários tempo suficiente para ler e utilizar o conteúdo.
2.2 Tempo
Suficente

48. Criando um Slider acessível bit.ly/1K4QfZx

49. Não criar conteúdo de uma forma conhecida por causar convulsões.
2.3 Convulsões

50. Fornecer maneiras de ajudar os usuários a navegar, localizar
conteúdos e determinar onde se encontram.
2.4 Navegável

51. e-MAG bit.ly/1URSq69

52. e-MAG bit.ly/1URSq69

53. e-MAG bit.ly/1URSq69

54. A informação e a operação da interface de usuário devem ser
compreensíveis
3 - Compreensível

55. Tornar o conteúdo do texto legível e compreensível.
3.1 Legível

56. Exemplo

57. Microdatas bit.ly/1Lk57F8

58. Fazer com que as páginas Web apareçam e funcionem de modo
previsível.
3.2 Previsível

59. Exemplo

60. Ajudar os usuários a evitar e corrigir erros.
3.3 Assistência
de Entrada

61. Exemplo

62. O conteúdo deve ser robusto o suficiente para poder ser interpretado
de forma confiável por uma ampla variedade de agentes de usuário,
incluindo tecnologias assistivas.
4 - Robusto

63. Maximizar a compatibilidade entre os atuais e futuros agentes de
usuário, incluindo tecnologias assistivas.
4.1 Compatível

64. Exemplo bit.ly/1URSq69

65. Accessible Rich Internet Applications (WAI-ARIA) 1.0
WAI-ARIA

66. O WAI-ARIA define uma forma de tornar o conteúdo e aplicativos
Web mais acessíveis a pessoas com deficiências. Ele contribui
especialmente com conteúdo dinâmico e interface de controles de
usuário avançadas desenvolvidos com Ajax, HTML, JavaScript e
tecnologias relacionadas.

67. Composta por 73 Roles, Dividias em 4 Grupos: Abstract, Widget,
Document Structure e Landmarks
Roles (Papéis)
bit.ly/1TVdG8x

68. Exemplo

69. Composta por 35 States e Properties
Estados e
Propriedades
bit.ly/1TVdG8x

70. Exemplo

72. Lei Brasileira de Inclusão da Pessoa com
Deficiência bit.ly/1J3NPIJ
Código de Trânsito Brasileiro - Lei
9503/97 | Lei nº 9.503, de 23 de setembro
de 1997
Art. 88. Nenhuma via pavimentada poderá ser entregue após sua construção,
ou reaberta ao trânsito após a realização de obras ou de manutenção, enquanto
não estiver devidamente sinalizada, vertical e horizontalmente, de forma a
garantir as condições adequadas de segurança na circulação.
Parágrafo único. Nas vias ou trechos de vias em obras deverá ser afixada
sinalização específica e adequada.

74. @ubirajarapelli
ubirajaracpelli@gmail.com
www.ubirajarapelli.com.br
Obrigado