Resolvendo problemas de acessibilidade de sites com base nas WCAG 2.2

1.1.1 Conteúdo não textual

Toda imagem, ícone ou outro elemento não textual deve incluir uma descrição em texto que transmita a mesma informação ou função.

Resolvendo funções de apresentação e estados ocultos em conteúdo decorativo

Gráficos decorativos e conteúdo não textual que não transmitem informações relevantes devem ser ocultados das tecnologias assistivas, como leitores de tela. Isso permite que os usuários de tecnologias assistivas se concentrem no conteúdo relevante.

No código HTML, identifique o conteúdo decorativo que não fornece informações ou funcionalidades relevantes.

1. Para elementos <svg> decorativos, adicione o atributo aria-hidden="true" ao elemento <svg>.

2. Para outros conteúdos decorativos não textuais, como um <img> usado apenas como borda, um <object> usado apenas para estilização ou um <area> usado para efeitos visuais, adicione o atributo role="presentation".

3. Se o elemento decorativo não textual já tiver um atributo role, substitua-o por role="presentation".

Exemplo

!-- Incorrect -->
<svg width="100" height="100">
  <circle
    cx="50"
    cy="50"
    r="40"
    stroke="black"
    stroke-width="3"
    fill="red"
  />
</svg>
<!-- Correct -->
<svg width="100" height="100" aria-hidden="true">
  <circle
    cx="50"
    cy="50"
    r="40"
    stroke="black"
    stroke-width="3"
    fill="red"
  />
</svg>

1.2.1 Apenas áudio e apenas vídeo (pré-gravado)

Qualquer áudio ou vídeo pré-gravado sem elementos visuais ou sem som deve incluir uma transcrição em texto que forneça as mesmas informações.

Resolvendo problemas de transcrição de áudio ausente

Fornecer uma transcrição em texto do conteúdo de áudio garante que todos os usuários, inclusive os surdos ou com deficiência auditiva, possam acessar as mesmas informações.

1. No código HTML, localize o elemento <audio>.

2. Após o elemento <audio>, adicione um elemento <p>.

3. Dentro do elemento <p>, insira a transcrição completa do conteúdo de áudio em forma de texto.

Exemplo

<!-- Incorrect -->
<video src="training-overview.mp4" controls>
</video> 

<!-- Correct -->
<video src="training-overview.mp4" controls>
<track src="training-overview-en.vtt" kind="captions" srclang="en" label="English">
</video> 

Resolvendo legendas ausentes em vídeos incorporados do Vimeo

As legendas devem estar disponíveis nos vídeos do Vimeo para garantir a acessibilidade a usuários surdos ou com deficiência auditiva. O Vimeo permite adicionar legendas pelas configurações do vídeo.

1. Abra o vídeo em vimeo.com.

2. Faça login com a conta proprietária do vídeo.

3. Acesse Configurações.

4. Selecione a guia Distribuição, depois abra Legendas (ou Avançado > Legendas em layouts mais antigos).

5. Encontre a seção Legendas/CC.

6. Faça upload de um arquivo de legendas .vtt ou .srt.

7. Salve suas alterações e confirme se as legendas estão ativadas visualizando o vídeo.

Observação: As legendas serão exibidas automaticamente no <iframe> incorporado se estiverem ativadas no Vimeo.

Resolvendo legendas ausentes em vídeos incorporados do YouTube

Os vídeos do YouTube devem incluir legendas para que usuários surdos ou com deficiência auditiva possam acessar o conteúdo falado. O YouTube oferece opções para envio manual de legendas ou legendagem automática.

1. Abra o vídeo em youtube.com com a conta proprietária do vídeo.

2. Acesse o YouTube Studio e selecione o vídeo que deseja editar.

3. Clique em Legendas no menu à esquerda.

4. Escolha o idioma das suas legendas.

5. Clique em Adicionar e selecione uma das seguintes opções:

   • Fazer upload de arquivo (para arquivos .vtt ou .srt)

   • Sincronização automática (cole a transcrição completa e deixe o YouTube definir a sincronização)

   • Digitar manualmente

