Ordem de foco em banner superior
O design da sua página pode exigir que sejam posicionadas
duas listas, uma em cada lado da página. Essa abordagem usa
as propriedades flex para distribuir as listas
com base no espaço entre elas.
Uma vantagem dessa estilização é a extensibilidade: se precisar de uma lista no meio, basta colocar mais uma lista que o CSS faz o resto! E caso a tela seja muito estreita para caber todos os elementos, essa abordagem tende a falhar graciosamente.
- item esquerda.1
- item esquerda.1
- item direita.1
- item direita.2
Navegação
Breadcrumbs
Explica o breadcrumbs
Exemplo de breadcrumbs:
Links: Imagem e texto
Imagem seguida de texto
Exemplos:
Acesse o Portal da USP!
Acesse o Portal da USP!
Caso muitos links estejam próximos e levem ao mesmo lugar, é
possível utilizar o atributo aria-label no
elemento a ou utilizar de texto oculto para que
o texto seja anunciado apenas para leitores de tela.
Missão
Visão
Valores
Missão, visão e valores
Links: Forçar quebra de linha
É possível forçar uma quebra de linha utilizando o elemento
br dentro do texto. Isso evita ter que criar
vários elementos de texto apenas para ficarem adjacentes
Governança
Links: Indicar mudança de contexto
A seguir há exemplo de uso do atributo title para
indicar mudança de contexto em links.
Atenção: apesar de ser visível ao sobrepor
o link com o cursor, e ser anunciado para leitores de tela, o
title só é visível em dispositivo móvel ao tocar
e segurar o link, o que não é muito intuitivo.
Acordeões
É possível fazer acordeões com elementos HTML nativos, usando
details e summary
Atualidades
Aqui vai um conteúdo bem legal de atualidadesCiências
Aqui vai um conteúdo bem legal de ciênciasAcordeões exclusivos
Para que dois ou mais elementos details não
possam ser abertos simultaneamente, basta usar o mesmo valor
do atributo name para todos eles.