HTML em Camadas: Containers e Acessibilidade no Dashboard

Trago a vocês nessa semana mais uma etapa do projeto Roadmap Fullstack. Nessa fase tive foco no uso de containers de forma lógica, para assim criar uma página melhor estruturada já pensando na experiência do usuário.

Para essa estruturação, utilizei diversas ferramentas com locais devidos para a experiência do usuário, como sidebar, cards para resumos e tabela de dados mais estruturada.

🏗️ Estrutura Geral

<nav id="sidebar" aria-label="Atalhos para Seções">
  <ul>
    <li><a href="#sessao-resumo">Resumo da Jornada</a></li>
    <li><a href="#sessao-modulos">Módulos</a></li>
  </ul>
</nav>

<header id="sessao-cabecalho">
  <h1>Progresso na Jornada DEV</h1>
  <form action="" method="post">
    <!-- Formulário com filtro por etapa -->
  </form>
</header>

<main>
  <section id="sessao-cards">
    <!-- cards para controle -->
  </section>
  <section id="sessao-resumo">
    <!-- cards para controle -->
  </section>
  <section id="sessao-modulos">
    <!-- cards para controle -->
  </section>
</main>

Enter fullscreen mode Exit fullscreen mode

🎯 Qual o objetivo de cada parte

• Sidebar — destinada a fazer o seccionamento de links para facilitar a navegação dentro da própria página.
• Form — formulário para filtro e organização sobre progressos em cada módulo.
• Cards — padronizar a construção de seções para criar componentes com mais fácil estilização e melhor apresentação.

Bugs de acessibilidade: aria-label e aria-current

Os principais bugs desse projeto foram todos em torno da questão de acessibilidade, principalmente entre aria-label e aria-current — ferramentas para indicação ao usuário sobre informações da página. Mais especificamente:

• aria-label → atributo para especificar ao usuário sobre elementos sem texto, somente visuais, mas que têm função dentro da página e sobre o que se trata;
• aria-current → define ao usuário qual é a página atual que ele está utilizando.

💭 O que fica desse post

Podemos pensar que saber utilizar infinitas ferramentas vai nos tornar desenvolvedores esplêndidos, mas muitas vezes, utilizando as ferramentas que já temos conhecimento, de forma inteligente, conseguimos atingir um resultado muito bom.

Como exemplo para esse projeto, ficam as seções que foram transformadas em cards para maior estruturação de informações e apresentação ao usuário.

Se você também está começando agora, deixa aqui nos comentários: já cometeu o erro de esquecer aria-label para descrição de algum elemento? Também, você já parou pra refletir a importância dos elementos de acessibilidade para usuários que necessitam dele — o quanto pode impactar na experiência deles quanto ao uso de sistemas?

⚠️ Post de aprendizado: compartilho aqui o que estou estudando, não é documentação oficial. Feedbacks são super bem-vindos!

Esse post faz parte da minha jornada documentada rumo a Dev Fullstack Júnior. Me acompanha aqui no Dev.to pras próximas etapas!