6. Revise e publique suas legendas.

1.3.1 Informações e relações

Qualquer informação mostrada por meio de layout, formatação ou estrutura visual também deve estar disponível em texto ou codificada, para que as tecnologias assistivas possam compreendê-la.

Resolvendo funções de marco ARIA ausentes na estrutura da página

As funções de marco ajudam os usuários de leitores de tela a entender o layout da página e a navegar rapidamente até as seções principais.

1. No seu código HTML, localize elementos estruturais (por exemplo, <div>, <section>, <form>).

2. Adicione a função de marco ARIA apropriada usando o atributo role (por exemplo, role="main", role="navigation", role="form"). Saiba mais sobre a função de marco apropriada.
   Observação: Adicione funções ARIA somente se o elemento ainda não tiver uma função de marco incorporada (por exemplo, <nav> já atua como navigation).

Exemplo

<!-- Incorrect -->
<div id="main-content">
<p>Welcome to our website.</p>
</div>

<!-- Correct -->
<div id="main-content" role="main">
<p>Welcome to our website.</p>
</div>

Resolvendo fieldset ou grupo ausente em campos com o mesmo nome

Botões de opção ou caixas de seleção que compartilham o mesmo nome devem ser agrupados para que a relação entre eles fique clara. Isso ajuda usuários de leitores de tela a entender que os campos pertencem ao mesmo conjunto.

1. No código HTML, localize os campos de botão de opção ou caixa de seleção que compartilham o mesmo atributo name.

2. Envolva os campos relacionados em um elemento <fieldset>.

3. Adicione um <legend> como primeiro elemento dentro do <fieldset> para descrever o grupo.

Como alternativa, envolva os campos em um contêiner com role="group" ou role="radiogroup" e forneça um rótulo usando aria-labelledby ou aria-label.

Exemplo

<!-- Incorrect -->
<label>
  <input type="checkbox" name="city"> Toronto
</label>
<label>
  <input type="checkbox" name="city"> London
</label>
<!-- Correct -->
<fieldset>
  <legend>Select your location</legend>
  <label>
    <input type="checkbox" name="city"> Toronto
  </label>
  <label>
    <input type="checkbox" name="city"> London
  </label>
</fieldset>
<!-- Correct -->
<div role="group" aria-label="Select your location">
  <label>
    <input type="checkbox" name="city"> Toronto
  </label>
  <label>
    <input type="checkbox" name="city"> London
  </label>
</div>

Resolvendo <li> sem elemento pai

Garantir que os itens de lista sejam colocados dentro de um elemento de lista ajuda os leitores de tela a identificar corretamente o conteúdo agrupado.

1. No código HTML, localize os elementos <li> que não estão dentro de um <ul> ou <ol>.

2. Envolva os elementos <li> em um <ul> (para marcadores) ou <ol> (para lista numerada).

Exemplo

<!-- Incorrect -->
<li>First item</li>
<li>Second item</li>
<!-- Correct -->
<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

Resolvendo problemas de estrutura em listas de descrição (DL)

As listas de descrição são usadas para mostrar pares de informações relacionadas, como um termo e sua explicação. Quando a lista não está estruturada corretamente, os leitores de tela podem ler o conteúdo fora de ordem ou confundir os usuários.

1. No seu código HTML, localize os elementos <dl> sinalizados.

2. Dentro do <dl>, coloque o termo dentro de um elemento <dt>.

3. Dentro de um elemento <dt>, coloque a descrição dentro de um elemento <dd>.

4. Remova quaisquer outros elementos colocados diretamente dentro do <dl>, a menos que estejam dentro de um <dt> ou <dd>.

Exemplo

<!-- Incorrect -->
<dl>
  <p>HTML</p>
  <p>A markup language for web pages.</p>
</dl>
<!-- Correct -->
<dl>
  <dt>HTML</dt>
  <dd>A markup language for web pages.</dd>
</dl>

Resolvendo termos de definição (DT) e descrições de definição (DD) não contidos em uma lista de descrição (DL)

Os termos de definição (<dt>) e as descrições de definição (<dd>) devem estar sempre contidos em uma lista de descrição (<dl>). Quando elementos <dt> ou <dd> são usados fora de um <dl>, os leitores de tela podem ler o conteúdo fora de ordem ou confundir os usuários.

1. No seu código HTML, localize os elementos <dt> ou <dd> sinalizados.

2. Verifique se cada <dt> e <dd> está dentro de um elemento <dl>. Se o conteúdo não fizer parte de uma lista de descrição, substitua <dt> e <dd> por um elemento apropriado (por exemplo, <h2>, <h3>, <p>).

Exemplo

<!-- Incorrect -->
<dt>CSS</dt>
<dd>A language used to style web pages.</dd>
<!-- Correct -->
<dl>
  <dt>CSS</dt>
  <dd>A language used to style web pages.</dd>
</dl>

Resolvendo o uso incorreto do atributo scope em tabelas

Quando uma tabela usa o atributo scope, ele deve ser aplicado somente às células de cabeçalho (<th>) para definir com clareza a quais células de dados elas se relacionam. Valores de scope incorretos ou ausentes podem impedir que as tecnologias assistivas associem corretamente os cabeçalhos aos dados da tabela.

1. No seu código HTML, localize o atributo scope ou os elementos de tabela sinalizados.
2. Atualize o atributo scope para garantir que:
   1. O atributo scope seja aplicado somente a elementos <th>.
   2. Cada <th> tenha um valor de scope apropriado, como col, row, colgroup ou rowgroup.
   3. O valor no seu atributo scope reflita com precisão a estrutura e as relações da tabela.

Exemplo

<!-- Incorrect -->
<table>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <th>Alice</th>
    <td>95</td>
  </tr>
</table>
<!-- Correct -->
<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Score</th>
  </tr>
  <tr>
    <th scope="row">Alice</th>
    <td>95</td>
  </tr>
</table>

<!-- Incorrect -->
<table>
  <tr>
    <th scope="column1">Name</th>
    <th scope="column2">Score</th>
  </tr>
  <tr>
    <th scope="row1">Alice</th>
    <td>95</td>
  </tr>
</table>
<!-- Correct -->
<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Score</th>
  </tr>
  <tr>
    <th scope="row">Alice</th>
    <td>95</td>
  </tr>
</table>

Resolvendo o uso incorreto do atributo headers em vez de scope em tabelas

As tabelas devem conter células de dados de tabela (<td>) descritas por cabeçalhos de tabela (<th>). Tabelas que incluem cabeçalhos, mas não células de dados, não oferecem relações significativas para as tecnologias assistivas e podem causar confusão para os usuários de leitores de tela.

No seu código HTML, localize os elementos de tabela sinalizados que contêm elementos <th>, mas nenhum elemento <td> correspondente.

Atualize a estrutura da tabela para garantir que:

1. Cada tabela inclua um ou mais elementos <td> contendo dados.

2. Os elementos <th> sejam usados somente quando descreverem dados reais da tabela.

3. Tabelas usadas apenas para layout ou apresentação não incluam elementos <th>.

4. Se a tabela não contiver dados, remova-a ou substitua-a por uma marcação que não seja de tabela.

Exemplo

<!-- Incorrect -->
<table>
  <tr>
    <th scope="col">Name</th>
  </tr>
</table>
<!-- Correct -->
<table>
  <tr>
    <th scope="col">Name</th>
  </tr>
  <tr>
    <td>John</td>
  </tr>
</table>

Resolvendo o agrupamento ARIA incorreto para a função “group”

O uso adequado das funções ARIA ajuda os leitores de tela a entender a estrutura da página, facilitando a navegação e a interação de usuários com deficiência com o conteúdo.

1. No código HTML, localize o elemento com role="group".

2. Dentro do elemento, inclua pelo menos um elemento de controle interativo (por exemplo, <input>, <textarea> ou <select>).
   Observação: Saiba mais sobre qual controle interativo você deve incluir. Se não houver controles interativos adequados, considere substituir role="group" por uma função ARIA ou uma estrutura mais apropriada.

Exemplo

<!-- Incorrect -->
<div role="group">
<p>This is a group with no interactive elements.</p>
</div>   

<!-- Correct -->
<div role="group">
<label for="username">Username:</label>
<input id="username" type="text">
</div>

Resolvendo o agrupamento ARIA incorreto para a função “radiogroup”

O uso adequado das funções ARIA ajuda os leitores de tela a entender a estrutura da página, facilitando a navegação e a interação de usuários com deficiência com o conteúdo.

1. No código HTML, localize o elemento com role="radiogroup".

2. Dentro do elemento, inclua pelo menos um elemento de botão de opção (por exemplo, <input type="radio"> ou role="radio").

Exemplo

<!-- Incorrect -->
<div role="radiogroup">
<p>Select a delivery method:</p>
</div>   

<!-- Correct -->
<div role="radiogroup" aria-label="Select a delivery method">
<label><input type="radio" name="delivery" value="standard"> Standard </label><br>
<label><input type="radio" name="delivery" value="express"> Express </label><br>
<label><input type="radio" name="delivery" value="overnight"> Overnight</label>
</div>

Resolvendo o agrupamento ARIA incorreto para a função “checkbox”

O uso adequado das funções ARIA ajuda os leitores de tela a entender a estrutura da página, facilitando a navegação e a interação de usuários com deficiência com o conteúdo.

1. No código HTML, localize <input type="checkbox"> ou um elemento com role="checkbox".

2. Envolva as caixas de seleção em um contêiner e atribua a ele o role="group".

3. Adicione um atributo aria-labelledby ou aria-label ao elemento com role="checkbox" para descrever a finalidade do grupo de caixas de seleção.

Exemplo

<!-- Incorrect -->
<div><label><input type="checkbox" id="news"> Newsletter</label><br>
<label><input type="checkbox" id="updates"> Product Updates</label><br>
<label><input type="checkbox" id="offers"> Special Offers</label>
</div> 

<!-- Correct -->
<div role="group" aria-labelledby="emailPref">
<p id="emailPrefsLabel">Which types of emails would you like to receive?</p>
<label><input type="checkbox" id="news"> Newsletter</label><br>
<label><input type="checkbox" id="updates"> Product Updates</label><br>
<label><input type="checkbox" id="offers"> Special Offers</label>
</div>

Resolvendo o agrupamento ARIA incorreto para a função “radio”

O uso adequado das funções ARIA ajuda os leitores de tela a entender a estrutura da página, facilitando a navegação e a interação de usuários com deficiência com o conteúdo.

1. No código HTML, localize <input type="radio"> ou um elemento com role="radio".

2. Agrupe os botões de opção dentro do elemento com role="radiogroup".

3. Adicione um atributo aria-labelledby ou aria-label ao elemento para descrever a finalidade do grupo de botões de opção.

Exemplo

<!-- Incorrect -->
<label><input type="radio" name="contact"> Email</label><br>
<label><input type="radio" name="contact"> Phone</label><br>
<label><input type="radio" name="contact"> Text Message</label>
</div>   

<!-- Correct -->
<div role="radiogroup" aria-labelledby="contactMethod">
<p id="contactMethodLabel">How would you like us to contact you?</p>
<label><input type="radio" name="contact"> Email</label><br>
<label><input type="radio" name="contact"> Phone</label><br>
<label><input type="radio" name="contact"> Text Message</label>
</div>  

Resolvendo a ausência de aria-level em funções de título

As funções ARIA de título devem incluir um nível de título definido para maior clareza.

1. No código HTML, localize o elemento com o atributo role="heading".

2. Depois do atributo role, adicione o atributo aria-level com um valor de 1 a 6 (por exemplo,aria-level="2").

Exemplo

<!-- Incorrect -->
<div role="heading">Subsection Title</div> 

<!-- Correct -->
<div role="heading" aria-level="2">Subsection Title</div>

Resolvendo a ausência de cabeçalhos de tabela

Os cabeçalhos de tabela ajudam os leitores de tela a entender o que cada coluna ou linha significa. Se uma tabela não tiver cabeçalhos, as tecnologias assistivas não conseguem fornecer aos usuários o contexto correto.

1. No seu código HTML, localize o elemento <table> e identifique a primeira linha. Essa linha deve definir os títulos da tabela (por exemplo, “Nome”, “Idade” etc.).

2. Se a primeira linha usar elementos <td> (dados de tabela), altere cada <td> para um <th> (cabeçalho de tabela) para indicar que essas células são cabeçalhos.

3. Adicione scope="col" a cada elemento <th> se for um cabeçalho de coluna, ou scope="row" se for um cabeçalho de linha.

Exemplo

<!-- Incorrect -->
<table>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<tr>
<td>Ava</td>
<td>25</td>
</tr>
</table>

<!-- Correct -->
<table>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
</tr>  
<tr>
<td>Ava</td>
<td>25</td>
</tr>
</table>

<!-- Incorrect -->
<ul>
<li><strong>Name:</strong> Ava</li>
<li><strong>Age:</strong> 25</li>
</ul>  

<!-- Correct -->
<table>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
</tr>
<tr>
<td>Ava</td>
<td>25</td>
</tr>
</table> 

Resolvendo a estrutura de lista incorreta

<!-- Incorrect -->
<li>First item</li>
<li>Second item</li>  

<!-- Correct -->
<ul>
<li>First item</li>
<li>Second item</li>
</ul>

<!-- Incorrect -->
<dt>HTML</dt>
<dd>A markup language</dd>

<!-- Correct -->
<dl>
<dt>HTML</dt>
<dd>A markup language</dd>
</dl>

<!-- Incorrect --> <fieldset><label for="name">Name:</label><input id="name" type="text"></fieldset>

<!-- Correct --> <fieldset><legend>Personal Information</legend><label for="name">Name:</label><input id="name" type="text"></fieldset>
 

<meta name="apple-mobile-web-app-orientation" content="any">

Resolvendo problemas de orientação na meta viewport

Configurações de viewport que bloqueiam a orientação da tela ou desativam o zoom podem dificultar a leitura e a interação dos usuários com o conteúdo. Permitir as orientações retrato e paisagem, bem como o zoom, dá flexibilidade aos usuários de acordo com seu dispositivo e suas necessidades pessoais.

1. No seu código HTML, localize a tag meta name="viewport".
2. Remova quaisquer atributos relacionados a restrições de orientação, como orientation=portrait ou orientation=landscape.
3. Remova quaisquer atributos que impeçam o zoom, como maximum-scale=1 ou user-scalable=no.
4. Salve suas alterações e recarregue a página.

Exemplo

<!-- Incorrect --> 
<meta name="viewport" content="width=device-width, maximum-scale=1, orientation=portrait"> 

<!-- Correct--> 
<meta name="viewport" content="width=device-width">

Resolvendo problemas de orientação em CSS

As media queries de CSS que bloqueiam o conteúdo em retrato ou paisagem podem limitar a forma como os usuários interagem com uma página. Remover essas restrições permite que o conteúdo se adapte a ambas as orientações.

1. No seu código CSS, localize as media queries que restringem a orientação, como:
   • @media screen and (orientation: portrait){ … }
   • @media screen and (orientation: landscape) { … }
2. Remova essas media queries específicas de orientação para permitir que o conteúdo se adapte livremente a ambas as orientações.
3. Salve suas alterações e recarregue a página.

Exemplo:

<!-- Incorrect --> 
@media screen and (orientation: portrait) { 
.container { 
width: 400px; 
 } 
}

<!-- Correct--> 
.container { 
width: 400px;

 

1.3.5 Identificar a finalidade da entrada