Porque desenvolver projetos acessíveis?

Essa não é uma pauta nova, ela já vem de alguns anos atrás, com as empresas se movendo cada vez mais rápido para os ambientes virtuais. Inclusive com grande aceleração devido a Pandemia em 2020, muitos dos serviços, informações e atendimentos passaram a ser por meio da internet, através de sites e aplicativos.

Sendo assim, e sabendo que muitas pessoas precisam conseguir utilizar a internet para realizar compras, agendamentos, pesquisas para trabalho, lazer e entre outros, desenvolver sites e aplicativos acessíveis não só se tornou muito importante por questões de relacionamento entre clientes e prestadores de serviços, mas também devido à legislação que através da lei 13.146, de 06 de junho de 2015 vem instituir que o acesso à informação e a comunicação seja garantido.

Mas gostaria de propor na verdade um momento de reflexão e não nos ater somente às questões legais, que sem dúvida são de extrema importância - afinal é a lei - mas também mostrar o real valor de um site acessível.

De acordo com a Organização Mundial da Saúde, é estimado que 1.3 bilhões de pessoas vivenciam algum tipo de deficiência significativa, esse número corresponde a 16% da população mundial em 2023.

Se a quantidade de pessoas relatadas até o momento ainda não for impressionante para quem lê este texto, saiba que entre 2015 e 2050 - ainda de acordo com a OMS - a proporção da população mundial com mais de 60 anos quase dobrará, subindo de 12% para 22%, e sabemos que com a idade vem algumas questões como diminuição gradual da visão, dificuldades motoras entre outras situações que podem ser momentâneas ou permanentes, o que não nos torna menos ávidos por informação, entretenimento, serviços, lazer entre outras atividades que buscamos utilizando nossos celulares, computadores e até mesmo televisores.

Esse é o ponto em que desejo chegar com a reflexão proposta no início, nós seremos usuários de sites e aplicativos, independentemente de termos ou não alguma deficiência, seja ela qual for. Acrescentando a isso, quem já não ficou decepcionado ao entrar em uma página web navegando por seu celular e se deparou com um conteúdo em que não era possível aumentar a fonte que estava muito pequena, ou mesmo não conseguiu terminar um cadastro pelo fato do formulário não ser claro o suficiente para preenchermos todos os dados e as validações necessárias não passarem, ou não conseguimos enxergar o texto gerado para validação de algum campo, enfim, são inúmeras as situações em que independente de termos ou não alguma deficiência, não conseguimos utilizar corretamente o site ou aplicativo.

Como podemos começar hoje a reverter essa situação?

Essa é uma questão multidisciplinar, que envolve desde o levantamento da necessidade do cliente na criação de seu produto, até o profissional que desenvolve a parte visual, ao profissional que pensa na experiência do usuário, o profissional que irá de fato transformar o visual em uma página navegável e às pessoas que irão testar o produto finalizado. Tudo isso levando em consideração que os elementos de uma interface precisam aparentar o que eles são e além disso eles precisam ter no código o que eles de fato tem intenção de ser.

Para essa tarefa podemos nos respaldar nas recomendações da Iniciativa de Acessibilidade Web da sigla em inglês - WAI e nos padrões semânticos da W3C no que se refere às boas práticas de marcação de conteúdo HTML.

O código semântico está para o browser assim como a aparência de um elemento de interface está para o usuário da página web ou app.

Para as boas práticas de semântica, não basta um botão parecer um botão, o elemento HTML deve ser um e se por algum motivo não puder ser, precisamos lançar mão das marcações ARIA seguindo as recomendações das práticas da WAI-ARIA atribuindo propriedades às tags HTML para que elas façam sentido para os programas assistivos utilizados para auxiliar na execução de ações, navegação ou consumo das informações. Além do javascript necessário para que o elemento se comporte como definido pela propriedade ARIA atribuída a ele.

Semântica

Para citar uma fonte que explica o que é semântica, cito a definição da MDN (Mozilla Developer Network):

Ou seja, as marcações HTML tem um significado, o browser e os programas assistivos foram programados para compreender esses significados. Utilizar os elementos (TAGS) HTML para representar o que a página web ou aplicativo está propondo é fundamental para trazermos clareza à interface.

O que isso significa na prática?

Imagine que estamos trabalhando em um projeto sobre criar uma nova funcionalidade, uma página que deve listar todos os produtos relacionados a uma categoria previamente escolhida, para nosso exemplo vamos utilizar “Computadores” porque não? Essa página deveria ter um cabeçalho, sendo assim, ao invés de termos algo como:

