Voltar para a edição atual
Todos@web - Prêmio Nacional de Acessibilidade na Web

2ª edição

Apoio de Aula - Repositório de Material Online

Categoria:

Pessoas/Instituições

URL para avaliação:

Links no corpo da descrição do projeto

Descrição do projeto:

Sou professor na faculdade BandTec. Enquanto instituição, a BandTec utiliza o conjunto de ferramentas Moodle e Microsoft Sharepoint para interação entre alunos e professores.

Todos os materiais digitais que o professor deseja encaminhar aos alunos são disponibilizados através de sub sites dentro do nosso Sharepoint. Apesar de ser uma ferramenta bastante conhecida e personalizável, às vezes pode se tornar um pouco trabalhoso navegar por todo o material disponível, dependendo da forma com que a interface gráfica é configurada.

Por desejar algo extremamente mais simples, apenas para compartilhar meu material de sala de aula com os alunos, sem notificações, configurações etc., aproveitei o fato de já possuir um site e criei dentro dele uma área reservada para meus alunos da BandTec. Diferente do restante do site, o acesso a essa área é controlado através de um sistema de login, que é o mesmo utilizado dentro da faculdade.

Uma vez conectado nessa área, os alunos podem baixar arquivos, acessar links externos e submeter arquivos (no caso de avaliações), sendo que todo esse conteúdo é dividido em pastas.

Quando o site foi criado, eu já conhecia o Web Content Accessibility Guidelines (WCAG) 2.0, e suas técnicas. Por isso, todas as fontes do site, cores, botões e controles diversos foram escolhidos/feitos de modo a permitir que usuários daltônicos, por exemplo, pudessem enxergar e ler o conteúdo tranquilamente. Além disso, todas as cores atendem aos critérios de contraste tanto para o nível AA como para o nível AAA do WCAG, de modo que pessoas com baixa visão também possam ter uma boa experiência ao longo do site. Esses níveis de contraste também são atendidos caso a pessoa seja daltônica.

Apesar de já conhecer outros padrões, como WAI-ARIA, não tinha tido contato prático até que nossa faculdade recebeu um aluno deficiente visual. Por causa dele, comecei a me aprofundar mais em áreas como navegação por teclado e descrição falada de elementos da tela. Assim, remodelei todo o site de modo que ele fosse amigável também para pessoas que necessitam de tecnologias assistivas, como leitores de tela.

Todos os controles do site passaram a adotar ROLES, e tudo passou a possuir os atributos ARIA, de modo que ele pudesse se localizar dentro do site através do leitor de tela. Por exemplo, os nós da árvore passaram a indicar quando estavam expandidos, e a própria árvore passou a ser reconhecida propriamente como um controle “TREE”. O item selecionado era conhecido pelo navegador graças ao atributo “ARIA-ACTIVEDESCENDANT”, entre uma série de outros importantes detalhes.

Todos os controles ganharam tratamento especial, permitindo uma navegação mais suave através do teclado. Por exemplo, teclando “ENTER” abre-se uma pasta ou acessa-se um link externo, as setas direcionais passaram a navegar por entre os nós da árvore, expandir e contrair os nós com filhos etc.

Os materiais foram rearranjados, e foram dispostos em uma única árvore para que não houvesse necessidade de ficar alternando entre controles diferentes apenas para buscar pastas ou arquivos.

O painel de navegação lateral passou a utilizar headings H1 e H2 para facilitar a navegação por títulos. Não só essa área reservada, mas o restante do site foi remodelado também seguindo esses conceitos.

Essa área reservada aos alunos pode ser acessada através do link abaixo. http://carlosrafaelgn.com.br/Material/

Criei um usuário especial para que o pessoal da W3C Brasil pudesse acessar essa área reservada, mesmo não existindo no sistema da BandTec.
Usuário: w3c
Senha: brasil

Fiquei tão vislumbrado com todo esse assunto, que há dois semestres (desde 2012/Julho) passei a incluir uma noite nas aulas de Programação Web apenas para falar sobre essas pequenas coisas que fazem grande diferença para aqueles que precisam. No link abaixo é possível acessar a página que utilizo com meus alunos durante essa aula. http://carlosrafaelgn.com.br/Aula/Cores.html

Fora o conteúdo que é mostrado nessa página, falo muito mais coisas, mostro links e dou outros exemplos. Apesar desse conteúdo não ser cobrado em prova, faço questão de abordá-lo sempre no começo do semestre.

Além disso, na edição do Mozilla Tech Day do primeiro semestre, que foi sediado na BandTec, ministrei uma palestra sobre “Aplicações Web Acessíveis (WAI-ARIA)”. Durante a palestra abordei assuntos como cores, contraste, dislexia, WCAG, WAI-ARIA, navegação por teclado, tudo ilustrado com exemplos práticos tanto de sites reais, como criados ali na hora. Ao final, criamos um pequeno controle em forma de lista, utilizando WAI-ARIA e navegação por teclado.

O material que disponibilizei para os participantes dessa palestra encontra-se no link abaixo (O código nos slides finais não é 100% funcional do jeito que está, pois ele precisa de algumas mudanças, as quais fazem parte do conteúdo que foi passado para os participantes ao vivo, de maneira falada).
http://carlosrafaelgn.com.br/Mozilla/

Os links para o evento são esses dois aqui abaixo (o programa do evento está no primeiro).
http://www.bandtec.com.br/index.php/vida-no-campus/mozilla-tech-day/
https://reps.mozilla.org/e/mozilla-tech-day-bandtec/

Retornar a página de finalistas