Todos os dias nos deparamos com a frase “a IA vai tomar o lugar de determinado grupo de profissionais?” e esse questionamento uma hora chegaria ao desenvolvimento de aplicações Web. Trago nesse post algumas pesquisas que mostram que o profissional de desenvolvimento (especialmente com conhecimentos em acessibilidade digital) ainda tem espaço no mercado dominado por tecnologias geradoras de código.
No mês de maio de 2023 participei de um painel no Seminário IA Generativa e a Web no Brasil organizado pelo Ceweb.br (alias, recomendo assistir o evento todo nos links da parte da manhã e da tarde). O evento discutiu o uso de IAs Generativas (do tipo do ChatGPT, que gera conteúdos) e minha participação foi para apontar uma preocupação com a IA no uso da acessibilidade em aplicações na Web.
Segundo dados oficiais, em 2019 o número de pessoas com deficiência no Brasil passou de 17 milhões. Outro dado importante é sobre a conformidade de sites com padrões de acessibilidade. Segundo a TIC Web Acessibilidade, menos de 1% dos sites governamentais da plataforma estão em conformidade com padrões de acessibilidade. Esse número também aparece na pesquisa do Movimento Web para Todos.
E o que isso tem a ver com inteligência artificial?
Não é novidade que as ferramentas de IA Generativa consomem dados da internet (na verdade da Web) para basear seus modelos. Considerando o desenvolvimento de uma aplicação na Web, como um site, por exemplo, uma ferramenta como o ChatGPT pode facilmente criar uma estrutura para esse fim. Hoje outras ferramentas para a criação de sites de modo “automático” já anunciam que fazem uso de inteligência artificial para a construção de seus templates. Já escrevi um post sobre ChatGPT e acessibilidade e acho que esse traz uma nova abordagem para o assunto.
Como não sabemos a fonte dos dados nem os modelos usados para esses templates, será que essas IAs estão se baseando em sites com barreiras de acesso e que não seguem padrões de acessibilidade? Isso não sabemos, mas decidi fazer um teste simples para ver como essas ferramentas contemplam recursos simples de acessibilidade.
O teste foi o mais simples possível: Avaliar á acessibilidade do resultado do código de um formulário com poucos campos. No ChatGPT foi simples pedir para gerar o código, mas nas ferramentas de criação de site foi necessário criar uma página inteira para verificar os formulários na área de contato. O objetivo foi apenas o foco em formulários, mesmo com outras barreiras encontradas. Sendo assim não entrarei em detalhes de outros recursos de acessibilidade. Quem sabe em um próximo post.
Primeiro teste: ChatGPT
Pedi para a ferramenta da Open IA criar uma simples formulário em HTML. O resultado foi o seguinte:
Pergunta: Escreva um formulário simples em HTML
Resposta: Aqui está um exemplo de um formulário HTML simples:
<!DOCTYPE html>
<html>
<head>
<title>Formulário HTML</title>
</head>
<body>
<form>
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" placeholder="Digite seu nome"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Digite seu email"><br><br>
<label for="mensagem">Mensagem:</label>
<textarea id="mensagem" name="mensagem" rows="4" cols="30" placeholder="Digite sua mensagem"></textarea><br><br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
O que mais me surpreendeu na resposta foi o conteúdo adicional explicando o uso de cada elemento:
Neste exemplo, temos um formulário com três campos:
- O primeiro campo é um campo de texto para o nome, definido pelo <input type=”text”>. O atributo id é usado para associar o <label> ao campo de entrada correspondente.
- O segundo campo é um campo de email, definido pelo <input type=”email”>. Isso garante que o valor inserido esteja no formato de email válido.
- O terceiro campo é uma área de texto para a mensagem, criada com a tag <textarea>. Os atributos rows e cols definem o número de linhas e colunas visíveis na área de texto.
Além disso, cada campo possui um <label> associado, que descreve o campo. O atributo for do <label> deve corresponder ao atributo id do campo de entrada.
Por fim, temos um botão de envio <input type=”submit” /> que é clicado para enviar o formulário.
Esse exemplo é bastante básico e você pode adicionar mais campos, personalizar o estilo com CSS e usar JavaScript para manipular e validar os dados do formulário.
Avaliando o resultado
Considerando a análise de acessibilidade, minhas únicas críticas vão para a falta de atributo “lang” no elemento <html> e o uso de <br> para a quebra de linha entre os campos (que não foi o escopo dessa pesquisa). O restante do código foi bem desenhado, utiliando elementos <label> relacionados explicitamente a cada campo de formulário. Fiz um teste também pedindo para gerar grupos nos formulários e a ferramenta utilizou perfeitamente os elementos <fieldset> e <legend> para agrupamento.
Me surpreendeu mais ainda o fato de ter pedido um simples formulário em HTML, sem mencionar que deveria contemplar boas práticas de acessibilidade.
Ferramentas de verificação automática detectaram apenas a falta do atributo “lang” e a ausência de elementos que não fazem parte do escopo do teste, como estrutura de cabeçalhos, links e imagens.
Segundo teste: Ferramentas de criação de sites
Fiz uma pesquisa no Google por “IA Website Generator” e usei três dos resultados para o teste. Claro que elas não entram na categoria IA Generativa, mas cada um dos resultados se vende como uma solução que gera um site “completamente com inteligência artificial”, mesmo que não seja claro de onde isso vem.
Nos três exemplos (que não vou listar aqui) os campos de formulário não tem rótulos relacionados aos seus campos ou outras formas de descrever o campo específico:
Exemplo 1:
<img alt="image" src="/Icons/location.svg" class="..."> <input type="text" placeholder="Destination" class="...">
Gera um formulário sem rótulos que apenas o atributo “placeholder” descreve sua finalidade. Há uma imagem de um ícone sem descrição ao lado do campo. Esse ícone é como um marcador de mapa.
Exemplo 2:
<input size="1" type="email" name="form_fields[email]" id="form-field-email" class="..." placeholder="Email Address" required="required" aria-required="true">
Mesmo problema do anterior: Nenhum rótulo relacionado ao campo (apenas o uso do atributo “placeholder”).
Exemplo 3:
<label class="..." style="color: rgb(0, 0, 0);">E-mail</label>
<input class="..." type="text" style="border-radius: 8px; background-color: rgba(0, 0, 0, 0.07); color: rgb(0, 0, 0);">
Esse chegou mais perto. Tem um rótulo próximo ao campo mas não está relacionado adequadamente.
Avaliando o resultado
Não quero mencionar (ainda) as ferramentas utilizadas pois quero aprofundar a pesquisa e entender as barreiras, mas o fato de simples campos de formulário não terem um rótulo adequado mostra que os templates utilizados na aplicação são estão seguindo boas práticas de acessibilidade. São ferramentas que com apelas alguns cliques geram um site, mas geram com barreiras para pessoas com deficiência. Se a pessoa que gera esse site não avaliar o resultado final do código essas barreiras serão publicadas.
Conclusões
Parece que as fontes de dados do ChatGPT e outras IAs Generativas podem ser úteis para a criação de componentes acessíveis, porém é importante lembrar que a verificação humana ainda é necessária para ajustar detalhes e encontrar eventuais barreiras em formulários mais complexos.
ChatGPT é uma ferramenta e não um oráculo. Nem sempre ela vai acertar, por isso o conhecimento das tecnologias base (como HTML, CSS e JavaScript) para a criação de uma aplicação é fundamental.
Me preocupa que as ferramentas automáticas de criação de sites não sejam capazes de colocar um <label> relacionado ao campo ou mesmo um atributo aria-label ou title nos resultados obtidos nos testes. Essas ferramentas parecem usar Inteligência Artificial apenas para conteúdo. O design dos blocos parecem vir de templates previamente programados (e com problemas de acessibilidade). Ainda quero aprofundar as pesquisas nessas ferramentas para apresentar um resultado mais amplo antes de mostrar quais usei para testes.
Esse tipo de código gerado sem preocupação com acessibilidade pode ser replicado e gerar mais aplicações com barreiras para pessoas com deficiência. Nesse caso é muito importante um profissional com conhecimento em acessibilidade para apontar essas questões.
Enfim, o profissional de tecnologia com conhecimentos em boas práticas em acessibilidade digital é fundamental para continuarmos construindo uma Web realmente acessível.
Crédito da ilustração de capa: Freepik.com
