Boas Praticas

Usando o checklist de acessibilidade (The a11y Project) na construção de interfaces de sistemas.

OBJETIVO

A prática docente apresentada possui como objetivo destacar que implementar programas com interfaces gráficas acessíveis deve fazer parte de todos os escopos para desenvolvimento de sistemas. O estudante é convidado a desconstruir que possuir uma interface nos parâmetros do checklist a11y é um diferencial, mas sim que, interfaces a seguir tais parâmetros precisam ser um padrão lembrado dentro da construção de softwares.

METODOLOGIA

Para desenvolver e executar a prática de acessibilidade (project a11y) em sala de aula, começamos introduzindo os conceitos de acessibilidade na web e explicando sua importância. Realizamos uma aula expositiva sobre as diretrizes do WCAG (Web Content Accessibility Guidelines) e promovemos uma discussão sobre os desafios enfrentados por pessoas com diferentes tipos de deficiência ao navegar na web.

Em seguida, familiarizamos os alunos com as ferramentas e extensões que seriam utilizadas no projeto. Em Modelagem de Sistemas, foi demonstrado como utilizar o Figma para criar interfaces acessíveis e apresentamos extensões como o Axe e Stark para testes automáticos de acessibilidade, além de ferramentas específicas para verificação de contraste e tipografia. Já na unidade curricular de Desenvolvimento de Sistemas, fizemos uso de frameworks adaptados para realizar o checklist a11y, sendo o mais utilizado o react-a11y. Dando continuidade ao projeto, a ideia também foi transmitida para Internet das Coisas (IoT), enriquecendo os softwares com recursos interativos para facilitar o uso da automação para todos.

Os alunos então verificaram a conformidade de cada sistema com os padrões de acessibilidade utilizando as ferramentas automáticas e testes manuais. Utilizaram as extensões apresentadas para verificar contraste, tipografia e outras questões de acessibilidade, coletando feedback sobre problemas encontrados e realizando os ajustes necessários. Por fim, revisamos o trabalho realizado, discutimos os aprendizados e identificamos áreas de melhoria.

COMO VOCÊ DESCREVE?

Atualmente, o plano de curso das aulas práticas das unidades curriculares modelagem e desenvolvimento de sistemas não possuem referências a estudos para falar e praticar a acessibilidade em interfaces gráficas. A partir de conhecimentos adquiridos em oficinas e palestras, oferecidas pelo próprio sistema FIEB, a citar prioritariamente: o Programa SESI SENAI de Ações Inclusivas (PSAI) e o curso Desenvolvimento de Capacidades Socioemocionais (ofertado pela Universidade Corporativa SESI e SENAI), enquanto professores procuramos meios de tornar os debates e aprendizados num modelo prático de ensino, em sala de aula.

Através deste pensamento, passamos a trabalhar com o The a11y Project na busca de aplicar o pensamento inclusivo dentro do desenvolvimento de softwares, uma pesquisa conjunta que trouxe o debate para as aulas além da teoria, colocando o aluno como protagonista ao implementar o uso de plug-ins que realizem o checklist A11Y, bem como sites de verificação, na construção de softwares a serem usados pela sociedade. A importância do tema é endossada ainda pela política pública prevista na Lei Brasileira de Inclusão da Pessoa com Deficiência (Estatuto da Pessoa com Deficiência) – Artigo 78 da Lei nº 13.146 de 06 de julho de 2015: Devem ser estimulados a pesquisa, o desenvolvimento, a inovação e a difusão de tecnologias voltadas para ampliar o acesso da pessoa com deficiência às tecnologias da informação e comunicação e às tecnologias sociais.

COMO VOCÊ INSERIU RECURSOS EDUCACIONAIS NA SUA PRÁTICA DOCENTE?

Ocorreu um momento de análise de protótipos feitos pelos estudantes em sala de aula e introdução do que se trata The a11y Project (https://www.a11yproject.com/) e sua importância. Após esse passo, os alunos foram convidados a pensar se seus protótipos estavam de acordo com o checklist a11y (https://www.a11yproject.com/checklist/), levantando um debate sobre como pessoas com diferentes tipos de deficiência, pessoas com transtornos de espectro autista ou ainda pessoas que apresentam alterações na visão dos núcleos (daltônicos) estariam confortáveis em utilizar a interface gráfica desenvolvida pelos mesmos.

Esse olhar empático trouxe a indagação de como eles poderiam aprimorar seus sistemas pensando no outro. A partir desse momento, as ferramentas e plug-ins (como Axe e Stark) e frameworks (no caso, o React-a11y) foram apresentados para que testes visuais envolvendo UX (User Experience) e UI (User Interface) pudessem ser realizados. Após essa aplicabilidade, os estudantes foram convidados a documentar os testes feitos, através de prints de códigos/ protótipos de tela, bem como quais recortes do checklist a11y eles achariam mais pertinente demonstrar e adaptar aos seus sistemas. Essa documentação se torna assim, um lembrete de que é possível pensar na acessibilidade como parte integrante da construção de sistemas.

QUAIS OS RESULTADOS ALCANÇADOS?

A coleta contínua de feedback tanto durante a apresentação do checklist a11y, bem como nos testes feitos em sala e ajustes baseados nos mesmos, aprimoraram o produto final e ensinaram a importância da construção dos resultados para os alunos. O retorno em sala foi visível, tanto para o levantamento de debate sobre inclusão, como também para a iniciativa dos alunos em adequarem as partes visuais de seus sistemas trazendo soluções para cada problema envolvido. Desta forma, a autoavaliação e reflexão promoveram também uma crítica construtiva, sendo gratificante perceber que o uso da prática preparou os alunos para criar experiências web inclusivas e acessíveis.

CRIAçÃO DE INTERFACES digitais COM FIGMA E O PLUGIN STARK

A prática com Figma e plugin Stark é uma ótima maneira de aprender sobre acessibilidade digital e como criar interfaces mais inclusivas. Ao utilizar o plugin de forma eficaz, designers e desenvolvedores podem identificar e corrigir problemas de acessibilidade em suas interfaces, garantindo que todos os usuários possam usá-las com facilidade e sem barreiras.

WCAG define 3 níveis de acessibilidade para websites:

Nível A (Básico): Critérios mínimos para acessibilidade, como alternativas de texto para imagens e navegação por teclado.
Nível AA (Aprimorado): Maior conjunto de critérios, incluindo navegação completa por teclado, nomes descritivos para elementos e adaptabilidade a diferentes telas.
Nível AAA (Completo): Critérios mais rigorosos, como audiodescrições para vídeos, compatibilidade com tecnologias assistivas emergentes e design universal.

Objetivos: