Ocultar conteúdo em uma página da web é uma prática comum no desenvolvimento web, mas é crucial fazê-lo de uma maneira que não comprometa a acessibilidade. Diferentes técnicas de ocultação podem ter impactos variados em como as tecnologias assistivas interpretam e apresentam o conteúdo aos usuários. Vamos explorar algumas melhores práticas para ocultar conteúdo enquanto mantém a acessibilidade. Um método comum para ocultar conteúdo é usar display: none. Aqui está um exemplo:

<link rel="stylesheet" href="styles.css">
<p class="hidden">Hidden text</p>
<p>Visible text</p>

.hidden {
  display: none;
}

Embora isso oculte efetivamente o conteúdo visualmente, também o remove da árvore de acessibilidade. A árvore de acessibilidade é uma estrutura usada por tecnologias assistivas, como leitores de tela, para interpretar e interagir com o conteúdo em uma página web. Ele representa o conteúdo e seu significado semântico de uma forma que a tecnologia assistiva pode entender e apresentar ao usuário. Usar display: none significa que leitores de tela e outras tecnologias assistivas não poderão acessar este conteúdo, pois ele não está incluído na árvore de acessibilidade. Portanto, é importante usar este método somente quando você quiser remover completamente o conteúdo tanto da apresentação visual quanto da acessibilidade. Outra abordagem para ocultar conteúdo é usar visibility: hidden:

<link rel="stylesheet" href="styles.css">
<p class="hidden">Hidden text</p>
<p>Visible text</p>

.hidden {
  visibility: hidden;
}

visibility: hidden oculta o conteúdo visualmente mas o mantém no fluxo do documento, significando que ele ainda ocupa espaço na página. Como display: none, visibility: hidden também remove o conteúdo da árvore de acessibilidade. Isso significa que tecnologias assistivas, como leitores de tela, não poderão acessar o conteúdo oculto. Use visibility: hidden somente quando quiser ocultar o conteúdo de todos, incluindo pessoas que utilizam tecnologia assistiva. Para conteúdo que deve ser oculto visualmente mas permanecer acessível para leitores de tela, você pode usar uma técnica frequentemente chamada de "visually hidden" ou "screen reader only". Aqui está um exemplo usando a classe CSS .sr-only que é uma técnica comum usada para esconder visualmente o conteúdo mantendo-o acessível para leitores de tela:

<link rel="stylesheet" href="styles.css">
<p class="sr-only">Hidden text</p>
<p>Visible text</p>

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

In this example, we are using properties like position, clip, and white-space, which you will learn about in future lessons. Por enquanto, saiba que esta regra CSS efetivamente oculta o conteúdo visualmente enquanto o mantém acessível para leitores de tela. É útil para fornecer contexto adicional aos usuários de leitores de tela sem afetar o layout visual. Para alternar a visibilidade do conteúdo, considere usar o atributo hidden:

<p hidden>This content is hidden</p>
<p>This content is visible</p>

O atributo hidden é suportado pela maioria dos navegadores modernos e oculta o conteúdo tanto visualmente quanto da árvore de acessibilidade. Pode ser facilmente alternado com JavaScript. Por fim, tenha cuidado ao ocultar conteúdo importante. Se a informação for crucial para entender ou usar o website, ela deve ser visível e acessível para todos os usuários. Oculte o conteúdo apenas quando isso realmente melhorar a experiência do usuário. Seguindo essas melhores práticas, você pode garantir que seu conteúdo permaneça acessível para todos os usuários, independentemente de como eles interagem com seu site.