<div class=”header”>
     <!-- conteúdo do cabeçalho, como logotipo, menu, filtro, informações do usuário, como nome e um link para acessar seus dados e etc –>
</div>

Devemos criar esse cabeçalho utilizando a tag correta, HEADER.

<header>
     <!-- conteúdo do cabeçalho, como logotipo, menu, filtro, informações do usuário, como nome e um link para acessar seus dados e etc –>
</header>

Ao invés de criarmos uma área para listar os cards dos computadores da forma abaixo:

<div class=”main-content”>
     <div class=”tittle”>Computadores:</div>
      <div class=”card”>
            <p class=”sub-title”>Computador 1</p>
            <img src=”/caminho/para/computador1” alt=”” />
            <p class=”description”>Descrição</p>
<!-- … mais informações -->
            <a href=”#” onclick=”vaiParaDetalheDoProduto(id)”>Mais detalhes</a>
      </div>
</div> 

Definimos que essa área seja:

<main>
    <section>
           <h1>Computadores</h1>
           <div class=”card”>
	    <h2>Computador 1</h2>
                <img src=”/caminho/para/computador1” alt=”Computador aberto mostrando teclado retroiluminado” />
                <h3>Description</h3>
                <!-- … mais informações -->
	    <button class=”btn detalhe-produto” data-id-produto=”id_produto”>Mais detalhes</button>
          </div>
    <\section>
</main>

Note a diferença, utilizamos tags específicas para representar cada um dos elementos de informação neste card.

Utilizamos marcações que dão significado de região, agrupamento, hierarquia de informações além de incluirmos uma informação na imagem através do atributo “alt”(texto alternativo) utilizado para descrever informações sobre uma imagem.

Estes são apenas pequenos exemplos, mas no HTML nós temos ainda mais tags, de acordo com a MDN, abaixo citamos alguns exemplos:

• main (O elemento <main> define o conteúdo principal dentro do body)
• footer (O elemento HTML de Rodapé (<footer>) representa um rodapé para o seu conteúdo de seção mais próximo ou seu parente mais próximo <article>, <aside>, <nav>, <section>, <blockquote>, <body>, <details>, <fieldset>, <figure>, <td>)
• ul (O elemento HTML<ul> (ou elemento HTML de Lista desordenada) representa uma lista de itens sem ordem rígida)
• ol (O Elemento HTML <ol> (ou Elemento HTML de lista ordenada) representa uma lista de itens ordenados.)

Dentre outras muitas tags - temos +107 tags incluindo tags que foram descontinuadas - que podemos utilizar para adicionar significado a interface e com isso ajudar tanto o browser quanto os programas assistivos.

Demais necessidades a serem consideradas

A semântica é apenas uma parte da implementação - e uma parte muito importante diga-se de passagem - mas ainda temos que observar outros aspectos listados pela WCAG (Diretrizes de acessibilidade para conteúdo da Web) que descreve quais são os critérios a serem levados em consideração com relação à aplicação ou site, validando as seguintes grandes características:

Se o conteúdo é Perceptível;
Se é Operável;
Compreensível;
E Robusto;

A seguir, apresentamos algumas das características recomendadas pela WCAG que devem ser consideradas:

• Interações com a interface (mensagens, sinalizações de carregamentos, ou mesmo mudança/alteração do conteúdo);
• Sentido e organização do conteúdo apresentado em tela com a navegação por teclado utilizando ferramentas assistivas como NVDA;
• Tamanho de fontes disponibilizadas no conteúdo;
• Contraste do conteúdo apresentado em tela, levando em consideração como o app ou site será utilizado para verificar a incidência de luz, por exemplo.
• Possibilidade de ampliar o conteúdo para ter mais visibilidade sem prejudicar a utilização.

Aqui na referência rápida é possível verificar todos os critérios que são observados em cada uma das diretrizes e fazer uma avaliação criteriosa do produto/conteúdo em que estamos projetando ou mesmo implementando.

---

Conclusão

Depois de apresentados todos estes pontos, espero ter conseguido mostrar a importância de desenvolvermos projetos que levem em consideração a acessibilidade sempre pensando na maior inclusão e atendimento amplo. É um trabalho em conjunto que não começa na implementação da interface e não acaba nos testes. Portanto, devemos pensar em todas as pessoas que utilizarão as soluções que desenvolvemos, e torná-las melhores para o uso, utilizando as ferramentas e recomendações que estão ao nosso alcance para este fim.

Antes de ir,

Se acessibilidade digital é importante para você e sua empresa, saiba como apoiamos nossos clientes nessa jornada.