19.12.2024

Alterando Propriedades CSS através do Atributo aria-expanded em HTML

Resposta Rápida

Para estilizar elementos usando aria-expanded="true", a abordagem mais eficaz é utilizar seletores de atributos CSS. Esses seletores permitem que você mude dinamicamente a aparência visual dos elementos com base no estado do atributo.

Exemplo:

button[aria-expanded="true"] {
  color: red; /* O botão ficará vermelho quando estiver expandido */
}

Por meio do JavaScript, mudaremos o valor de aria-expanded entre true e false, indicando a necessidade de aplicar uma estilização específica.

Trecho de código:

document.querySelector('#toggle').addEventListener('click', function() {
  var expanded = this.getAttribute('aria-expanded') === 'true';
  this.setAttribute('aria-expanded', !expanded);
});

Pontos-chave:

• O seletor [aria-expanded="true"] em CSS é responsável por estilizar os elementos.
• JavaScript altera o valor de aria-expanded para ajustar o estilo com base no estado atual do elemento.

Mergulhando no Conteúdo

Vamos adicionar um pouco de sofisticação utilizando JavaScript não apenas para modificar aria-expanded, mas também para manipular propriedades CSS:

document.querySelector('#advancedToggle').addEventListener('click', function() {
  this.classList.toggle('is-expanded');
  var expanded = this.getAttribute('aria-expanded') === 'true';
  this.setAttribute('aria-expanded', !expanded);
});

Agora, alternar a classe .is-expanded introduz mudanças complexas na aparência:

button.is-expanded {
  transform: rotate(180deg); /* Quando expandido, o botão gira 180 graus! */
}

Podemos usar transições e animações para tornar a resposta visual mais suave e perceptível.

Pensando em Termos de Estados: Tornando o CSS Responsivo

Seus estilos devem responder adequadamente tanto ao estado aria-expanded="true" quanto ao estado padrão ou false:

/* Estado padrão */
button {
  transition: background-color 0.3s ease;
}

/* Estado expandido */
button[aria-expanded="true"] {
  background-color: green; /* O botão fica verde, enfatizando seu estado ativo */
}

Observação Importante: Se você encontrar problemas com especificidade ou herança no CSS, combine seletores de atributos com classes:

nav.main-navigation button[aria-expanded="true"] {
  border: 2px solid blue; /* Agora, apenas os botões expandidos dentro de .main-navigation terão uma borda azul! */
}

Com essa abordagem, você pode aplicar estilos de forma precisa aos botões dentro de .main-navigation que estão atualmente expandidos.

Visualização

Pense em aria-expanded como uma espécie de interruptor de luz (🔘) que controla uma lâmpada (💡):

`aria-expanded="false"`: 🔘🌑💡 
// A luz está apagada, as propriedades CSS permanecem inalteradas.

`aria-expanded="true"`:  🔘🌕💡
// A luz está acesa, as propriedades CSS mudam, o elemento está visível.

Ao alternar entre os modos, você afeta o estado da lâmpada — assim como mudar aria-expanded influencia as propriedades CSS:

[aria-expanded="false"] .details {
  display: none; /* "Detalhes estão escondidos" 🌑 */
}
[aria-expanded="true"] .details {
  display: block; /* "Detalhes estão visíveis!" 🌕 */
}

Alternar e veja como a iluminação do ambiente muda, semelhante à transformação do elemento CSS.

Sinergia: Unindo Acessibilidade com Estilização Dinâmica

Considerar a acessibilidade ao trabalhar com aria-expanded é essencial. Suas mudanças visuais não devem apenas proporcionar prazer estético, mas também melhorar a interação para todos os usuários:

• Estilos de foco padrão são ideais para navegação por teclado:

button:focus {
  outline: none;
  box-shadow: 0 0 0 3px #aaa; /* A sombra destaca o elemento ao navegar com a tecla Tab */
}

• Indicadores visuais ajudam o usuário a reconhecer o status do conteúdo expandido:

button::after {
  content: attr(aria-expanded) ' conteúdo'; /* O botão "comunica" seu estado */
}

• Sempre siga as recomendações WCAG para contraste.

Adicionando Estilo com jQuery:

Se você preferir trabalhar com jQuery, pode aplicar dinamicamente o estilo com base no estado de aria-expanded usando o método .css():

$('#dynamicToggle').click(function() {
  var $this = $(this);
  $this.attr('aria-expanded', $this.attr('aria-expanded') === 'false');
  $this.css('background-color', $this.attr('aria-expanded') === 'true' ? 'yellow' : 'silver'); /* A cor de fundo muda com o estado do elemento */
});

Lembre-se que cada elemento interativo com aria-expanded deve suportar navegação por teclado e ter os papéis ARIA apropriados para melhorar a acessibilidade para leitores de tela.

Recursos Úteis

1. ARIA - Acessibilidade | MDN — Material detalhado sobre ARIA.
2. Aplicações Ricas da Internet Acessíveis (WAI-ARIA) 1.1 — Guia abrangente do W3C sobre aria-expanded.
3. “Checkbox Hack” (e o que fazer com isso) | CSS-Tricks — Exemplos de como checkboxes podem ser usados para controlar estilos sem JavaScript.
4. Como Ocultar Conteúdo - A11Y Project — Noções básicas de como ocultar conteúdo em conjunto com aria-expanded.
5. WebAIM: CSS em Ação - Conteúdo Invisível para Usuários de Leitores de Tela — Métodos para criar conteúdo invisível usando CSS.
6. API de Acessibilidade: A Chave para Acessibilidade na Web — Smashing Magazine — Uma visão detalhada de como a ARIA interage com APIs de acessibilidade do navegador.
7. Seletores Nível 3 — Especificação W3C para seletores de atributos CSS, sua ferramenta para estilizar elementos com base em aria-expanded.

Video

Navigation