Revisão de Acessibilidade CSS

Ferramentas de Contraste de Cor

WebAIM's Color Contrast Checker: Esta ferramenta online permite que você insira as cores de primeiro plano e plano de fundo do seu design e veja instantaneamente se elas atendem aos padrões do Web Content Accessibility Guidelines (WCAG).
TPGi Colour Contrast Analyzer: Esta é uma ferramenta gratuita de verificação de contraste de cores que permite checar se seus sites e aplicativos atendem aos padrões das Diretrizes de Acessibilidade para Conteúdo Web (WCAG). Esta ferramenta também inclui um recurso de Simulador de Daltonismo que permite ver como seu site ou aplicativo aparece para pessoas com problemas de visão de cores.

Á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 da web.

Função `max()`

A função max() retorna o maior de um conjunto de valores separados por vírgula:

<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/css-photo-gallery/9.jpg" alt="A cat sitting on a table">
</body>

img {
  width: max(250px, 25vw);
}

No exemplo acima, a largura da imagem será de 250px se a largura da viewport for menor que 1000 pixels. Se a largura da viewport for maior que 1000 pixels, a largura da imagem será de 25vw. Isto porque 25vw é igual a 25% da largura da viewport.

Melhores Práticas com CSS e Acessibilidade

display: none;: 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 apenas quando você quiser remover completamente o conteúdo tanto da apresentação visual quanto da acessibilidade.
visibility: hidden;: Esta propriedade e valor ocultam o conteúdo visualmente mas o mantêm no fluxo do documento, significando que ele ainda ocupa espaço na página. Esses elementos também não serão mais lidos por leitores de tela porque terão sido removidos da árvore de acessibilidade.
Classe CSS .sr-only: Esta é uma técnica comum usada para esconder visualmente o conteúdo mantendo-o acessível para leitores de tela.

<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <span>This span element can be read</span>
  <span class="sr-only">This span element can only be read by screen readers</span>
  <p style="display: none">
    This text is hidden with display: none and is NOT accessible to screen readers.
  </p>
  <p style="visibility: hidden">
    This text is hidden with visibility: hidden and is NOT read by screen readers,
    but it still takes up space.
  </p>
</body>

.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;
}

scroll-behavior: smooth;: Esta propriedade e valor habilitam um comportamento de rolagem suave.
Recurso prefers-reduced-motion: Este é um recurso de mídia que pode ser usado para detectar a preferência de animação do usuário.

<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Clicking these links should result in smooth scrolling 
 if the user has not set a preference for reduced motion -->
  <nav>
    <a href="#section1">Section 1</a>
    <a href="#section2">Section 2</a>
    <a href="#section3">Section 3</a>
  </nav>

  <section id="section1">
    <h2>Section 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula dui, venenatis quis ligula ac, gravida pellentesque orci. Phasellus feugiat tortor ut vehicula porttitor. Proin vehicula scelerisque purus sit amet porttitor. Suspendisse egestas congue nibh auctor auctor. Pellentesque interdum, urna eget rhoncus tincidunt, mi urna sodales ex, quis tincidunt ante purus et erat. Quisque lacinia sapien a nibh porta semper. Pellentesque vitae enim non elit euismod gravida. Etiam eu orci pulvinar, malesuada est non, molestie ex. Etiam massa ante, malesuada quis lorem ut, aliquet aliquam libero. Etiam arcu nunc, suscipit sit amet leo eu, pharetra viverra nibh.
    </p>
  </section>

  <section id="section2">
    <h2>Section 2</h2>
    <p>Mauris vel arcu enim. Nunc bibendum tincidunt dapibus. Nulla bibendum diam eget rutrum commodo. Quisque congue, erat eu tempus tincidunt, lacus ligula condimentum mi, ut luctus nisl erat at ipsum. In id mi sit amet purus laoreet commodo. Nunc facilisis sem diam, quis gravida nibh vulputate tempor. Praesent quam est, rhoncus ac volutpat non, sollicitudin quis tellus. Integer et velit sit amet ante tristique lobortis id eu nunc. Cras odio magna, malesuada nec eros sit amet, tincidunt tincidunt orci. Nam sit amet quam id urna tempus porttitor. Phasellus felis ligula, egestas non fringilla id, egestas vel erat. Ut semper est non bibendum facilisis. Ut ullamcorper tempor imperdiet.
    </p>
  </section>

  <section id="section3">
    <h2>Section 3</h2>
    <p>Praesent sed finibus lectus, vel ultricies sem. Nam nec suscipit turpis. Duis vehicula posuere magna, sed laoreet leo scelerisque id. Suspendisse iaculis vulputate nisl id porttitor. Praesent aliquam blandit ex, porta ultricies enim fermentum tristique. Morbi ac imperdiet diam, sit amet suscipit massa. Proin sed nisl a ex ultrices interdum. Nullam vitae diam eget odio iaculis tristique.
    </p>
  </section>
</body>

@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}

No exemplo acima, a rolagem suave é ativada se o usuário não tiver preferência de animação configurada em seu dispositivo.

Ocultando Conteúdo com Atributos HTML

Atributo aria-hidden: Usado para ocultar um elemento de pessoas que utilizam tecnologia assistiva como leitores de tela. Por exemplo, isso pode ser usado para ocultar imagens decorativas que não fornecem nenhum conteúdo significativo.
Atributo hidden: Este atributo é suportado pela maioria dos navegadores modernos e oculta o conteúdo tanto visualmente quanto da árvore de acessibilidade. Ele pode ser facilmente alternado com JavaScript.

<p aria-hidden>This paragraph is visible for sighted users, but is hidden from assistive technology.</p>
<p hidden>This paragraph is hidden from both sighted users and assistive technology.</p>
<p>This is a normal paragraph</p>

Problema de Acessibilidade do Atributo `placeholder`

Usar texto de espaço reservado não é bom para acessibilidade. Muitas vezes, os usuários confundem o texto de espaço reservado com um valor real de entrada - eles pensam que já há um valor no input.